博客迁移到 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 (Removed): 
    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;

Update: 2024.03.16 NexT 新版目录在 hexo/node_modules/hexo-theme-next

目录结构

对于默认情况下的 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;
});

Update: 2024.03.16 hexo 更新后该文件在 hexo/node_modules/hexo/dist/models/ 下

React Support

最近读到了 这篇文章 后有了把博客前端更换到以 Next.js 为基础的架构上。但觉得工程量不小，于是想先在现环境下引入 React Component 过渡一下。糊了一个 小插件 来实现。因为 Markdown 完全兼容 HTML， 所以只需要向 hexo 的 before_post_render 注册一个函数，将 Markdown 中的 React 标签替换为 renderToStaticMarkup 渲染后的 HTML 代码即可。

P.S: 虽然之前看到了别人新注册一个 jsx renderer 的 实现，但我就是想要在 Markdown 里嵌 React Component!

P.P.S: 写完这东西以后我本来想再挂个脚本把插件的编译放到 hexo 的 before_generate 里，结果没想到 hexo 在执行 generate 之后，before_generate 居然是在 before_post_render 之后触发的，不可思议。

Tailwindcss Support

在添加了 React 支持后，我接着加入了 tailwindcss 的支持。这部分我主要参考了 这个仓库 的内容，感谢。

首先将上述仓库的代码放到 hexo/scripts 下

然后安装需要的包

1
2
npm install -D autoprefixer postcss postcss-load-config tailwindcss
npx tailwindcss init

添加配置文件

1
2
3
4
5
6
7
8
// postcss.config.js
module.exports = {
  from: undefined,
  plugins: {
    'tailwindcss': {},
    'autoprefixer': {},
  }
}
1
2
3
4
5
6
7
8
9
10
11
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./source/_components/src/*.jsx", // modify it to all files may use tailwindcss
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

最后在主题的样式中引入 tailwind，这一步需要创建 `tailwind.css`` 并在主题的样式文件中将其引入，以 NexT 主题为例

在 hexo-theme-next/source/css 中添加 tailwind.css 

1
2
3
4
/* hexo-theme-next/source/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

最后在 hexo-theme-next/layout/_partials/head/head.njk 中添加 <link rel="stylesheet" href="{{ url_for(theme.css) }}/tailwind.css"> 即可

部署即生效

npm run build