Hugo主题FixIt简单介绍

Hugo主题FixIt

之前一直在用的是LoveIt主题,最近在搜索LoveIt主题的用法时,偶尔发现了FixIt主题,因为LoveIt已经有很久没有更新了,而FixIt主题是LoveIt主题的fork版本。目前我的主题已经切换到了FixIt主题了。

为什么会换成FixIt主题?

我换成FixIt主题的主要原因有以下几点原因。

1. 支持mermaid

这个遇到要画图的场景还是特别的有用的,具体可以参考一下这篇文章,介绍得非常清楚了: https://pre.fixit.lruihao.cn/zh-cn/extended-shortcode-mermaid/

  • graph
1
2
3
4
5
6
{{< mermaid >}}
graph LR
  Hugo-->FixIt
  FixIt-->支持子菜单
  FixIt-->支持memaid
{{< /mermaid >}}

效果图:

  • pie饼图:
1
2
3
4
5
6
{{< mermaid >}}
pie
  "Linux" : 15
  "Skynet" : 8
  "Vim" : 6
{{< /mermaid >}}

2. 支持echats

2. config配置支持添加公安备案

3. 配置文件更加简洁

4. 菜单更友好

  • 菜单支持icon
  • 可以配置二级菜单,二级菜单设置好parent属性,parent的值设置为父级菜单的identifier属性就可以了。
 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
[menu]
  [[menu.main]]
    identifier = "posts"
    # you can add extra information before the name (HTML format is supported), such as icons
    pre = ""
    # you can add extra information after the name (HTML format is supported), such as icons
    post = ""
    name = "所有文章"
    url = "/posts/"
    # title will be shown when you hover on this menu link
    title = ""
    weight = 1
    [menu.main.params]
      icon = "fa-solid fa-archive"

  [[menu.main]]
    identifier = "categories"
    pre = ""
    post = ""
    name = "分类"
    url = "/categories/"
    title = ""
    weight = 2
    [menu.main.params]
      icon = "fa-solid fa-th"


  [[menu.main]]
    parent = "categories"
    identifier = "linux"
    pre = "<i class='fa-brands fa-readme fa-fw fa-sm'></i>"
    post = ""
    name = "linux"
    url = "/categories/linux/"
    title = ""
    weight = 201


  [[menu.main]]
    parent = "categories"
    identifier = "skynet"
    pre = "<i class='fa-brands fa-readme fa-fw fa-sm'></i>"
    post = ""
    name = "skynet"
    url = "/categories/skynet/"
    title = ""
    weight = 202

  [[menu.main]]
    parent = "categories"
    identifier = "vim"
    pre = "<i class='fa-brands fa-readme fa-fw fa-sm'></i>"
    post = ""
    name = "vim"
    url = "/categories/vim/"
    title = ""
    weight = 203


  [[menu.main]]
    parent = "categories"
    identifier = "development-manual"
    pre = "<i class='fa-brands fa-readme fa-fw fa-sm'></i>"
    post = ""
    name = "开发手册"
    url = "/categories/development-manual/"
    title = ""
    weight = 204

  [[menu.main]]
    identifier = "tags"
    pre = ""
    post = ""
    name = "标签"
    url = "/tags/"
    title = ""
    weight = 3
    [menu.main.params]
      icon = "fa-solid fa-tags"
  [[menu.main]]
    identifier = "about"
    pre = ""
    post = ""
    name = "关于"
    url = "/about/"
    title = ""
    weight = 7
    [menu.main.params]
    icon = "fa-solid fa-user-tie"
  [[menu.main]]
    identifier = "search"
    pre = "<i class='fas fa-fw fa-search'></i>"
    post = ""
    name = "搜索"
    url = "/search/"
    title = "搜索"
    weight = 8

echats demo

demo1:

demo2:

demo3:

demo4:

总结

目前我自己也只是粗略地了解了一下Hugo和它的FixIt主题,其中还有许多细节的东西还不是特别地清楚。后续有空了再折腾一下细节。

参考