手把手使用Hugo搭建网站-中级篇
文章目录
1.2. 手把手使用hugo搭建网站进阶篇
1.2.1. 自定义菜单
- 配置定义菜单栏
- layouts/partials/sidebar.html
1 <aside class="sidebar"> 2 <div class="container sidebar-sticky"> 3 <div class="sidebar-about"> 4 <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a> 5 <p class="lead"> 6 {{ with .Site.Params.description }} {{.}} {{ else }}{{end}} 7 </p> 8 </div> 9 10 <nav> 11 12 <ul class="sidebar-nav"> 13 {{ $currentPage := . }} 14 {{ range .Site.Menus.main -}} 15 <li> <a class="sidebar-nav-item{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a> 16 </li> 17 {{- end }} 18 19 </ul> 20 <ul class="sidebar-nav"><br/><br/><br/><br/><br/><br/><br/></ul> 21 </nav> 22 23 <p>{{ with .Site.Params.copyright }}{{.}}{{ else }}© xxx 公司 {{ now.Format "2006"}}. All rights reserved. {{end}} </p> 24 </div> 25 </aside>- site/config.toml
1 baseURL = "http://clouda3.github.io/" 2 languageCode = "en-us" 3 title = "Clouda3" 4 theme = "hyde" 5 enableRobotsTXT="true" 6 [permalinks] 7 post = "/:filename/" 8 9 [imaging] 10 quality = 99 11 12 [params] 13 description = "" 14 homeMetaContent = "clouda3 personal blog" 15 footer = "clouda3的个人网站" 16 date = "2019-04-10 14:05:50" 17 codePenUser = "someUser" 18 katex = true 19 20 21 [menu] 22 [[menu.main]] 23 identifier = "home" 24 name = "home" 25 url = "/" 26 weight = 1 27 [[menu.main]] 28 identifier = "blog" 29 name = "Blog" 30 url = "/posts/" 31 weight = 2 32 [[menu.main]] 33 identifier = "tags" 34 name = "Tags" 35 url = "/tags/" 36 weight = 3 37 [[menu.main]] 38 identifier = "about" 39 name = "About" 40 url = "/about" 41 weight = 4 42 [[menu.main]] 43 identifier = "rss" 44 name = "RSS" 45 url = "/index.xml" 46 weight = 5 - 内容页面关联菜单
1.2.2. 自定义tag/category/keyword
-
无论是tag,category 还是keyword 都是用来分类的，在hugo里面没有太多的区别，都可以自定义,先演示页面keywords
- 自定义页面的keywords,xxx.md
1 --- 2title: "First" 3date: 2019-11-01T16:08:13+08:00 4draft: false 5tags: ["aws"] 6keywords: ["aws","first"] 7---- layouts/partials/head.html
1 {{ with .Params.keywords }}<meta name="keywords" content="{{ range $i, $e := . }}{{ if $i }} {{ end }}{{ $e }}{{ end }}">{{ end }} -
tag和categories
- xxx.md
1 --- 2 title: "First" 3 date: 2019-11-01T16:08:13+08:00 4 draft: false 5 categories: ["亚马逊云","认证考试"] 6 tags: ["aws"] 7 keywords: ["aws","first"] 8 ---- 显示所有的tag,定义模板layouts/tags/index.html
1 {{ define "main" -}} 2 <ul> 3 {{ $type := .Type }} 4 {{$type}} 5 {{ range $key, $value := .Site.Taxonomies.tags.Alphabetical }} 6 {{ $name := .Name }} 7 {{ $count := .Count }} 8 {{ with $.Site.GetPage (printf "/%s/%s" $type $name) }} 9 <li><a href="{{ .Permalink }}">{{ $name }}</a> {{ $count }}11111111</li> 10 {{ end }} 11 {{ end }} 12 </ul> 13 14 {{- end }}- 创建tag显示页面tags/index.md
1 --- 2 title: "Posts" 3 date: 2019-11-01T16:10:12+08:00 4 type: "tags" 5 layout: "index" 6 ---- 显示每个tag关联的页面,创建模板layouts/taxonomy/tag.html
1 {{ define "main" -}} 2 <ul> 3 {{ range .Data.Pages }} 4 <li> 5 <a href="{{.RelPermalink}}">{{ .Title }}</a> 6 </li> 7 {{ end }} 8 </ul> 9 {{- end }}
1.2.3. 创建header 和footer
1.2.4. 自定义边栏
1.2.5. 列举最新的文章
- 例举最新或者关联的文章
- 創建theme/layout/partial/related.html 模板
1{{ $related := .Site.RegularPages.Related . | first 5 }}
2{{ with $related }}
3<h4>相關頁面</h4>
4<ul>
5 {{ range . }}
6 <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
7 {{ end }}
8</ul>
9{{ end }}
- 在layout/_default/single.html模板中加入related.html模板的引用
1 0{{ define "main" -}}
1<div class="post">
2 <h1>{{ .Title }}</h1>
3 <time datetime={{ .Date.Format "2006-01-02T15:04:05Z0700" }} class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
4 {{ .Content }}
5</div>
6
7{{ if .Site.DisqusShortname -}}
8<h2>Comments</h2>
9{{ template "_internal/disqus.html" . }}
10{{- end }}
11
12{{ partial "related.html" . }}
13{{- end }}
- 這個會讓keyword關聯的頁面顯示出來，但是時間有先後的，晚發的文章裡面有老的文章的連接，老的文章没有新的文章的链接
1.2.6. 创建列表和对应的模板
- posts/_index.md 和 posts/index.md的区别
- _index.md默认是列表页面（branch bundle）对应的layout是 list.html,index.md（leaf bundle）对应的layout是 single.html
- 默认对应模板就是layouts/_default/list.html 和layouts/_default/single.html
- 如果自定义模板可以{theme}/layouts/posts/list.html {theme}/layouts/posts/single.html
- 也可以直接在layouts/posts/list.html 和/layouts/posts/single.html 网站的模板优先级别高于主题模板
1.2.7. 列表创建摘要
1 {{ define "main" -}}
2 <div class="posts">
3 {{ range .Site.RegularPages -}}
4 <article class="post">
5 <h1 class="post-title">
6 <a href="{{ .Permalink }}">{{ .Title }}</a>
7 </h1>
8 <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
9 {{ .Summary }}
10 {{ if .Truncated }}
11 <div class="read-more-link">
12 <a href="{{ .RelPermalink }}">Read More…</a>
13 </div>
14 {{ end }}
15 </article>
16 {{- end }}
17 </div>
18 {{- end }}
1.2.8. 分頁
- 默認使用_internal/pagination.html
- 可以自定分頁模板 layouts/partials/pagination.html
1
2 {{ $paginator := .Paginate (where .Pages "Type" "posts") }}
3 <ul>
4 {{ range $paginator.Pages }}
5 <li>
6 <span><a href="{{ .Permalink }}">{{ .Title }}</a> <time class="pull-right post-list" datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}">{{ .Date.Format "Mon, Jan 2, 2006" }}</time></span>
7 </li>
8 {{- end }}
9
10 </ul>
11
12 {{ $pag := $.Paginator }}
13 {{ if gt $pag.TotalPages 1 }}
14 <ul class="pagination">
15 {{ with $pag.First }}
16 <li class="page-item">
17 <a href="{{ .URL }}" class="page-link" aria-label="First"><span aria-hidden="true">««</span></a>
18 </li>
19 {{ end }}
20 <li class="page-item{{ if not $pag.HasPrev }} disabled{{ end }}">
21 <a {{ if $pag.HasPrev }}href="{{ $pag.Prev.URL }}"{{ end }} class="page-link" aria-label="Previous"><span aria-hidden="true">«</span></a>
22 </li>
23 {{ $ellipsed := false }}
24 {{ $shouldEllipse := false }}
25 {{ range $pag.Pagers }}
26 {{ $right := sub .TotalPages .PageNumber }}
27 {{ $showNumber := or (le .PageNumber 3) (eq $right 0) }}
28 {{ $showNumber := or $showNumber (and (gt .PageNumber (sub $pag.PageNumber 2)) (lt .PageNumber (add $pag.PageNumber 2))) }}
29 {{ if $showNumber }}
30 {{ $ellipsed = false }}
31 {{ $shouldEllipse = false }}
32 {{ else }}
33 {{ $shouldEllipse = not $ellipsed }}
34 {{ $ellipsed = true }}
35 {{ end }}
36 {{ if $showNumber }}
37 <li class="page-item{{ if eq . $pag }} active{{ end }}"><a class="page-link" href="{{ .URL }}">{{ .PageNumber }}</a></li>
38 {{ else if $shouldEllipse }}
39 <li class="page-item disabled"><span aria-hidden="true"> … </span></li>
40 {{ end }}
41 {{ end }}
42 <li class="page-item{{ if not $pag.HasNext }} disabled{{ end }}">
43 <a {{ if $pag.HasNext }}href="{{ $pag.Next.URL }}"{{ end }} class="page-link" aria-label="Next"><span aria-hidden="true">»</span></a>
44 </li>
45 {{ with $pag.Last }}
46 <li class="page-item">
47 <a href="{{ .URL }}" class="page-link" aria-label="Last"><span aria-hidden="true">»»</span></a>
48 </li>
49 {{ end }}
50 </ul>
51 {{ end }}
- layouts/_default/list.html
1{{ define "main" -}}
2
3 {{ partial "pagination.html" . }}
4
5{{- end }}
- 這樣還是有些問題，按鈕豎排，改一下樣式表 static/css/hyde.css
1 /** vvv Add lines below */
2 ul.pagination {
3 list-style-type: none;
4 }
5
6 ul.pagination > li {
7 display: inline;
8 }
9
1.2.9. 创建统计
- 无论是baidu还是google还是chinaz都有相关的统计代码，只需要把这一段代码加入到我们的页面就可以了，以google来举例
- 申请google的analytics，会得到一段代码,把这段代码加入到layouts/partials/analytics.html
1 <!-- Global site tag (gtag.js) - Google Analytics -->
2 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxx"></script>
3 <script>
4 window.dataLayer = window.dataLayer || [];
5 function gtag(){dataLayer.push(arguments);}
6 gtag('js', new Date());
7
8 gtag('config', 'UA-152981067-1');
9 </script>
10
- 把analytics.html 加入到layouts/_default/baseof.html
1 {{ partial "head.html" . }}
2 <body class="{{ .Site.Params.themeColor }} {{if .Site.Params.layoutReverse}}layout-reverse{{end}}">
3 {{ partial "sidebar.html" . }}
4 <main class="content container">
5 {{ block "main" . -}}{{- end }}
6 </main>
7
8 {{ partial "google-analytics.html" . }}
9 </body>
10 </html>
1.2.10. 创建rss
- 什么是rss就是创建一个网站信息的xml文件，别人通过这个xml文件可以把你网站上的信息聚合到别的地方
- 比如你用google rss可以聚合你喜欢的各个体育网站，而不用挨个打开这些网站，让这些网站的信息统一显示在一个页面上.
- 默认hogo使用用内部rss:layouts/_internal/_default/rss.xml
1 {{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\" ?>" | safeHTML }} 2 <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> 3 <channel> 4 <title>{{ if eq .Title .Site.Title }}{{ .Site.Title }}{{ else }}{{ with .Title }}{{.}} on {{ end }}{{ .Site.Title }}{{ end }}</title> 5 <link>{{ .Permalink }}</link> 6 <description>Recent content {{ if ne .Title .Site.Title }}{{ with .Title }}in {{.}} {{ end }}{{ end }}on {{ .Site.Title }}</description> 7 <generator>Hugo -- gohugo.io</generator>{{ with .Site.LanguageCode }} 8 <language>{{.}}</language>{{end}}{{ with .Site.Author.email }} 9 <managingEditor>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</managingEditor>{{end}}{{ with .Site.Author.email }} 10 <webMaster>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</webMaster>{{end}}{{ with .Site.Copyright }} 11 <copyright>{{.}}</copyright>{{end}}{{ if not .Date.IsZero }} 12 <lastBuildDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</lastBuildDate>{{ end }} 13 {{ with .OutputFormats.Get "RSS" }} 14 {{ printf "<atom:link href=%q rel=\"self\" type=%q />" .Permalink .MediaType | safeHTML }} 15 {{ end }} 16 {{ range .Pages }} 17 <item> 18 <title>{{ .Title }}</title> 19 <link>{{ .Permalink }}</link> 20 <pubDate>{{ .Date.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }}</pubDate> 21 {{ with .Site.Author.email }}<author>{{.}}{{ with $.Site.Author.name }} ({{.}}){{end}}</author>{{end}} 22 <guid>{{ .Permalink }}</guid> 23 <description>{{ .Summary | html }}</description> 24 </item> 25 {{ end }} 26 </channel> 27 </rss> 28 29 ```