![](https://p.upyun.lithub.cc/i.loli.net/2020/11/07/B6GZn1V2AS8XYIT.jpg)
今天有网友邮件我咨询我现在的主题 [Eureka](https://github.com/wangchucheng/hugo-eureka "Eureka") 的一些自定义配置,他想参考一下。由于我的博客仓库是私有的,所以就写一篇文章简单整理一下。
[Eureka](https://github.com/wangchucheng/hugo-eureka "Eureka") 是前段时间群友推荐给我的,纯白的朴素风格同时提供了暗色模式瞬间我就喜欢上了。将其 `clone` 到 Hugo 博客目录 `themes/hugo-eureka` 下,`config.toml` 中配置 `theme = "hugo-eureka"` 即可使用上该款主题。为了方便主题的更新,我将我所有自定义的模板都放在了 `layouts` 目录下。Hugo 会将主题目录和 `layouts` 目录下的文件进行合并,并优先使用 `layouts` 目录中的同名文件。这样之后我只需要单纯的更新 `thtmes/hugo-eureka` 目录即可。
## 首页
相较于 Eureka 主题的默认首页,我个人还是比较喜欢传统博客的两栏布局,左侧显示模块列表,右侧显示文章列表,所以我需要自定义首页模板。拷贝以下内容创建 `layouts/index.html` 文件即可实现同款。
```html
{{ define "main" }}
{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02") }}
{{- $slug := printf "/%s.html" .Slug}}
{{- $commentsData := (partialCached "utils/get-comments.html" .)}}
{{- $comments := slice }}
{{- range where $commentsData "url" "==" $slug}}
{{$comments = $comments | append .}}
{{- end}}
{{- $count := len $comments}}
{{ i18n "readingTime" . }}
{{ with .GetTerms "categories" }}
{{ range $index, $value := . }}
{{ if gt $index 0 }}
,
{{ end -}}
{{ .LinkTitle }}
{{ end }}
{{ end }}
{{ with .GetTerms "series" }}
{{ range $index, $value := . }}
{{ if gt $index 0 }}
,
{{ end -}}
{{ .LinkTitle }}
{{ end }}
{{ end }}
```
`post_metadata.html` 主要是增加了评论条数的显示,而 `post_metadata_full.html` 中还增加了 Markdown 原文链接的显示。关于如何生成 Markdown 原文链接,可以参考我之前的文章[《Hugo 之旅》](https://imnerd.org/hugo-start.html#%E5%85%B6%E5%AE%83)。
```html
{{/* layouts/partials/post_metadata_full.html */}}
{{ .Date.Format (.Site.Params.dateFormat | default "2006-01-02") }}
{{$resp := getJSON "https://imerd.comment.lithub.cc/comment?type=count&url=/" .Slug ".html" }}
{{ if eq .Type "posts" -}}
{{ with .OutputFormats.Get "MarkDown" -}}
{{- end }}
{{ end }}
{{ i18n "readingTime" . }}
{{ with .GetTerms "categories" }}
{{ range $index, $value := . }}
{{ if gt $index 0 }}
,
{{ end -}}
{{ .LinkTitle }}
{{ end }}
{{ end }}
{{ with .GetTerms "series" }}
{{ range $index, $value := . }}
{{ if gt $index 0 }}
,
{{ end -}}
{{ .LinkTitle }}
{{ end }}
{{ end }}
```
## 搜索框
搜索也是博客比较重要的功能,为了方便我在顶部增加了搜索框。创建 `layouts/partials/header.html` 文件用来覆盖默认的头部模板。
```html
{{/* layouts/partials/header.html */}}