Hugo 主题

上一页/下一页: 所有主题

jingplay/构建你的网站

从 Markdown 内容目录树生成你的网站

下载
jingplay/build-your-website

概述

这是一个简单、干净、灵活的 Hugo 主题，专注于内容型网站。查看演示，以及在几分钟内构建您的网站的简单指南。

顺便说一句，这里是 Hugo 的官方网站，它是最流行的开源静态站点生成器之一。凭借其惊人的速度和灵活性，Hugo 让构建网站再次变得有趣。

特性

  • 简单、干净且以内容为中心的设计
  • 几乎零配置
  • 使用 Lunr.js 的搜索支持
  • 多语言支持
  • 用于在线教程的系列分类
  • 使用 block 短代码自定义您的页面
  • 评论支持
  • 谷歌分析支持

构建您的网站

安装

请按照官方安装指南安装 Hugo，或按照以下快速步骤进行

对于 Windows 用户

  1. 下载 Hugo extended
  2. 解压软件包
  3. 将路径添加到 Path 环境变量
  4. 运行 hugo version 以验证安装的版本

对于 Linux (Ubuntu) 用户

sudo snap install hugo
hugo version

下载此存储库的代码

将此存储库的代码下载到新目录，例如 website/。

运行网站

运行 hugo server -D --disableFastRender 以启动 Web 服务器并在浏览器中查看 https://127.0.0.1:1313/。

配置

基本配置

  • title：导航栏中显示的网站名称
  • 参数
    • siteLogo：位于 website/static/images/ 中的徽标图像文件名
    • description：用于 SEO 的网站描述
    • keywords：用于 SEO 的网站关键词
    • author：网站的作者，将显示在页脚版权中
  • 菜单
    • maxLevel：菜单中显示的内容目录树的最大深度
    • maxPages：菜单中显示的最大页面数
    • expandAll：一个展开所有子菜单项的标志

更多配置

  • 内容表
markup:
  tableOfContents:
    startLevel: 2
    endLevel: 3
    ordered: false
  • 系列
    在 front matter 中设置系列名称和编号，以将页面标记为教程的一部分
series: "Build Your Website with Hugo"
sn: "01"
  • Disqus 短名称
services:
  disqus:
    shortname: MyShortName
  • Google Analytics ID
services:
 googleAnalytics:
    ID: G-Xxx
  • 多语言
languages:
  fr:
    contentDir: "content/fr"
    disabled: false
    languageCode: "fr"
    languageDirection: "ltr"
    languageName: "Français"
    weight: 2
  • Disqus 评论系统
services:
  disqus:
    shortname: MyShorname
  • 谷歌分析
services:
  googleAnalytics:
    ID: G-Xxx

开发

Tailwind CSS

以下命令应在主题 docs/ 的根目录中运行，以生成新的 app.css。

npx tailwindcss -i ./assets/css/index.css -o ./static/css/app.css --minify

使用 Lunr.js 搜索

为了减少内容的下载大小，索引中仅包含标题和摘要。

另请参阅