Hugo 主题

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

hulga

一个基于 bulma 的简单 hugo 博客主题

下载
hulga

hugo-theme-hulga

hugo + bulma = hulga

截图

构建 exampleSite，你将会看到

screenshot

你也可以自定义主色和副色，例如

material color

演示

演示站点

我的博客

功能

  • 基于 Bulma v1
  • 小巧 & 快速
  • 基本功能
    • 分类列表 & 术语页面
    • 标签列表 & 术语页面
    • 归档页面
  • 目录 (TOC) 侧边栏
  • 基于现代 CSS 变量的深色模式
    • prefers-color-scheme 媒体查询支持
    • 强制浅色/深色主题
  • 使用 pagefind 进行静态搜索
  • PWA 支持

安装

  1. 克隆到 hugo 站点的 themes 文件夹

    git submodule add https://github.com/wlh320/hugo-theme-hulga.git themes/hulga

  2. 在 config.toml 中启用它

    theme = "hulga"

    然后进行配置。

  3. 要使用 postcss，你应该安装 hugo extended 版本，然后复制 package.json 和 postcss.config.js 到你的站点根目录，然后 npm install。

  4. 如果你的语言不是 en 或 zh-cn，你可能需要在 i18n 文件夹中添加 i18n 文件，以显示此主题中的一些 i18n 字符串。

  5. 确保将所有内容放在名为“post”的目录中，以便主题填充文章。例如：content\post

  6. 要启用搜索页面，请安装 pagefind 并在 hugo build 之后运行 npx pagefind --site public。有关详细信息，请查看 pagefind 的文档。

配置

你可以在 exampleSite/hugo.toml 中查看演示站点的配置

可用参数的示例

baseURL = "https://example.com"
languageCode = "zh-cn"
DefaultContentLanguage = "zh-cn"
title = "My New Hugo Site"
paginate = 10
theme = "hulga"

[params]
  # show in HTML meta tag
  author = "xxx"
  keywords = "HTML, hugo, CSS"
  description = "xxx's blog, xxx xx xxxx"

  # change bulma's primary color
  primaryColor = "#1d9bf0"

  # use primary color everywhere, default true
  primaryEverywhere = true

  # change bulma's link color (secondary color in this theme)
  # linkColor = "#f91880"

  # subtitle on homepage
  subtitle = "This is a subtitle"

  # copyright text on footer
  copyright = "Copyright © 2020 wlh. All rights reserved."

  # enable katex rendering on every post page, default false
  math = false

  # enable postcss, mainly for css purge (746kB->56kB->9kB gzipped, but this makes build slower), default false
  postcss = true

  # enable showing content summary below post title in home page, default false
  showSummary = true

  # set paginate on taxonomy term page (tags or categories), default 10
  termPaginate = 3

  # enable toc on every post page, default false
  toc = true

  # enable TOC auto collapse, default false
  autoCollapseToc = true

  # enable prefers-color-scheme:dark, default false
  darkMedia = true

  # enable user to toggle dark mode with a menu, default false
  darkToggle = true

  # enable hero section's is-bold effect, default false
  heroBold = false

  # enable hero section that looks like steam deck's home page, default false
  heroSteamDeck = false

  # enable PWA, prepare your icons and DON'T forget to modify manifest.json, default false
  pwa = true

  # disable jsdelivr cdn, default false
  noCDN = false

# for postcss-purgecss
# see https://purgecss.node.org.cn/guides/hugo.html
# [build]
#   writeStats = true

# to enable different hightlight themes in light/dark mode 
[markup]
  [markup.highlight]
    noClasses = false

[menu]
  [[menu.main]]
    identifier = "index"
    name = "Home"
    url = "/"
    weight = 1
  [[menu.main]]
    identifier = "archives"
    name = "Archives"
    url = "/archives/"
    weight = 2
  [[menu.main]]
    identifier = "tags"
    name = "Tags"
    url = "/tags/"
    weight = 3
  [[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = 4
  [[menu.main]]
    identifier = "search"
    name = "Search"
    url = "/search/"
    weight = 5

[taxonomies]
category = "categories"
tag = "tags"

致谢

  • Hugo：静态站点生成器
  • Bulma：CSS 框架
  • Purgecss cssnano：清除 CSS 大小
  • Katex：$\LaTeX$ 渲染
  • anchorjs：向标题添加锚点
  • tocbot：生成目录
  • vanilla-back-to-top：添加返回顶部按钮

另请参阅