不要样式，请！

一个（几乎）没有 CSS、快速、极简的 Hugo 主题，移植自 riggraz/no-style-please。

特性

• 快速 (CSS 不足 3kb！)
• 浅色、深色和自动模式
• 响应式
• 内容优先（排版针对最大可读性进行了优化）
• RSS 订阅（使用 Hugo 的嵌入式 RSS 模板）
• MathJax 支持
• 支持 details HTML 标签

安装

最简单的方法是将此仓库克隆（或添加为子模块）到 themes/nostyleplease，然后将 theme = 'nostyleplease' 作为新行附加到 config.toml。主题附带的示例页面在其前言中包含 draft: true，请使用 --buildDrafts 构建它们。

用法

您可以编辑 config.toml 文件来自定义您的博客。您可以更改博客的名称、作者、主题外观（浅色、深色或自动）、日期格式等。可自定义的字段应该很容易理解。尽管如此，config.toml 包含一些注释，可以帮助您理解每个字段的作用。请注意，您的 Hugo 网站根目录下的 config.toml 将完全覆盖主题目录中的 config.toml，因此请将您要保留或编辑的属性从主题的 config.toml 复制到您网站的 config.toml 中。

自定义菜单

为了从主菜单添加/编辑/删除条目，您必须编辑 data 文件夹内的 menu.toml 文件。通过该文件，您可以定义菜单的结构。查看默认配置以了解其工作原理，并继续阅读以获得更全面的说明。

menu.toml 文件接受以下字段

• entries 定义一个新的无序列表，其中将包含菜单项
• 每个条目都是所讨论的 TOML 数组 entries 的成员
• 每个条目可以具有以下属性
  • title，它定义此菜单项的呈现文本（注意：您也可以指定 HTML！）
  • url，可用于指定此条目的 URL。如果未指定，则 title 将按原样呈现；否则，title 将被指向指定 URL 的链接标签包围。请注意，URL 可以是相对的或绝对的。另请注意，您可以通过在 title 字段中放置一个 <a> 标签来获得相同的结果。
  • post_list，可以设置为 true 或对象。如果为 true，则该条目将包含所有帖子的列表作为子条目。这用于呈现您的帖子列表。如果要自定义要呈现的帖子（例如，按部分），您可以在 post_list 下添加以下一个或多个属性
    • section，可以设置为字符串。它仅用于呈现指定部分的帖子列表。如果您未设置，则将呈现所有部分的帖子。
    • limit，可以设置为数字。它指定要显示的帖子数。如果未设置，则将呈现所有帖子。
    • show_more，可以为 true。如果为 true，并且要显示的帖子数大于指定的 limit，则呈现指向另一个页面的链接。要指定链接的 URL 和文本，您可以设置 show_more_url 和 show_more_text 属性，这些属性在下面进行了说明。
    • show_more_url，可以是字符串。它指定“显示更多”链接的 URL。仅当 show_more 为 true 时使用。这通常会重定向到包含所有帖子的页面，您可以使用部分页面轻松创建该页面（请参阅“部分页面”部分）
    • show_more_text，可以是字符串。它指定“显示更多”链接的文本。仅当 show_more 为 true 时使用。
  • entries，是的，您可以在条目内部有条目。这样，您就可以创建嵌套的子列表！

部分页面

所谓的“部分页面”是显示特定部分中的帖子列表的页面。当创建新部分时，它应该由 Hugo 自动创建。

自定义索引页面

index.md 页面应使用布局 home，该布局显示菜单。如果要在菜单之后添加一些内容，只需在 _index.md 文件中添加该内容，它将自动显示在菜单下方。

您可以自定义索引页面的另一件事是在标题和菜单之间显示您的博客的描述。为此，只需编辑 config.toml 并将 params.theme_config.show_description 更改为 true。

您还可以添加页脚。只需编辑 ..nostyleplease/layouts/footer.md。

添加目录

您可以通过向帖子前言提供 toc: true 参数来添加目录。如果想要在其周围添加边框，您还可以设置 tocBorder: true。目录样式行为由 Goldmark 处理，默认值可以在 config.toml 文件中找到。

帖子列表按日期降序分组。

只需编辑 config.toml 并将 params.theme_config.isListGroupByDate 更改为 true。

专业提示

图像的深色模式

此主题通过 CSS invert() 函数反转浅色模式的所有颜色来提供深色模式。这种方法还会反转所有图像的颜色，但是，由于这不是人们期望的行为，因此默认情况下不会反转图像。

但是，如果您想强制反转特定图像上的颜色，可以通过将 class="ioda" 应用于该图像来实现（“ioda”代表“在深色外观上反转”）。有关此方法的示例，请参见概述帖子中的图像。请注意，颜色反转仅在主题具有深色外观时才会发生！

例如，如果您有黑白图像，那么在深色模式下反转它可能是有意义的。另一方面，如果反转，则彩色图像可能会看起来很糟糕。

贡献

欢迎在 GitHub 上提交 bug 报告和 pull 请求，地址是 https://github.com/hanwenguo/hugo-theme-nostyleplease/。

感谢

部分代码来自 wooseopkim/hugo-theme-nostyleplease，它是本主题的一个分支。

部分测试页面来自这个 jekyll 主题。

许可证

本主题以 MIT 许可证的条款开源。

另请参阅

• dead-simple
• Hugo Simple
• Hinode
• Gruvbox
• Gokarna