在Hugo中定制Hyde

2017-06-22 23:36:54 +08 字数：986 标签： Hugo

Hyde的优缺点 ¶

Hyde的第一个优点是一目了然的：简约。

两列，左窄右宽，左黑右白，左边信息、右边内容。这种设计，有一种极简的倾向，却完美地利用了屏幕。其作者，无疑具有大师水准。

在一个空的Hugo项目中，选中Hyde主题，就立刻可以展示出一个首页。然而，其中的很多信息，是需要修改的。比如，描述部分，就有些不应景。

An elegant open source and mobile first theme for hugo made by @mdo Originally made for Jekyll.

此外，最大的麻烦，莫过于首页的设计了。 Hyde的首页会把所有页面的内容都完整地展示出来！

定制Hyde ¶

修改标题 ¶

在Hugo的config.toml中，修改title。比如，本站的修改如下。

title = "零壹軒·笔记"

这是最简单的修改。

修改描述 ¶

描述的内容来源，可以在Hyde的layouts/partials/sidebar.html中发现端倪。

    <div class="sidebar-about">
      <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
      <p class="lead">
      {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}
      </p>
    </div>

可见，只要设置.Site.Params.description参数，就可以直接展示了。标题也是用类似的方式来完成模板填充的。

[params]
description = "一个千字文的发布平台，一个程序员的探索过程。"
copyright = "Copyright (c) 2017, Yan QiDong"

首页不显示完整内容 ¶

查看Hyde的layouts/index.html，可以发现问题所在。

<div class="post">
  <h1 class="post-title">
    <a href="{{ .Permalink }}">
      {{ .Title }}
    </a>
  </h1>

  <span class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>

  {{ .Content }}
</div>

把{{ .Content }}替换成{{ .Description }}，就可以避免显示完整内容了。这个{{ .Description }}，是在页面头部的Front Matter中设置的。

比如，本文就设置如下：

description = """
作为Hugo的一个Theme，Hyde的优点是简约，而缺点则是首页太重。
本文介绍如何以尽量少的修改，对Hyde进行了必要的定制。
并且，还展示了修改的思路来源。
"""
title = "在Hugo中定制Hyde"

还有另一种方法是使用{{ .Summary }}，自动截取前70个字的内容。不过，这种自动截取的实际效果非常差劲。

修改日期样式 ¶

像Mon, Jan 2, 2006这种样式，只适合西方人阅读。孤更喜欢2017-06-22 23:36:54的这种样式。这可以修改Hyde的layouts/index.html来实现。

<span class="post-date">{{ .Date.Format "2006-01-02 15:04:05" }}</span>

从定制，到超越 ¶

孤使用Hyde的最大原因，就是为了省事。建站初期，实在是没有精力花费到这些细节上。不过，孤绝不会止步于定制Hyde。

最合适孤的设计，一定是孤自己的设计。