原来mellow主题已经使用2年多了,过于臃肿,现在喜欢简单的主题
再次浏览hexo的官网发现多了好多新的主题,最后选择了简约风的chic主题
本文简单的对原有样式进行了调整

修改样式

英文转中文

已修改文件
1
2
3
4
5
6
7
themes\Chic\layout\_page\post.ejs       #文章页
themes\Chic\layout\_page\category.ejs #子分类页
themes\Chic\layout\category.ejs #分类页
themes\Chic\layout\_page\tag.ejs #子标签页
themes\Chic\layout\tag.ejs #标签页
themes\Chic\layout\_partial\header.ejs #手机显示,menu
themes\Chic\layout\_partial\toc.ejs #文章导航栏

自定义css样式

文件路径:themes\Chic\source\css\custom.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Gitalk评论样式
.gt-container {
max-width: 780px;
margin: auto;
}

// 代码行号无法选中
.gutter {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
}

// 代码块名称居左
.post-content figure.highlight figcaption {
text-align: left;
}

// 底部样式
.footer {
height: 3rem; //行高
line-height: 1.2rem; //行间距
}

// hexo引用名称下靠右
footer {
text-align: right;
}

主题字体

修改themes\Chic\source\css\font.styl文件
注释$font-family前面的内容,将需要启用的字体放在最前面即可

1
$font-family = Arial, Microsoft Yahei, 'Microsoft Jhenghei',Lantinghei SC, 'lanting', PingFang SC, Seguo UI

自定义首页链接图标

  • 首先在阿里iconfont官网找到想要的图标加入购物车后选择下载代码
  • 解压后将文件夹放在themes\hexo-theme-Chic\source\fonts
  • themes\hexo-theme-Chic\source\css\style.styl中引入
1
2
3
// icon
@import "../fonts/iconfont/iconfont.css" #再添加一行即可
@import "../fonts/font_custom/iconfont.css"

接下来直接在主题_config.yml中添加内容即可

注:如不知道图标名称,可在下载的文件夹中的iconfont.css找到名称



增加功能

部署Gitalk评论系统

传送门


增加站点浏览统计

新增site-visitor.ejs文件

themes\hexo-theme-Chic\layout\_plugins中新建文件site-visitor.ejs,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<% if (theme.visit_counter.site_uv) { %>
<span class="site-uv">
总访客量:
<i class="busuanzi-value" id="busuanzi_value_site_uv"></i>
</span>&nbsp;
<% } %>
<% if (theme.visit_counter.site_pv) { %>
<span class="site-pv">
总访问量:
<i class="busuanzi-value" id="busuanzi_value_site_pv"></i>
</span>
<% } %>

修改footer.ejs文件

themes\hexo-theme-Chic\layout\_partial\footer.ejs中的<span></span>标签内添加

1
2
3
<% if (theme.visit_counter) { %>
<%- partial("../_plugins/site-visitor") %>
<% } %>

配置主题_config.yml文件

在主题的_config.yml中添加如下内容:

1
2
3
4
# 站浏览数统计
visit_counter:
site_uv: true # 访客数量
site_pv: true # 浏览次数

增加博客年份

同样在footer.ejs文件中的<span></span>标签内添加配置:

1
<%if (theme.since_year && theme.since_year < date(new Date(), "YYYY")) {%><%- theme.since_year %> - <%}%><%- date(new Date(), "YYYY") %>

在主题的_config.yml中引入

1
2
# 版权起始年份
since_year: 2018