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

修改样式

英文转中文

已修改文件

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

// 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;
}

// 标题大小
h1 {
    font-size: 1.6em;
}

h2 {
    font-size: 1.2em;
}

主题字体

修改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" #这里的font_custom就是themes\hexo-theme-Chic\source\fonts下的文件名

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

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

增加功能

部署Gitalk评论系统

传送门

增加站点浏览统计

新增site-visitor.ejs文件

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

<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>
<% } %>

在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中添加如下内容：

# 站浏览数统计
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

Chic主题