Anisna 主题改造

作者 江辉 日期 2017-07-11
Anisna 主题改造

一、起因

首先感谢 Haojen 打造美观、好用的 Anisna 主题。
在使用的过程中主要发现,没有 my works 选项,于是乎对 Anisna 主题进行改造

二、改造过程

2.1 引入 hexo-generator-mypage

npm install hexo-generator-mypage --save

2.2 调整主题内的 works.ejs 文件

代码如下

<div class="works-container" style="background-color: #fafafa">
<header>
<div class="bg-header text-center">
<div class="profile">
<div class="avatar">
<img src="<%= config['sidebar-avatar'] %>">
</div>
<div class="personal-profile">
<h1>
<%= config.author %>
</h1>
<h2>个人作品集</h2>
</div>
</div>
</div>
</header>
<div class="container">
<section class="row">
<div class="col-sm-10 col-sm-offset-1
col-md-8 col-md-offset-2
works-area">
<% if(config.projects) { %>
<% config.projects.forEach(function(project){ %>
<div class="works-item">
<div class="title">
<h3>
<%= project.title %>
</h3>
<span class="title-date text-muted">
<%= project.data %>
</span>
</div>
<div class="works-item-img">
<img src="<%= project.img_link %>">
</div>
<div class="works-content">
<div class="use text-warning">
<% for (var arrayVal in project.use ){ %>
<span>
<%= project.use[arrayVal] %>
</span>
<% } %>
</div>
 
<p class="subtitle"> <%= project.subTitle %> </p>
<p class="text-muted"> <%- project.direction %> </p>
</div>
<div class="footer clearfix">
<a class=" btn btn-default" href="<%= project.link %>" target="_blank"> Open
it</a>
</div>
</div>
<% }); %>
<% } %>
</div>
</section>
</div>
</div>

2.3 改造 nav.ejs

代码如下

<div id="huxblog_navbar">
<div class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="<%= config.root %>">Home</a>
</li>
<% var about = false; %>
<% site.pages.forEach(function(page){ %>
<% if(page.title){ %>
<% if(page.title == "about") { %>
<% about = true; %>
<% } else { %>
<li>
<a href="<%= config.root %><%= page.path.replace('index.html', '') %>"><%= page.title %></a>
</li>
<% } %>
<% } %>
<% }); %>
<% if(config.works.title) { %>
<li><a href="<%= config.works.url %>"><%= config.works.title %></a></li>
<% } %>
<% if(config.about.title) { %>
<li><a href="<%= config.about.url %>"><%= config.about.title %></a></li>
<% } %>
</ul>
</div>

2.4 改造自己的 _config.yml

在自己 _config.yml 下增加如下内容

# 在 themes/Anisina/layout 下创建对的ejs。"works.html":之后生成的静态文件路径, "works" 为“themes/Anisina/layout/works.ejs” 的文件名称
mypage:
works.html: works
# about.html: about
# nav 上展示标签
works:
title: MY WORKS #名称
url: /works.html #对应 myPage
about:
title:
url:
# My Works 下的内容
projects: [
{
title: "金陵e贷",
data: "",
img_link: "http://onxa9u30y.bkt.clouddn.com/201707101746_785.png",
subTitle: "南京民间借贷平台",
use :["Spring MVC","Mybatis","MySQL"],
direction: "工作内容:投标、还款等功能开发及之后界面改版工作",
link: "https://www.nihaodai.com"
},{
title: "金陵e贷手机站",
data: "",
img_link: "http://onxa9u30y.bkt.clouddn.com/201707101748_632.png",
subTitle: "南京民间借贷平台",
use :["Gulp","HTML5","Spring MVC","Mybatis","MySQL"],
direction: "工作内容:基础前端架构构建,网页开发工作",
link: "https://m.nihaodai.com"
},{
title: "手机账单",
data: "",
img_link: "http://onxa9u30y.bkt.clouddn.com/201707101753_292.png",
subTitle: "",
use :["Gulp","HTML5"],
direction: "工作内容:基础前端架构构建,统计,网站开发",
link: "https://jhxue.github.io/bill/index.html"
},
{
title: "法米粒",
data: "",
img_link: "http://onxa9u30y.bkt.clouddn.com/201707101754_873.png",
subTitle: "",
use :["Spring MVC","Mybatis","MySQL"],
direction: "工作内容:系统架构,协调组内开发资源,按期交付",
link: "http://www.fml360.com"
},
{
title: "魔窗众筹",
data: "",
img_link: "http://onxa9u30y.bkt.clouddn.com/201707101757_573.png",
subTitle: "股权众筹,产品众筹",
use :["Spring MVC","Mybatis","MySQL"],
direction: "工作内容:参与产品众筹的开发工作",
link: "http://www.abcmw.com/"
},
{
title: "城管执法手机APP",
data: "",
img_link: "http://onxa9u30y.bkt.clouddn.com/201707101802_71.png",
subTitle: "",
use :["android"],
direction: "主要工作:学习 android,并开发城管执法 APP",
link: "http://www.xuanwuhu.org/Street/app/CityManageStreet.apk"
}
]

三、我改造的代码及个人网站

我改造的源代码

个人网站