template

Hugo主题整合tailwind,Tailwind用来写样式可以剩下很多时间,大部分的常用样式都有实现,在Hugo中使用(主题)需要将tailwindcss整合

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 在文中添加`