Hugo

介绍 Hugo 提供了多个内置的 Shortcodes, 以方便作者保持 Markdown 内容的整洁. Hugo 使用 Markdown 为其简单的内容格式. 但是, Markdown 在很多方面都无法很好地支持. 你可以使用纯 HTML 来扩展可能性. 但这恰好是一个坏主意. 大家使用 Markdown, 正是因为它即使不经过渲染也可以轻松阅读. 应该尽可能避免使用 HTML 以保持内容简洁. 为了避免这种限制, Hugo 创建了 shortcodes. shortcode 是一个简单代码段, 可以生成合理的 HTML 代码, 并且符合 Markdown 的设计哲学. Hugo 附带了一组预定义的 shortcodes, 它们实现了一些非常常见的用法. 提供这些 shortcodes 是为了方便保持你的 Markdown 内容简洁. 使用短代码 这里有两个配对的短代码示例： 示例1：使用百分号 {{% mdshortcode %}}在*中间*处`处理`的内容。{{% /mdshortcode %}} 示例2：使用尖括号 {{< highlight go >}} 这里有一堆代码 {{< /highlight >}} 上面的示例使用了两种不同的界定符，第一个示例中使用了%字符，第二个示例中使用了<>字符。 使用百分号作为最外层分隔符的短代码将在发送到内容渲染器时完全渲染。这意味着短代码的渲染输出可以成为页面的目录、脚注等的一部分。 使用尖括号表示短代码的内部内容不需要进一步渲染。通常，不使用Markdown的短代码包括内部HTML： {{< myshortcode >}}<p>你好 <strong>世界！</strong></p>{{< /myshortcode >}} 使用原始字符串参数的短代码 你可以使用原始字符串字面量将多行作为参数传递给短代码：...

在single.html页面，添加右侧边栏代码即可。post-toc可优化手机上自动隐藏侧边栏 {{- define "main" }} <!-- 左侧边栏 --> <aside></aside> <article class="post-single"> ... </article> <!-- 右侧边栏 start--> <aside> <div class="post-toc" style="position: fixed;max-width:300px; right:5px;overflow:auto; top: 100px;bottom:50px"> {{- partial "toc.html" . }} </div> <style> @media only screen and (max-width: 1224px) { .post-toc { display: none; } } </style> </aside> <!-- 右侧边栏 end--> {{- end }}{{/* end main */}} 参考资料 Hugo博客侧边导航栏 Hugo 主题创建 添加侧边栏 在PaperMod中引入侧边目录和阅读进度显示 hugo-PaperMod主题 Sulv-Blog-Hugo博客目录放在侧边-PaperMod主题

介绍 Hugo是一个用 go 语言编写的开源网站构建框架，截止目前GitHub星数超过70k，它具有功能强大的模板系统、丰富的主题、完善的文档以及全平台支持的客户端，提供开箱即用的分类系统、评论系统、代码高亮、多语言支持等功能，非常适合用来搭建博客网站。 在本地撰写阶段，借助 Hugo 内置服务器可以做到毫秒级热更新，实现所见即所得。同时，得益于 Hugo 采用静态站点生成的架构，Hugo 站点可以很容易的部署到各种 HTTP 服务器，且通过本地预览即可确认线上部署效果。 基于成本和使用习惯考虑，选择使用 GitHub Pages 进行部署，并且根据功能不同进行仓库拆分。话不多说，来开始吧。 hugo安装 如果是win10系统，可以用choco install hugo安装。或者从github网站下载extended版本。 下载完成，配置系统环境变量。然后使用命令hugo version查看是否安装正确。 $ hugo version hugo v0.133 创建站点 运行以下命令，使用 PaperMod 主题创建 Hugo 网站。下一部分将解释每个命令的用途。 # 创建站点 hugo new site hugoblog # 进入站点目录 cd hugoblog # 初始化仓库 git init # 添加子模块 git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod # 修改配置 echo "theme: 'PaperMod'" >> hugo.yaml # 启动服务 hugo server -D 在终端中显示的 URL 中查看您的网站。按下 Ctrl + C 停止 Hugo 的开发服务器。...