hugo自定义首页

发表于 更新于 分类于 Waline： 阅读次数：

摘要: hugo自定义首页

写在前面

我使用的是next主题

https://github.com/hugo-next/hugo-theme-next-starter/blob/main/README.zh.md

可以直接看最后的总结

我想打开网站先跳转到我的导航页 所以想自定义首页

只有一个post目录

步骤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1.在博客根目录新建文件/layouts/index.html
这是首页的模版
提示: 这个文件可以是个纯粹的html文件;也可以使用hugo模版;
自己不会写可以参考/themes/hugo-theme-next/layouts/flinks/single.html
这是演示效果https://hugo-next.eu.org/flinks.html

2.新建文件/content/_index.md
这是首页 
文件内容
---
layout: "index"
---

首页模版会解析这个文件生成新的首页

3.新建文件/content/post/_index.md
这是博客列表的页面,和站点配置文件中的mainSections: ["post"]对应 是 需要显示文章的部分，即content目录下的文件夹名称
在这个文件中指定如下内容
1
2
3
---
url: /home
---

这个代码指定了访问文章列表的地址

测试效果

访问localhost:1414 进入到新的首页/layouts/index.html

/layouts/index.html这个文件可以是hugo模版 也可以是个纯粹的html文件 看需求

我把/themes/hugo-theme-next/layouts/flinks/single.html这个文件改名复制到/layouts/index.html

首页就变成了友情链接

访问localhost:1414/home 则进入旧的首页即文章列表

新方法,增加配置指定url

1
2
3
4
在主配置文件增加如下代码 ,就不用新建/content/post/_index.md文件了
permalinks:
  section:
    post: /home/

多个post目录对应多个url

步骤

如果我的配置是

1
mainSections: ["post","post2"]

有2个post文件夹呢?

1
2
3
4
5
新建文件/content/post2/_index.md
添加内容
---
url: /home2
---

这样访问localhost:1414/home 则进入post文件夹列表

这样访问localhost:1414/home2 则进入post2文件夹列表

如果post和post2下不新增_index.md

直接访问http://localhost:1414/post和 http://localhost:1414/post2/ 也可以访问文件列表

新方法,增加配置指定url

1
2
3
4
5
在主配置文件增加如下代码 ,就不用新建/content/post/_index.md文件了
permalinks:
  section:
    post: /home/
    post2: /home2/

多个post对应渲染在一个url

如果我想post和post2展示在一个列表呢?

复制模版文件

1
/themes/hugo-theme-next/layouts/home.html

到

1
/layouts/home_page.html

注意: 我测试index.html和home的优先级会冲突,建议使用index.html 给home.html改名!(如果有人知道为什么可以评论告诉我下)

新建一个page文件

1
\content\home\_index.md

注意是**_index.md** 会被模版渲染

如果是index.md则直接展示页面内容(不带下划线)

文件内容,和上边的home模版对应

1
2
3
---
layout: "home_page"
---

访问http://localhost:1414/home/ 就是首页了

如果你想改为其他链接你就新建\content\{你的URL}\_index.md文件

总结(共5个文件)

新增自定义导航页模版

1
2
3
4
5
1.在博客根目录新建文件/layouts/index.html
这是首页的模版
提示: 这个文件可以是个纯粹的html文件;也可以使用hugo模版;
自己不会写可以参考/themes/hugo-theme-next/layouts/flinks/single.html
这是演示效果https://hugo-next.eu.org/flinks.html

我修改的模版如下(需要配合data数据)

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
{{ define "title" }}{{ .Title }} - {{ .Site.Title }}{{ end }}

{{ define "main_inner_class" }}flinks posts-expand{{ end }}

{{ define "main" }}
<style>
	@media (max-width: 767px) {
		.flinks-list-items {
		  display: grid;
		  grid-template-columns: repeat(1, minmax(330px, 1fr));
		}
		.flinks-block .flinks-list-items .flinks-list-item{
			width: 100%;
			display: block;
			justify-content: center;
			align-items: center;
		}
		.flinks-block .flinks-list-items .flinks-list-item .flinks-item-name {
			display: block;
		}
		.flinks-block .flinks-list-items .flinks-list-item .flinks-item-desc {
			display: block;
		}
	}
  </style>
<div class="flinks-block">
<h1 class="flinks-header">{{ .Title }}</h1>
<div class="flinks-body">
<div class="flinks-lists">
  {{ $flinksData := "" }}
  {{ if .IsTranslated }}
    {{ $flinksData = index .Site.Data.navigation .Lang }}
  {{ else }}
    {{ $flinksData = .Site.Data.navigation }}
  {{ end }}
  {{ range $flinksData }}
  <div class="flinks-list">
    <div class="flinks-list-title">{{ .FLinksTitle | safeHTML }}</div>
    <div class="flinks-list-desc">{{ .FLinksDesc | safeHTML }}</div>
    <div class="flinks-list-items">
    {{ range .FLinksList }}
    {{ if .visible }}
    <div class="flinks-list-item">
      <a href="{{ .link }}" rel="external nofollow noreferrer" title=" {{ .name }}" target="_blank">
        <div class="flinks-item-icon">
          <img class="no-lightbox entered loaded" src="{{ .avatar }}" alt="{{ .name }}"/>
        </div>
        <div class="flinks-item-name">{{ .name  | safeHTML }}</div>
        <div class="flinks-item-desc" title="{{ .desc }}">{{ .desc | safeHTML }}</div>
      </a>
    </div>
    {{ end }}
    {{ end }}
  </div>
  </div>
  {{ end }}
</div>
<div class="flinks-list-footer"><hr/></div>
<div class="flinks-page-desc">{{ .Content }}</div>
</div>
</div>
{{ end }}

data数据

单语言文件/data/navigation.yaml

如果是多语言就是

/data/navigation/zh-cn.yaml

/data/navigation/en-us.yaml

内容参考

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
- FLinksTitle: 博客
  FLinksDesc: 这是我的博客。
  FLinksList:
    - name: 博客首页
      desc: 你必须很努力,才能看起来毫不费力
      avatar: https://gohugo.io/favicon-32x32.png
      link: /home
      timeout: 2
      visible: true

    - name: Hexo Next Demo
      desc: Hexo + Next主题演示站点
      avatar: https://hugo-next.eu.org/imgs/hugo_next_avatar.png
      link: https://hexo-demo.zlay.fun/
      timeout: 2
      visible: true
    
- FLinksTitle: 工具
  FLinksDesc: 这是我的工具
  FLinksList:
    - name: hugo Next Demo
      desc: Hugo + NexT主题演示站点
      avatar: https://a.happy2008.top/imgs/stayhome-small.png
      link: https://hugo.zlay.fun/
      timeout: 2
      visible: true

复制首页模版

1
2
3
4
复制
/themes/hugo-theme-next/layouts/home.html
到
/layouts/home_page.html

新建文件/content/_index.md

文件内容

1
2
3
4
---
title: "导航"
layout: "index"
---

如果参考flinks 他会把2个文件

新建\content\home\_index.md

文件内容

1
2
3
4
---
title: "首页"
layout: "home_page"
---

重启测试即可

如何恢复回默认首页

更改/content/_index.md的内容

1
layout: "home_page"