目录

文档资源

常用命令工具

官方命令工具: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

还支持 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',