我又又又把博客迁移了

本文最后更新于：4 年前

好久没有维护博客，看了一下Next主题的相关功能，最后决定将博客切到了hexo，原博客在这里。原eiblog有些东西想去更新，一直没有动手，这里立个flag，有空了在eiblog基础上改些东西，大概有：

  • 自动更新disqus js(每次js更新了，disqus就加载不了)
  • 数据库切换到sqlite3 (用gorm支持多种数据库)
  • 侧边栏可以自定义添加页面
  • 更容易部署

这次迁移到Hexo, 主要因为Next主题确实做的很完备啊。

  • 支持全局搜索
  • 支持CDN加速
  • 支持懒加载
  • 支持toc
  • 支持feed
  • 支持sitemap
  • 一键部署

该博客的全局配置文件在这里, 该博客的主题配置在这里。

全局搜索

修改主题内_config.yml

1
local_search:true

修改全局配置_config.yml

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 1000

CDN全局加速

CDN能给站点的加载速度提高很多，一些js，css，图片资源都可以放到CDN上。

修改主题内_config.yml，设置vendors里面的CDN地址。

1
2
3
4
5
6
7
8
vendors:
  _internal: libs
  
  jquery: https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  
  fancybox_css: https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
  
  ...

一般你做到这样就可以了，但我有点不相信这些CDN, 写了个go脚本把这些全部上传到七牛。。。

然后，我发现，public里面的js文件和图片每次生成都不会发生变化，于是我把这些都全到了七牛。。。

然后修改一下主题内_config.yml文件，把Assets修改如下：

1
2
3
css: css
js: https://s.razeen.cn/img/js
images: https://s.razeen.cn/img/image

图片懒加载

有些文章图片比较多，图片懒加载能让你需要看到图片的时候再加载图片，节省了很多流量，能提高不少加载速度。

Next主题可以通过插件tag的方式支持懒加载。具体插件文档在这里。开启改功能我们需要安装hexo-lazyload-image插件, 然后在根目录执行npm install hexo-lazyload-image --save。

然后修改主题内_config.yml文件：

1
2
3
# Added switch option for separated repo in 6.0.0.
# Dependencies: https://github.com/theme-next/theme-next-jquery-lazyload
lazyload: true

懒加载格式如下：

1
2
3
# 懒加载
![](https://s.razeen.cn/img/zhifubao.png)
![](https://s.razeen.cn/img/zhifubao.png)

支持TOC

toc是啥？就是目录。

修改主题内_config.yml即可。

1
2
3
4
5
6
7
8
9
# Table Of Contents in the Sidebar
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.
  max_depth: 6

RSS Feed

支持RSS订阅，这个以前很火的。

先安装插件hexo-generator-feed。

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

修改博客内插件_config.yml。

1
rss:

这里不设置false就行了，设true会出如下问题。

1
path.startsWith is not a function

sitemap

为了方便搜索引擎收录，提高SEO，sitemap肯定需要的。

安装插件hexo-generator-sitemap,hexo-generator-baidu-sitemap。

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

修改根目录_config.yml, 添加如下：

1
2
3
4
sitemap:
   path: sitemap.xml
baidusitemap:
    path: baidusitemap.xml

robots.txt

这也是提高SEO的，设置搜索引擎可以抓取哪些，不需要抓取哪些内容。

在themes/source/next/source目录下添加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/
Allow: /about/

Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://razeen.me/sitemap.xml
Sitemap: https://razeen.me/baidusitemap.xml

一键部署

关于一键部署更多的内容看这里。

其他

自定义css样式

文章中默认的a链接的样式是黑色的，不太明显，改成蓝色。

修改``themes/source/custom.styl`, 添加如下行。

1
2
3
4
5
6
7
8
9
// Custom styles.
if hexo-config("custom_css.post_body_a.enable")
  .post-body
    a{
      color: convert(hexo-config("custom_css.post_body_a.normal_color"));
      &:hover {
        color: convert(hexo-config("custom_css.post_body_a.hover_color"));
      }
    }

修改themes/_config.yml，增加如下行。

1
2
3
4
5
custom_css:
  post_body_a:
    enable: true
    normal_color: "#0593d3"
    hover_color: "#0477ab"

完成。

换个皮肤，希望自己新的一年里多写几篇博客～。