Kyr1os' Blog

May the wind guide your road

0%

博客迁移到 Hexo

Posted on Edited on
因为 WordPress 本身很成熟，有些代码改起来真的很麻烦，所以我早就有了把博客从 WordPress 迁移出来的想法。最后促成我完成这个想法的因素是我腾讯云的机器要到期了然而我并不想继续用腾讯云了。过去的一年多我都在忙毕业相关的事情，没有什么时间写博客，错过了记录一些有趣瞬间的机会，非常可惜。将旧博客迁移正好也可以让我重新养成写博客的习惯，在长者的安利下我选了 hexo 作为博客的新框架。

安装

Hexo

配置

主题

NexT

图片缩放

fancybox

评论

Gitalk

Update: 2021.01.31 Gitalk 默认 CORS 服务器失效，参考 https://cuiqingcai.com/30010.html 解决。 具体解决方法为向 themes/next/layout/_third-party/comments/gitalk.swig 添加 proxy : '{{ theme.gitalk.proxy }}', 再往 source/_data/next.yml 添加 proxy: https://netnr-proxy.cloudno.de/https://github.com/login/oauth/access_token.

Update: 2021.07.28 Gitalk 新版本已经修复代理问题，故移除此 Patch。

SEO

hexo-generator-sitemap

Fix multiple captions

往配置添加： 

1
2
3
pandoc:
  extensions:
    - '-implicit_figures'

参考 https://wylu.me/posts/7bd83fc5/

定制

CSS

Applied Changes:

  • Adjust top margin of .image-caption: 
    1
    2
    3
    4
    5
    6
    7
    --- a/themes/next/source/css/_common/components/post/post.styl
    +++ b/themes/next/source/css/_common/components/post/post.styl
    @@ -18,3 +18,3 @@ .image-caption, .figure .caption
         line-height: 1;
    -    margin: -20px auto 15px;
    +    margin: -17px auto 15px;
         text-align: center;

目录结构

对于默认情况下的 hexo，博客文章在文件夹中的目录结构应该是这样的

1
2
3
4
5
6
7
.
├── _posts/
│   ├── my_1st_post.md
│   └── my_2nd_post.md
├── images/
│   └── my_pic.jpg
.

这种情况下在博客文章中引用的资源文件统一放在source/images文件夹中。

出于对资源的规律管理的角度，将文章和其引用的资源放在一个文件夹是一个很自然的需求。于是 hexo 在_config.yml提供了post_asset_folder这个配置项，将这个值设为true之后，你的目录结构可以变成这样

1
2
3
4
5
6
7
.
├── _posts
│   ├── my_1st_post.md
│   ├── my_1st_post/
│   │   └── my_pic.jpg
│   └── my_2nd_post.md
.

看起来比上一种结构好一些，至少你可以把一篇文章引用的所有资源放在一个文件夹里。但是对于我而言，我想要的目录结构是

1
2
3
4
5
6
7
8
9
10
11
.
├── _posts
│   ├── my_1st_post/
│   │   ├── index.md
│   │   └── assets/
│   │       ├── img/
│   │       │   └── my_pic.jpg
│   │       └── file.zip
│   └── my_2nd_post/
│       └── index.md
.

这种结构从_posts的角度看，每一个文件夹对应一篇文章，所有引用的资源都放在assets当中，非常整洁。这种情况下我的_config.yml中new_post_name的值为:title/index.md。由于post_asset_folder相关的实现在hexo的代码中被写死了资源文件夹必须和 post name 同名，那么在这种目录结构下我的assets文件夹必须重命名为index，hexo 才会将其视为资源文件夹，这无疑是非常扭曲的行为。

翻阅 hexo 的源码可以看到扫描资源文件夹的代码在hexo\lib\plugins\processor\post.js的scanAssetDir(post)中实现，scanAssetDir函数取post.asset_dir作为资源文件夹，这个值在hexo\lib\models\post.js中被确定，只需要修改相关代码即可，如下：（被注释掉的是原代码）

1
2
3
4
5
Post.virtual('asset_dir').get(function() {
    const src = this.full_source;
    // return src.substring(0, src.length - extname(src).length) + sep;
    return src.split(sep).slice(0, -1).join(sep) + sep + "assets" + sep;
});