Hugo 主题
TatBanTheme2.0
一个用于构建优雅网站和可用博客的极简主题
TatBanTheme2.0
TatBanTheme2.0 是一个极简的 Hugo 主题,用于构建优雅的网站和可用的博客。该主题使用响应式 Bootstrap 5 框架从头开始构建。
在线演示在 Netlify 上。
尽管它的名称中有 2.0,但它仍然是一个正在进行中的项目。我将在未来的版本中添加更多的 CSS(并希望是一些 JS)元素。
这个主题的目的不一定是提供一个即插即用的框架,而是鼓励人们开始进行自己的自定义。欢迎提出 pull request。
安装
我假设已经按照官方说明在系统中安装了 Hugo,并且您已经通过运行以下命令创建了一个 Hugo 站点
hugo new site myawesomesite
cd myawesomesite
您现在可以通过以下三种方式中的任何一种安装主题
- 克隆:将主题仓库克隆到您的
themes
文件夹中(如果您将来想为主题做出贡献或打开 pull request)
git clone https://github.com/tatsatb/TatBanTheme2.0.git themes/TatBanTheme2.0
- 子模块:将作为 Git 子模块添加到您的
themes
文件夹中(如果您目前没有为主题做贡献的计划)
git init
git submodule add https://github.com/tatsatb/TatBanTheme2.0.git themes/TatBanTheme2.0
- 对于所谓的不太懂技术的用户:只需单击下载选项(在绿色代码按钮下),然后提取文件,然后将文件夹复制到您站点的
themes
文件夹中,即可安装主题。
快速入门
在您站点的根文件夹(即
myawesomesite
文件夹)中,删除config.toml
文件。从
themes/TatBanTheme2.0 /examplesite
文件夹复制config.toml
文件,并将其粘贴到根目录myawesomesite
文件夹中,并将baseURL
更改为您网站的 URL。将
themes/TatBanTheme2.0/exmaplesite/content
文件夹中的所有内容复制到myawesomesite/content
文件夹。在您的终端中,转到
myawesomesite
目录并使用以下命令。
hugo server -D
您应该看到一个正在工作的网站。
功能
- 完全响应式移动优先主题。它在任何屏幕上都应看起来很棒。
- 独特的设计。该主题是从头开始设计的。它不是任何其他 Hugo/Jekyll/HTML5 主题或任何类似主题的分支。
- Bootstrap 5。包含优雅的 CSS 框架和图标集。
- 支持博客的主题。默认情况下,它可以生成标签和类别页面。
- 启用评论。默认情况下已配置并启用 Disqus。
- 单独的页面模板。因为您的博客文章、列表页面和主页不应该看起来相同!
- 对 SEO 友好。每个页面的自定义描述 meta 标签。
- 启用 LaTeX。Markdown *很棒*。但是,有时我们需要编写好看的方程式。因此,在此主题中,集成了 LaTeX(使用 KaTex 库)。
- 启用自定义 HTML。再说一次,markdown 很棒。但是,有时我们需要更精细的控制。因此,如果您正在使用此主题,则可以直接在任何 .md 文件中键入 HTML。
配置您的站点
基本知识
自定义网站的任何方面以供个人使用的基本规则是遵循主题的目录结构,并在站点的根目录中创建类似的目录和文件。
您不必编辑 themes
文件夹中的文件来编辑您的站点配置。按照 Hugo 的查找顺序,您站点根目录的文件将优先,Hugo 将使用您的文件(而不是主题的文件)来呈现网站。如果您直接编辑 themes
文件夹中的文件,您的站点可能会与主题的未来版本不兼容。
社交媒体链接
将 footer.html
从 themes/TatBanTheme2.0/layouts/partials/
复制到 myawesomesite/layouts/partials/
文件夹。在您喜欢的文本编辑器/IDE 中打开复制的文件,并编辑链接以添加您的 Facebook/Twitter/Linkedin/电子邮件 ID。
自定义 CSS
主题的自定义 css 文件位于 themes/TatBanTheme2.0/static/css/
文件夹中,文件名为 banerstyle.css
。您可以将自己的文件添加到 myawesomesite/lstatic/css/
文件夹中,并更新您站点 header.html
文件在 myawesomesite/layouts/partials/
文件夹中
您可以添加多个自定义样式表,它们将在主主题 css 之后加载。例如,上面的一行将加载位于 /static/css/custom.css
的 CSS 文件。
主页设置
该主题对登陆页面/主页使用不同的 css 框架。它位于 themes/TatBanTheme2.0/layouts/partials/index.html
。您可以复制并粘贴到您站点的布局文件夹中,然后根据需要对其进行编辑。如果您喜欢更简单/更小的选项,当然,您可以创建一个新的主页
使用 singlepage
布局,如在 themes/TatBanTheme2.0/layouts/_default/
文件夹中找到的那样,并以与其他页面相同的 markdown 格式编写它。
禁用 HTML 编辑
正如我所说,我总是觉得有时我们需要在 Markdown 结构中使用 HTML 和 CSS 来添加更多的风格。因此,在此主题中,默认情况下会在整个站点范围内启用 HTML。如果您更喜欢其他方式,请从您的 config.toml
中删除此部分
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
您仍然可以通过使用 {{< rawhtml >}} _[在此处放置您的内容]_ {{< /rawhtml >}}
语法来有选择地在您的 markdown 中添加 HTML,该语法使用 rawhtml.html shortcode。
键入 LaTeX
要使用 LaTeX 框架键入任何方程式(或任何内容),应将 front-matter 中的参数 math
设置为 _true_。
---
math: true
---
然后,请使用双美元符号将 TeX 排版括起来。您还可以通过使用单美元符号括起来来使用内联方程式。
博客文章中的评论系统
默认情况下启用 Disqus 评论。请在您站点的 config.toml
文件的 disqusShortname
字段中更新您的 Disqus 用户名。如果您尚未注册 Disqus,则始终可以免费注册。
只需在 front matter 中使用 single
布局,即可使 Disqus 出现在页面底部。
许可
版权所有 © 2022 Tatsat Banerjee
本程序是自由软件:您可以根据自由软件基金会发布的 GNU 通用公共许可证的条款重新分发和/或修改它,可以选择许可证的第三版或(由您选择)任何后续版本。
发布本程序的目的是希望它能有用,但不提供任何担保,甚至不提供适销性或针对特定用途的适用性的暗示担保。 有关详细信息,请参阅 GNU 通用公共许可证。
您应该已收到随本程序一起分发的 GNU 通用公共许可证副本。 如果没有,请访问 https://gnu.ac.cn/licenses/。