Hugo 主题

上一个/下一个: 所有主题

ColorDrop

用于个人博客的可自定义的单色简约 Hugo 主题

下载
ColorDrop

Colordrop

用于个人博客的可自定义的单色简约 Hugo 主题。

安装（使用 git）

要使用 git 安装 colordrop 主题，您首先必须确保您的博客文件夹已经是一个 git 存储库

git init

然后将其添加为您的存储库的子模块

git submodule add git@github.com:humrochagf/colordrop.git themes/colordrop

或

git submodule add https://github.com/humrochagf/colordrop.git themes/colordrop

并将此配置添加到您的博客配置中。

  • yaml
theme: colordrop
  • toml
theme = "colordrop"

版本锁定

您可以通过检出版本标签来锁定主题的版本

cd themes/colordrop
git checkout v1.5.0
cd ../..
git commit -m "Pinning theme to version 1.5.0"

安装（不使用 git）

您只需从发布页面下载您想要的版本的它，并将其解压到您博客的 themes 文件夹，确保它具有以下结构

.
└── themes
    └── colordrop

并将此配置添加到您的博客配置中。

  • yaml
theme: colordrop
  • toml
theme = "colordrop"

自定义颜色

可以通过更改 params 中的 themeColor 和 themeInverseColor 变量来自定义主题颜色。

  • yaml
params:
  themeColor: "#000000"
  themeInverseColor: "#ffffff"
  • toml
[params]
themeColor = "#000000"
themeInverseColor = "#ffffff"

theme colors image

网站 Logo 可以使用变量 siteLogo 设置，而变量 description 将显示在网站主页上。

  • yaml
params:
  description: Welcome to my blog...
  siteLogo: "logo-photo.png"
  • toml
[params]
description = "Welcome to my blog..."
siteLogo = "logo-photo.png"

自定义 CSS

您可以通过将自定义 CSS 文件添加到 static 文件夹下（例如 static/css/custom.css），然后将参数定义为列表来加载它们。

  • yaml
params:
  custom_css: ["css/custom.css"]
  • toml
[params]
custom_css = ["css/custom.css"]

网站示例

您可以查看我的博客以了解主题的完整运行情况。

theme image

注意: 此主题使用管道来编译 sass，因此您必须使用 hugo 扩展。

另请参阅