目录结构
父目录 子目录
📁blog 📁content
📁data
📁layouts
📁public
📁resources
📁static
📁themes
📃config.toml
📃deploy.sh
创建一篇博文
方式一:命令创建
进入blog
目录下,执行命令:
1
hugo new "posts/博文名称.md"
方式二:手动创建
在posts
文件夹下手动创建博文名称.md
文件
编辑博文
博文头信息
1
2
3
4
5
6
7
8
9
10
---
title: "如何编辑一篇博文"
date: 2021-03-09 T 16 : 58 : 30 + 08 : 00
draft: false
tags: [ 标签 1 , 标签 2 ]
categories: [ 分类 , 子类 ]
toc: true
dropCap: false
badge: false
---
部分属性支持全局配置(config.toml),优先级低于此处
标题
1
2
3
4
5
6
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
列表
TYPE 示例 语法
无序列表
1
2
3
4
- Item 1
- Item 2
- Item 2 a
- Item 2 b
有序列表
Item 1
Item 2
Item 3
Item 3a
Item 3b
1
2
3
4
1. Item 1
2. Item 2
1. Item 2 a
2. Item 2 b
任务列表
1
2
- [ ] 待办事项1
- [ x ] 完成事项1
排版
语法
示例
1
{{< align left " 文字居左 " > }}
文字居左
1
{{< align center " 文字居中 " > }}
文字居中
1
{{< align right " 文字居右 " > }}
文字居右
强调
语法
效果
*斜体*
or_斜体_
斜体
**粗体**
or __粗体__
粗体
~~删除线~~
删除线
另,Meme 主题新增独创语法
提示
语法 效果
1
{{< notice error > }}错误{{< / notice > }}
1
{{< notice warning > }}警告{{< / notice > }}
1
{{< notice tip > }}提示{{< / notice > }}
1
{{< notice success > }}成功{{< / notice > }}
角标
TYPE
语法
效果
上标
30<sup>th</sup>
30th
下标
H<sub>2</sub>O
H2 O
脚注
内容 [^1][回车][^1]: 这是一个脚注
内容
引用
语法 效果
海上生明月,天涯共此时
1
2
3
{{< quote > }}
海上生明月,天涯共此时
{{< / quote > }}
海上生明月,天涯共此时
1
2
3
{{< quote-center > }}
海上生明月< br /> 天涯共此时
{{< / quote-center > }}
海上生明月 天涯共此时
表格
1
2
3
| 表头 | 表头 | 表头 |
| :--- | :--: | ---: |
| 居左 | 居中 | 居右 |
复杂表格:
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
43
44
45
< table >
< tbody >
< tr >
< th colspan = "3" > 结果字段</ th >
< th > 字段含义</ th >
< th > 类型</ th >
</ tr >
< tr >
< th colspan = "3" > address</ th >
< th > 详细地址信息</ th >
< th rowspan = "6" > string</ th >
</ tr >
< tr >
< th rowspan = "5" > content</ th >
< th colspan = "2" > address</ th >
< th > 简要地址信息</ th >
</ tr >
< tr >
< th rowspan = "2" > address_detail</ th >
< th > city</ th >
< th > 城市</ th >
</ tr >
< tr >
< th > city_code</ th >
< th > 百度城市代码</ th >
</ tr >
< tr >
< th rowspan = "2" > point</ th >
< th > x</ th >
< th > 当前城市中心点经度</ th >
</ tr >
< tr >
< th > y</ th >
< th > 当前城市中心点纬度</ th >
</ tr >
</ tbody >
</ table >
结果字段
字段含义
类型
address
详细地址信息
string
content
address
简要地址信息
address_detail
city
城市
city_code
百度城市代码
point
x
当前城市中心点经度
y
当前城市中心点纬度
链接
TYPE 语法 效果
链接
1
[我的博客 ](https://ztygcs.github.io/ )
我的博客
图片
1
![](https://ztygcs.github.io/icons/android-chrome....png 'img')
◎ img
多媒体
单曲
1
2
3
< audio controls height = "100" style = "display:block;margin:auto" >
< source src = "https://xxx.mp3" type = "audio/mpeg" />
</ audio >
歌单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--来源:https://aplayer.js.org/#/zh-Hans/-->
< script src = "https://unpkg.com/meting@1.2/dist/Meting.min.js" ></ script >
<!-- require APlayer -->
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" />
< script src = "https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js" ></ script >
<!-- require MetingJS -->
< script src = "https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js" ></ script >
< div
class = "aplayer"
data-id = "歌单id"
data-server = "netease"
data-type = "playlist"
data-fixed = "false"
data-mini = "false"
data-listfolded = "true"
data-order = "random"
data-theme = "#07b39b2a"
></ div >
更改属性data-id
,指定网易歌单 id
视频:
1
2
3
< video poster = "https://xxx.png" controls >
< source src = "https://xxx.mp4" >
< /video>
更改属性poster
,指定首页图
更改属性src
,指定视频地址
卡片风格
1
{{< card > }}十年生死两茫茫,不思量,自难忘{{</ card > }}
GitHub风格
1
2
3
4
5
6
7
8
{{< github
name = "hugo-theme-meme"
link = "https://github.com/reuixiy/hugo-theme-meme"
description = "MemE 是一个强大且可高度定制的 GoHugo 博客主题,专为个人博客设计。MemE 主题专注于优雅、简约、现代,以及代码的正确性。同时,希望你将像欣赏一个模因一样欣赏 MemE,希望你将像分享一个模因一样分享 MemE,就像你的博客和文章所做的那样😝!"
color = "#E34C26"
language = "HTML"
> }}
MemE 是一个强大且可高度定制的 GoHugo 博客主题,专为个人博客设计。MemE 主题专注于优雅、简约、现代,以及代码的正确性。同时,希望你将像欣赏一个模因一样欣赏 MemE,希望你将像分享一个模因一样分享 MemE,就像你的博客和文章所做的那样 😝!
HTML
发布博文
方式一:命令行
打开 cmd 窗口在 blog 目录下依次执行以下命令:
1
2
3
4
5
6
7
8
hugo -t meme
# Go To Public folder
cd public
# Add changes to git.
git add -A
# Commit changes.
git commit -m "msg"
git push origin master
方式二:deploy.sh
文件部署
在blog
文件夹下新建 deploy.sh
文件并编辑以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#!/bin/bash
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"
# Build the project.
# if using a theme, replace by `hugo -t <yourtheme>`
hugo -t meme
# Go To Public folder
cd public
# Add changes to git.
git add -A
# Commit changes.
# 使用`date`加入时间
# msg="rebuilding site `date`"
msg = "release:发表文章《...》"
if [ $# -eq 1 ]
then msg = " $1 "
fi
git commit -m " $msg "
# Push source and build repos.
git push origin master
# Come Back
cd ..
然后在命令窗口中进入blog
目录下执行以下命令:
关于 commit message的说明
字段
说明
feature(新)
开发新的功能
fix(修复)
修复 bug
release(发布)
发表文章
update(更新)
更新文章
delete(删除)
删除某项内容
modify(修改)
修改文章的内容
css(样式)
只涉及到样式的修改
docs(文档)
说明文档
restructure(重构)
重构说明