博客装修那些事

之前的博客一直在使用 pelican 生成，最近想切到 hugo 试试看。笔者这里列一些小问题，纯记录

2019

pelican-blog

开始使用pelican搭建博客

使用pelican的elegant主题建站

2021

pelican-artalk

为博客添加artalk评论系统

博客可以评论了

2023-10-15

hugo-blog

迁移博客到hugo

使用stack主题建站

博客嵌入 artalk 评论，并配置 artalk 自适应夜间模式

artalk 本身提供了Artalk.setDarkMode接口，使得其可以监听页面的相关内存片段，自适应做出 light、dark 色彩变换。但其实这里存在一个问题那就是有的主题自带了切换白天、夜间模式的按钮，但切换时实际并没有改变 artalk 所监听的内存的值，这里提供了一个修改参考：

1
2
3
window.addEventListener("onColorSchemeChange", (e) => {
  Artalk.setDarkMode(document.documentElement.dataset.scheme == "dark");
});
JS

你需要把这个片段插入到 artalk 评论的shortcode的script内。其实关于这个修改，我也是改了好几版，才勉强把色彩同步过来，作为前端门外汉，改别人的前端项目真的是头痛呀。关于这个，更多的可以参考下面的一些帖子：

gitea 添加 build action: `deploy on commit`

TODO

添加更多模版

在 archetypes 目录下创建一个新的模版 leetcode.md，方便后面直接使用模版生成系列文章。

1
2
3
4
5
6
ls -la archetypes/
total 16
drwxr-xr-x  2 fan users 4096 Nov 19 03:26 .
drwxr-xr-x 14 fan users 4096 Nov 19 01:49 ..
-rw-r--r--  1 fan users  102 Nov 12 10:04 default.md
-rw-r--r--  1 fan users  271 Nov 19 03:19 leetcode.md
TXT

leetcode.md 文件内可以如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
---
title:
description:
image: "https://xxxxx.png"
slug: "{{ .File.ContentBaseName }}"
date: '{{ .Date }}'
categories:
    - leetcode
tags:
    - "leetcode"
    -
    -
series: leetcode题解系列
math: true
draft: true
---
TOML

这时，可以使用如下命令创建新的系列文章：

1
hugo new -k leetcode  coding/leetcode/1887.md
SHELL

hugo mod 配置

本文参考于：

hugo 的模块管理

首先，在站点工程目录下运行下面的命令，目的是生成go.mod文件

1
    hugo mod init blog
SHELL

然后，修改hugo.toml文件，加入你需要import的mod，示例如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
[module]
  # uncomment line below for temporary local development of module
  # replacements = "github.com/google/docsy -> ../../docsy"
  [module.hugoVersion]
    extended = true
    min = "0.110.0"
  [[module.imports]]
    path = "github.com/google/docsy"
    disable = false
  [[module.imports]]
    path = "github.com/google/docsy/dependencies"
    disable = false
TOML

最后，执行如下命令即可建立好依赖关系：

1
    hugo mod tidy
SHELL

建立好关系后，我们就可以在markdown中使用mod的code了。如果需要更新依赖，则需要先修改hugo.toml，然后执行下面的命令即可.

1
    hugo mod get
SHELL

博客焕新

心水了一个魔改主题 hugo-themes-stacked,但是由于我本身使用的也是自改版本，所以一时也不太想改动这个地方。后续可以抽出一段时间来完整的进行适配。

目前已经迁移完毕

参考： [1]. https://go.opensl.life/N3oNd

一些感悟

在编写shortcode的时候，常常看到一些{{- with $page -}} ... {{end}} 类似的with:end 标记，目的是将context在该语句内设定为.

hugo那些抓马的bug

如何在多语言项目中获取当前文件路径？这个功能，目前没看到有一个hugo提供的变量可以直接得到，我这里使用了以下方法拼接:

1
2
3
{{ $base := $.Page.File.Dir }}
{{ $file := .Get 0 }}
{{ $fullpath := (path.Join "content" .Site.Language.Lang  $base $file) }}
JINJA

我们也许在一些地方看到，它们会直接使用下面的方法获得:

1
2
3
{{ $base := $.Page.File.Dir }}
{{ $file := .Get 0 }}
{{ $fullpath := (path.Join $base $file) }}
JINJA

但是这个地址其实不适用于有多语言的文件结构，更怪异的是，这个地方如果没有找到对的文件，它会遍历整个content进行模糊匹配，不会报错，真是我见过最奇葩的实现。我给出的那个方法也只适用于你的文章文件结构和配置为下面的方式时才有效，你需要按照自己的config进行配置。

文章如下放置：

1
2
3
4
5
- content
  - en
      + posts
  - zh-cn
      + posts
TXT

配置如下：

1
2
3
4
5
6
7
languages:
  en:
    languageName: English
    contentDir: content/en-us
  zh-cn:
    languageName: 中文
    contentDir: content/zh-cn
YAML