探索优雅的Hyde主题：Hugo的两栏布局之选

探索优雅的Hyde主题：Hugo的两栏布局之选

Hyde是一款以简洁两栏设计为特色的Hugo主题，灵感源自Jekyll同名主题。它将醒目的侧边栏与直观的内容相结合，是个人博客和专业网站的理想选择。

安装与启动

想要快速开始？通过下面的"一键导入"功能，Hyde会作为一个预配置的Forestry.io启动库直接进入你的Git帐户，并在内容管理器/CMS中设置好。

如果你更愿意采用标准安装方式，首先在themes/目录下克隆本仓库：

$ cd themes/
$ git clone https://github.com/spf13/hyde.git

然后，在config.toml文件顶部添加一行：

theme = "hyde"

功能与自定义

Hyde提供了多种可定制选项，主要通过元素上的类进行控制。

侧边栏菜单

创建侧边栏导航链接，只需在页面的front matter中添加menu=main，如下所示：

TOML

theme = "hyde"

[Menus]
  main = [
      {Name = "Github", URL = "https://github.com/username/"},
      {Name = "LinkedIn", URL = "https://www.linkedin.com/in/username/"}
  ]

YAML

theme: "hyde"

menus:
  main:
    - Name: "Github"
      URL: "https://github.com/username/"
    - Name: "LinkedIn"
      URL: "https://www.linkedin.com/in/username/"

侧边栏描述

利用description参数，你可以定制页面的描述信息：

TOML

theme = "hyde"

[params]
  description = "您的自定义描述"

YAML

theme: "hyde"

params:
  description: "您的自定义描述"

粘性侧边栏内容

默认情况下，Hyde的侧边栏内容会固定在底部。如果想禁用这个特性，只需从侧边栏的.container中移除.sidebar-sticky类即可。

主题选择

Hyde提供了八种基于Base16颜色方案的主题供你选择。应用一个主题可以改变颜色方案（主要影响侧边栏和链接）。

有八种主题可以选择：

要使用主题，只需在params下添加themeColor变量：

TOML

theme = "hyde"

[params]
  themeColor = "theme-base-09"

YAML

theme: "hyde"

params:
  themeColor: "theme-base-09"

若要创建自己的主题，参考CSS文件中的主题部分。复制现有主题（仅几行CSS），重命名并修改提供的颜色。

反转布局

通过添加layoutReverse变量至params，你可以轻松实现页面布局反转：

TOML

theme = "hyde"

[params]
  layoutReverse = true

YAML

theme: "hyde"

params:
  layoutReverse: true

Disqus评论系统

启用Disqus评论系统，只需在配置文件中添加disqusShortname变量：

TOML

disqusShortname = "spf13"

YAML

disqusShortname : spf13

Google Analytics追踪

通过在配置文件中指派googleAnalytics变量，你可以开启Google Analytics追踪：

TOML

googleAnalytics = "Your tracking code"

YAML

googleAnalytics: Your tracking code

关于作者与许可证

原作者：Mark Otto

• https://github.com/mdo
• https://twitter.com/mdo

移植者：Steve Francia

• https://github.com/spf13
• https://twitter.com/spf13

许可协议

本项目开源并遵循MIT 许可证。

❤️ 欢迎探索Hyde，让您的网站焕然一新！