hugo 小技巧
目录
文档资源
常用命令工具
官方命令工具:Hugo 命令
本地服务预览
hugo server
生成静态文件
注意:目前我们已经通过 github actions 完成 hugo 的持续集成编译构建部署,不再需要在本地手动编译静态网站页面。
# 格式:
# hugo -d html/静态文件目录/
hugo -d I:\src\hugo\9ong-html\
自定义 hugo 格式化 md 文件
这是通过 python 写的 windows cmd 命令工具,用于格式化 markdown 文件。
hugo-md-format
我们借助 vscode 的 tasks 与快捷键实现了,CTRL+ALT+H 一键唤起 hugo-md-format 和 qiniu-img-class 两个 python 工具。
hugo-md-format 工具用于实现整篇 markdown 文章,自动分析文章分类目录、标签、关键词等,以及按 hugo 格式生成对应的头部格式信息以及目录摘要。
自定义 md 文件图片替换为七牛云图片
这是通过 python 写的 windows cmd 命令工具,用于将 markdown 文件中第三方图片整体替换为七牛云图片
qiniu-img-replace
我们借助 vscode 的 tasks 与快捷键实现了,CTRL+ALT+H 一键唤起 hugo-md-format 和 qiniu-img-class 两个 python 工具。
qiniu-img-class 工具,可以将文章中所有图片上传到指定七牛 bucket,并更换所有图片链接,实现图片本地化。
文章属性 Front Matter 设置
官方文档参考 Front Matter 内置 Fromt Matter
Front Matter 范例
---
title: "项目计划:代码未动,计划先行"
isCJKLanguage: true
date: 2019-07-02 09:36:20
categories:
- 软件工程
tags:
keywords:
---
-
title 内容的标题
-
description 内容的描述
-
date 内容将被排序的日期
-
aliases 一个或多个别名(例如,重命名内容的旧发布路径)的数组,将创建这些别名以重定向到该内容。
--- ... aliases: - /posts/baidu.html/ - /2010/01/01/tencent.html ... ---
-
draft 如果为 true,将不会呈现,除非 hugo –buildDrafts 进行编译
-
publishdate 如果在未来,内容将不会被呈现,除非 hugo –buildFuture 进行编译
-
type 内容的类型(如果未设置,将自动从目录派生)
-
isCJKLanguage 如果为 true,则明确将内容视为 CJKLanguage(.Summary 和 .WordCount 在 CJKLanguage 中可以正常工作),可以解决中文乱码问题
-
weight 用于排序的权重,值越高越排在前面
-
markup 指定"rst"将用于 reStructuredText (需要 rst2html 格式) 或者 “md”(默认) 将用于 Markdown 格式
-
slug 出现在 URL 尾部的标记,或
-
url 从 Web 根目录到内容的完整路径。
如果 slug 与 url 两者都不存在,则将使用文件名。
自定义支持部分显示 showless
隐藏、密码访问
自定义属性,文章支持只显示部分内容。(需要编码调整 themes 代码支持自定义变量)
---
title: "11 项目计划:代码未动,计划先行"
isCJKLanguage: true
date: 2019-07-02 09:36:20
categories:
- 软件工程
tags:
keywords:
showless: true #设置部分内容可访问
---
如何置顶文章
文章默认按照时间排序,如果我们想置顶某篇文章,可以在 FrontMatter 设置 weight 属性 (权重),权重最大文章在最前面。
---
weight: 1000
---
自定义支持脑图 mindmap
自定义属性,文章支持脑图/思维导图
mindmap: true #为true时通过脑图渲染节点
文章中如何写脑图节点:自定义 mind 脑图 shortcodes
自定义支持绘图 mermaid
采用 mermaid 的绘图方案,官方文档:mermaid 绘图帮助文档
---
mermaid: true #为true时支持mermaid绘图展示
---
流程图:
graph TD;
A-->B
A-->C
B-->D
C-->D
时序图:
sequenceDiagram;
Alice->>John: Hello John, how are you?
activate John
John-->>Alice: Great!
deactivate John
更多图参考:官方帮助文档:mermaid 绘图帮助文档
注意:需要科学上网。
自定义 URL
shortCodes
官方文档 shortcodes
自定义 mind 脑图 shortcodes
根据脑图的大小样式,共有 3 个脑图的 shortcodes:mind-sm, mind-md, ming-lg,分别对应 height 为 400px,800px,1600px 的脑图显示范围。
shortcode 文件详见:layots/partials/shortcodes/mind-sm.html 等
mind-sm 范例:
- 根目录
- 目录 1
- 目录 11
- 目录 12
- 目录 2
- 目录 21
- 目录 1
还支持 mind-md、mind-lg
小技巧
内联 md 文件自动生成文章 URL
绝对路径链接:
[Neat](http://www.9ong.com/092020/%E5%A6%82%E4%BD%95%E6%B4%97%E7%A2%97.html)
相对路径链接:
[About](/092020/%E5%A6%82%E4%BD%95%E6%B4%97%E7%A2%97.html#who)
我们借助 vscode 的 snippet 能力,实现输入 ref 及 relref 智能提示预设两种内部文档路径链接模板,不用再记忆上面奇怪的文本格式。
详见:.vscode/hugo-post-link.code-snippets
文章原创与收藏文末模板
我们借助 vscode 的 snippet 能力,实现输入 原创
及 收藏
智能提示预设两种文章的文末模板。
详见:.vscode/hugo-post-link.code-snippets
LeanCloud 域名更新
域名无法访问的临时解决方案 - 新闻公告 - LeanCloud 用户社区
push: "https://" + n + ".push.lncld.net",
stats: "https://" + n + ".stats.lncld.net",
engine: "https://" + n + ".engine.lncld.net",
api: "https://" + n + ".api.lncld.net"
更换为:
push: 'https://avoscloud.com',
stats: 'https://avoscloud.com',
engine: 'https://avoscloud.com',
api: 'https://avoscloud.com',