hexo安装教程

来源：互联网发布：童装淘宝店名大全编辑：程序博客网时间：2024/06/05 22:32

由于习惯了StackEdit的markdown，而Jekyll的markdown不知道为什么开了GFM却不是全部插件都能用的感觉，然后又考虑到Jekyll渲染很花时间。正好又看到了Hexo，于是就把github pages转Hexo了（说到底就是任性=。=

安装Node.js

Node.js官网（https://nodejs.org/ ）下载安装即可。

安装Hexo

安装Node.js时自动添加了PATH，所以直接在命令行里运行以下命令即可：

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ npm install -g hexo</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

初始化Hexo

新建一个文件夹，进里面，执行命令：

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ hexo init</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

下载模块

执行如下命令，下载生成网站所需要的插件模块。

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ npm install</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

生成静态页面

执行如下命令，生成静态页面至./public/目录。

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ hexo generate</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

本地调试

执行如下命令，启动本地服务，进行博客预览调试。

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ hexo server</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

打开http://localhost:4000/ 即可看到网站效果。

生成文章

执行如下命令，生成文章。

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ hexo new [layout] <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"名称"</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

其中layout是可选参数，默认值为post。Hexo默认提供三种layout选择，具体可到./scaffolds/目录下查看文件，分别是draft、page与post。可以自定义其内容或者新建一种layout。

参数post的作用为新建一篇文章。指定名称的md文件存在于./source/_post/目录下，当我们使用命令hexo generate来生成静态页面的时候，该目录下的文章会生成到./public/文件夹里面，当我们更新数据到网站上时，该文章就会显示在网页上。
参数draft的作用为新建一篇文章草稿。指定名称的md文件存在于./source/_drafts/目录里面，当我们生成静态页面的时候，该目录下的文章不会生成到./public/文件夹里面，即不会同步到我们网站上。当你认为可以发布该文章的时候，应把该文章的md文件移到./source/_post/目录下。
参数page的作用为新建一个网站页面。该命令会在./source目录下新建一个指定名称的文件夹，该文件夹下有一个index.md文件。

编辑文章

生成文章后，打开相应的md文件，就可以开始编辑了。

文章开头格式如下：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">title: 文章名称date: YYYY-MM-DD HH:mm:ss #文章的时间，会自动生成categories: #文章的分类，可以为空tags: #文章的标签，多标签请用格式[tag1,tag2,tag3]，可以为空description: #文章的描述，可以为空---<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--这里开始使用markdown格式输入你的正文。--></span>......</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

需要注意的是，上面所有:后面必须要有一个空格，不然会报错的。

如果需要文章摘要功能，只需在正文中添加如下代码：

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">以上是摘要<span class="xml" style="box-sizing: border-box;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"><!--more--></span></span>以下是余下全文</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

以上的正文内容即是文章摘要，在网站首页显示。以下内容需要点击Read More链接打开全文才能显示。

部署到Github

首先，需要配置./_config.yml文件：

<code class="language-text hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;"># Deployment</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">## Docs: http://hexo.io/docs/deployment.html</span><span class="hljs-label" style="box-sizing: border-box;">deploy:</span>    type: git    repository: git@github<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.com</span>:username/username<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.github</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.io</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.git</span>    branch: master</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

记得把其中的username替换成你Github的账号名。

接着，执行如下指令，即可完成部署。

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ hexo clean$ hexo generate$ hexo deploy</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

需要注意的是每一次部署都会覆盖掉之前在Github版本库中存放的文件，如果想提交一些额外的文件保存在仓库里，譬如说404页面，可以把它直接放在source目录下，那每一次生成页面时也会自动把你想要额外提交的文件生成到public目录下。

如果出现如下问题：

问题1

<code class="language-text hljs vbnet has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">ERROR</span> Deployer <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">not</span> found: git</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

不要紧张，原因是没有hexo-deployer-git这个插件模块，我们只需要输入如下命令：

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ npm install hexo-deployer-git --save</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

稍等片刻，安装完重新执行上面第二步，如无意外，便能部署成功。

问题2

<code class="language-text hljs css has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">Error</span>: <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">spawn</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">git</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">ENOENT</span>    <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">at</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">exports</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">._errnoException</span> (<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">util</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.js</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:746</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:11)</span>    <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">at</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">Process</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.ChildProcess</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">._handle</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.onexit</span> (<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">child_process</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.js</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:1053</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:32)</span>    <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">at</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">child_process</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.js</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:1144</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:20</span>    <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">at</span> <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">process</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">._tickCallback</span> (<span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">node</span><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.js</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:355</span><span class="hljs-pseudo" style="color: rgb(0, 0, 0); box-sizing: border-box;">:11)</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

添加环境变量C:\Program Files (x86)\Git\bin;C:\Program Files (x86)\Git\libexec\git-core

问题3

<code class="language-text hljs livecodeserver has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">fatal: Not <span class="hljs-operator" style="box-sizing: border-box;">a</span> git repository (<span class="hljs-operator" style="box-sizing: border-box;">or</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">any</span> <span class="hljs-operator" style="box-sizing: border-box;">of</span> <span class="hljs-operator" style="box-sizing: border-box;">the</span> parent <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">directories</span>): .git</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

提示说没有.git目录，到./.deploy_git下运行：

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">git init</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

=========以下是DIY部分=========

安装主题

切换到./themes/文件夹，然后把相关主题（如tranquilpeak1）clone下来，或复制到这里：

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">cd</span> themes$ git clone https://github.com/LouisBarranqueiro/tranquilpeak-hexo-theme.git$ rename tranquilpeak-hexo-theme tranquilpeak</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

注意这个主题要安装Hexo CLI

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">npm install hexo-cli -g</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

打开./_config.yml文件，修改主题为tranquilpeak

<code class="hljs vala has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;"># Extensions</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">## Plugins: http://hexo.io/plugins/</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">## Themes: http://hexo.io/themes/</span>theme: tranquilpeak</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

打开RSS

执行如下命令。

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ hexo-generator-feed --save</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

在./_config.yml中添加:

<code class="hljs fsharp has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">feed:    <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">type</span>: <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">atom</span></span>    path: atom.xml    limit: <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">20</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

hexo-math插件

有个hexo-math插件2，说是支持MathJax，但不知道为什么我这里有问题。。

安装

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ npm install hexo-math --save</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

初始化

在blog文件夹中执行：

<code class="language-bash hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">$ hexo math install</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

在_config.yml文件中添加：

<code class="hljs haml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">plugins:  -<span class="ruby" style="box-sizing: border-box;"> hexo-math</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

修改Markdown

不知道为什么我装了MathJax之后依然效果不出来，于是只能修改Markdown了。

该冲突主要是由于对 \ 和 _ 的转义造成的3。找到 marked 脚本文件, 通常在

<code class="hljs tex has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">hexo<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\node</span>_modules<span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\marked</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\lib</span><span class="hljs-command" style="box-sizing: border-box; color: rgb(0, 0, 136);">\marked</span>.js</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

先备份一下，然后修改第449行

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">escape: /^\\([<span class="hljs-link_label" style="box-sizing: border-box;">\\`*{}\[\</span>](<span class="hljs-link_url" style="box-sizing: border-box;"></span>)#+\-.!_>])/,</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

为

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">escape: /^\\([<span class="hljs-link_label" style="box-sizing: border-box;">`*\[\</span>](<span class="hljs-link_url" style="box-sizing: border-box;"></span>)#+\-.!_>])/,</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

第847行

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">return '<span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">em</span>></span></span>' + text + '<span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">em</span>></span></span>';</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

修改为：

<code class="language-markdown hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">return '<span class="hljs-emphasis" style="box-sizing: border-box;">_' + text + '_</span>';</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

修改heading里#后的空格

由于个人习惯StackEdit在##后不用加空格，直接写标题，所以要把相关的js中的空格去掉。
把.\node_modules\marked\lib\marked.js（注：要开启GFM）的
第80行

<code class="language-js hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">heading: <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/^ *(#{1,6}) +([^\n]+?) *#* *(?:\n+|$)/</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

改为

<code class="language-js hljs  has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">heading: <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">/^ *(#{1,6})+([^\n]+?) *#* *(?:\n+|$)/</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

增加footnotes

有不少人做了footnotes然后pull上去了，见4。

添加gotop

参考5

添加all-tags并修改排序方式、tag大小

把.\themes\tranquilpeak\layout\all-tags.ejs中的<% site.tags.sort('name')修改为<% site.tags.sort('-length')，即可按tag出现次数而不是字典序排序。

把.\themes\tranquilpeak\layout\all-tags.ejs中第一个section内容修改如下即可使tag根据出现次数有不同大小。

<code class="language-JavaScript hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>section<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>        <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><%</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">max</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> site<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>tags<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>first<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>length;            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">min</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">max</span>;            site<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>tags<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>each(function(item) {                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">max</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> Math<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">max</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">max</span>, item<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>length)                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">min</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> Math<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">min</span>(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">min</span>, item<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>length)            });            diff <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">max</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">min</span>;        site<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>tags<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>sort(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'-length'</span>)<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>each(function(item) {            temp <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> (item<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>length <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">-</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">min</span>) <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">*</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">36</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">/</span> diff;            base <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> parseInt(temp <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">/</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>);            remain <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> temp <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">%</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>;            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (remain <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">==</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) {                size <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> base <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">+</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9</span>;            }            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (remain <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">==</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">||</span> remain <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">==</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>) {                size <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> base <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">+</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">9.5</span>;            }            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> {                size <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span> base <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">+</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">10</span>;            } <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">%></span>            <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>a class<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"tag tag--primary tag--small"</span> href<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<%= '#' + item.name + '-list' %>"</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">data</span><span class="hljs-attribute" style="box-sizing: border-box;">-tag</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"<%= item.name.replace('.','__').toLowerCase() %>"</span> style<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"font-size: <%= size %>pt"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>                <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><%=</span> item<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">.</span>name <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">%></span>            <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>/a<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span>        <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><%</span> }); <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">%></span>    <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>/section<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li></ul>

添加Swiftype站内搜索

在.\themes\tranquilpeak\_config.yml中添加swiftype_install_key即可。

参考

http://eleveneat.com/2015/04/24/Hexo-a-blog/

https://github.com/LouisBarranqueiro/tranquilpeak-hexo-theme ↩
http://catx.me/2014/03/09/hexo-mathjax-plugin/ ↩
http://lukang.me/2014/mathjax-for-hexo.html ↩
https://github.com/chjj/marked/pull/431 ↩
http://lukang.me/2015/hexo-gotop.html ↩

0 0