我又又又把博客迁移了

好久没有维护博客,看了一下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能给站点的加载速度提高很多,一些jscss,图片资源都可以放到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://st.razeen.cn/next/js
images: https://st.razeen.cn/next/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
# 懒加载
{% fi https://st.razeen.cn/next/zhifubao.png@lazy, Alt text, Title text, 75% %}
{% fi https://st.razeen.cn/next/zhifubao.png @lazy, Alt text, Title text, 75% %}

支持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"

完成。

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