博客迁移 | h4m5t's Blog

为什么迁移博客

之前的博客用了快三年，有一些小问题，另外发现有些图片失效了，甚至给我换了广告，不能忍。

而且速度很慢，准备换个框架，整体迁移一下。

以前用的是Jekyll，一个小众主题，很简洁，有语言翻译功能，手机端做的也不错。但是可扩展性差，用的人少，功能不完善。

需求

当前需求：

支持RSS
支持外链，GitHub，知乎等
支持查看运行时间，访问总次数。
支持归档，时间倒序排列。
支持转发到微信，qq，Twitter
相关文章推荐
写公告

长远需求：

评论
弹出聊天框
插入广告
支持打赏

寻找框架主题

主流静态框架有三种：

Hexo

Hugo

Jekyll

最终决定用hexo

框架：https://github.com/hexojs/hexo

主题：butterfly

此框架国内用的多，有问题方便查找，主题功能完善，看了别人的demo,特别惊艳。

可以满足我需要的所有需求。

缺点是不方便多端编辑，需要在本地生成之后上传所有文件。不像之前的Jekyll，只上传一个md文件就够了。

迁移进度

框架迁移
post迁移
调整格式为hexo格式
图片迁移（迁移了部分图片，有些404被SMS和谐了，之后把图片都放在Github上）
多终端同步（main保存源文件，gh-pages保存生成后的文件。尝试后失败）
格式美化
配置CDN

渐变背景色

参考：

https://www.antmoe.com/posts/7198453

https://www.cnblogs.com/MoYu-zc/p/14397889.html

遇到了渐变色不生效的问题，看了上面这篇文章，解决了。将butterfly.yml的background改为"#efefef"

下面是配置背景色的css文件。

/* 文章页背景 */
.layout > div:first-child:not(.recent-posts) {
  /* 以下代表白色透明度为0.5 */
  background: rgba(255, 255, 255, 0.5);
}
/* 所有背景（包括首页卡片、文章页、页面页等） */
#recent-posts > .recent-post-item,
.layout > div:first-child:not(.recent-posts),
.layout_post > #page,
.layout_post > #post,
.read-mode .layout_post > #post {
  /* 以下代表白色透明度为0.5 */
  background: rgba(255, 255, 255, 0.5);
}

/* 背景渐变 */
#web_bg{
    /*紫粉渐变*/
    /*background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);*/
    /*粉白蓝*/
    /*background-image: linear-gradient(-225deg, #dfbacd 0%, #B8DCFF 48%, #58abf3 100%);*/
    /*background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);*/
    /*background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);*/
    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}

安装插件

install hexo-renderer-pug hexo-renderer-stylus --save

# 字数计数
npm install hexo-wordcount --save
# 本地搜索
npm install hexo-generator-search --save
# 慢加载
npm install hexo-lazyload-image --save
# push到GitHub
npm install hexo-deployer-git --save
# RSS订阅
npm install hexo-generator-feed --save

#后期安装，图片引用
cnpm install hexo-renderer-marked

查看已安装的所有插件：npm list

+-- hexo-deployer-git@3.0.0
+-- hexo-generator-archive@2.0.0
+-- hexo-generator-category@2.0.0
+-- hexo-generator-feed@3.0.0
+-- hexo-generator-index@3.0.0
+-- hexo-generator-search@2.4.3
+-- hexo-generator-tag@2.0.0
+-- hexo-renderer-ejs@2.0.0
+-- hexo-renderer-marked@6.0.0
+-- hexo-renderer-pug@3.0.0
+-- hexo-renderer-stylus@2.1.0
+-- hexo-server@3.0.0
+-- hexo-theme-landscape@0.0.3
+-- hexo-wordcount@6.0.1
`-- hexo@6.3.0