站点介绍

• 1: 站点搭建方法
• 2: 自动托管markdown
• 3: 编写文章技巧
• 4: 该主题的Markdown特色语法

1 - 站点搭建方法

hugo工具介绍

hugo是spf13的开源作品，目前任职于google，对他最早的印象是使用他的vim-spf13配置，后来又接触到他的cobra、plfag、viper... 为golang的生态完善做了很大贡献，致敬!

书归正传，hugo是基于golang开发的世界上最快的网站构建框架，本文介绍如何基于它构建技术类文档库，也可作为内部wiki或开源书籍使用。之所以没选择gitbook，发现CLI版本已于2018年停止维护了。

准备环境

安装依赖工具（以下版本为当前202512最新稳定版本）：

• 安装git, 下载地址
• 安装hugo_extendedWindows环境的版本。
• 安装Go工具，下载地址, hugo初始化需要go环境
• 安装nodejs 22+，下载地址，推荐使用fnm管理node多版本。

具体安装过程不表，下篇会介绍如何利用github pages全自动托管静态文件

主题选择

选用Docsy主题，出自google的开源主题，很多流行项目使用此主题作为官方站点，如k8s、kubeflow、grpc、etcd、Selenium等，详见此。主要功能包含：

• 支持树形目录
• 国际化
• 搜索功能
• 移动端自适应适配
• 标签分类
• 全站打印
• 文档版本化
• 用户反馈等
• uml\mermaid渲染

官方提供了快速脚手架，具体操作如下：

git clone --depth 1 --branch v0.13.0 https://github.com/google/docsy-example.git my-new-site
cd  my-new-site
npm install --registry https://registry.npmmirror.com
hugo server

本地启动，默认可通过localhost:1313访问，官方提供了在线的预览地址。

hugo server

​

目录结构说明

默认脚手架目录结构如下，只关注hugo.yaml文件和content目录，就可以满足日常使用。

➜  my-new-site git:(v0.13.0) ll
total 195K
drwxr-xr-x 1 xxp 197609    0 11月 27 20:34 assets # 静态资源目录，如CSS、JavaScript等
-rw-r--r-- 1 xxp 197609  448 11月 27 20:34 config.yaml  # 站点的hugo高版本兼容文件，可删除
drwxr-xr-x 1 xxp 197609    0 11月 27 20:34 content # 网站内容目录，包含Markdown格式的文章和页面，以后重点创作的目录
-rw-r--r-- 1 xxp 197609 1.1K 11月 27 20:34 CONTRIBUTING.md
-rw-r--r-- 1 xxp 197609  172 11月 27 20:34 docker-compose.yaml
-rw-r--r-- 1 xxp 197609  100 11月 27 20:34 Dockerfile
-rw-r--r-- 1 xxp 197609  173 11月 27 20:34 docsy.work
-rw-r--r-- 1 xxp 197609    0 11月 27 20:34 docsy.work.sum
-rw-r--r-- 1 xxp 197609   89 11月 27 20:34 go.mod
-rw-r--r-- 1 xxp 197609  513 11月 27 20:34 go.sum
-rw-r--r-- 1 xxp 197609 7.7K 11月 27 20:34 hugo.yaml #Hugo的主要配置文件
-rw-r--r-- 1 xxp 197609 7.5K 11月 27 20:34 hugo-disabled.toml
drwxr-xr-x 1 xxp 197609    0 11月 27 20:34 layouts
-rw-r--r-- 1 xxp 197609  12K 11月 27 20:34 LICENSE
-rw-r--r-- 1 xxp 197609  302 11月 27 20:34 netlify.toml # Netlify部署平台配置文件
drwxr-xr-x 1 xxp 197609    0 11月 27 20:37 node_modules
-rw-r--r-- 1 xxp 197609 2.7K 11月 27 20:34 package.json
-rw-r--r-- 1 xxp 197609  99K 11月 27 20:37 package-lock.json
drwxr-xr-x 1 xxp 197609    0 11月 27 20:37 public
-rw-r--r-- 1 xxp 197609 7.3K 11月 27 20:34 README.md
drwxr-xr-x 1 xxp 197609    0 11月 27 20:35 resources # 动态编译的产物

重点说明

• 修改主题的页面布局

  • 大部分渲染样式可以通过修改根目录的hugo.yaml的配置文件来实现
  • 不能通过上条实现的，也不建议直接修改themes目录下的内容，copy到在根目录同样的相对路径上再修改，会覆盖默认主题相关的实现。

• docsy主题默认提供了3种版面布局, 分别在content目录下，写markdown文件，不同目录按照各自类型风格渲染。

  • docs技术文档类的布局
  • blog博客类的布局
  • community社区相关介绍的布局

• docs的目录章节可以任意分级，目录下的_index.md或者_index.html为该章、节的首页描述。

• 根目录运行如下命令可编译最终html，可能会提示POSTCSS编译失败，需要根目录运行npm install安装依赖。

  rm -rf public/ && HUGO_ENV="production" hugo --gc || exit 1
  

• 站点内搜索功能依赖编译后的json文件，需要上一步才能使用。

• 关于hugo.yaml配置的解读（最新注释说明，可查看本站的原件）。

  # 站点的访问地址，本地预览时(hugo server)可忽悠
  baseURL: "https://xiaoping378.github.io"
  
  # 站点title,会被多语言里的设置覆盖
  # title: "小平栈"
  
  # cSpell:ignore goldmark github hugo readingtime docsy subdir lastmod pygments linenos catmullrom norsk gu
  
  # Language settings
  contentDir: content
  defaultContentLanguage: zh-cn
  defaultContentLanguageInSubdir: false
  # 国际化翻译中，如果有缺失是否用占位符显示
  enableMissingTranslationPlaceholders: true
  
  # 是否生成robots文件
  enableRobotsTXT: true
  
  # 页面上提供类似"最后修改"的git信息
  enableGitInfo: true
  
  # 注释掉这行来禁用 Docsy 主题中的分类法功能
  # disableKinds: [taxonomy]
  
  # You can add your own taxonomies
  taxonomies:
    tag: tags
    category: categories
  
  # 代码块高亮配置
  pygmentsCodeFences: true
  # 开启后，黑色主题可以消除代码块的白色底色
  pygmentsUseClasses: false
  # Use the new Chroma Go highlighter in Hugo.
  pygmentsUseClassic: false
  # pygmentsOptions: "linenos=table"
  # See https://help.farbox.com/pygments.html
  pygmentsStyle: tango
  
  # 配置blog编译产物的路径.
  permalinks:
    blog: /:section/:year/:month/:day/:slug/
  
  # 图片处理的配置.
  imaging:
    resampleFilter: CatmullRom
    quality: 75
    anchor: Smart
  
  # 国际多语言配置
  languages:
    zh-cn:
      languageName: 中文
      title: 现代技能栈
      params:
        description: 现代技能栈、devops、云原生、网络、区块链、RPA、IOT、AI人工智能
    # en:
    #   languageName: English
    #   title: Goldydocs
    #   params:
    #     description: A Docsy example site
    # cSpell:disable
  
  
  # markdown的解析设置，抄的k8s的文档解析设置...
  markup:
    goldmark:
      extensions:
        definitionList: true
        table: true
        typographer: false
      parser:
        attribute:
          block: false
          title: true
        autoHeadingID: true
        autoHeadingIDType: "blackfriday"
      renderer:
        unsafe: true
    highlight:
      codeFences: true
      guessSyntax: false
      hl_inline: false
      lineAnchors: ''
      lineNoStart: 1
      lineNos: false
      lineNumbersInTable: true
      noClasses: true
      style: "emacs"
      tabWidth: 4
    tableOfContents:
      endLevel: 3
      ordered: false
      startLevel: 2
  
  # 此处以下均为站点参数。
  
  # 如果不需要启用“打印整个章节”链接，可以将其注释掉
  outputs:
    section: [HTML, print, RSS]
  
  params:
    # uml自动渲染绘图配置
    plantuml:
      enable: true
      theme: default
      # Set url to plantuml server
      # default is http://www.plantuml.com/plantuml/svg/
      svg_image_url: 'https://www.plantuml.com/plantuml/svg/'
      # By default the plantuml implementation uses <img /> tags to display UML diagrams.
      # When svg is set to true, diagrams are displayed using <svg /> tags, maintaining functionality like links e.g.
      # default = false
      svg: true
    # mermaid 绘图配置
    mermaid:
      theme: neutral
      flowchart:
        diagramPadding: 6
  
    taxonomy:
      # 如果不想显示分类标签云，可以将 taxonomyCloud: []设置为空数组。
      taxonomyCloud: [tags, categories]
  
      # 如果使用，其长度（即元素数量）必须与 taxonomyCloud相同。
      taxonomyCloudTitle: [标签, 分类]
  
      # 如果不想在页面标题（或页眉）处显示分类标签，可以将 taxonomyPageHeader设置为空数组 []
      taxonomyPageHeader: [tags, categories]
  
    privacy_policy: https://policies.google.com/privacy
  
    # First one is picked as the Twitter card image if not set on page.
    # images: [images/project-illustration.png]
  
    # Menu title if your navbar has a versions selector to access old versions of your site.
    # This menu appears only if you have at least one [params.versions] set.
    version_menu: Releases
  
    # Flag used in the "version-banner" partial to decide whether to display a
    # banner on every page indicating that this is an archived version of the docs.
    # Set this flag to "true" if you want to display the banner.
    archived_version: false
  
    # The version number for the version of the docs represented in this doc set.
    # Used in the "version-banner" partial to display a version number for the
    # current doc set.
    version: 0.0
  
    # A link to latest version of the docs. Used in the "version-banner" partial to
    # point people to the main doc site.
    url_latest_version: https://example.com
  
    # Repository configuration (URLs for in-page links to opening issues and suggesting changes)
    github_repo: https://github.com/xiaoping378/xiaoping378.github.io
  
    # 这是一个可选的相关项目仓库链接。例如，指向您产品代码所在的兄弟仓库（关联代码库）
    github_project_repo: https://github.com/google/docsy
  
    # Specify a value here if your content directory is not in your repo's root directory
    # github_subdir: ""
  
    # Uncomment this if your GitHub repo does not have "main" as the default branch,
    # or specify a new value if you want to reference another branch in your GitHub links
    github_branch: master
  
    # Google Custom Search Engine ID. Remove or comment out to disable search.
    gcs_engine_id: UA-217913492-1
  
    # Enable Lunr.js offline search
    offlineSearch: false
  
    # 使用 Prism 为代码块启用语法高亮和复制按钮功能
    prism_syntax_highlighting: true
  
    copyright:
      authors:
        作者 xiaoping378 | [CC BY 4.0](https://creativecommons.org/licenses/by/4.0) |
      from_year: 2018
  
    # User interface configuration
    ui:
      # 设置为 true 以禁用面包屑导航.
      breadcrumb_disable: false
      # 不想在顶部导航栏中显示logo（/assets/icons/logo.svg），请将此选项设置为 false。
      navbar_logo: true
      # 在页面滚动到 block/cover区块（例如首页的封面大图）上方时，顶部导航栏不呈现半透明效果，请将此选项设置为 true
      navbar_translucent_over_cover_disable: false
      # 让侧边栏菜单显示默认为折叠状态
      sidebar_menu_compact: true
      # 左侧导航显示 “可展开”的小三角
      sidebar_menu_foldable: true
      # 在网站中隐藏侧边栏的搜索框
      sidebar_search_disable: false
      # 导航栏中启用明暗模式切换菜单
      showLightDarkModeMenu: true
  
      # 在每个文档末尾添加一个标题为“反馈”的 H2 章节。用户反馈将作为事件发送到 Google Analytics（谷歌分析）
      # 此功能依赖于 [services.googleAnalytics] 配置，如果未设置 "services.googleAnalytics.id"，该功能将被禁用
      # 如果您启用了此功能，但需要偶尔在某个特定页面隐藏“反馈”章节,
      # 只需在该页面的 Front Matter 中添加 "hide_feedback: true" 即可.
      feedback:
        enable: true
        # 用户点击 “是”（表示此页有帮助）或 “否”（表示此页无帮助）后所看到的回复信息。
        'yes': >-
          与君同行!  <a
          href="https://github.com/xiaoping378/xiaoping378.github.io/issues/new">再接再厉</a>.
        'no': >-
          呃(⊙o⊙)…. 还请 <a
          href="https://github.com/xiaoping378/xiaoping378.github.io/issues/new">告知哪里可以改进</a>.
  
      # 在每个文档的顶部添加阅读时长估算.
      # 如果您启用了此功能，但需要偶尔在某个特定页面隐藏阅读时长
      # 只需在该页面的 Front Matter 中添加 "hide_readingtime: true" 即可
      readingtime:
        enable: false
  
    links:
      # End user relevant links. These will show up on left side of footer and in the community page if you have one.
      user:
        - name: 个人邮箱 xiaoping378@163.com
          url: mailto:xiaoping378@163.com
          icon: fa fa-envelope
          desc: 欢迎邮件交流
        - name: 微博
          url: https://weibo.com/xiaoping378
          icon: fab fa-x-twitter
          desc: 个人微博，基本不用
        - name: 知乎
          url: https://www.zhihu.com/people/xiaoping378
          icon: fab fa-stack-overflow
          desc: 知乎专栏
      # Developer relevant links. These will show up on right side of footer and in the community page if you have one.
      developer:
        - name: GitHub
          url: https://github.com/xiaoping378/xiaoping378.github.io
          icon: fab fa-github
          desc: 文集开源地址!
        - name: Gitee
          url: https://gitee.com/xiaoping378/xiaoping378
          icon: fa fa-git
          desc: 国内码云
  
  module:
    # Uncomment the next line to build and serve using local docsy clone declared in the named Hugo workspace:
    # workspace: docsy.work
    hugoVersion:
      extended: true
      min: 0.146.0
    imports:
      - path: github.com/google/docsy
        disable: false
  

总结

不定期更新此文，待进一步优化，，，

如果自己搭建嫌麻烦，可直接Copy本站，编写自己的内容即可，搭建本站时，也遇到了Docsy国际化方面的问题，已提交官方PR修复。

下文介绍使用github的actions和pages实现自动更新并托管站点。

2 - 自动托管markdown

本站点仓库名字的由来

本源码仓之所以起如此长的名字，完全是因为github pages的工作机制决定的，不然会带个小尾巴：

如果叫 blog, github的托管页面的访问地址会是 xiaoping378.github.io/blog，这也没什么，但会和hugo的static机制出现冲突。

当然可以自行购买域名，并指向该pages地址，，，后来忘了续费，搞丢了我的域名。

什么是pages

GitHub Pages 是 GitHub 提供的一项免费静态网站托管服务。简单来说，它能将你的代码仓库直接变成一个可访问的网站，无需自己购买服务器、配置环境，甚至连域名都可以使用 GitHub 提供的免费子域名。

快速入门三步走

• 第一步：创建仓库

  • 个人/组织网站：创建名为 你的GitHub用户名.github.io 的仓库（例如：xiaoping378.github.io）
  • 项目网站：在任何项目仓库中启用 Pages 功能

• 第二步：添加内容

  • 直接上传 HTML、CSS、JS 文件
  • 或使用静态网站生成器（如 Hugo、Jekyll、VuePress 等）生成静态文件
  • 配置 GitHub Pages 源（通常为 main 分支的 /root 或 /docs 文件夹）

• 第三步：访问你的网站

  • 个人站点：https://你的GitHub用户名.github.io
  • 项目站点：https://你的GitHub用户名.github.io/项目名

与静态网站生成器的完美结合. 正如我们上一篇提到的 Hugo + Docsy 方案，GitHub Pages 与静态网站生成器是绝佳搭档。你只需：

• 本地使用 Hugo 预览编写内容
• 配置 GitHub Actions 自动构建
• 推送到 GitHub 后，Actions 会自动将生成的静态文件部署到 Pages
• 几十秒后，更新就会上线！ 这种方式让你专注于内容创作，而不用操心服务器维护和部署流程。

自动化工作流

上节是介绍了pages的快速入门，下面介绍自动化工作流，利用github actions实现自动更新托管内容。

在仓中创建.github/workflows/deploy.yml文件，设置GitHub Actions自动构建，文件内容可参考文末的原文链接。

工作流整体架构

name: GitHub Pages
on:
  push:
    branches: [master]
  pull_request:

设计理念：

• 🚦 双触发机制：既响应代码推送（push）也响应拉取请求（pull_request）
• ✅ 质量把控：PR也会触发构建，可提前发现部署问题
• 🎯 精准部署：虽然两种操作都会触发流水线，但最终部署仅在master分支推送时执行

构建环境与资源优化

runs-on: ubuntu-22.04
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}

配置解读：

• 🐧 稳定环境：指定Ubuntu 22.04 LTS版本，确保构建环境一致性
• 🚦 智能并发：同一分支的多次推送会排队执行，避免构建冲突和资源浪费
• 💡 技巧：concurrency配置防止了因频繁提交导致的部署混乱问题

代码检出

- uses: actions/checkout@v4
  with:
    submodules: recursive  # 关键！递归获取Docsy主题
    fetch-depth: 0         # 获取完整历史，支持Git信息功能

深度解析：

• 🔗 子模块处理：Docsy主题作为Git子模块，必须使用submodules: recursive完整获取，（为Docsy主题的早期版本优化）
• ⏳ 历史记录：fetch-depth: 0确保完整历史，这是Hugo的.GitInfo和页面"最后修改时间"功能的基础
• ⚠️ 注意：没有这两项配置，主题将无法加载，且页面会失去版本控制信息

构建工具链配置

- name: Setup Hugo
  uses: peaceiris/actions-hugo@v2
  with:
    hugo-version: '0.152.2'
    extended: true

- name: Setup Node
  uses: actions/setup-node@v3
  with:
    node-version: '24'

配置解读：

• ⚙️ Extended版本：Docsy主题依赖SCSS编译，必须使用Hugo Extended版本
• 🔢 版本固定：明确指定0.152.2版本，避免因Hugo更新导致的构建失败
• 🔄 Node.js 24：使用最新LTS版本，确保与现代前端工具链兼容
• 🌐 小知识：peaceiris是GitHub Pages领域的知名维护者，其actions被数万个项目使用

性能优化：依赖缓存策略

- name: Cache dependencies
  uses: actions/cache@v4
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

缓存策略：

• ⚡ 构建加速：缓存npm依赖，减少70%+的文章发布时间
• 🔄 智能键值：基于package-lock.json哈希生成唯一键，依赖变化时自动更新缓存
• 🔀 降级策略：当精确缓存不存在时，尝试使用操作系统级别的通用缓存
• 📊 效果：首次构建可能需要2-3分钟，后续构建通常只需30-60秒

核心构建流程

- run: npm install
- run: env HUGO_ENV="production" hugo --minify

生产实践：

• 🏭 生产环境构建：设置HUGO_ENV="production"启用优化，如资源指纹、缓存控制
• 📦 文件压缩：--minify参数最小化HTML、CSS、JS，通常减少30%+的文件体积
• 🧪 对比：开发构建（无此参数）保留调试信息，生产构建极致优化加载速度

安全部署机制

- name: Deploy
  uses: peaceiris/actions-gh-pages@v3
  if: ${{ github.ref == 'refs/heads/master' }}
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_branch: gh-pages

设计亮点：

• 🔐 权限控制：使用GitHub自动提供的token，避免敏感信息泄露
• 🚫 条件部署：if条件确保只有master分支推送才触发实际部署，PR只验证不发布
• 🌿 标准分支：发布到gh-pages分支，符合GitHub Pages规范
• 📈 数据：从构建完成到全球CDN生效通常只需45-90秒

进阶优化建议

还可以考虑诸如构建状态通知, 多环境部署（预发布/生产）,资源清理策略等配置，本人未添加，可自行AI添加。

总结：这个工作流值得借鉴的地方

• ✅ 零配置部署：开发者只需关注内容，推送即发布
• ✅ 资源高效：缓存策略最大化利用GitHub Actions资源配额
• ✅ 故障安全：构建失败不会影响线上站点
• ✅ 版本透明：完整Git历史与页面修改信息保留
• ✅ 全球分发：GitHub Pages自带CDN与HTTPS

这套工作流已在Kubernetes、etcd等顶级开源项目中验证，无论你是个人博客、团队文档还是企业知识库，都能提供企业级的部署体验。每次git push，都是向世界分享知识的瞬间。

💡 实践建议：新手可直接复制此仓库链接的工作流。遇到问题？在评论区分享你的经验，我们一起探讨！

常见问题解答

Q：GitHub Pages有流量限制吗？ A：官方政策是每月100GB流量，对个人博客和文档站完全足够。

Q：能否使用自己的域名？ A：完全可以！只需在仓库设置中添加CNAME文件，将个人域名DNS指向GitHub。

Q：更新内容后多久生效？ A：通常30秒-2分钟，全球CDN同步可能需要10分钟完全生效。

Q：如何提升国内访问速度？ A：可考虑将仓库同步到Gitee，使用Gitee Pages或配置Cloudflare CDN。

#GitHubActions #DevOps #静态站点 #自动化部署 #技术实践

3 - 编写文章技巧

编写markdown

图片路径问题

习惯md文件中的图片路径写成![](/images/file.png) ，但hugo中图片实际要存放到/static/images/路径下，hugo会自动渲染到站点的根路径/上。

这样的话，无法在编辑器中预览md了，有两种玩法如下：

• 可以使用一个临时目录，把图片和md文件放到同一目录，编写完毕后，再把图片和md文件放置上述合适的目录位置上。
• 日常一直启用hugo server编写文章，放弃编辑器中预览md，后面还会有别的坑....

推荐后者，本人日常使用VSCode编写md，和代码开发同款，这里推荐安装mushan.vscode-paste-image扩展，再额外如下配置：

    "pasteImage.namePrefix": "${currentFileNameWithoutExt}-",
    "pasteImage.path": "${projectRoot}/static/images/",
    "pasteImage.basePath": "${projectRoot}",
    "pasteImage.insertPattern": "${imageSyntaxPrefix}/images/${imageFileName}${imageSyntaxSuffix}"

日常编写文章，Alt+A截图，Ctrl+Alt+A粘贴到md文件，和hugo的配合，完美...

SEO优化关注点

日常文章编写，如下部分要精准描述，Google搜索引擎推荐使用description的meta标签告诉它页面内容的，Docsy主题会自动把红框部分填充到layouts/partials/head.html中。

hugo解析编译后，html页面会如下呈现：

日常编写注意事项

md文件中相互引用内容的路径要记得对应到站点html的路径上

比如此处引用自动托管markdown文章，按照md习惯写,虽然编辑器上可以正常打开，但hugo渲染后的页面是404的。

• [引用](./actions_pages.md) 需要改成 [引用](../actions_pages)
• [引用](/content/docs/1-site/actions_pages.md) 需要改成 [引用](/docs/1-site/actions_pages)

不定时更新注意事项。日常编写，建议本机启用hugo server实时预览，

文章weight的使用

文章开头的weight部分决定了目录中的排序，推荐新开的系列文章，从两位数开始递增，比如30, 以后老系列有更新的时候，免去批量修改调整排序的麻烦。

4 - 该主题的Markdown特色语法

文本可以是 粗体、斜体 或 删除线。链接 应该是蓝色的，没有下划线（除非鼠标悬停在其上）。

段落之间应该有空白。Vape migas chillwave sriracha poutine try-hard distillery。Tattooed shabby chic small batch, pabst art party heirloom letterpress air plant pop-up。Sustainable chia skateboard art party banjo cardigan normcore affogato vexillologist quinoa meggings man bun master cleanse shoreditch readymade。Yuccie prism four dollar toast tbh cardigan iPhone, tumblr listicle live-edge VHS。Pug lyft normcore hot chicken biodiesel, actually keffiyeh thundercats photo booth pour-over twee fam food truck microdosing banh mi。Vice activated charcoal raclette unicorn live-edge post-ironic。Heirloom vexillologist coloring book, beard deep v letterpress echo park humblebrag tilde。

turmeric listicle fam ugh humblebrag。Bespoke leggings gastropub, biodiesel brunch pug fashion axe meh swag art party neutra deep v chia。Enamel pin fanny pack knausgaard tofu, artisan cronut hammock meditation occupy master cleanse chartreuse lumbersexual。Kombucha kogi viral truffaut synth distillery single-origin coffee ugh slow-carb marfa selfies。Pitchfork schlitz semiotics fanny pack, ugh artisan vegan vaporware hexagon。Polaroid fixie post-ironic venmo wolf ramps kale chips。

在这第一句话上面不应该有边距。

引用块应该是较浅的灰色，并在左侧有一个边框，颜色为辅助色。

在这最后一句话下面不应该有边距。

第一个二级标题

这是跟随标题的普通段落。Knausgaard kale chips snackwave microdosing cronut copper mug swag synth bitters letterpress glossier craft beer。Mumblecore bushwick authentic gochujang vegan chambray meditation jean shorts irony。Viral farm-to-table kale chips, pork belly palo santo distillery activated charcoal aesthetic jianbing air plant woke lomo VHS organic。Tattooed locavore succulents heirloom, small batch sriracha echo park DIY af。Shaman you probably haven't heard of them copper mug, crucifix green juice vape single-origin coffee brunch actually。Mustache etsy vexillologist raclette authentic fam。Tousled beard humblebrag asymmetrical。I love turkey, I love my job, I love my friends, I love Chardonnay!

Deae legum paulatimque terra, non vos mutata tacet: dic。Vocant docuique me plumas fila quin afuerunt copia haec o neque。

在大屏幕上，段落和标题不应占据整个容器宽度，但我们希望表格、代码块等占据整个宽度。

Scenester tumeric pickled, authentic crucifix post-ironic fam freegan VHS pork belly 8-bit yuccie PBR&B。我喜欢我们生活的这个世界。

第二个二级标题

这是一个跟随标题的引用块。培根 ipsum dolor 坐在火腿上 doner shank drumstick，猪腩肉 porchetta 意式香肠 brisket 火腿后臀 rump pig。Chuck kielbasa leberkas，猪肉 bresaola 火腿后臀 牛柳 mignon 牛肩胛 短肋骨 biltong。

三级标题

这是一个跟随标题的代码块。

下一等级的紧身裤在出售前，PBR&B 教堂钥匙萨满回声公园。羽衣甘蓝芯片占据哥谭镇无论何时流行朋克自由人猪肉肚子自拍。美食家贝尔琳达地铁瓷砖醒后赛博朋克西坦。破烂时髦的男人面包圈半语义化学，奇亚信使包格子衫。

四级标题

• 这是一个跟随标题的无序列表。
• 这是一个跟随标题的无序列表。
• 这是一个跟随标题的无序列表。

五级标题

1. 这是一个跟随标题的有序列表。
2. 这是一个跟随标题的有序列表。
3. 这是一个跟随标题的有序列表。

六级标题

上下都有水平分隔线。

这是一个无序列表：

• 利物浦足球俱乐部
• 切尔西足球俱乐部
• 曼联足球俱乐部

以及一个有序列表：

1. 迈克尔·布雷克
2. 西阿姆斯·布莱克
3. 布兰福德·马萨利斯

还有一个无序任务列表：

• 创建一个Hugo主题
• 添加任务列表到其中
• 度假去

还有一个"混合"任务列表：

• 收拾行李
• ?
• 出发旅行！

以及一个嵌套列表：

• 杰克逊五兄弟
  • 迈克尔
  • 蒂托
  • 杰基
  • 马龙
  • 杰梅因
• 忍者神龟
  • 莱昂纳多
  • 米开朗基罗
  • 多纳泰罗
  • 拉斐尔

定义列表可以与Markdown语法一起使用。定义标题是粗体。

名字

哥斯拉

出生年份

1952

出生地

日本

颜色

绿色

表格应具有粗体标题和交替的阴影行。

如果表格太宽，应该可以水平滚动。

像 var foo = "bar"; 这样的代码片段可以以内联方式显示。

同样，this should vertically align with this and this。

代码也可以显示在一个块元素中。

foo := "bar";
bar := "foo";

代码也可以使用语法高亮。

func main() {
  input := `var foo = "bar";`

  lexer := lexers.Get("javascript")
  iterator, _ := lexer.Tokenise(nil, input)
  style := styles.Get("github")
  formatter := html.New(html.WithLineNumbers())

  var buff bytes.Buffer
  formatter.Format(&buff, style, iterator)

  fmt.Println(buff.String())
}

长的单行代码块不应该换行。如果它们太长，应该水平滚动。这一行应该足够长以演示这一点。

表格单元格内的内联代码仍应可区分。

小图像应按实际大小显示。

大图像应始终缩小并适合内容容器。

以上挪威松嫩枝带芽的照片：Bjørn Erik Pedersen，CC-BY-SA。

组件

警报

另一个标题

在这里添加一些章节以查看目录的样子。培根 ipsum dolor 坐在火腿上 doner shank drumstick，猪腩肉 porchetta 意式香肠 brisket 火腿后臀 rump pig。Chuck kielbasa leberkas，猪肉 bresaola 火腿后臀 牛柳 mignon 牛肩胛 短肋骨 biltong。

本文档

Inguina genus: Anaphen post: lingua violente voce suae meus aetate diversi。Orbis unam nec flammaeque status deam Silenum erat et a ferrea。Excitus rigidum ait: vestro et Herculis convicia: nitidae deseruit coniuge Proteaque adiciam eripitur？Sitim noceat signa probat quidem。Sua longis fugatis quidem genae。

像素计数

Tilde photo booth wayfarers cliche lomo intelligentsia man braid kombucha vaporware farm-to-table mixtape portland。PBR&B pickled cornhole ugh try-hard ethical subway tile。Fixie paleo intelligentsia pabst。Ennui waistcoat vinyl gochujang。Poutine salvia authentic affogato, chambray lumbersexual shabby chic。

联系信息

Plaid hell of cred microdosing, succulents tilde pour-over。Offal shabby chic 3 wolf moon blue bottle raw denim normcore poutine pork belly。

外部链接

Stumptown PBR&B keytar plaid street art, forage XOXO pitchfork selvage affogato green juice listicle pickled everyday carry hashtag。Organic sustainable letterpress sartorial scenester intelligentsia swag bushwick。Put a bird on it stumptown neutra locavore。IPhone typewriter messenger bag narwhal。Ennui cold-pressed seitan flannel keytar, single-origin coffee adaptogen occupy yuccie williamsburg chillwave shoreditch forage waistcoat。

这是页面上的最后一个元素，下方不应有边距。