Hugo 主题

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

Clean White

一个简洁优雅的 Hugo 博客主题

下载
Clean White

Hugo 的 Clean White 主题

CleanWhite 是一个简洁、优雅且功能齐全的 Hugo 博客主题。这是一个使用此主题的实时演示站点。

它基于 huxblog Jekyll 主题和 Clean Blog Jekyll 主题。

这两个上游项目在创建博客主题方面做得非常出色，我在这里所做的是将其移植到 Hugo，我喜欢 Hugo 的简洁性和更快的编译速度。一些我认为可能有用的其他功能，例如使用 algolia 进行站点搜索以及在中国代理访问 Disqus，也已内置在 CleanWhite 主题中。上游项目的其他花哨功能此 Hugo 主题不支持，我希望它尽可能简单，并且至少目前只专注于博客用途。在创建此主题时，我遵循了 Hugo 主题的最佳实践，并尝试将模板的每个部分都设为可替换的局部 HTML，因此您可以更容易地基于它进行自定义。

屏幕截图

主页 屏幕截图

文章 屏幕截图

搜索 屏幕截图

归档 屏幕截图

Disqus 屏幕截图

微信支付 & 支付宝 屏幕截图

思维导图 屏幕截图

Bilibili 视频 屏幕截图

快速开始

最简单的方法是从该主题附带的示例站点开始，然后您可以进行尝试并添加自己的内容。

$ mkdir test
$ cd test
$ mkdir themes
$ cd themes
$ git clone https://github.com/zhaohuabing/hugo-theme-cleanwhite.git
$ cp -r hugo-theme-cleanwhite/exampleSite/** ../
$ cd ..
$ hugo serve

如果您的站点已经是 git 项目，您可能希望选择将 cleanwhite 主题添加为子模块，以避免弄乱您现有的 git 存储库。

$ mkdir themes
$ git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/hugo-theme-cleanwhite

在本地运行 Hugo 内置服务器

$ hugo serve -t  hugo-theme-cleanwhite

现在在浏览器的地址栏中输入 localhost:1313。

如果您从头开始，则 exampleSite 目录中有一个使用 CleanWhite 主题配置的有效 Hugo 站点。您可以将其用作您站点的起点。

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

配置

首先，让我们看一下 config.toml。它将有助于了解如何自定义您的站点。请随意尝试这些设置。

评论系统

此主题支持以下评论系统

Giscus

Giscus 是一个由 GitHub Discussions 提供支持的评论系统。

在您的 GitHub 存储库上安装 Giscus 应用程序，并将参数设置为如下所示

  [params.giscus]
  data_repo="your GitHub repo"
  data_repo_id="your repo id"
  data_category="your category"
  data_category_id="your category id"
  data_mapping="pathname"
  data_reactions_enabled="1"
  data_emit_metadata="0"
  data_theme="light"
  data_lang="en"
  crossorigin="anonymous"

Disqus

要启用 Disqus，请在 Disqus 中创建一个帐户并记下您的 shortname。

disqusShortname = "your-disqus-short-name"

代理后面的 Disqus

如果无法直接访问 Disqus，我们可以在客户端浏览器和 Disqus 服务器之间设置一个带有 disqus-php-api 的代理。 想法是，如果可以在访客网络中访问 Disqus，则博客页面将显示原始的 Disqus 评论 UI，否则，它将降级并使用代理来访问 Disqus，UI 会略有不同，但访客仍然可以在页面上撰写他们的评论。

客户端 java 脚本已经集成到 CleanWhite 主题中，但您需要自己设置代理服务器。

代理是用 php 编写的，可以在这里找到：https://github.com/zhaohuabing/disqus-php-api/tree/master/api

您需要在 config.php 中指定您的 Disqus 帐户信息。

define('PUBLIC_KEY', '');
define('SECRET_KEY', '');
define('DISQUS_USERNAME', '');
define('DISQUS_EMAIL', '');
define('DISQUS_PASSWORD', '');
define('DISQUS_WEBSITE', '');
define('DISQUS_SHORTNAME', '');

在您的 Hugo 项目的站点配置文件中设置代理服务器地址。

disqus_proxy = "http://yourdisqusproxy.com"

Twikoo

Twikoo 是一个基于腾讯云 CloudBase (tcb) 的简单、安全、免费的评论系统。

要部署 Twikoo，请参考 twikoo 网站上的安装指南。

只需在配置文件中输入 twikoo env_id 即可将您的博客连接到部署的 Twikoo。

 twikoo_env_id = "your twikoo env id"

使用 Algolia 进行站点搜索

按照本教程在 Algolia 中创建您的索引。 索引只是您站点在云中的索引数据的存储。 CleanWhite 主题的搜索页面将利用此索引数据进行搜索。

转到您 Hugo 所在的目录并运行以下命令

$ npm init
$ npm install atomic-algolia --save

接下来，打开新创建的 package.json，我们将在其中添加一个 NPM 脚本来更新您在 Algolia 中的索引。找到“scripts”，并添加以下内容

"algolia": "atomic-algolia"

CleanWhite 主题已经支持 Algolia 索引输出格式，因此您可以直接构建您的站点，然后您会在 public 目录中找到一个名为 algolia.json 的文件，我们可以使用该文件来更新您在 Algolia 中的索引。生成索引文件

$ hugo

在您的 Hugo 项目的根目录中创建一个名为 .env 的新文件，并添加以下内容

ALGOLIA_APP_ID={{ YOUR_APP_ID }}
ALGOLIA_ADMIN_KEY={{ YOUR_ADMIN_KEY }}
ALGOLIA_INDEX_NAME={{ YOUR_INDEX_NAME }}
ALGOLIA_INDEX_FILE={{ PATH/TO/algolia.json }}

确保将双花括号一起替换.

现在，您可以通过简单地运行以下命令将您的索引推送到 Algolia

$ npm run algolia

将以下变量添加到您的 hugo 站点配置中，以便搜索页面可以访问云中的 algolia 索引数据

algolia_search = true
algolia_appId = {{ YOUR_APP_ID }}
algolia_indexName = {{ YOUR_INDEX_NAME }}
algolia_apiKey = {{ YOUR_SEARCH_ONLY_KEY }}

在您的浏览器中打开搜索页面：https://#:1313/search

分析

您可以选择启用 Google 或百度分析。请在以下位置输入您的跟踪代码：

googleAnalytics = "G-XXXXX"
ba_track_id  = "XXXXXXXXXXXXXXXX"

将 googleAnalytics 或 ‘ba_track_id ’ 键留空即可禁用它。

微信支付 & 支付宝打赏

您可以启用微信支付和支付宝，让读者向您打赏。如果他们喜欢您的文章，您甚至可能从写作中获得奖励。现在您一定更有动力去写作了。

  • 在站点配置中启用微信支付和支付宝
reward = true

  • 请替换 /static/img/reward/ 文件夹中的微信支付和支付宝二维码图片，否则钱将转到我的账户！

  • 在站点配置中启用微信支付和支付宝

reward = true

思维导图

思维导图通过短代码 ‘mind’ 支持，在您的 markdown 文件中插入以下代码片段可以创建一个如截图所示的思维导图。

{{% mind %}}
- Root
    - Level 1
        - Level 2
        - Level 2
            - Level 3
            - Level 3
                - Level 4
                    - Level 5
                        - Level 6
    - Level 1
        - Level 2
        - Level 2
     - Level 1
        - Level 2
        - Level 2
     - Level 1
        - Level 2
        - Level 2
     - Level 1
        - Level 2
        - Level 2
{{% /mind %}}

嵌入视频

使用以下 Hugo 短代码将视频嵌入到您的文章中。

Bilibili (B站)

{{< bilibili BV1kZ4y137gv >}}

Youtube

{{< youtube cllc1ZGlhsQ >}}

Vimeo

{{< vimeo 146022717 >}}

Plantuml

可以通过在 config.yaml 或页面头中添加以下行，在站点或页面级别启用 Plantuml 支持。

plantuml: true

然后您只需将 plantuml 源代码放入 markdown 文件中，图片将自动生成。

一个例子

```plantuml
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml
```

screenshot

感谢

感谢 huxblog Jekyll 主题和 Clean Blog Jekyll 主题的杰出工作，CleanWhite Hugo 主题是基于这两个上游项目开发的。

反馈

如果您发现任何问题，请随时提出 issue 或创建 pull request 来修复它。

如果它对您有帮助，如果您能给这个仓库点个星，我将不胜感激，谢谢！

谁在使用 cleanwhite？(谁在使用 cleanwhite？)

衷心感谢每一位持续使用和支持 cleanwhite 的人。欢迎在此 issue 上留言，留下您博客的相关信息。

另请参阅