Hugo模板使用介绍,hugo的主题制作最主要的部分就是模板,模板的基础部分包含代码块,注释,变量,包含的方式等等. 1. 基础部分 1.1. 访问预定义变量 1.2. 访问方法 1.3. 访问对象的方法或者属性 1.4. 分组代码块 1.5. 多行代码 1.6. 多行字符串 2. Variables 3. Functions 4. Include 5. Partial 6. Template 7. Logic 7.1. Iteration迭代 7.2. Conditionals条件判断 8. Pipes管道 9. Context上下文 10. 去除空白字符串 11. Comments注释 12. Hugo Parameters 12.1. Page Parameter 访问配置文件参数 1. 基础部分 参考: Introduction 1.1. 访问预定义变量 1 2 {{ .Title }} {{ $address }} 1.2. 访问方法 用空格分开参数 1 2 3 {{ FUNCTION ARG1 ARG2 .. }} 示例 {{ add 1 2 }} 1.3. 访问对象的方法或者属性 用.来进行访问 1 {{ .Params.bar }} 1.4. 分组代码块 用圆括号来进行分组 1 {{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }} 1.5. 多行代码 用大括号包裹的代码块可以写成多行 1 2 3 4 {{ if or (isset .Params "alt") (isset .Params "caption") }} 1.6. 多行字符串 1 2 {{ $msg := `Line one. Line two.` }} 2. Variables .代表当前scope 用$来定义个访问局部变量 1 2 {{ $address := "123 Main St." }} {{ $address }} 3. Functions template functions有预定义的大量模板变量 方法调用 1 2 3 4 {{ add 1 2 }} <!-- prints 3 --> {{ lt 1 2 }} <!-- prints true (i.e., since 1 is less than 2) --> 4. Include 5. Partial 包含模板 1 {{ partial "header.html" . }} 6. Template 在老版本是用来包含partial模板的,现在只有在内部模板包含的时候才会使用 1 2 包含内部的opengraph.html {{ template "_internal/opengraph.html" . }} 7. Logic 7.1. Iteration迭代 需要注意的是,有些语法会改变scope,比如range语法块,内部的scope就外部的不一样,.的意义就改变了 用.来直接访问迭代的变量 1 2 3 {{ range $array }} {{ . }} <!-- The . represents an element in $array --> {{ end }} 定一个局部变量 1 2 3 {{ range $elem_val := $array }} {{ $elem_val }} {{ end }} 加上索引 1 2 3 {{ range $elem_index, $elem_val := $array }} {{ $elem_index }} -- {{ $elem_val }} {{ end }} map迭代 1 2 3 {{ range $elem_key, $elem_val := $map }} {{ $elem_key }} -- {{ $elem_val }} {{ end }} range还有个特殊的使用方式,可以判断可迭代的变量是否为空 1 2 3 4 5 {{ range $array }} {{ . }} {{else}} <!-- This is only evaluated if $array is empty --> {{ end }} 7.2. Conditionals条件判断 关键字 if else with or and not 在hugo的模板语言里,下面得都为false false 0 或者一个空的array,map,slice或者string with和range一样,会重写context,那么.的意义就变了,if不会重写context 1 2 3 {{ if isset .Params "title" }} <h4>{{ index .Params "title" }}</h4> {{ end }} and和or 1 {{ if (and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")) }} 8. Pipes管道 用过django的话,管道应该不会陌生,对变量进行处理,stream模式的方法调用,其实就是简化的函数调用 1 2 3 {{ shuffle (seq 1 5) }} 可以写成 {{ (seq 1 5) | shuffle }} isset的使用示例 1 2 3 {{ if isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" }} Stuff Here {{ end }} 这样看起来就清晰很多,比下面这种写很多括号的方式要好理解多了 1 2 3 {{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr") }} Stuff Here {{ end }} hugo的模板默认会转义html语言,safeHTML可以保持原样输出 1 2 3 {{ "<!--[if lt IE 9]>" | safeHTML }} <script src="html5shiv.js"></script> {{ "<![endif]-->" | safeHTML }} 9. Context上下文 .代表当前context 在顶部模板里,.就是全局变量数据集 在迭代器里.是当前的item 如果想使用外部context的数据,可以这样 1 2 3 4 5 6 7 8 9 {{ $title := .Site.Title }} <ul> {{ range .Params.tags }} <li> <a href="/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li> {{ end }} </ul> 或者用$符号 1 2 3 4 5 6 7 8 <ul> {{ range .Params.tags }} <li> <a href="/tags/{{ . | urlize }}">{{ . }}</a> - {{ $.Site.Title }} </li> {{ end }} </ul> 10. 去除空白字符串 用- 1 2 3 4 5 6 7 <div> {{ .Title }} </div> 会输出 <div> Hello, World! </div> 1 2 3 4 5 <div> {{- .Title -}} </div> 会输出 <div>Hello, World!</div> 这几种都会被自动处理 space horizontal tab carriage return newline 11. Comments注释 {{/* and */}} 1 Bonsoir, {{/* {{ add 0 + 2 }} */}}Eliott. html注释 1 {{ printf "<!-- Our website is named: %s -->" .Site.Title | safeHTML }} 12. Hugo Parameters 站点配置里的元数据 front matter 12.1. Page Parameter 1 2 3 4 5 6 --- title: Roadmap lastmod: 2017-03-05 date: 2013-11-18 notoc: true --- 如果要访问notoc 1 2 3 4 5 6 7 8 9 10 11 {{ if not .Params.notoc }} <aside> <header> <a href="#{{.Title | urlize}}"> <h3>{{.Title}}</h3> </a> </header> {{.TableOfContents}} </aside> <a href="#" id="toc-toggle"></a> {{ end }} 访问站点配置里的变量 1 2 3 4 [params] copyrighthtml = "Copyright © 2017 John Doe. All Rights Reserved." sidebarrecentlimit = 5 twitteruser = "spf13" 1 2 3 4 5 {{ if .Site.Params.copyrighthtml }} <footer> <div class="text-center">{{.Site.Params.CopyrightHTML | safeHTML}}</div> </footer> {{ end }} 使用with来直接访问parameter 1 2 3 4 5 6 {{ with .Site.Params.twitteruser }} <div> <a href="https://twitter.com/{{.}}" rel="author"> <img src="/images/twitter.png" width="48" height="48" title="Twitter: {{.}}" alt="Twitter"></a> </div> {{ end }} 示例:配置显示数量 1 2 3 4 5 6 7 8 <nav> <h1>Recent Posts</h1> <ul> {{- range first .Site.Params.SidebarRecentLimit .Site.Pages -}} <li><a href="{{.RelPermalink}}">{{.Title}}</a></li> {{- end -}} </ul> </nav> 示例:显示某个section下的近期文章 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <h4>Upcoming Events</h4> <ul class="upcoming-events"> {{ range where .Pages.ByDate "Section" "events" }} {{ if ge .Date.Unix now.Unix }} <li> <!-- add span for event type --> <span>{{ .Type | title }} —</span> {{ .Title }} on <!-- add span for event date --> <span>{{ .Date.Format "2 January at 3:04pm" }}</span> at {{ .Params.place }} </li> {{ end }} {{ end }} </ul> 未整理的 给文章标题自动增加锚点 方法一 利用hugo的过滤器来进行正则表达式替换 single.html 1 {{ partial "main/headline-hash.html" .Content }} headline-hash.html 1 {{ . | replaceRE "(<h[2-9] id=\"([^\"]+)\".+)(</h[2-9]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true">#</a> ${3}` | safeHTML }} 然后给anchor一些样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .anchor { visibility: hidden; padding-left: 0.5rem; } h1,h2,h3,h4,h5,h6 { a.anchor { opacity: 0; font-size: 0.75em; vertical-align: middle; text-decoration: none; } &:hover a.anchor, a.anchor:focus { opacity: initial; } } 访问配置文件参数 1 2 3 4 5 {{- if .Site.Params.logoTitle -}} {{ .Site.Params.logoTitle }} {{- else -}} {{ .Site.Title }} {{- end -}} 手动summary 在文中添加`

写ssr网页,或者说纯模板,现在不可能不用一些先进的技术和框架,比如Scss,PostCss,TailwindCss,模块化JS,ES6,所以一个构建工具是在所

Git提交规范和管理,代码提交每天可能都会有几十次,有时候为了省事甚至直接重复了上一次的message,这样在后期检查问题以及合并的时候非常麻烦. 社区制定了一些

Gitlab Runner 是Gitlab任务执行环境,用过jenkins的应该不会陌生,jenkins有master和slave,gitlab的runner就相当于jenkins的s

Neovim的插件使用汇总,记录一些快捷键和简单的配置 nvim-tree Homepage: nvim-tree.lua KeyBindings move around like in any vim buffer <CR> or o on .. will cd in the above directory <C-]> will cd in the directory under the cursor <BS> will close current opened directory or parent type a to add a file. Adding a directory requires leaving a leading /

Neovim-0.5版本集成了LSP,并且内置用lua来配置vim和编写vim插件,本来4月18号就该发布0.5版本了,已经过期7天了,还好可以使用nightl

Vim已经到了8.2版本,使用vim也有一些年头了,无论什么IDE都会配置成VIM的模式,一篇文档不足以包含vim的全部内容,这里记录的可能只有20%, 但是在编

Gitlab是一个开源的代码托管平台基本上可以看做是一个开源的Github平台,主要用来做私有的仓库管理和issues管理,在公司内部或者个人使用. 需要注意的地

Notes VSCode配置Python Django开发环境(Windows10) 参考: Python and Django tutorial in Visual Studio Code Python in Visual Studio Code – May 2021 Release | Python (microsoft.com) 创建venv vscode切换python的