基于Hexo的个人博客静态网站迁移到Hugo并定制theme

2023-05-26 0 771

北迁的其原因:Hugo聚合动态网页速率飞速,较之如前所述node.js的Hexo快太多了

具体来说加装Hugo

加装形式和运转形式看官网:gohugo.io,或是gohugo.org

昌明md文档北迁

把Hexo产品目录下的昌明md文档复制到hugo运转产品目录/content/post产品目录

保证文档结尾文本文档格式如下表所示,不然title、date、tags可能会抽取严重错误

2.1 date的文档格式是YYYY-mm-dd, tags的文档格式是字符串1

2

title: 副标题

3

date: 2020-09-15 16:16:05

4

tags: [“hexo”,”hugo”,”theme”]

5

theme订制

以官网所推荐主轴hyde为例 1

cd themes

2

git clone https://github.com/spf13/hyde.git

3

#产品目录内部结构如下表所示

4

├── CHANGELOG.md

5

├── LICENSE.md

6

├── README.md

7

├── archetypes

8

│   └── default.md

9

├── go.mod

10

├── images

11

│   ├── screenshot.png

12

│   └── tn.png

13

├── layouts

14

│   ├── 404.html

15

│   ├── _default

16

│   │   ├── baseof.html

17

│   │   ├── list.html

18

│   │   └── single.html

19

│   ├── index.html

20

│   └── partials

21

│   ├── head.html

22

│   ├── head_fonts.html

23

│   ├── hook_head_end.html

24

│   └── sidebar.html

25

├── static

26

│   ├── apple-touch-icon-144-precomposed.png

27

│   ├── css

28

│   │   ├── hyde.css

29

│   │   ├── poole.css

30

│   │   ├── print.css

31

│   │   └── syntax.css

32

│   └── favicon.png

33

└── theme.toml

增加搜索功能

参考网上分享的方法,使用fuse.min.js

修改css增加翻页功能

layouts/index.html #增加文本

1

{{ $paginator := .Paginate (where .Data.Pages “Type” “post”) }}

2

{{ range $paginator.Pages }}

3

{{ .Render “index” }}

4

{{ end }}

5

{{ partial “pagination.html” $paginator }}

layouts/partials/pagination.html #增加模板文档

12

{{if .HasPrev}}

3

← 上一页

4

{{end}}

5

Page {{ .PageNumber }} of {{.TotalPages}}

6

{{if .HasNext}}

7

下一页 →

8

{{end}}

9

订制theme后的产品目录内部结构

theme以开源https://github.com/jangworn/hugo-theme-ling

1

├── LICENSE

2

├── README.md

3

├── archetypes

4

│   └── default.md

5

├── images

6

│   └── theme.png

7

├── layouts

8

│   ├── 404.html

9

│   ├── _default

10

│   │   ├── baseof.html #base模板

11

│   │   ├── index.json #搜索要用到

12

│   │   ├── list.html #tag列表页

13

│   │   └── single.html #昌明详情页

14

│   ├── index.html

15

│   └── partials

16

│   ├── footer.html #中文网站footer

17

│   ├── head.html #中文网站header

18

│   ├── pagination.html #翻页

19

│   └── sidebar.html #sidebar

20

├── static

21

│   ├── css

22

│   │   └── style.css #style

23

│   ├── favicon.png

24

│   ├── img

25

│   └── js

26

│   ├── fuse.min.js #搜索要用到

27

│   └── search.js #搜索要用到

28└── theme.toml

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务