背景：最近换了一台电脑，原来的主力机几近退役，故需要把工作台进行迁移。其中包括把Hexo的本地文件进行转移。经过查找总结，得出此文。

可能需保留的原文件

_config.yml	// 保存对于hexo的一些个性化设置
package.json	// 记录hexo框架依赖的版本信息
scaffolds/	// 自动生成post使使用的脚手架
source/		// 文稿源文件
themes/		// 使用的主题文件

npm安装hexo插件

1	$ npm install

该指令会通过package.json文件获取模块及版本信息，然后进行下载安装。可以使用npm update指令进行模块更新
如果没有package.json，也可以直接安装以下模块，可以保证hexo模块运行，但是一些其他的插件，需要自己重新安装

1
2
3

$ npm install hexo-deployer-git --save
$ npm install hexo-generator-feed --save
$ npm install hexo-generator-sitemap --save

通过npm安装模块之后，则会生成node_modules文件夹

运行hexo

使用hexo g尝试生成部署文件（public文件夹）
使用hexo s在本地4000（可选择）端口运行服务
至此迁移工作完成～

出现的一些问题

swig插件问题
现象：generator过程中出现报错，且生成index.html文件不是正常的html标签

{% extends ‘_layout.swig’ %} {% import ‘_macro/post.swig‘ as post_template %}

类似这样的信息
原因是hexo5以后删除了swig，需要自己手动安装
1
$ npm install hexo-renderer-swig
图片资源问题
关于博客中的插图，我之前的方案是放到theme/images/中，这样打包时候可以原封不动的打包到public/images中，然后我再引用。
如今发现一种正确的姿势，即在_config.yml中设置post_asset_folder为true，然后生成post（hexo new xx）时便会在source中同时生成一个同名文件夹，其中存放该文章的插图资源等，打包时将一同打包。最后在生成的public文件中，图片与文章的index文件是在同一级文件夹下的。
但是存在一个问题，图片的路径默认相对根目录是/year/month/day/title/image.jpg，而虽然在博客中直接通过图片名字引用![xx](image.jpg)是没有问题的，因为实际上就是在统一目录下。但是这样的写法，在其他页面如预览页时图片是无法加载的（因为用的不是图片同级的index.html，自然索引不到）。手动写上/year/month/day/title/image.jpg，又感觉怪怪的，因此有大佬为hexo框架提供了一个脚本模块hexo-asset-link，帮助我们实现了md文件转换为index.html时图片路径的填充完善。
1
2
$ npm install hexo-asset-link
# 安装hexo-asset-link模块之后，直接通过![xx](title/iamge.jpg)则可以加载图片
看到很多帖子使用hexo-asset-image，但是这个插件填充的路径是基于_config.yml中的url项绝对路径访问，很多人都再去修改了其index.js文件代码，实现相对路径的访问，私以为有些画蛇添足。也有人直接将修改后的代码，封装为一个module，即是hexo-zngw-asset-image，因此这个插件跟hexo-asset-link一样也是直接可用的，只是实现方式不同而已。
关于hexo转义的小问题
现象：generator时候出现报错

err: Template render error: (unknown path)
Error: template names must be a string: undefined
这时候可以通过hexo g –debug，看到更多的log信息。（有人说甚至可以显示具体行数）
可看到我这个问题是在渲染某篇文章出现的。经排查发现是使用了{[%]}这些符号导致转义出现问题。解决方式是使用将文本块括起来，即可解决。

小结

以上是本次迁移Hexo博客时候出现的一些问题与部分心得体会。加深了些对Hexo的理解。后续可以把这些原文件放到另一个仓库或另一个分支中，进行版本管理及备份，方便使用。

NexT主题配置

通过css设置背景透明度等

首先在NexT的_config.yml中启用自定义style

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

其中显示的路径是相对根目录，即Hexo根目录的source文件夹下，新建_data文件夹（即跟_post文件夹放一块），其中新建styles.styl文件，写入以下代码，有一点点css基础的可以修改或者自己写（没有其实也可以）。

// 添加背景图片
body {
      background: url(/images/wall.png);	// 背景图路径，相对NexT的source目录
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
}

// 博客内容透明化
.content-wrap {
  opacity: 0.9;
}

//侧边框的透明度设置
.sidebar {
  opacity: 0.85;
}

//菜单栏的透明度设置
.header-inner {
  background: rgba(255,255,255,0.85);
}

//搜索框（local-search）的透明度设置
.popup {
  opacity: 0.85;
}

注：

旧版本的NexT是在css/_custom/里做的修改，新版本已经取消了这个文件。具体方式请百度
Linux/Mac下可以用vim编辑，Windows可以用notepad（记事本）编辑

文末添加结束语

NexT同样为我们提供了自定义结束语样式的方式

首先在theme/_config.yml的custom_file_path中取消postBodyEnd的注释，即启用该文件，然后在_data文件夹中创建该文件post-body-end.swig
我希望实现在文章配置中可以设定是否启用结束语。于是先自定义一个属性比如end，表示该文是否已经结束

在post-body-end.swig文件中通过判断该属性以决定是否显示自定义样式的结束语【索引属性方式会在这里提到】。比如我是这么写的（html是东拼西凑乱写的，如果有更好的建议可以告诉我谢谢～）

{%- if post.end != false %}
	<div style=" width:100%; text-align:center; margin-left:15px; margin-right:15px;">
		<hr style="width:30%;vertical-align:middle; display:inline-block;"/>
    	完结
	    <i class="fa fa-paw"></i>
	    撒花 ฅ&gt;ω&lt;*ฅ
		<hr style="width:30%;vertical-align:middle; display:inline-block;"/>
	</div>
{%- endif %}

文章end属性不设置或设置true，则可以在文章底部看到效果如下： end

NexT配置文件

有点强迫症，稍微看了下NexT主题的_config.yml中的可配置项，稍作记录（基于v7.8.0）

【写完发现，已经有大佬对所有配置项进行解释，虽然版本可能没这么新，写的很详细，感谢这篇文章】

前边minify等项配置运行时文件操作，如生出hexo generation生成的文件，缓存清理等
favicon标签：设置一些网站图标
footer：网站底部的这一部分。
- since：设置起始时间
- icon：指🧡图标，可修改图标，颜色，以及动画开关（跳动）
- copyright：版权信息，默认使用hexo中配置的author
- power：是否显示x x强力驱动信息
- beian：显示备案信息
scheme：配置主题，内置一共四款主题
darkmode：惊喜发现，居然内置了黑夜主题，并有一键开关
menu：配置菜单栏的单项，“||”之前代表跳转路径，“||”之后代表所使用的图标
sidebar：配置边栏的样式，宽度等
social：配置社交平台显示及地址
links_setting：关于友链设置。下边的links可添加友链。
- layout：多个友链的布局。块状或内联。可理解为垂直或水平
toc：设置文章页边栏目录的展示情况
- number：目录添加序号
- wrap：多级目录缩进
- expand_all：直接展开全部，否则只完全展开当前小节
tagcloud：为标签页添加标签云效果，即是以词云形式显示标签。需要集成如hexo-tag-cloud插件
calendar：设置云日历，可以显示提交日期。找到一个挺好的插件hexo-generator-calendar
codeblock：代码块样式。设置代码高亮，复制按钮，边框样式（mac）等
reading_progress：顶部显示阅读进度条

以下是一些第三方插件的集成方式。最大的体验就是NexT真的是一个很成熟的主题框架，很多很多的地方都已经配置好了模版，只需要简单安装插件，配置项中启用即可！

百度统计功能集成

NexT的官方文档中即有百度统计集成方式

具体方法也是十分简单，首先进入百度统计官网，登陆后新增网址填写域名地址等信息，即可以得到一段js脚本

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?1af6bacc90d9688e38f7413e7080cb35";	# 需要注意这段id
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

将此脚本添加到博客网站的html文件中即可。但这段脚本模版NexT已经帮我们写好，我们只需要在主题配置文件_config.yml中配置baidu_analytics字段即可

1	baidu_analytics: # 内容是脚本中的hm.src中的url中js?以后的那段id数字

此时在浏览器中通过开发者工具查看html源码，搜索baidu字段即可看到该脚本已经在html中生成

根据百度官网提示，也可以通过这些方式确认是否集成成功

Gitalk评论功能集成

想要集成一个评论功能，看了好些第三方像畅聊，多说，网易等都停止服务了，disqus又可能因为qiang的原因不方便使用。后来发现了gitment和gitalk，都是基于github仓库的issues的评论服务，感觉很满足我的需求了，在NexT中配置gitalk比较方便，故使用之。

首先需要在github注册OAuth Application。填写App名称，域名，和描述。两个URL需填写博客地址，其余无甚要求。注意URL需要加上https://，建议直接地址栏复制

申请成功后会得到一个Client ID和Client secrets，这是配置需要用到的两个字段
NexT的_config.yml中已经有gitalk字段，只要根据注释进行配置即可，大概是github用户名，博客地址，两个id这样。
由于是基于issues，所以每一篇文章都需要在githubc仓库的issues里进行初始化，否则会出现

此时部署成功之后，即可在文章底部看到评论栏。如果某一篇文章不开放评论功能，可以在文中设置comment: false

valine评论功能集成

后来又发现一种更好的评论插件valine，也可以由NexT的_config.yml直接集成

valine是由cloudclean提供的评论功能，所以需要有一个Cloudclean平台账号，评论数据会存储在cloudclean平台里。因此管理（删除）评论也是直接操作平台数据库进行。

Cloudclean创建应用具体操作及配置可以参考这篇博客。

创建完应用，得到appid，appkey，就可以填入NexT的_config.yml中，enable启用，即可在页面上看到效果。且如果不开启验证的话notify，直接输入即可进行评论，效果将会以一个Anonymous的身份进行评论。

# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: true
  appid: xxxxx # Your leancloud application appid
  appkey: xxxxx # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

在source/categories/index.md和source/tags/index.md里要禁用comments，否则分类和标签页面会显示评论框

配置站内搜索

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  # 根据输入自动发起检索不需要回车
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  # 显示每篇文章中命中的前n个关键字。设置-1可展示所有结果
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

NexT主题_config.yml文件中local_search字段启用，根据提示安装插件npm install hexo-generator-searchdb

显示文章字数及阅读时间

# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: false

同样在主题_config.xml中symbols_count_time，并安装插件npm install hexo-symbols-count-time

RSS配置

RSS 广泛用于网上新闻频道，blog和 wiki，主要的版本有 0.91, 1.0, 2.0。使用 RSS 订阅能更快地获取信息，网站提供 RSS 输出，有利于让用户获取网站内容的最新更新。网络用户可以在客户端借助于支持 RSS 的聚合工具软件，在不打开网站内容页面的情况下阅读支持 RSS 输出的网站内容。

RSS功能具体是干什么的，其实我还是看不明白。这里主要是配置过程中，发现一些其他的小小问题，所以顺便记录一下。

后来通过这个回答，对RSS有了一些了解，确实是一种现在很少见的订阅咨询方式

同样，NexT支持直接配置rss，但还需要安装插件npm install hexo-generator-feed，然后在NexT的_config.yml中，直接取消rss的注释即可

1 2	follow_me: RSS: /atom.xml \|\| fa fa-rss

感到奇怪的是，页面刷新了，但是没有看到在侧边栏出现RSS的图标按钮，public/下确实如其他文章所说出现了atom.xml文件。一筹莫展之际看到这篇博客，其中说到

在 social: 下添加以上代码。在 Next v7.7.2 中将 RSS 设置在了 follow_me: 下，这个是在文章的结尾处显示 RSS，而且占地比较大，所以我不太喜欢这个位置，还是喜欢以前的 social: 这个位置，这样会显示在侧边栏里，而且占地很小。

果不其然，follow me下设置的RSS，会出现在文章底下，而且确实有一大块。于是在_config.yml中找到social，虽然其中没有预置rss一项，但是直接将follow me下的rss复制过去即可。想想确实也没有毛病，符合格式，有链接，有图标，很正常

修改swig文件

修改主题样式时经常需要直接修改swig文件。关于swig，我其实没有见过，大概是一个用于生成html的模版文件，解释器根据该文件所以对应的布局文件进行整合，拼凑最终的html文件

language的文案：在swig中，可以通过__('xx.xx')的方式获取language中配置的文本
theme/_config.yml配置：在swig中，可以通过theme.xx获取主题配置文件中的配置信息
post配置：在swig中，可以通过post.xx获取在文章中配置的信息，当然自定义的属性也可以

拉拉杂杂

以下记录一下看到的一些好玩（花里胡哨）的配置。

在线聊天插件DaoVoice

建站时间，在/blog/themes/next/layout/_partials/footer.swig中添加这部分代码

<div id="days"></div>
<script>
function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("04/17/2018 15:13:14");//修改为自己的blog建站时间
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML="本站已安全运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
    if (i<10)
    {i="0" + i};
    return i;
}
show_date_time();
</script>

文章加密功能

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

修改字体大小。

在themes/next/source/css/_variables/base.styl中的font-size-headings-step

以及themes/next/source/css/_variables/Mist.styl中的font-size-headings-base

官方文档

第三方插件配置：以上配置文档基本都有说明

内置标签使用：可以适当美化文章

文章配置

初学者

Hexo 博客本地迁移