Hugo 主题

上一个/下一个： 所有主题

无类博客

一个与无类 CSS 框架配合良好的博客主题。它被设计得尽可能简单、易用和简约。

下载
Classless Blog

无类博客

这是一个用于博客的 Hugo 主题。

它极其简约，只包含标准的 HTML - 没有 JavaScript 或自定义 CSS。这使得它非常易用、响应式且对隐私友好（根本没有跟踪）。

为了使其看起来也不错，可以包含一个无类 CSS 框架。

演示

此主题的演示（使用默认的“Water.css”框架）托管在 Gitlab 页面上。

选择一个框架

一些很棒的无类 CSS 框架是

  • Water.css
  • Classless.css
  • Sakura
  • Marx
  • AtriCSS

但还有很多。

使用一个框架

这种无类 CSS 框架提供了样式表，可以通过两种方式将其包含到此主题中，这两种方式各有优缺点

通过配置中的 URL

将样式表的 URL 添加到您的站点配置中，如下所示

在您的 config.yaml 中

params:
  stylesheetUrl: "https://unpkg.com/sakura.css/css/sakura.css"

或者在您的 config.toml 中

[params]
stylesheetUrl = "https://unpkg.com/sakura.css/css/sakura.css"
优点
  • 很少的工作量
  • 更改框架时差异较小
  • 如果框架更新，将自动更新
缺点
  • 您依赖于第三方，该第三方可能会在没有通知的情况下关闭
  • 第三方可能会跟踪您的用户

static/css/ 中的文件

下载样式表并将其作为 static/css/stylesheet.css 放入站点的静态文件夹中。如果此文件存在，则将忽略配置中的选项 stylesheetUrl。

优点
  • 完全控制站点的组成部分
  • 您可以根据需要覆盖该文件
  • 您可以使用自己的样式表，即使它们不是公开可用的
  • 您可以使用 git 子模块 或 makefile 来自动化该过程，从而发挥创造力
缺点
  • 更改框架需要更多工作
  • 外部 CSS 代码现在位于您的存储库中

自定义参数

帖子只有一个标准参数：如果您想要封面图像，请像这样添加它

image: path/to/image.jpg

大多数情况下，路径将只是 coverimage.jpg 等。这假设您的帖子组织为页面束（无论如何，这是最明智的方式）。请查看 exampleSite 以了解其外观。

改进建议

  • 添加 CI 测试
  • 在 CI 中自动创建屏幕截图
  • 为不同的 CSS 框架提供在线演示站点版本
  • 确保项目可以很好地国际化

另请参阅