Hexo NexT 主题个性化配置(保持更新)

初心：更好地利用前端交互性，做更优秀的笔记效果，更方便更新

配置Hexo总结。关于Hexo建站的教程太多了，很多细节很到位，不想重复，整体建站和配置的框架如下：

安装node（可用node -v命令检验是否安装成功）；添加国内阿里镜像进行加速（可选）；

安装git（后续一些命令在gitbash里操作）；
下载Hexo和一个主题（个人选了NexT）；
简单配置主题并运行看效果；
生成ssh key配置到GitHub；
hexo d部署到GitHub；
绑定域名（可选）；
继续优化个性化效果并更新到GitHub；

三大修改点

进行Hexo主题的个性化，个人总结三大修改点为：

改配置；某些组件启用不启用，某些插件使用与否；相关设置都在两个配置文件里，即 hexo项目文件夹下的_config.yml和主题下的文件夹themes/next/_config.yml；（下文称前者为hexo配置文件，后者为主题配置文件）
改渲染模板；主题layout文件夹下的各种swig文件；
改CSS，各种颜色、居中等样式和排版效果；对应themes/next/source/css及子目录下的各种styl后缀的文件；

建站一小时，配置十数小时。具体的一些常用和有趣的:

丰富文章分类

生成md时生成一个文件夹，更好地放图片等资源

把hexo配置文件_config.yml中的post_asset_folder项，设置为true。

生成时有更多属性，如toc等
修改项目scaffolds文件夹里的post.md文件为：（需要有的内容根据需求删减）

---
title: {{ title }}
date: {{ date }}
top: false
cover: false
password:
toc: true
mathjax: true
summary:
tags:
categories:
---

个性化展示效果

主页

阅读全文

阅读全文居中
mist主题中阅读全文默认是居左的，改为居中：在css中，找到post-button，把text-align: center变成text-align: center !important;

头像点击后回到首页
头像图片文件的目录\themes\next\source\images，导航栏的站点概览渲染现在是移到了\themes\next\layout_partials\sidebar 目录下的site-overview.swig，不是在\themes\next\layout_macro\sidebar.swig，所以是修改site-overview.swig文件。

{%- if theme.avatar.url %}
  <img class="site-author-image" itemprop="image" alt="{{ author }}"
    src="{{ url_for(theme.avatar.url) }}">
{%- endif %}

变成：

{%- if theme.avatar.url %}
<a href="/">
  <img class="site-author-image" itemprop="image" alt="{{ author }}"
    src="{{ url_for(theme.avatar.url) }}">
</a>
{%- endif %}

也就是添加了<a href="/"> 和</a>。

颜色

都是改css

标题颜色:themes\next\source\css\_common\components\post\post-header.styl

图片

正确显示图片
安装一个插件，注意版本挺关键，因此不能直接用npm install hexo-asset-image –save，而是：
1
npm install https://github.com/CodeFalling/hexo-asset-image --save
还需要修改hexo配置文件_config.yml，把post_asset_folder的值变成 true，图片需要放在md文件同名的文件夹下，否则也可能没办法正确显示。

图床的图片

1	<img src="https://qlweilcf.github.io/images/avatar.jpg" alt="earth" style="float:left;height:90px;width:90px;margin-right:5px">

显示图片文本

用特定版本的hexo-asset-image，就可以正常显示图片对应的说明文本，文本和图片的相对位置可以微调css；

图片居中
next\source\css\_common\components\post\post.styl

在post里写：

1
2
3

.posts-expand .post-body img {
    margin-left: auto !important;
}

多张图片横排

post 发布内容

底部居中
找到themes/next/source/css/_schemes/Mist/index.styl文件中的footer，将.footer-inner的text-align: left修改为center。
不渲染某些文件
两种方法：
1，在项目根目录下的配置文件_config.yml中找到skip_render，在后面添加要跳过渲染的页面，例如skip_render: viz\**，那么就表示 \source\viz 目录下的所有文件将跳过渲染，直接复制到 public 文件夹发布。排除的规则可以用正则表达式，例如skip_render: '*.html'
2，在文章头部添加---layout: false---。
不渲染的HTML里，css，JavaScript等的引入尽量写到html文件里；图片考虑图床或者变成base64编码写入HTML里。
标题下面显示文章字数、预计阅读时间

安装wordcount：npm install hexo-wordcount --save，
修改主题配置文件：找到post_wordcount，把需要的设置为true，

post_wordcount:
  item_text: true
  wordcount: true        
  min2read: true          
  totalcount: false       
  separated_meta: true

修改渲染模板文件：\themes\next\layout\_macro\post.swig，

{%- if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.post_views %}
            <span class="post-meta-item" title="{{ __('post.views') }}" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="{{ theme.busuanzi_count.post_views_icon }}"></i>
              </span>
              <span class="post-meta-item-text">{{ __('post.views') + __('symbol.colon') }}</span>
              <span id="busuanzi_value_page_pv"></span>
            </span>
          {%- endif %}

变成：

{%- if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.post_views %}
            <span class="post-meta-item" title="{{ __('post.views') }}" id="busuanzi_container_page_pv" style="display: none;">
              <span class="post-meta-item-icon">
                <i class="{{ theme.busuanzi_count.post_views_icon }}"></i>
              </span>
              <span class="post-meta-item-text">{{ __('post.views') + __('symbol.colon') }}</span>
              <span id="busuanzi_value_page_pv"></span>
            </span>
			
			<span class="post-meta-divider">|</span>
<span title="{{ __('post.wordcount') }}"><span class="post-meta-item-icon"><i class="fa fa-file-word-o"></i></span> {{ wordcount(post.content) }} 字 | ≈</span>
           <span title="{{ __('post.min2read') }}">
    {{ min2read(post.content) }} 分钟
</span>
          {%- endif %}

修改h1~h5等是在themes\next\source\css\_common\components\post里的post-expand.styl修改，例如给h2添加左边矩形块：

h2 {
  padding-left: 0.4em;
  border-left: 5px solid #1eafae;
  border-bottom: 1px solid #1eafae;
}

page 页面

about 页面，结合md+自定义效果
先写md渲染出html，然后在html基础上修改加内容和交互，把文件添加到skip_render名单里。
归档页面最上面一行文本显示

修改\themes\next\layout\archive.swig，并把语言的映射修改一下。

hexo常用命令行

hexo new page paper 新建一个page  about之类的
hexo new newpostname 新建一个post

hexo clean  清除现有post 简写为 hexo cl
hexo generate
hexo deploy   部署文章
hexo s 本地测试运行

先hexo g 更新之后在hexo s

hexo cl && hexo g && hexo d  
一键化

hexo publish draft newpage

有什么需求可以关注公众号和我讨论:

参考资料

Hexo-Next-CSS 样式修改