Hugo常见问题
系列 - Hugo相关
目录
1 文章目录
# 目录设置
[markup.tableOfContents]
startLevel = 2 # 代表从第几级标题开始生成目录
endLevel = 6 # 代表从第几级标题结束目录
ordered = true # 目录排序2 文章通用配置
打开archetypes/default.md文件进行编辑:
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: false
categories: ["Web"]
tags: ["HTML"]
keywords: ["HTML"]
---3 loveit主题相关
代码块识别语言高亮,配置文件路径:
/themes/LoveIt/assets/css/_variables.scss3.1 链接
3.1.1 链接 - 普通链接
{{< link "https://andy90s.github.io/" >}}
或者
{{< link href="https://andy90s.github.io/" content="https://andy90s.github.io/" >}}
{{< link "mailto:contact@qq.com" >}}
或者
{{< link href="mailto:contact@qq.com" content="mailto:contact@qq.com" >}}
{{< link "https://andy90s.github.io/" Andy90s >}}
或者
{{< link href="https://andy90s.github.io/" content=Andy90s >}}
<!-- 停留带标题 -->
{{< link "https://andy90s.github.io/" Andy90s "Visit Andy90s!" >}}
或者
{{< link href="https://andy90s.github.io/" content=Andy90s title="Visit Andy90s!" >}}效果如下:
https://andy90s.github.io/
或者
https://andy90s.github.io/
mailto:contact@qq.com
或者
mailto:contact@qq.com
3.1.2 链接 - 内部跳转链接
<!-- ref绝对路径 relref相对路径 -->
{{< ref "path/to/document.md#锚点" >}}
{{< relref "path/to/document.md#锚点" >}}例如跳转到本文的文章目录锚点:
[跳转到其他文章锚点]({{< relref "其他文章.md#文章目录" >}})
[跳转到文章目录]({{< relref "../other/hugo常见问题.md#文章目录" >}})效果: 跳转到文章目录
4 gitalk评论设置
4.1 github生成application auth
生成方法:打开github设置 - develop setting - OAuth Apps - 选择新建
新建OAuth
4.2 得到秘钥,粘贴到配置中
[params.page.comment.gitalk]
enable = true
owner = "andy90s"
repo = "andy90s.github.io"
clientId = "上面拿到的id"
clientSecret = "上面生成的秘钥"
id = "location.pathname"
注意
上述评论配置为(
hugo+loveit主题),其他配置差别不大,注意repo应填写仓库名即可 id按照上述配置,会自动生成issue5 图片资源
由于我的图片是直接存放到github仓库中的,所以需要配置下CDN来加速访问,上传我使用的是picgo工具,配置如下:
picgo设置
https://cdn.jsdelivr.net/gh/ + 你的github用户名 + 你的仓库名 + 图片路径例如:
https://cdn.jsdelivr.net/gh/andy90s/blog-image/blog/images/271669958429_.pic.jpg
技巧
gh = github 指定master分支:
https://cdn.jsdelivr.net/gh/andy90s/blog-image@master/blog/images/271669958429_.pic.jpg还可以指定版本号:
https://cdn.jsdelivr.net/gh/andy90s/blog-image@版本号/blog/images/271669958429_.pic.jpg压缩资源:
https://cdn.jsdelivr.net/gh/andy90s/blog-image@版本号/blog/images/271669958429_.pic?x-oss-process=image/resize,m_lfit,h_100,w_1006 自定义shortcode
比如我要将这段HTML代码转换为shortcode:
<details>
<summary>标题</summary>
<p style="background-color: #F4F6F6;"> 内容 </p>
</details>
6.1 1. 在layouts/shortcodes目录下新建details.html文件
<details>
<summary>{{ .Get "summary" }}</summary>
<p style="background-color: #F4F6F6;">
{{ .Inner }}
</p>
</details>6.2 2. 在文章中使用
{{< details summary="标题" >}}
内容
{{< /details >}}