Hexo博客优化

MarkDown编辑器

最低要求：所见所得，云端同步。

  • Cmd Markdown编辑器 —— 本来期待很高，也非常好用，但是反复提示邮箱没有验证，暂时放弃了。
  • StackEdit —— 功能基本符合，可以用Google Drive同步，只是预览效果和Hexo最终效果还是有差异，比如代码段的效果，可能是Hexo的代码效果还没配置好。
  • Dillinger —— 暂未使用，但是目测还不错，不过貌似网络访问速度比较缓慢。
  • 马克印象 —— Evernote官方出品，值得一试。



优化内容

Freemind主题

[1] 下载主题，在hexo根目录打开Git Bash：

1
2
$ git clone https://github.com/wzpan/hexo-theme-freemind.git themes/freemind
$ npm install hexo-tag-bootstrap --save

[2] 应用主题，编辑根目录_config.yml文件：

1
theme: freemind

[3] 配置导航菜单

编辑主题下的_config.yml文件（其中的icon可以在Font Awesome Icons上找到）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
menu:
  - title: 归档
    url: archives
    intro: 文章归档
    icon: fa fa-archive
  - title: 分类
    url: categories
    intro: 文章分类
    icon: fa fa-folder
  - title: 标签
    url: tags
    intro: 所有标签
    icon: fa fa-tags
  - title: 关于
    url: about
    intro: 我的足迹
    icon: fa fa-user

生成对应的导航页面（freemind主题默认已经有archives页面，还差categories、tags和about页面）：

1
2
3
hexo new page "categorires"
hexo new page "tags"
hexo new page "about"

在hexo\source\下会生成对应的categories、tags和about目录，编辑里面的index.md文件对应各个页面的实际内容：

1
2
3
4
title: 分类
layout: categories
date: 2014-05-17 23:21:34
---
1
2
3
4
title: 标签
layout: tags
date: 2014-05-17 23:22:55
---
1
2
3
4
title: 关于我
layout: about
date: 2014-05-17 10:37:46
---

[4] 更多文章属性

  • description - 在文章顶部显示内容介绍
  • feature - 在文章列表页面显示概要图片
  • toc - 在文章起始处显示文章内容目录

例如：

1
2
3
4
5
6
7
title: Tag Plugins
date: 2014-03-16 10:17:16
tags: plugins
categories: Docs
description: Introduce tag plugins in freemind.
feature: images/tag-plugins/plugins.jpg
toc: true

[5] 配置图片大小

默认图片大小是自适应的，有可能会很大，造成页面显示不美观，可以在/themes/freemind/source/css/style.css中找到img节增加最大宽度限制：

1
2
3
4
5
6
7
8
img {
  max-width: 97.5%;
  margin: 15px auto;
  display: block;
  width: auto;
  height: auto;
  max-width: 60%;
}



页面结构

[1] 主页文章显示摘要

编辑md文件的时候，在要作为摘要的文字后面添加<!—more—>即可。

[2] 安装sitemap和rss：

1
2
$ npm install hexo-generator-sitemap --save
$ npm install hexo-generator-feed --save

激活配置：

1
2
3
Plugins:
  - hexo-generator-feed
  - hexo-generator-sitemap



网站插件

[1] Hexo插件 Live Reload

Hexo允许在发布之前在本地浏览器进行调试预览，但是如果每次修改都需要反复执行“$ hexo g && hexo s”估计也很崩溃。Live Reload给力的地方在于它会自动完成上述步骤，要预览的时候直接F5刷新浏览器即可看到修改后的网页效果。当然，如果有时候修改后无法刷新出来的话，那就“$ hexo clean && hexo g && hexo s”重新来过。

[2] 流量分析 Google Analytics

注册Google Analytics账号后，获取跟踪ID和跟踪代码。

在主题的_config.yml中添加获得的跟踪ID：

1
2
3
4
google_analytics:
  enable: true
  id: UA-51276891-1
  site: baoxiehao.com

在主题/layout/_partial/after_footer.ejs的最后添加获得的跟踪代码。

[3] 流量分析 百度统计

虽然有了Google Analytics，但是时不时地被墙总是一件让人很惆怅的事情。于是，还是加下百度统计吧。

首先，在主题的_config.yml文件中添加：

1
baidu_tongji: true

然后，在主题的/layout/_partial/目录下新建文件baidu_tongji.ejs：

1
2
3
<% if (theme.baidu_tongji){ %>
#你的百度统计代码
<% } %>

最后，在主题的/layout/_partial/head.ejs文件末尾添加：

1
<%- partial('baidu_tongji') %>

[4] 社会化评论 多说

首先上多说官网注册账号，然后在主题/layout/_partial/下新建文件duoshuo.ejs，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- Duoshuo Comment BEGIN -->
<div class="ds-thread" data-title="<%= item.title %>" data-url="<%- item.permalink %>"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"your-duoshuo-name"};
(function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = 'http://static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0]
    || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
<!-- Duoshuo Comment END -->

基本上就是在多说网站上拿到的通用代码，在第二行上加入了data-title和data-url，用来给多说传一些参数。
data-url这个参数可以让多个域名上的文章评论共享，只要同一篇文章的data-url固定就可以。例如blog.baoxiehao.com和baoxiehao.com上文章的data-url都是http://baoxiehao.com/xxx，这样两个域名就可以共享评论了。一定要注意第四行的your-duoshuo_name是自己多说代码独有的，不要照抄。

接下来在layout/post.ejs下面，加入一行：

1
<%- partial('_partial/duoshuo', {item: page, index: false}) %>

就能在文章页面看到评论框了。

如果想在其他页面，例如关于页面也看到评论的话，对layout/page.ejs如法炮制即可。
而如果想在博客首页底部也看到评论的话，编辑freemind/layout/layout.ejs，在_partial/after_footer之前添加duoshuo代码（但是，这样有个问题是文章页面会有2个评论框，还没更好的方法，所以暂时先不加首页评论了）：

1
2
3
  <%- partial('_partial/duoshuo', {item: page, index: false}) %>
</div> <!-- container-narrow -->
  <%- partial('_partial/after_footer') %>

[5] 七牛同步

印象中Github Pages是有100M左右的空间大小限制的，如果有更多的图片需要同步，建议选择可以外链的七牛同步。在官网注册账号后，新建一个图片空间，然后下载qrsync同步本地的图片到七牛，需要时直接在md文件中引用。

新建配置文件（比如名为conf.json）：

1
2
3
4
5
6
7
{
  "access_key": "Please apply your access key here",
  "secret_key": "Dont send your secret key to anyone",
  "bucket": "Bucket name on qiniu resource storage",
  "sync_dir": "Local directory to upload",
  "debug_level": 1
}

同步命令：

1
$ qrsync.exe /path/to/your-conf.json

[6] 新浪微博挂件

在主题/layout/_widget/下新建文件weibo.ejs，文件内容就是生成的微博挂件代码。然后在主题的_config.yml文件中添加配置：

1
2
widgets:
  - weibo



FAQ

  1. 主题的样式无法应用 —— 尝试执行命令$ hexo clean后重新部署。
  2. 部署后显示中文乱码 —— 尝试将出现乱码的md文件用UTF-8重新编码后保存，然后执行$ hexo clean重新部署。
  3. 升级Hexo后执行$ hexo s提示HexoError错误 —— 修改themes/freemind/languages/default.yml中包含空格的配置项，重新用双引号包裹包含空格的配置值就可以啦。

留言

2014 5月 17
▲