一、前言

之前的博客用的是jekyll(基于ruby)建的，但是后来发现有时有点问题。
查资料对比了一下，最终决定使用hexo来重新搭建博客。

具体的搭建过程这里不再赘述，网上已有很多详细的资料。

强烈建议备份 markdown 的源文件，有多种方案：

二、简介

这里简单介绍一下整个博客使用的东西：

  • 使用基于node.js的hexo来搭建静态博客
  • 代码托管在gitcafe及github上
  • 域名是在godaddy购买: http://aevit.xyz
  • 使用dns.la转发，国内IP访问gitcafe上的代码，国外IP访问github上的代码，保证访问速度
  • 使用markdown进行写作
  • 主题最终采用的是next，风格比较喜欢

三、主题说明

主题地址: next

主题的一些官方修改这里不再介绍（配置_config.yml等操作），具体可参考官网

下面记录一下对此主题的一点自定义修改：

以下修改除非有特别说明，不然前面的路径都是：/theme/next/

3-1 图片浏览控件－fancybox

  • 在移动端使用大图模式（撑满屏幕，浏览效果更好），PC端使用多缩略图模式（一行3张图）

修改/layout/_layout.swig，将jQuery的加载放到head标签里面

1
<script type="text/javascript" src="{{ url_for(theme.vendors) }}/jquery/index.js?v=2.1.3"></script>
  • 新增/source/js/fancybox-aevit.js文件，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
	var winWidth = $(window).width();
	$('.fancybox-aevit img').each(function(index, item) {
		var imgSrc = $(item).attr('src');
		var strIndex = imgSrc.indexOf('?imageView2');
		if (strIndex && winWidth <= 678) {
			imgSrc = imgSrc.substring(0, strIndex);
			imgSrc = imgSrc + "?imageView2/1/w/" + winWidth + "/h/" + winWidth; // 使用七牛的图片尺寸api
			$(item).attr('src', imgSrc);
		}
	});
})
  • 新增/source/css/_common/_component/fancybox-aevit.styl文件，使PC端上图片每行显示3张，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.fancybox-aevit {
  display: inline-block;
  border-bottom: 0px;
}
@media (max-width: 678px) {
  .fancybox-aevit {
    width: 100%;
  }
  .fancybox-aevit img {
    width: 100%;
  }
}

.fancybox-aevit-left {
  display: inline-block;
  border-bottom: 0px;
}

.fancybox-aevit-full {
  display: inline-block;
  border-bottom: 0px;
}
  • 在/source/css/main.styl，引进上面的css文件
1
@import "_common/_component/fancybox-aevit";
  • 在需要使用九宫格样式的文章正文开头，引进 js 文件：
1
<script type="text/javascript" src="/js/fancybox-aevit.js"></script>

3-2 搜索控件－swiftype

  • 在根目录（注意不是主题的目录）的_config.yml里填写swiftype_key

  • 拷贝st.js到 /source/js/（主题目录下的source），加快js加载速度（新版弄到本地会导致不能搜索）

  • 修改 /source/layout/_partials/search/swiftype.swig，在input标签添加placeholder="搜索"(html5新特性)

  • 设置分类页面才显示搜索功能，修改 /source/layout/_partials/header.swig，增加 is_current('categories') 判断

    有2处需要修改：

1
{% if not theme.scheme and theme.swiftype_key and is_current('categories') %}
1
2
3
4
5
{% if hasSearch && is_current('categories') %}
  <div class="site-search">
	{% include 'search.swig' %}
  </div>
{% endif %}
  • st.js会自动加载swiftype的CDN上的css文件（new_embed-85bc2d1b89a82e5a688394908a05bc0d.css等），还未找到方法改为加载本地的css

3-3 404页面

  • 添加 404.html 到 /source/ 目录下（注意是主题的source），具体要做什么修改，直接去改动404.html即可

3-4 主题的_config.yml

  • 开启categories页面
  • 开启about页面

然后修改/layout/_partials/herder.swig，给about链接加target = "_blank"

1
2
3
4
5
{% if itemName == "about" %}
  <a href = /about.html target = "_blank">
{% else %}    
  <a href="{{ url_for(path) }}">
{% endif %}

再然后将以前写好的about.html（使用impress.js制作）放到主题目录下的source目录

  • 修改高亮规则normal为night

  • 填写duoshuo_info里的admin_enable、user_id（在站点的_config.yml增加duoshuo_user_key，在/layout/_layout.swig的多说代码增加data-author-key=""）

  • use_font_lato为true的话，会去http://fonts.googleapis.com上加载；
    不过由于The Great F**king Wall的原因，加载会相当地慢；

1
2
3
4
5
6
7
8
9
10
# 如果 不 需要`lato`字体的话，直接修改主题里的`_config.yml`里的`use_font_lato`为`false`即可
use_font_lato: false


# 如果需要`lato`字体，则修改主题layout里的head.swig，去加载360CDN上的    
# 路径: themes/next/layout/_partials/head.swig  
{% if theme.use_font_lato %}
  <!--link href="//fonts.googleapis.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css"-->
  <link href="//fonts.useso.com/css?family=Lato:300,400,700,400italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
{% endif %}
  • 添加use_local_file，方便本地调试使用
1
2
# 本地调试使用, true: 加载本地的jQuery、font-awesome等文件；false: 加载CDN上的文件
use_local_file: false

3-5 头像

  • 在根目录（注意不是主题的根目录）的/source/images放一张default_avatar.jpg图片

3-6 字体

  • 修改themes/next/source/css/_variables/base.styl
1
2
3
4
5
$font-family-chinese      = "Lantinghei SC", "PingFang SC", 'Microsoft YaHei', "微软雅黑"  
$font-family-base         = $font-family-chinese, Lato, sans-serif
$font-family-headings     = $font-family-chinese, Lato, sans-serif

$font-size-base           = 16px
  • PS：OS X 10.12 的 Chrome 下，字体会有点粗（Chrome 字体渲染跟 Safari Firefox 的不一样），所以现在 $font-family-chinese 改为如下：
1
"PingFang SC", "Lantinghei SC", 'Microsoft YaHei', "微软雅黑"

并且修改 ./themes/next/source/css/_common/_core/scaffolding.styl，给 body 的 css 增加以下代码：

1
-webkit-font-smoothing: antialiased;

3-7 标题

  • 修改/next/layout/post.swig，将//改为- (现在默认是|了)

3-8 CDN

ps: 在themes/next/_config.yml里，我添加了use_local_file，方便本地调试使用

  • 修改themes/next/layout/_layout.swig, 让jQuery先从七牛CDN加载，加载失败再从本地加载
1
2
3
4
5
6
7
8
9
10
11
12
{% if theme.use_local_file %}
  <script type="text/javascript" src="{{ url_for(theme.vendors) }}/jquery/index.js?v=2.1.3"></script>
{% else %}
  <script src="//cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>
  <script>
    if (!window.jQuery) {
      var script = document.createElement('script');
      script.src = "{{ url_for(theme.vendors) }}/jquery/index.js?v=2.1.3";
      document.body.appendChild(script);
    }
  </script>
{% endif %}
  • 修改themes/next/layout/_partials/head.swig，将font-awesome.min.css改为从七牛CDN加载
1
2
3
4
5
{% if theme.use_local_file %}
  <link href="{{ url_for(theme.vendors) }}/font-awesome/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" type="text/css" />
{% else %}
  <link href="//cdn.staticfile.org/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
{% endif %}