添加字数统计,阅读时间
原文章标题下的分类目录等的样式是下面图片的样子。图片截图于主题原作者博客
在添加了字数统计和阅读时间后，将排版改成下面这样：
直接放相关代码
导入font awesome的cdn地址
在主题目录的/LeaveIt/layouts/partials/head.html的 </head>标签前(为了方便查看建议在原有的 <link>标签后)加入下面代码，以加入font awesome 5.9.0版本为例
<link href="//use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet">
修改文章页面的排版
修改主题目录下的/LeaveIt/layouts/_default/single.html文件，将第7行开始的下面的代码
Written by <a itemprop="name" href="{{.Site.BaseURL }}" rel="author">{{ if isset .Params "author" }}{{ .Params.author }}{{ else }}{{ .Site.Params.author }}{{ end }}</a> with ♥
<span class="post-time">
on <time datetime={{.Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} itemprop="datePublished">{{ .Date.Format (.Site.Params.dateFormatToUse | default "January 2, 2006") }}</time>
</span>
in
{{ with .Params.categories -}}
<i class="iconfont icon-folder"></i>
<span class="post-category">
{{ range . }}
{{- $name := . -}}
{{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}}
<a href="{{ .Permalink }}"> {{ $name }} </a>
{{ end -}}
{{ end }}
</span>
{{- end }}
修改为
{{ with .Params.categories -}}
<i class="far fa-folder-open"></i>
<span class="post-category">
{{ range . }}
{{- $name := . -}}
{{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}}
<a href="{{ .Permalink }}"> {{ $name }} </a>
{{ end -}}
{{ end }}
</span>
{{- end }}
<span class="post-time">
<i class="far fa-calendar-alt"></i> <time datetime={{.Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} itemprop="datePublished">{{ .Date.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }}</time>
</span>
<i class="far fa-file-word"></i> <span class="post-word-count"> {{ .WordCount }} 字</span>
<i class="far fa-clock"></i> <span class="more-meta"> {{ .ReadingTime }} 分钟</span>
这样就修改成了上图的排版，添加了字数统计及阅读时间。以及添加了几个font awesome的图标。使得比较简单点。 不过用了字数统计，就需要在站点配置文件config.toml里面添加一个配置，表示网站内容包含中文，日语，韩文。可以更准确的统计字数。(或者在文章的frontmatter内单独添加这个配置应该也行的)
hasCJKLanguage = true
放大文章内图片显示
LeaveIt主题内置了LightGallery灯箱效果，所以图片原状态是比较小，需要点击才能放大，但是通过添加下面的代码就可以让图片放大显示，对眼睛舒服点。
在 assets/css/_custom.scss 中添加下面代码
.post-warp .post-content img {
max-width: 100%;
}