PaperMod 主题个性化

前言

本站使用 Hugo + PaperMod 主题， 并对样式进行了个性化修改，你可以在文中浏览到站点绝大部分的样式。

文本

部分样式通过 HTML 标签实现, 需开启配置:

1
2
3
4

markup:
  goldmark:
    renderer:
      unsafe: true

代码

行内代码

Tofuwine’s Blog Powered by Hugo & PaperMod.

代码块

主要配色参考:

• light-theme: monokailight
• dark-theme: github-dark

标准样式

1
2
3
4
5
6

public class HelloHugo {

    public static void main(String[] args) {
        System.out.println("Hello Hugo!");
    }
}

自定义标题

1
2
3
4
5
6

public class HelloHugo {

    public static void main(String[] args) {
        System.out.println("Hello Hugo!");
    }
}

自定义起始行数 & 高亮指定行

100
101
102
103
104
105
106
107
108
109

func GetTitleFunc(style string) func(s string) string {
  switch strings.ToLower(style) {
    case "go":
      return strings.Title
    case "chicago":
      return transform.NewTitleConverter(transform.ChicagoStyle)
    default:
      return transform.NewTitleConverter(transform.APStyle)
  }
}

折叠代码块

Since: 2024-05-09

1
2
3
4
5
6

public class HelloHugo {

    public static void main(String[] args) {
        System.out.println("Hello Hugo!");
    }
}

更多

• ✅ 自定义语言类型显示名称 (Since 2024-05-07)
• ✅ 语法高亮使用自定义语言类型 (Since 2024-05-09)

引用

这是一段引用内容。

ShortCode

admonition

移植自 Hugo 的 Loveit 主题。

目前支持的 admonition 类型:

hl

文本高亮。效果如下：

目录

章节默认以 H2 起始，H5 结束。

主要改动:

• 移动至屏幕左侧显示
  教程参考

  Hugo博客目录放在侧边 | PaperMod主题 —— Sulv
• 目录自动折叠/展开

你可以滚动界面观察左侧目录体验效果。

悬浮按钮

前往评论区 (Go to comment)

前往评论区的悬浮按钮

你可以在点击右侧对应的悬浮按钮进行体验。

切换主题 (Theme toggle)

切换主题按钮。主题自带切换按钮在页面顶部，在阅读文章时切换很不方便 (即使有快捷键，也对访客不是很友好)。

重新实现了一个悬浮按钮实现主题切换，同时保留 PaperMod 的切换按钮 (已禁用)。

可以点击右侧对应的悬浮按钮进行体验。

回到顶部 (Go to top)

回到顶部悬浮按钮, 显示进度。

页面跳动效果

扩展实现了当用户滚动到页面最上方/最下方后，页面轻微的跳动提示用户已到顶/底。

评论

📢 攻略已发布: PaperMod 集成 Giscus 评论

赞赏

提供赞赏按钮，点击按钮显示微信 & 支付宝收款码，读者可扫码打赏作者。

扩展实现了：

• 按钮的动态效果
• 赞赏描述 (支持国际化)
• 赞赏码/收款码弹出显示 (支持主题切换)
• 文章自定义赞赏按钮显示内容 rewardButton
• 文章自定义赞赏描述 rewardSubtitle
• 赞赏描述开关控制 hideRewardSubtitle

搜索

📢 攻略已发布: PaperMod 添加搜索页

归档/时间轴

置顶、转载、草稿等标识

在文章页、文章列表页、归档页等界面显示置顶、转载、草稿等标识。

• 置顶：文章页、文章列表页
• 转载：文章页、文章列表页、归档页
• 草稿：归档页（文章页、文章列表页主题自带图标显示）

灯箱

使用 Fancybox 实现图片灯箱效果。

Mermaid diagrams

Since: 2024-05-07

按官方文档添加 code block render hook。

效果参考：Markdown 作图 —— Mermaid diagrams

已知缺陷：

• 未适配 Dark 主题。请切换使用 Light 主题预览。

KaTex

Since: 2024-05-09

添加对 LaTex 公式/内联公式的支持。以下是效果展示：

块显示

内联显示

两数和的平方，等于它们的平方和加上它们的积的2倍。 即：$(a+b)^2=a2+2ab+b^2$

自定义页面

友链

关于

Since: 2024-05-06

显示 关于 界面。

预览：点击此处

最新

Since: 2024-05-11

显示最新文章列表

预览：点击此处

文章版权声明

在文章末尾添加版权声明。

结尾

除了上述内容，作者还对站点很多细节进行了优化。但由于站点搭建初期改动地方较多且频繁，很多内容并没有详尽的记载，在此就不过多赘述了。