Even主题配置

基础配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
baseURL = http://example.org/  #替换为你的Github仓库地址,如果需要配置Google搜索,改为你的自定义域名
languageCode = en-us
title = My New Hugo Site  # 博客标题
DefaultContentLanguage = "zh-cn"
DefaultContentLanguageInSubdir = true
theme = "even"
preserveTaxonomyNames = true  #保留标签大小写, true为保留  
enableRobotsTXT = true  #自动生成爬虫文件
enableEmoji = true    #支持Emoji 
enableGitInfo = false #可根据 Git 中的提交生成最近更新记录。
disablePathToLower = true  # URL 路径区分大小写
hasCJKLanguage = true    #自动检测是否包含 中文\日文\韩文
MetaDataFormat = "yaml"  #配置文件类型
disqusShortname = ""     #你的disqus用户名
paginate = 5             #分页每页的文章数量
googleAnalytics = "UA-**********-*" #GoogleAnalytic的Id
copyright = ""

菜单配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
[[menu.main]]   # 配置目录
  name = "Home"
  weight = 10
  identifier = "home"
  url = "/"
[[menu.main]]
  name = "Archives"
  weight = 20
  identifier = "archives"
  url = "/post/"
[[menu.main]]
  name = "Tags"
  weight = 30
  identifier = "tags"
  url = "/tags/"
[[menu.main]]
  name = "Categories"
  weight = 40
  identifier = "categories"
  url = "/categories/"

提示

这个identifier一定要按照这个填,可以多,不能少,不然点击菜单会出现空白

代码高亮配置

  1. 内置代码高亮
1
2
3
4
5
6
# ---------开启代码高亮配置-----------
pygmentsOptions = "linenos=table"
pygmentsCodefences = true
pygmentsUseClasses = true
pygmentsCodefencesGuessSyntax = true
# ----------结束配置----------------
  1. HighlightJs
1
highlightInClient = true

提示

内置代码高亮和HighlightJs同时开启会有两个代码框,不要同时开启

更多主题配置

Even主题Github

文章配置

所有的文章都是以Markdown格式编写的,更多Markdown格式可以参考Guide

元数据Metadata

元数据的开头和结尾都用---来表示,格式可以在config.toml中的MetaDataFormat配置,类似于音视频的Metadata。

变量名 解释 类型 参考值
title 标题 字符串 “Title”
data 文章创建时间 字符串 2020-01-01T22:22:22+08:00
draft 草稿,如果为true,只能本地预览,不会生成到最终产物 布尔 true
toc 文章大纲悬浮窗 布尔 true
tag 标签 字符串数组 [博客]
categories 分类 字符串数组 [博客]
summary 用来显示主页的摘要 字符串 abc一二三
keywords 关键词 字符串数组 [博客]

正文

1
2
## 标题
Hello Hugo

资源文件

放到static文件夹下,这些文件会拷贝到网站的生成产物中。建议使用分类来区分资源文件,便于后期整理。
参考目录:

1
2
3
4
5
6
7
static/
├── android-icon-144x144.png
├── reward
│   ├── alipay.jpeg
│   └── wechatpay.JPG
└── stickers
    └── excuseme.jpg

引用路径

比如引用stickers下的excuseme.jpg,只需输入相对路径/stickers/excuseme.jpg

图片处理

图片在Hugo是会原封不到的放在站点下的,一般我会用脚本批量处理,特别是iPhone上使用的HEIC格式。

脚本如下:(仅针对Mac系统和已安装ImageMaick)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#!/bin/bash

#建议加入图片压缩

if [[ -n $1 ]]; then
    cd $1
    shopt -s nullglob
    for f in *.HEIC
    do
        echo "process $f"
        # extension="${f##*.}"
        filename="${f%.*}"   #获取文件名
        magick convert $f -strip $filename.jpg   #删除信息并转换成jpg
        rm -rf $f
    done

    for f in *.[Jj][Pp][Gg]
    do
        echo "process $f"
        filename="${f%.*}"   #获取文件名
        magick convert $f -strip $f   #删除信息
    done

    for f in *.jpeg
    do
        echo "process $f"
        filename="${f%.*}"   #获取文件名
        magick convert $f -strip $f   #删除信息
    done

    for f in *.png
    do
        echo "process $f"
        filename="${f%.*}"   #获取文件名
        magick convert $f -strip $f  #删除信息
    done

    echo "all file has been processed!!!🏆"
else 
    echo 
    echo -e "\033[31;7mnot found directory!!!\033[0m\n"
fi

发布

运行hugo -D就会在/public下生成产物,如果需要改变生成的目录,只需在-D 后面加上你想要生成的目录。

温馨提示: 不建议加上--minify参数,因为Even主题会有奇怪的缩进问题。

生成好的目录,直接push到Github的仓库上,就会自动生成网页,比如用户名abc,那么浏览器打开abc.github.io就会看到你生成的个人博客啦。