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

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

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

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

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

全局搜索

修改主题内_config.yml

local_search:true

修改全局配置_config.yml

search:
  path: search.xml
  field: post
  format: html
  limit: 1000

CDN全局加速

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

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

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修改如下:

css: css
js: https://s.razeen.me/js
images: https://s.razeen.me/image

图片懒加载

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

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

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

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

懒加载格式如下:

# 懒加载
![](https://s.razeen.me/img/zhifubao.png)

支持TOC

toc是啥?就是目录。

修改主题内_config.yml即可。

# 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

$ npm install hexo-generator-feed --save

修改博客内插件_config.yml

rss: 

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

path.startsWith is not a function

sitemap

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

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

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

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

sitemap:
   path: sitemap.xml
baidusitemap:
    path: baidusitemap.xml

robots.txt

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

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

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`, 添加如下行。

// 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,增加如下行。

custom_css:
  post_body_a:
    enable: true
    normal_color: "#0593d3"
    hover_color: "#0477ab"

完成。

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