首页文章显示标签

在 index.pug 中 .post-meta 位置添加如下代码

1
2
3
4
5
6
.post-meta
        = post.date.format(config.date_format)
        if post.tags.length > 0
          each tag in post.tags.toArray()
            i.fa.fa-tag(style='padding-right: 0.2em;padding-left: 0.5em;')
            a(href=url_for(tag.path))= tag.name

Tags 的自定义

我的博客不采用 Catagories 的结构，因为我认为博客文章应当是时间强相关的流水模式。结构化的知识可以单独开一个博文，指向其他博文。

我的博客更看重 tags， 将文章按照自己定义的 tag 零散的组织起来。

  1. hexo new page "tags" 会生成 tags 页面

  2. 在 maupassant 的 _config.yml 的 menu: 中添加

1
2
3
- page: tags
    directory: tags/
    icon: fa-tag
  1. 可以在 themes\maupassant\layout\tagcloud.pug 中修改标签云的样式。我将按列表列出的标签删除掉了。

调整 Tags 中列表标题的换行方式

在 style.css 中添加如下代码，当标题文本过长需要换行时，第二行会自动与日期的右边对齐。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/* 修改列表的内边距 */
.post-archive  ul {
    padding-left: 0.8em
}

/* 设置外层 li 为 flex 容器 */
.post-archive .listing li {
    display: flex; /* 使用 flex 布局 */
    gap: 0.1em; /* span 和 a 之间的间距 */
    margin-bottom: 0.2em; /* li 之间的垂直间距 */
    list-style-type: disc; /* 添加小圆点 */
    padding-left: 1em; /* 为小圆点留出空间 */
    position: relative; /* 为绝对定位的小圆点建立参考 */
}

/* 添加小圆点的位置调整 */
.post-archive .listing li::before {
    content: "•"; /* 使用点号作为小圆点 */
    position: absolute;
    left: 0;
    color: #666; /* 小圆点的颜色 */
}

/* 设置日期 span 的固定宽度 */
.post-archive .listing li .date {
    flex: 0 0 100px;
    /* 不伸缩，固定宽度 */
    text-align: left;
    /* 日期左对齐 */
}

/* 设置标题链接的样式 */
.post-archive .listing li a {
    flex: 1;
    /* 占据剩余空间 */
    text-align: left;
    /* 文本左对齐 */
    padding-left: 0;
    /* 移除默认内边距 */
    word-break: break-word;
    /* 允许单词内换行 */
    overflow-wrap: break-word;
    /* 长单词换行 */
}

修改主页标签的显示方式

原本的主题中，Tags 可能会换行，导致阅读不便，我可以模仿 编程随想的博客 Tags 样式，写为列表形式。

我修改了 themes\maupassant\layout_widget\tag.pug 中 tagcloud 的形式，利用 hexo 提供的 site.tags 变量重新写了标签云的显示形式

修改 tags 指向的页面样式

在 themes\maupassant\layout\tagcloud.pug 中， 添加了最近的二十篇文章标题显示，以及剩余的文章数量。

修改 tags 页面的显示文章数量

为了 tags 页面不分页，从而方便按标签、标题来搜索文章，我发现该主题的标签分页逻辑是由 hexo 自身控制的。修改 _config.xml 文件的如下内容，即可不分页

1
2
3
4
5
# Pagination
# 此处修改 tag 页面是否进行分页
## Set per_page to 0 to disable pagination
per_page: 0
pagination_dir: page

页面显示的配置

在2k显示屏上放大页面

在 style.scss 中添加如下代码

1
2
3
4
5
6
7
8
/* 当屏幕宽度为2048px及以上时, 将画面放大125%, 并且隐蔽底部滚动条 */
@media screen and (min-width: 2048px) {
    body {
        transform: scale(1.25);
        transform-origin: top;
        overflow-x: hidden;
    }
}

链接样式

原主题的链接很不显眼，故模仿端传媒的链接，将样式修改如下

1
2
3
4
.post .post-content a {
    color: #2b2b2b;
    background: linear-gradient(to top, rgba(40, 179, 195, 0.48) 20%, transparent 30%) 0 -1px;
}

字体配置

将字体堆栈改为

1
2
3
4
.pure-g [class *="pure-u"] {
    /* Set your content font stack here: */
    font-family: "PingFangSC-Regular", Helvetica, "Helvetica Neue", "Segoe UI", "Hiragino Sans GB", "Source Han Sans CN", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei"!important;
}

删去了 sans 字体的要求。

将字体颜色改为更深的黑色.

dark 模式

将 dark 模式的调整按钮固定到了菜单栏，并且修改 script 解决 DOM 未加载完全导致的找不到类的错误。

此时网站会根据时间和系统偏好自动设置暗\亮模式，并且会存储用户的上次选择一段时间。

图片配置

如何添加图片标签

修改 maupassant 主题，思路是模仿 fancybox 的调用方式。

  1. 在主题文件 after_footer.pug 中添加以下代码
1
2
if theme.customJS == true
  script(type='text/javascript', src=url_for(theme.js) + '/customJS.js')

这一步的目的是，当theme的配置文件中添加 customJS 的选项为 true 是，在页面加载完成后调用 js 脚本

  1. 在 source/js 中添加文件 customJS.js, 内容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 文档加载完毕后添加 figure caption
$(document).ready(function () {
    function addFigcaption() {
        $('img').each(function () {
            var alt = $(this).attr('alt');
            if (alt) {
                $(this).wrap('<p></p>');
                $(this).after('<figcaption>' + alt + '</figcaption>');
            }
        });
    }

    addFigcaption(); // 调用函数以在页面加载时执行

    // 在页面刷新后执行
    $(window).on('beforeunload', function () {
        addFigcaption();
    });
});

这一步是为了将图片包含在 p 标签中，并且 alt 属性非空时将图片的alt作为标签显示出来。

  1. 插入图片时利用如下格式，其中 alt 即为alt文本
1
{% asset_img post.jpg "花馍 'alt'" %}

页面刷新后继续执行，是因为加密插件会重新加载DOM，并且加载完后不会调用 ready，所以注册一个事件，刷新后继续执行该命令。

vscode 实用配置

插入图片

复制或者拖入图片到编辑器，会产生如下的代码

1
![Alt text](city-lights/%E5%A5%B3%E5%AD%A9%E7%9A%84%E9%9B%95%E5%83%8F.png)

可以通过一个脚本将其转化为 hexo 的图片标签语法如下

1
{% asset_img 女孩的雕像.png "女孩的雕像 '女孩的雕像'" %}

脚本文件为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import re
import urllib.parse
import sys
import os

def replace_encoded_string(match):
    encoded_string = match.group(1)
    decoded_string = urllib.parse.unquote(encoded_string)
    base_name = os.path.splitext(decoded_string)[0]
    return '{% asset_img ' + decoded_string + ' "' + base_name + ' \'' + base_name + '\'" %}'

with open(sys.argv[1], 'r+') as f:
    content = f.read()
    content = re.sub(r'!\[Alt text\]\([^)]*\/([^)]*)\)', replace_encoded_string, content)
    f.seek(0)
    f.write(content)
    f.truncate()

配置自定义任务，tasks.json 的内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Run replace command",
            "type": "shell",
            "command": "python3 replace.py ${file}",
            "problemMatcher": [],
            "presentation": {
                "reveal": "silent",
                "panel": "dedicated"
            }
        }
    ]
}

在任务面板中输入 run task， 选择 Run replace command 即可实现迅速的替换。

列表配置

默认的tags中的日期是用可变宽度，导致日期后的文字根据日期数字宽度的不同缩进不同，比较难看。

解决方式：修改style.scss中 .post-archive 的 .date 属性为 

1
2
3
4
5
6
7
8
.date {

        display: inline-block;
        width: 100px;
        text-align: left;
        font-family: monospace;
        color: #202020;
    }

即可为固定宽度。