Notrack

Notrack 是一个原创的、极简的主题，专注于自给自足和去中心化。默认情况下，Notrack 不依赖任何第三方来服务您的网站。

README 文件很长。您可以使用 GitHub 中的自动目录进行导航（渲染的 README 的右上角）。

依赖关系

您需要 Hugo 的扩展版才能使用此主题。这是 Hugo 开发人员推荐给大多数用户的版本。您可能已经有了，但您可以使用以下命令进行双重检查

$ hugo version
hugo v0.115.4+extended linux/amd64 BuildDate=unknown

请注意版本号后的“+extended”。有关标准版和扩展版的信息，请参阅 Hugo 的安装说明。

演示网页

该主题有一个演示网页，看起来像这样

这里有一个可用的演示页面：https://gevhaz.github.io

您也可以在本地服务器上运行演示网页。这是操作方法

$ git clone https://github.com/gevhaz/hugo-theme-notrack notrack
$ cd notrack/exampleSite/
$ hugo server -D --themesDir ../..

然后您可以在浏览器中查看示例网站并与之交互。Hugo 将打印使用哪个地址的说明。通常是 http://localhost:1313/。

如何使用 Notrack 从头开始编写网站

有两种方法可以开始使用此主题——自下而上的方法和自上而下的方法。自上而下的方法是直接克隆示例站点并修改它，直到它看起来符合您的要求。自下而上的方法是从 hugo new site 开始，然后逐步添加您需要的组件。本节介绍如何执行此操作。

基本结构

Notrack 在构建时考虑了几种类型的页面。主页是必需的，但博客、“关于我”页面、图库和简历都是可选的。

本节介绍如何创建主题支持的每种类型页面的最小版本。在下一节中，我们将介绍如何使用短代码向页面添加自定义内容（当然，您也可以在任何页面中使用默认的 Hugo 短代码）。

如何创建主页

首先，在您选择的目录中创建一个新的 hugo 项目

$ hugo new site <my-webpage>
$ cd <my-webpage>
$ git init
$ git submodule add https://github.com/gevhaz/hugo-theme-notrack.git themes/notrack

[!NOTE] 我使用尖括号（“<”和“>”）来表示占位符。您应该将其替换为您自己的值。

您的项目应该已经有一个名为 hugo.toml 的文件。打开它并确保它看起来像这样

baseURL = '<URL where you plan to publicize your web page>'
languageCode = '<language code for language the website uses, e.g. en-us>'
title = '<My New Hugo Site>'
theme = 'notrack'

[params]
author = '<Your name>'
# optional, defaults to author:
siteHeading = '<the text that goes at the top of your webpage>'

现在您准备好将第一个内容添加到网页了。创建主页，这是用户看到的第一个页面

$ hugo new _index.md

这可以包含对网站内容或您自己的简短介绍。这是一个例子

+++
date = '2024-11-10T16:46:03+02:00'
title = ''
+++

Welcome to my web page!

现在您有了一个可用的网站。您可以使用以下命令在本地运行它

$ hugo server

或者根据 Hugo 的说明将其部署到某处：https://gohugo.com.cn/hosting-and-deployment/

您可以进一步扩展主页

• 添加图像（例如，像在演示网页中一样）
• 添加页脚（将在所有页面上显示）

如何创建博客

TL;DR：您以默认方式添加博客文章，但不要忘记将博客部分添加到导航栏，以便人们可以找到它。

首先，为博客创建必需的 _index.md 页面

$ hugo new blog/_index.md

并为其提供以下内容

+++
title = '<no need to change>'
date = '<no need to change>'

[menu.main]
identifier = 'blog'
name = 'Blog'
weight = 5
+++

在您的 hugo.toml 中的 [params] 下，添加

mainSections = ['blog']

[!NOTE] 部分名称基于文件夹名称，因此如果您将文件夹命名为“blog”以外的名称，请确保反映出来。

添加一篇博客文章

$ hugo new blog/post-1.md

并在其中放入您想要的任何内容。不要忘记将 draft 设置为 false。

添加或更改这三个文件后，您将在主页上看到博客文章的摘要，以及菜单中指向博客的链接。

现在，您只需使用 hugo new blog/<post name>.md 添加新帖子，就可以继续写博客了

对于博客，您可能还对以下内容感兴趣

• 如何创建标签和类别页面
• 如何创建存档页面

如何添加“关于我”页面

关于“关于我”页面没有什么特别之处，但是该主题提供了一些短代码，如果您想像在演示站点中一样显示社交链接，这些短代码可能会很有用

要准备使用其中一个短代码，请在站点配置中配置您的社交媒体用户名，如下所示

[params.social]
github = '<your github username>'
email = '<email address>'

有关所有可用的社交图标，请参阅 data/notrack/social.yaml 文件。其中有 65 个。

然后，创建一个新页面，例如像这样

$ hugo new contact.md

确保将其添加到导航栏，例如像这样

[menu.main]
name = 'About me'
weight = 90

最后，在该页面中使用 social 或 contact-box 短代码。前者生成上图中底部的元素，后者生成右侧的元素。

如何创建图库页面

图库页面只是一个普通页面。创建一个页面

$ hugo new gallery.md

然后在上面使用图库短代码。

如何创建简历

简历页面只是一个普通页面。创建一个页面

$ hugo new resume.md

然后在上面使用简历短代码。

如何创建标签和类别页面

如果您有博客，Hugo 会自动为您生成标签和类别页面。它们分别位于 <您的网站.com>/tags 和 <您的网站.com>/categories。不要忘记实际标记和分类您的帖子，以便它们在那里显示。

Notrack 在您的博客顶部放置了带有指向标签和类别（以及如果您有存档页面）链接的按钮。如果您不想要这些，请在您的站点配置中禁用它

[params]
showTaxonomyLinks = false

您可能更希望拥有一个指向标签和类别的下拉菜单，如下所示

要添加标签页面并为其添加菜单项，只需创建一个新的 tags 部分，并将其索引页面作为博客的子菜单添加。您可以通过以下方式创建该部分

$ hugo new tags/_index.md

唯一需要的内容是前言中的菜单定义，如下所示

[menu.main]
parent = 'blog'
name = 'Tags'

[!IMPORTANT] 注意，父值是您在博客索引页面中设置的博客菜单的标识符。

类别的过程完全相同。

如何创建存档页面

您可以通过在站点配置中添加 [taxonomies] 部分来添加一个按年份和月份列出所有博客文章的存档页面

[taxonomies]
year = "year"
month = "month"
tags = "tags"
categories = "categories"

[!NOTE] tags 和 categories 分类法默认启用，但如果您在站点配置中添加了 taxonomies 部分，它们将被禁用，除非您明确添加它们。

然后添加一个存档页面

$ hugo new archive/_index.md

它只需要一个 front matter 来指定它应该使用 archives 布局

title = 'Archive'
layout = 'archives'

您将自动在博客页面顶部获得一个链接到存档的按钮，除非您禁用它。或者，您可能希望将该页面添加到博客下拉菜单中

layout = 'archives'
[menu.main]
parent = 'blog'
name = 'Archive'

[!IMPORTANT] 请确保 parent 的值是您用于博客菜单项的标识符，否则它不会出现在下拉菜单中。

来自 Notrack 的短代码

Notrack 提供了一些自定义的短代码。在本节中，我将在表格中列出所有短代码，并展示如何使用非平凡的短代码。

Notrack 提供的短代码

raw HTML 短代码

rawhtml 可以像这样使用

{{< rawhtml >}}<p>A paragraph</p>{{< /rawhtml >}}

这允许您使用 HTML 创建仅使用 Markdown 无法创建的元素，而无需在站点配置文件中允许不安全的 HTML。我不是安全专家，并且可能存在一个很好的理由来解释为什么默认情况下禁用不安全的 HTML。如果您认为此短代码不应成为主题的一部分，请随时提出问题并说明原因。

视频短代码

video 短代码基本上只是创建一个 HTML <video> 标签，我为其添加了一些样式的类。像这样使用它

{{< video src="your_video.mp4" type="video/mp4" preload="auto" >}}

您的视频需要位于 static 文件夹或其子目录中，例如 “video”（在这种情况下，您将在 src 参数中添加子目录）。

图片短代码

image 短代码用于添加图片，但比 Hugo 的默认 figure 短代码提供更多选项。提供了以下额外选项

您还可以使用 figure 短代码的所有选项。

设置 float 使文本环绕图像，而不是占用页面的全部宽度。

这是一个如何使用它向主页添加图片的示例

{{<image
    float="right"
    width="11em"
    frame="true"
    caption="Picture of me"
    src="img/portrait.jpg"
>}}

请确保 src 值指向现有图片。在这种情况下，它应该在 static/img/portrait.jpg 中。

contact-box 短代码

contact-box 短代码创建一个框架，其中包含指向页面右侧的社交媒体或其他联系信息的链接，并且，如果您愿意，可以在框的左侧、框架外部放置一些文本。将此文本放在短代码标签内。

框架中存在的社交媒体链接由您的站点配置的 social 键决定。请参阅此处。

对于 contact-box，有三个可选参数：float、width 和 height。这与 image 短代码类似。Float 使文本环绕框（可以是 right 或 left），其他两个自然地使用内联 CSS 设置 <div> 的尺寸。参数默认为浮动到右侧，宽度默认为 12em，高度默认为 auto。

社交短代码

这类似于 contact-box 短代码。它仅显示您配置的社交媒体帐户的可点击图标。与 contact-box 一样，站点配置的 social 键是包含哪些社交媒体以及您的句柄的来源。

画廊短代码

有四个用于创建画廊的短代码

• gallery-category
• gallery-photo
• gallery-modal
• gallery-script

前两个结合使用来创建实际的画廊。在您的某个页面中执行以下操作

{{< gallery-category >}}
    {{< gallery-photo fn="<filename of first picture>" caption="<your caption>">}}
    {{< gallery-photo fn="<filename of second picture>" caption="<your caption>">}}
    {{< gallery-photo fn="<filename of third picture>" caption="<your caption>">}}
    {{< gallery-photo fn="<filename of fourth picture>" caption="<your caption>">}}
{{< /gallery-category >}}

图片应位于您项目中的 static/img/thumbnails 下。

如果您想要一个弹出窗口以显示缩放版本，请在页面底部添加其他两个短代码

{{< gallery-modal >}}
{{< gallery-script >}}

并将相应的全尺寸图像放置在 static/img/fullsize 下。文件名需要与缩略图的文件名相同。

缩略图当然应该很小，以便您的页面加载速度快，并且全尺寸应该足够大，以便它们在覆盖 Web 浏览器的全部空间时看起来不会像素化。调整图像大小的一种方法是使用 GraphicsMagick：gm mogrify -resize 1920x1920 *.jpg，它会将当前文件夹中的所有图像调整为最大宽度/高度为 1920 像素（同时保持纵横比）。

简历短代码

有一些短代码可以帮助您创建简历。这些是

• container
• resume-section
• resume-category
• resume-entry

Container 只是创建一个具有特定类的 <div> 元素。resume-section 需要一个标题，该标题将显示在其内容的左侧（如果可以在屏幕上容纳，否则在顶部）。在此处，您放置一个或多个 resume-entry 短代码。此短代码采用三个参数 what、where 和 when（请参阅下面的示例用法）。它还在短代码标签内采用原始 HTML。<p>s、链接以及无序和有序列表都有样式。除此之外，还使用了站点范围的 CSS。示例用法

{{< container >}}
    {{< resume-section title="About Me" >}}
        {{< resume-entry >}}
            <p>
            Some info about you.
            </p>
        {{< /resume-entry >}}
    {{< /resume-section >}}

    {{< resume-section title="Education" >}}
        {{< resume-entry what="Bachelor's program of Computer Science"
                         where="Sidney University"
                         when="2010–2013">}}
            <ol>
                <li> Some comment on what skills you learned</li>
                <li> Some other comment </li>
            </ol>
        {{< /resume-entry >}}
    {{< /resume-section >}}
{{< /container >}}

一个技巧是您也可以将 resume-entry 短代码与 Markdown 一起使用。只需切换使用 % 而不是 < 并确保您的 Markdown 前面没有任何空格（否则所有内容都将被解释为代码）

        {{% resume-entry what="Bachelor's program of Computer Science"
                         where="Sidney University"
                         when="2010–2013" %}}
* Some comment on what skills you learned
* Some other comment
        {{% /resume-entry %}}

导航栏

如何将页面添加到导航栏

将其添加到页面的 front matter 中的 main 菜单中

[menu.main]
identifier = 'contact'
name = 'About me'
weight = 90

不要使用站点配置文件来添加菜单，因为这样活动选项卡的突出显示可能无法正常工作（至少在涉及下拉菜单时）。

如何向下拉菜单添加页面

此主题在所有页面的顶部都有一个导航栏，其中包含诸如“主页”、“博客”、“关于我”等按钮，具体取决于您的配置。您可以设置当鼠标悬停在按钮上时显示下拉菜单。例如，演示网站中的“博客”按钮。

如果您想要用作下拉菜单根的按钮已经存在，您只需将其设置为您页面菜单条目的父级。您页面的 front matter 可能如下所示：

如果您的页面是“关于博客”，并且您想将其添加到博客下拉菜单中。

[menu.main]
parent = 'blog'
name = 'About blog'

您可能希望有一个按钮专门用于容纳下拉菜单。如果是这样，请在您的站点配置中为不存在的页面创建一个菜单项。

[menu]
  [[menu.main]]
    identifier = "other"
    name = "Other"
    pageRef = '#'
    weight = 30

权重越低，条目在导航栏中越靠左。`pageRef` 为 '#' 的设置使得按下按钮不会更改页面。

现在您已经创建了一个虚拟菜单项，您可以像以前一样通过将其引用为父项来将您的真实页面添加到其中。

[menu.main]
parent = 'other'
name = 'My links'

其他站点配置

如何设置页脚

如果您想在网页中添加页脚，可以使用配置中的 footer 键，例如

[params]
footer = """\
  This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 \
  International License.\
  """

这将添加一个 HTML