使用Hexo模板
按以下指导进行本地预览和上传到你的github。
环境安装
-
安装node.js
node.js官方下载地址
https://nodejs.org/en/设置npm淘宝镜像站(npm默认的源的下载速度可能很慢，建议使用淘宝镜像替换)
执行下面的命令，将npm的源设置成淘宝镜像站。
npm config set registry "https://registry.npm.taobao.org"
- 安装hexo执行以下命令安装hexo。
在/Gitspace/next/下右键打开Git Bash Here
npm install -g hexo-cli #安装hexo
hexo version #并查看版本号
建立博客站点
# 初始化博客文件夹
hexo init
#注意这将生成两个_config.yml文件，根目录的叫做**站点配置文件**，/themes/landscape/下的叫做主题配置文件
# 安装依赖扩展插件
npm install
# 安装其它插件
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-admin --save
npm install hexo-generator-archive --save
npm install hexo-generator-feed --save
npm install hexo-generator-search --save
npm install hexo-generator-tag --save
npm install hexo-generator-sitemap --save
本地预览hexo
第一次使用hexo，在本地创建服务器使用。
# 生成静态页面
hexo generate
# 开启本地服务器
hexo clean
hexo s
打开浏览器，地址栏中输入：http://localhost:4000/
如果访问不了，使用hexo s -p 5000替换hexo s。
部署到github
- 修改站点配置文件_config.yml
修改deploy项的内容，如下所示：
deploy:
type:git
repository: git@github.com/yourname/yourname.github.io.git
branch: master
注意：type: git中的冒号后面有空格。
- 部署hexo
输入下面的命令将hexo博客部署到github中：
# 清空静态页面
hexo clean
# 生成静态页面
hexo generate
# 部署
hexo deploy
使用经典的Next主题：
安装主题
-
在站点的根目录下Git Bash Here：
git clone https://github.com/theme-next/hexo-theme-next themes/next -
修改站点配置文件_config.yml:
-
启用主题
theme: next
配置主题
主题配置文件_config.yml中推荐更改的部分：
- 选择
Scheme：Muse - 设置 语言
language: zh-CN - 设置 菜单
menu,增加tags和categories和about项，archives，commonweal等项 social功能，||后的单词对应图标库中的图标，图标库的链接为http://fontawesome.io/icons/- 文章热度：next主题集成leanCloud，打开
/themes/next/layout/_macro/post.swig
在<span class="leancloud-visitors-count"></span>下添加一句：
<span>℃</span>
然后打开/languages/zh-CN.yml
将views:阅读次数改为views:热度。 - 网站logo：放在
/themes/next/source/assets里面，修改favicon - 设置
leancloud_visitors(需要提前配置好leancloud的相关信息)
leancloud_visitors:
enable: true
app_id:
app_key:
并执行以下命令：
hexo new page 'tags' #创建tags子目录
hexo new page 'categories' #创建categories子目录
hexo new page 'about' #创建about子目录
hexo new page 404 #创建404页面
在你的网站根目录下面的source文件夹会分别生成tags、categories以及about文件夹。
分别修改这tags和categories文件夹中的index.md文件，新增type属性，如下：
---
title: tags
date: 2018-01-04 11:45:41
type: tags
---
其他可选功能：
- 动态背景：可以选择：
canvas_nest,three_waves,canvas_lines,canvas_sphere,canvas_ribbon等
打开 /theme/next/layout/_layout.swig，在 </body>之前添加代码:
{% if theme.canvas_nest %}
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
-
桃心效果：浏览器输入
http://7u2ss1.com1.z0.glb.clouddn.com/love.js
拷贝所有代码，在/themes/next/source/js/src里面新建love.js，然后在hemes extlayout\_layout.swig文件末尾添加以下代码：<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/src/love.js"></script> -
文章底部带#号的标签：修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将
#换成<i class="fa fa-tag"></i> -
文章末尾统一添加“本文结束”标记：在路径 hemes extlayout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
{% endif %}
</div>
接着打开 hemes
extlayout\_macropost.swig文件，在post-body 之后(如下图)， 添加以下代码：
{#####################}
{### END POST BODY ###}
{#####################}
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
然后打开主题配置文件（_config.yml),在末尾添加：
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
- 开启页面下方访客功能(使用不蒜子)：
找到next主题的配置文件themes/next/_config.yml，footer字段，加入一个配置，这里我们叫它counter吧，即
footer:
# -------------------------------------------------------------
# visitors count
counter: true
修改next主题的模板文件：
由于是把访问量统计放在网页的footer，所以我们需要修改的模板文件是theme/next/layout/_partials/footer.swig。
我们在合适的位置加入：
{% if theme.footer.counter %}
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">总访问量<span id="busuanzi_value_site_pv"></span>次</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv">总访客<span id="busuanzi_value_site_uv"></span>人</span>
<span class="post-meta-divider">|</span>
{% endif %}
其他问题
-
LeanCloud访问统计提示’Counter not initialized! See more at console err msg.‘
-
hexo generate命令执行时出错
将你的post文章中的所有大括号
{或}加上'进行行内代码即可。
将你的post文章中的所有连续的大括号{{或}}中间加空格，即改为{ {和} }。
注意：很有可能出现无法统计阅读量的情况：页面LeanCloud访问统计提示’Counter not initialized! See more at console err msg.’
解决方案，按此解决方案：
deploy:
- type: git
repository: git@github.com:charleechan/charleechan.github.io.git
branch: master
- type: leancloud_counter_security_sync
配置数学公式渲染器
更换Hexo的markdown渲染引擎，hexo-renderer-kramed引擎是在默认的渲染引擎hexo-renderer-marked的基础上修改了一些bug，两者比较接近，也比较轻量级。
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save
执行上面的命令即可，先卸载原来的渲染引擎，再安装新的。
然后，跟换引擎后行间公式可以正确渲染了，但是这样还没有完全解决问题，行内公式的渲染还是有问题，
因为hexo-renderer-kramed引擎也有语义冲突的问题。接下来到博客根目录下，找到node_moduleskramedlib
ulesinline.js，把第11行的escape变量的值做相应的修改：
// escape: /^\([\`*{}[]()#$+-.!_>])/,
escape: /^\([`*[]()#$+-.!_>])/
这一步是在原基础上取消了对,{,}的转义(escape)。
同时把第20行的em变量也要做相应的修改。
// em: /^_((?:__|[sS])+?)_|^*((?:**|[sS])+?)*(?!*)/,
em: /^*((?:**|[sS])+?)*(?!*)/
重新启动hexo（先clean再generate）,问题完美解决。哦，如果不幸还没解决的话，看看是不是还需要在使用的主题中配置mathjax开关。
在主题中开启mathjax开关
如何使用了主题了，别忘了在主题（Theme）中开启mathjax开关，下面以next主题为例，介绍下如何打开mathjax开关。
进入到主题目录，找到_config.yml配置问题，把mathjax默认的false修改为true，具体如下：
# MathJax Support
mathjax:
enable: true
per_page: true
别着急，这样还不够，还需要在文章的Front-matter里打开mathjax开关，如下：
---
title: index.html
date: 2016-12-28 21:01:30
tags:
mathjax: true
---
不要嫌麻烦，之所以要在文章头里设置开关，是因为考虑只有在用到公式的页面才加载 Mathjax，这样不需要渲染数学公式的页面的访问速度就不会受到影响了。
更多资讯请参考