在Hugo中定制Hyde
2017-06-22 23:36:54 +08 字数:986 标签: HugoHyde的优缺点 ¶
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。
最合适孤的设计,一定是孤自己的设计。