个人博客hugo


原文链接: 个人博客hugo

Hugo 中文

中文帮助
主题 hueman https://demo-hueman.presscustomizr.com/demo/layouts/boxed/#
如果需要更新所有Hugo的依赖库,增加 -u 参数:
$ go get -u -v github.com/spf13/hugo

hugo 常用命令

hugo help
hugo version
hugo new site path/sitename 新建一个站点
hugo new post/good-to-great.md 添加到content/post 目录
hugo server 启动server
hugo server --buildDrafts 预览草稿
hugo undraft content/post/good-to-great.md 发布一篇文章
hugo server --theme=hugo_zen 以zen 主题启动server
hugo --theme=hugo_zen 以zen 主题生成草稿

hugo new post/first.md

创建 themes 目录

$ cd themes
$ git clone https://github.com/spf13/hyde.git

github.com/laozhu/hugo-nuo

主题:
瀑布流风格 Zenithar/hugo-theme-bleak
卡片风格 ageekymonk/hugo-tracks-theme
Google 图片风格 aerohub/hugrid

博客 Vimux/Mainroad
简洁黑 yoshiharuyamashita/blackburn
网站风格 mmrath/hugo-bootstrap http://mmrath.com/
博客 nodejh/hugo-theme-cactus-plus:
博客 dim0627/hugo_theme_robust

appernetic/hugo-bootstrap-premium
官网 digitalcraftsman/hugo-creative-theme
官网 saey55/hugo-elate-theme

Beautiful static documentation for your API
神器DOCAPI bep/docuapi

WIKI ArchLinux syui/hugo-theme-arch

文档风格 Bootie Docs
文档风格 docDock
文档风格 key-amb/hugo-theme-bootie-docs:
文档风格 Swiftline
文档风格 Grav matcornic/hugo-theme-learn
文档风格 drone

个人简历 aerohub/hugo-orbit-theme

全文搜索 lunr
go get github.com/arial7/hugo-golunr

##名词解释
Taxonomy 是用来展示内容之间逻辑关系的一种分类方法

  1. --uglyURLs 增加.html后缀
    └── content └── about | └── _index.md // <- https://example.com/about/index.html ├── post | ├── firstpost.md // <- https://example.com/post/firstpost.html
  2. section path slug url

                   path("/posts/my-first-hugo-post.md")
                ⊢-------------^------------⊣
    

    baseURL url("/posts/my-first-hugo-post/")
    ⊢--------^--------⊣ ⊢------------^-------------⊣
    baseurl section slug
    ⊢--------^--------⊣ ⊢-^-⊣ ⊢------^-------------⊣

              permalink
    

    ⊢----------------------^-----------------------⊣
    https://example.com/posts/my-first-hugo-post/index.html

  3. post 文章中 增加oldpost 重定向
    +++
    aliases = [
    "/posts/my-old-url/",
    "/2010/01/01/even-earlier-url.html"
    ]
    +++

Content中的 section 和 type

section 和 type 的作用类似,都是在模板渲染时定义在 主题的layouts中的目录名,
Type 是和 Layout 进行关联
layout 在 是渲染时 lookup-order 具体的模板文件 layout.html

section

section是目录名字,也就是content/下面的 目录 名

type

  1. 默认: type是一直有值的,当有子目录时type就是目录名,当没有子目录时就是page
    type 等于 section 的名字,这个是系统自动给设置的,当没有创建section时 就是 page
    content/events/my-first-event.md 那么这里type就被设置为section的名字events
    content/my-first-event.md 那么这里type就是page
  2. 自定义type名字
    对hugo来说 section 是不能更改的,但是type我们可以在 front-matter 中修改
    type = "even"
  3. 在layout中使用
    通过在
    layouts/type_name/birthday.html

front-matter

#必填的
title:"文章的标题"
description:内容的描述
date:时间,一般的这个时间由hugo自己填写
taxonomies:分类术语的复数形式

#选填的

aliases:一个或者多个别名(数组),别名用于生成html路径。
draft: 草稿。如果设置为“f true”, 内容将不会发布,除非使用“–buildDrafts”参数。

# 新入门的经常看不到内容,都是这个“draft”的原因,建议直接删除。

publishdate :发布日期
type :内容的类型
isCJKLanguage :汉字编码(其实还包括日文韩语)。如果设置了,才能正确的使用汉字的自动摘要”.Summary “和字数统计” .WordCount”。
weight :权重,用于排序的一个数字。默认是从小到大的,可以是负数。
markup :标记 (试验性的)。默认是md,也可以是”rst“格式。rst是”reStructuredText“格式。
slug :小节。在url尾巴处出现的一个”token“。
url :从根目录开始的全部url。

模板

hugo的基本模板分为三种:详细页,列表页,首页。

详细页名称为single.html,用于对应单独一篇文章的输出。

列表页名称为list.html,用于一个栏目、类型、章节、日期等等归集的列表输出。列表页可以分页。

首页名称为index.html,用于导航列表页和详细页。单页面站点可以只有首页。

模板匹配规则

  1. 若有与文件类型(章节)相同文件名 的内容模板,则匹配和使用。
  2. 若没有,则匹配“ default.md ”。
  3. 若使用 主题 文件,则使用主题的“archetypes”,规则与全局的相同。
  4. 若都没有匹配的,则使用hugo自带的。

    渲染规则

    若hugo无themes文件夹,或themes下面没有主题,则使用根目录下的layouts、archetypes和static文件进行渲染。
    若有主题文件并设置了主题,则使用主题文件渲染。
    首页使用index.html渲染。
    列表页使用_default下的list.html渲染。
    详细页(对应单个的md文件)使用_default下的single.html渲染。
    若设置了内容类型,则使用相应的“xxx”类型文件目录下的list和single.html渲染。
    单页面站点需要index.html,首页index.html模板支持所有列表页和详细页的模板参数、函数。

    列表就是很多个的文章,单个就是单篇,hugo还有模板文件分割(比如头部共同文件)、视图、片段等概念,非常灵活方便,其实hugo的模板就是go模板,无奈谷歌被墙。好东西总是忍不住一枝红杏出墙来!

    hugo单页模板匹配

以下是hugo的单页面模板匹配过程:

/layouts/类型 或 章节/LAYOUT.html
/layouts/类型 或 章节/single.html
/layouts/_default/single.html
/themes/主题/layouts/类型 或 章节/LAYOUT.html
/themes/主题/layouts/类型 或 章节/single.html
/themes/主题/layouts/_default/single.html

以上中文部分都是我们后面新建的主题、类型、章节。我们推荐使用主题,也就是后三个规则。

为了方便,我们直接修改默认新建主题生成的“/themes/hugao_theme/layouts/_default/ single.html ”单页面主题。

变量

  1. {{- .Title -}} 移除前后空白字符 [ \t \r \n ]

    config.yaml 站点级变量访问

    .Site.Social #Site变量首字母必须大写
    .Site.Params.Links
    [params.Links] 多级配置变量
    youdao = "www.youdao.com"
    baidu = "www.youdao.com"

    page级变量访问

    .Params.tags # front matter变量
    .RelPermalink the relative permanent link for this page.
    .RelRef
    returns the relative permalink for a given reference (e.g., RelRef "sample.md"). .RelRef does not handle in-page fragments correctly. See Cross References.
    .Section 当前文档所属的一级目录
    .Title
    .Truncated “Read more…”
    .Type the content type of the content (e.g., post).
    .URL

    全局变量访问 Use $. to Access the Global Context

    $.Site.Title

    .File 变量 等价 .Source.File

访问目录结构

{{range .Site.Sections }}
{{  .Type | Title }}                ## .Type关键 获取Section名称
{{end}}

如何访问所有的categories

{{range $k,$v := .Site.Taxonomies.categories}}

<option value="{{$k | humanize | lower}}">{{$k | humanize | lower}}</option>

{{end}}

{{ with .Site.Taxonomies.categories }}

	  <h1 class="headline">Categories</h1>

	  <section class="categories">
	    {{ range $name, $value := . }}
	    <h2 class="category">
	      <a href="{{ $baseurl }}categories/{{ $name | urlize }}">{{ title $name }}</a>
	      <small>({{ .Count }})</small>
	    </h2>
	    {{ end }}
	  </section>

	{{ end }}

	{{ with .Site.Taxonomies.tags }}

	  <h1 class="headline">Tags</h1>
		  <section class="tags">
	    {{ range $name, $value := . }}
	    <span class="tag">
	      <a href="{{ $baseurl }}tags/{{ $name | urlize }}">{{ $name }}</a>
	      <small>({{ .Count }})</small>
	    </span>
	    {{ end }}
	  </section>
	{{ end }}
`