Huggle 并非一个全新的工具,它只是整合 Hugo + gulp.js 两大工具的一个示范, 目标是帮助你更快速地构建静态网站,如个人博客、公司/项目主页、作品集网站等。
Hugo 是用 Go 语言编写的静态页面生成工具, 与 jekyll 等工具类似。Hugo 的最大特点就是快,构建一个包含 200+ 篇文章的博客, 只需要几秒钟。对于如何生成页面,它提供了大量既符合直觉又相当灵活的自定义选项, 但对喜欢自己编写网站模版样式的设计师和前端工程师来说,使用 Hugo 还有一点障碍 —— css/js 的打包工具仍需单独配置。
为了不让前端构建过程拖后腿, Huggle 将同样以快著称的 gulp.js 与 Hugo 结合在一起, 为你演示构建静态网站的速度极限。
要开始使用 Huggle ,仅需两步:
步骤一中下载到的符合你系统版本的可执行文件,需要添加到 $PATH 目录(详细)。
安装完成,执行 make watch
,即可在开始在 content/
目录下编辑你的文章。
Huggle 打包了大量流行的开发者福利:
./template/assets
目录按照 nodejs 的 require
用法来书写浏览器脚本。./template/assets/styles
目录是样式文件的源代码,所有目录结构都可以在 gulpfile.js
里修改, 你也可以按照自己的习惯将 sass 换成习惯的 less 或 stylus ,只需安装相应的 gulp 插件即可。通过添加一些自定义参数,以及按条理组织 Url ,你可以利用 Hugo 轻松搭建多语言网站:
config.yaml
中设定你的默认语言lang: zh
参数。标准语言代码可以参考这里。slug: /zh/article-title-goes-here
指定此文章其他语言版本的链接:
otherlangs: ["en"]
otherurls: ["/en/article-title"]
如本文源码所示:
--- title: Hugo + gulp.js = Huggle. subtitle: 速度极快的静态网站构建工具 date: 2014-03-04 slug: zh/intro/ lang: zh otherlangs: ["en"] otherurls: ["/intro/"] ---
Hugo 使用 golang 的 text/template ,语法极为简单。 你可以在 go 的官方文档或者 Hugo的文档 里详细了解。
下面是一些官方文档里可能没有提及的东西:
因此,对于语句:
{{ template "chrome/includes.html" . }}
双引号("
)不能写作单引号,.
后面的空格也不能省略。
如果不等于:
{{ if ne .Url "/" }} <a href="{{ .Site.BaseUrl }}">Back Home</a> {{ end }}
或者
{{ if not (eq .Url "/") }} <a href="{{ .Site.BaseUrl }}">Back Home</a> {{ end }}
两个条件:
{{ if or (ne .Url "/") (ne .Url "/en/") }} <a href="{{ .Site.BaseUrl }}">Back Home</a> {{ end }}
没有 unless
,但是可以 if not
。除了 eq
, ne
,还有还有 lt
, le
, gt
, ge
, 分别代表小于、小于等于、大于、大于等于。
设 .Params.tags
为一个数组:['标签1', '标签2']
{{ range .Params.tags }} <a href="{{ $.Site.Params.baseurl }}tag/{{ . }}">{{ . }}</a> {{ end }}
注意你可以使用 {{ $.OuterValue }}
获取一个 Context 外部的变量(via)。
使用类似于 {{ .Date.Format "Mon, 02 Jan 2006 15:04:05 MST" }}
来格式化时间。 注意,这些月份和时间的数字并非它看起来那么随意。
可用数字一览表:
const ( stdLongMonth = "January" stdMonth = "Jan" stdNumMonth = "1" stdZeroMonth = "01" stdLongWeekDay = "Monday" stdWeekDay = "Mon" stdDay = "2" stdUnderDay = "_2" stdZeroDay = "02" stdHour = "15" stdHour12 = "3" stdZeroHour12 = "03" stdMinute = "4" stdZeroMinute = "04" stdSecond = "5" stdZeroSecond = "05" stdLongYear = "2006" stdYear = "06" stdPM = "PM" stdpm = "pm" stdTZ = "MST" stdISO8601TZ = "Z0700" // prints Z for UTC stdISO8601ColonTZ = "Z07:00" // prints Z for UTC stdNumTZ = "-0700" // always numeric stdNumShortTZ = "-07" // always numeric stdNumColonTZ = "-07:00" // always numeric )