为 Hugo 设计的 internet-weblog 主题

internet-weblog 是一个极简（且略微响应式）的 Hugo 主题，它提供了一个传统的博客，并混合了微博和照片博客。它还提供了链接到远程页面的简单链接帖子的功能。它是从为 Octopress 制作的主题移植过来的。

该主题在其页脚中具有可自定义的个人简介部分和基于 Flickr 的照片流，用于显示按年份排序的所有帖子的独特布局，并支持用于自定义样式和加载的 JavaScript 的局部视图。

要了解更多信息，请查看我的博客，该博客使用此主题呈现，并在 Github 上查看其配置。

目录

• 安装
• 入门
  • 配置您的博客
    • 博客文章 Markdown 文件应存储在哪里？
    • 如何配置博客导航中的菜单
    • 将您自己定义为作者
    • 自定义个人简介部分、404 页面、JavaScript 或样式表
    • 创建链接帖子
    • 为社交媒体指定特色图片
    • 首选深色外观
  • 变量
  • 覆盖
• 贡献
• 第三方库
• 许可证
• 联系方式

安装

在您的 Hugo 网站的文件夹中运行

$ mkdir themes
$ cd themes
$ git clone https://github.com/jnjosh/internet-weblog.git

有关更多信息，请阅读 Hugo 的官方设置指南。

入门

此主题采用了一些概念来创建个人博客。重要的是阅读此内容，因为您在启动时可能看不到您期望的内容。由于此主题旨在作为个人博客，因此它选择了一些简化，例如使用 Hugo 中的“懒人博客的章节菜单”选项来显示简单菜单。它假设您想将您的博客文章称为 posts 并按此进行组织。例如，使用 Hugo 创建新帖子（或微型帖子或照片帖子）需要您键入

  $ hugo new posts/my-new-post.md

  $ hugo new microposts/quick-thought.md

  $ hugo new photos/my-nyc-vacation.md

它还假设您想显示指向您的内容部分（posts、microposts、photos）的链接，并在菜单中显示指向其他页面的链接，这需要您进行一些设置。本指南将引导您完成配置博客以使用该主题的步骤。

配置您的博客

博客文章 Markdown 文件应存储在哪里？

该主题与其他内容类型一起使用，但当帖子分组在 posts 下时效果最佳。当使用 posts（请注意，它是复数形式）内容类型时，您将拥有一个按年份排序的自定义列表页面和默认列表页面。这是一个例子

建议：将您的博客文章组织在 posts 目录下。

如何配置博客导航中的菜单

如上所述，此主题采用了一种简单的菜单方法。实际上，它并不真正支持自定义菜单，而是选择仅使用 Hugo 的 main 菜单。因为它使用了“懒人博客的章节菜单”，所以您需要对 config.toml 文件进行一项更改。添加 main 作为 SectionPagesMenu。

SectionPagesMenu = "main"

因此，您的单个帖子不需要将自己组织到菜单分组中。一切都被假定为分组在顶层。如果要在菜单的根目录中添加自定义页面，则这是一个例外。在这种情况下，您需要在页面的 Front Matter 中添加 menu: main。

您可以通过将 RSSSections 列表添加到 config.toml 的 Params 部分来控制哪些菜单项获取 RSS 图标和链接

[params]
   RSSSections = [ "Posts", "Microposts", "Photos" ]

然后，您可以通过为要显示的每个菜单项添加一个部分来控制 config.toml 中这些菜单的名称和权重

[[menu.main]]
   name = "Posts"
   weight = 1
   identifier = "posts"
   url = "/posts/"

如果您不确定这应该是什么样子，请查看 jnjosh.com 如何在其 config.toml 中使用它。

建议：将 SectionPagesMenu 添加到您的 config.toml 文件中。建议：除非您希望它显示在导航栏上，否则不要在您的帖子的 Front Matter 中设置 menu。建议：通过将 RSSSections 参数添加到您的 config.toml 文件中来自定义获取 RSS 图标的菜单。建议：通过将 menu.main 部分添加到您的 config.toml 文件中来配置菜单项。

将您自己定义为作者

看起来大多数主题都使用 author 变量来添加类似您的姓名之类的简单内容。此主题使用有关您的更结构化的数据，并且需要一个 [params.author] 部分。每个属性影响的详细信息在下面的变量部分中定义，但您应该将此部分添加到您的 config.toml

[params.author]
   Handle = "<Your `handle`>"
   FirstName = "<Your First Name>"
   LastName = "<Your Last Name>"
   AboutPage = "<The relative or complete link to your about page>"
   Location = "<Your Location>"
   FlickrID = "<Your Flickr ID>"

建议：不要使用 author 变量，而是在您的 config.toml 中使用上面的 [params.author] 部分。

自定义个人简介部分、404 页面、JavaScript 或样式表

您可以通过一些入口点来自定义内置项。最重要的一个是 bio.html partial。此文件的内容显示在页脚的左侧。要自定义此内容，请在站点的 layouts/partials 下的目录中添加一个 bio.html 文件。

有关这些覆盖的更多详细信息，请参见下面的覆盖部分。

建议：向您的站点添加一个 layouts/partials/bio.html 文件，向您的读者介绍您。

创建链接帖子

有时您想要一个仅链接到另一个网站的帖子。可以通过在您的单个帖子中包含 externalurl 参数来完成此操作。链接帖子只是 posts 下的普通帖子，具有此特殊参数。例如，在谈论某个 kickstarter 项目的帖子中，您可以将其添加到您的单个帖子的 Front Matter 中

externalurl = "http://kickstarter.com"

这些帖子的呈现方式略有不同，带有一个 → 来表示它是远程的。

为社交媒体指定特色图片

有时您想将图片用作特色图片，当在社交媒体中链接您的帖子时，该图片将显示。这可以通过在您的单个帖子中包含 feature 参数来完成。请注意，您无需输入 URL，只需输入图片的路径，而无需以 / 开头

feature: "assets/posts/20240219/image.jpg"

首选深色外观

如果您想启用深色外观，则对此有有限的支持。目前，在您的 config.toml 文件中将 EnablePreferredDarkAppearance 参数设置为 true 将在自动状态下启用它——如果系统正在使用深色模式。

变量

变量	值是什么？	必需
主题	internet-weblog	仅当你想使用此主题时！😃
标题	互联网博客	不是。除非你想给你的博客起一个别的名字。
SectionPagesMenu	main	是的。见上文。
[params.author] - Handle	一个简短的句柄来描述你。这可以是你的推特句柄，或者仅仅是你的名字。	是的。这用于生成站点的标题。
[params.author] - FirstName	你的名字	是的。这在页脚中用于打招呼，并在其他地方用来标识你为作者。
[params.author] - LastName	你的姓氏	不完全是。它在某些地方用于标识你为作者。
[params.author] - AboutPage	/about 或 http://about.othersite.com	仅当你想有一个关于页面时。这暴露出来是为了让你也可以链接到外部的关于页面。如果你有一个本地页面，它可以只是相对路径。
[params.author] - Location	你的城市	不是。如果设置了，它会被添加到页脚的版权信息中，这样你可以表达对家乡的热爱。
[params.author] - FlickrID	你的 Flickr ID	不是。页脚会显示你在 Flickr 上的照片流。如果你不设置，将不会显示任何内容。
[params] - Description	描述你的网站	不是。如果设置了，它会被添加到你的页面的元数据中。
[params] - ShowCopyright	true 或 false	不是。如果为 true，版权文本将被添加到页脚。
[params] - EnablePreferredDarkAppearance	true 或 false	不是。如果为 true，则会尊重查看者的系统暗模式，切换到暗外观。
[params] - RSSEnabled	true 或 false	不是。如果为 true，将生成 RSS 页面。
[params] - RSSSections	[ "Posts", "Microposts", "Photos" ]	如果你想在菜单中有 RSS 链接，则为是。这些字符串需要是你想要显示 RSS 图标的部分的显示名称。
[params] - RSSMicropostTitles	true 或 false	不是。如果为 false，则微型博客 RSS 源中的帖子将不包含标题。如果不存在或为 true，则不会发生任何事情。
[params] - YearlyMicroposts	true 或 false	不是。如果为 true，微型博客将拥有一个与帖子一样的按年分组的页面。如果不存在或为 false，则应用默认的没有微型博客年度分组的设置。
[params] - SummarizeMicroposts	true 或 false	不是。如果为 true，微型博客将像帖子一样在主列表中被总结，并带有“继续阅读”链接。如果不存在或为 false，则应用默认的没有总结微型博客的设置。

这是一个 config.toml 的示例

baseurl = "http://mysite.com/"
languageCode = "en-us"
title = "internet weblog"
theme = "internet-weblog"
Paginate = 10
SectionPagesMenu = "main"

[params.author]
   Handle = "jnjosh"
   FirstName = "Josh"
   LastName = "Johnson"
   AboutPage = "/about"
   Location = "Durham, NC"
   FlickrID = "87151163@N00"

[params]
   Description = "This is my blog, read it and enjoy."
   ShowCopyright = true
   RSSEnabled = true
   RSSSections = [ "Posts", "Microposts", "Photos" ]

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

[[menu.main]]
   name = "Posts"
   weight = 1
   identifier = "posts"
   url = "/posts/"

[[menu.main]]
   name = "Microposts"
   weight = 2
   identifier = "microposts"
   url = "/microposts/"

[[menu.main]]
   name = "Photos"
   weight = 3
   identifier = "photos"
   url = "/photos/"

覆盖

该主题希望你在你的博客中覆盖一些文件，以完成你博客的自定义。以下是你可以覆盖的文件列表以及你想要覆盖它们的原因。要覆盖这些文件，请在 layouts/partials 下创建你自己的文件版本——你可能需要创建此目录。

贡献

你是否发现了一个错误或对新功能有想法？请随意使用问题跟踪器让我知道或发出拉取请求。

第三方库

此主题使用了以下第三方库。

• 页脚中的图片库
  • jQuery 3.7.1
  • lightbox2 2.11.4

许可证

此主题在 MIT 许可下发布。有关更多信息，请参阅许可证。

联系

这是我为 Hugo 制作的第一个主题，所以我确信我做错了一些事情或假设了太多。如果你有任何想法或需要修复的事情，请告诉我。

• Josh Johnson @jnjosh

感谢 Steve Francia 创建了 Hugo！

另请参阅

• ink-free
• Bear Cub
• Color Your World
• congo
• hugo-theme-console