Hugo 主题

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

Paperesque

一个轻量级的个人网站主题。

下载
Paperesque

Paperesque

一个轻量级的 Hugo 主题，带有一些巧妙的技巧。

你可以在 capnfabs.net 上看到它的实际效果。

以下是它的特别之处

  • 具有用于调整图像大小以适应页面的短代码，以及用于从输出中删除原始图像的工具
  • 当有足够的空间时，脚注会变成边注。
  • 用于编辑和控制发布的工具
    • 草稿的视觉差异
    • “基本上隐藏”页面的能力，使其只能通过知道 URL 来访问。

安装

git subtree（最简单！）

使用 git subtree 将文件复制到你的仓库中（这比子模块容易使用得多；这是一个解释）

git subtree add --prefix themes/paperesque https://github.com/capnfabs/paperesque mainline --squash

这将在你的仓库中添加一个提交，其中包含所有准备就绪的内容。你可能需要修改此主题的部分内容以供自己使用！Subtree 使这变得容易，因为你只是将代码复制到了你的仓库中 ✨

git 子模块

如果你确定要使用 git 子模块

git submodule add -b mainline https://github.com/capnfabs/paperesque themes/paperesque

在你的 config.toml 中选择主题

为你的 hugo 站点添加/修改 config.toml 中的 theme 字段

theme = "paperesque"

使用功能

主页

你有很多主页选项

这是在 2022 年 12 月左右之前唯一支持的功能。

将类似这样的内容添加到你站点的 config.toml

[[params.menu]]
  name = "blog"
  url = "posts/"

[[params.menu]]
  name = "tags"
  url = "tags/"

[[params.menu]]
  name = "about"
  url = "about/"

[[params.menu]]
  name = "contact"
  url = "contact/"

2. Markdown 内容

你可以创建一个 /content/_index.md，该页面的内容将呈现为主页。

3. 一个部分

你可以创建一个 /content/_index.md，并在 frontmatter 中添加一个 display_section 键。该部分的名称将用于呈现内容列表。

4. 一个部分 + 侧边栏中的自定义内容。

执行与选项 3（“一个部分”）相同的操作，但还可以在该文件中包含 markdown 内容。markdown 内容将在左侧呈现为侧边栏，而该部分的项列表将在主面板中呈现。

这些都是配置驱动的！将此添加到你的 config.toml 中（例如）

[[params.topmenu]]
  name = "about"
  url = "about/"

[[params.topmenu]]
  name = "contact"
  url = "contact/"

[[params.topmenu]]
  name = "rss"
  url = "posts/index.xml"

调整大小后删除原始图像

fitfigure 短代码与 figure 短代码完全相同，但它会自动调整图像大小以适应容器，并且为不同的 DPI（1x、2x）提供不同的分辨率。

每当你使用此短代码时，主题都会记下你指定的资源。

现在，如果你想从输出中删除原始图像，则需要进行一些配置。

首先，将此添加到你站点的 config.toml

[outputs]
page = ["HTML", "droplist"]

现在，作为构建过程的一部分，运行

./themes/paperesque/buildscripts/drop-resources.py [hugo-output-directory]

（Hugo 输出目录通常是 ./public）。

就是这样！调整大小的资源将被删除。

这是默认关闭的，因为它会在你的构建输出中添加 .droplist 文件，如果你没有预料到它们，这将是一个不愉快的意外。

草稿的视觉差异

这个功能是启用的，并且无法关闭。草稿在任何地方都有橙色的条纹背景。你不会错过它们。

脚注变成边注

这个功能是默认启用的。

你可以通过在你的 config.toml 中的 params 中添加 disableMarginNotes = true 来在站点范围内关闭它，例如

[params]
disableMarginNotes = true

或者，你可以通过将 disableMarginNotes = true 添加到页面的 front-matter 来逐页关闭它。

使页面仅通过 URL 可见/可访问

你可以通过将以下内容添加到你的 front-matter 来防止页面公开可见（包括在列表中等）

sitemap:
    disable: true
params:
    mostlyHidden: true
  • 请注意，sitemap.disable 仅在 Hugo 0.125.0 版本及更高版本中可用，因此如果您依赖此功能，请确保您使用的 Hugo 版本是 0.125.0 或更高版本。

针对示例网站进行测试

您可以使用以下命令构建使用此主题的示例网站：

cd exampleSite
hugo serve --themesDir=../..

修改/修改 JS

正在使用的 JavaScript (assets/js/main.js) 是从 ./js/ 目录构建的。以下是如何修改 JS 的说明：

设置

首先，您需要安装 yarn 包管理器。

然后，运行

yarn install

以安装所需的依赖项。

开发构建

运行

npx parcel watch

就这么简单！

生产构建（即在您提交代码/部署代码之前） 

npx parcel build --no-source-maps

其他资源

  • 关于这一切如何运作的解释在这篇博客文章中，如果您遇到困难或想借用一些想法而不获取全部内容，请查看该文章。
  • 您可以通过在 Github 上搜索 paperesque filename:config.toml（需要登录）来查看还有谁在使用这个主题。

另请参阅