Skip to content

Commit 810b46b

Browse files
committed
调整文件名称
1 parent 85a11f9 commit 810b46b

19 files changed

Lines changed: 1567 additions & 1532 deletions
Lines changed: 334 additions & 332 deletions
Large diffs are not rendered by default.
Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@ title: "自动托管markdown"
44
linkTitle: "自动托管markdown"
55
weight: 2
66
description: >
7-
描述如何利用github的CI/CD实现自动更新站点
7+
描述如何利用github的CI/CD实现自动更新并托管站点
88
---
99

1010
{{% pageinfo %}}
11-
利用github actions和pages实现自动更新托管内容,本站点已实现commit md后,自动更新[码云page](https://xiaoping378.gitee.io/)[Github page](https://xiaoping378.github.io/)页面。
11+
利用github actions和pages实现自动更新托管内容,本站点已实现commit md后,~~自动更新[码云page](https://xiaoping378.gitee.io/)~~[Github page](https://xiaoping378.github.io/)页面。
1212
{{% /pageinfo %}}
1313

1414
## 项目仓库的名字由来
1515

16-
本源码仓之所以起如此长的名字,完全是因为github pages的不成熟,不然会带个小尾巴:
16+
本源码仓之所以起如此长的名字,完全是因为github pages的工作机制决定的,不然会带个小尾巴:
1717

1818
如果叫 _blog_, github的托管页面的访问地址会是 _xiaoping378.github.io/blog_,这也没什么,但会和hugo的[static机制](/docs/1-site/add_content/#图片路径问题)出现冲突。
1919

Lines changed: 58 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,59 @@
1-
---
2-
tags: ["hugo"]
3-
title: "编写文章注意项"
4-
linkTitle: "编写文章注意项"
5-
weight: 3
6-
description: >
7-
描述在hugo的Docsy主题下如何编写文章和添加图片路径处理等相关的技巧。
8-
---
9-
10-
{{% pageinfo %}}
11-
本章节主要描述日常编写文章的注意事项和docsy主题内的使用技巧。
12-
{{% /pageinfo %}}
13-
14-
15-
## 编写markdown
16-
17-
### 图片路径问题
18-
19-
习惯md文件中的图片路径写成`![](/images/file.png)` ,但hugo中图片实际要存放到`/static/images/`路径下,hugo会自动渲染到站点的根路径`/`上。
20-
21-
这样的话,无法在编辑器中预览md了,有两种玩法如下:
22-
23-
- 可以使用一个临时目录,把图片和md文件放到同一目录,编写完毕后,再把图片和md文件放置上述合适的目录位置上。
24-
- 日常一直启用`hugo server`编写文章,放弃编辑器中预览md,后面还会有别的坑....
25-
26-
推荐后者,本人日常使用VSCode编写md,和代码开发同款,这里推荐安装`mushan.vscode-paste-image`扩展,再额外如下配置:
27-
```json
28-
"pasteImage.namePrefix": "${currentFileNameWithoutExt}-",
29-
"pasteImage.path": "${projectRoot}/static/images/",
30-
"pasteImage.basePath": "${projectRoot}",
31-
"pasteImage.insertPattern": "${imageSyntaxPrefix}/images/${imageFileName}${imageSyntaxSuffix}"
32-
```
33-
34-
日常编写文章,`Alt+A`截图,`Ctrl+Alt+A`粘贴到md文件,和hugo的配合,完美...
35-
36-
### SEO优化关注点
37-
日常文章编写,如下部分要精准描述,Google搜索引擎推荐使用`description`的meta标签告诉它页面内容的,Docsy主题会自动把红框部分填充到`layouts/partials/head.html`中。
38-
39-
![](/images/add_content-2022-01-25-09-38-48.png)
40-
41-
hugo解析编译后,html页面会如下呈现:
42-
43-
![](/images/add_content-2022-01-25-09-37-12.png)
44-
45-
### 日常编写注意事项
46-
47-
#### md文件中相互引用内容的路径要记得对应到站点html的路径上
48-
49-
比如此处引用`自动托管markdown`文章,按照md习惯写,虽然编辑器上可以正常打开,但hugo渲染后的页面是404的。
50-
- `[引用](./actions_pages.md)` 需要改成 `[引用](../actions_pages)`
51-
- `[引用](/content/docs/1-site/actions_pages.md)` 需要改成 `[引用](/docs/1-site/actions_pages)`
52-
53-
54-
55-
不定时更新注意事项。日常编写,建议本机启用`hugo server`实时预览,
56-
57-
#### 文章weight的使用
58-
1+
---
2+
tags: ["hugo"]
3+
title: "编写文章技巧"
4+
linkTitle: "编写文章技巧"
5+
weight: 3
6+
description: >
7+
描述在hugo的Docsy主题下如何编写文章和添加图片路径处理等相关的技巧。
8+
---
9+
10+
{{% pageinfo %}}
11+
本章节主要描述日常编写文章的注意事项和docsy主题内的使用技巧。
12+
{{% /pageinfo %}}
13+
14+
15+
## 编写markdown
16+
17+
### 图片路径问题
18+
19+
习惯md文件中的图片路径写成`![](/images/file.png)` ,但hugo中图片实际要存放到`/static/images/`路径下,hugo会自动渲染到站点的根路径`/`上。
20+
21+
这样的话,无法在编辑器中预览md了,有两种玩法如下:
22+
23+
- 可以使用一个临时目录,把图片和md文件放到同一目录,编写完毕后,再把图片和md文件放置上述合适的目录位置上。
24+
- 日常一直启用`hugo server`编写文章,放弃编辑器中预览md,后面还会有别的坑....
25+
26+
推荐后者,本人日常使用VSCode编写md,和代码开发同款,这里推荐安装`mushan.vscode-paste-image`扩展,再额外如下配置:
27+
```json
28+
"pasteImage.namePrefix": "${currentFileNameWithoutExt}-",
29+
"pasteImage.path": "${projectRoot}/static/images/",
30+
"pasteImage.basePath": "${projectRoot}",
31+
"pasteImage.insertPattern": "${imageSyntaxPrefix}/images/${imageFileName}${imageSyntaxSuffix}"
32+
```
33+
34+
日常编写文章,`Alt+A`截图,`Ctrl+Alt+A`粘贴到md文件,和hugo的配合,完美...
35+
36+
### SEO优化关注点
37+
日常文章编写,如下部分要精准描述,Google搜索引擎推荐使用`description`的meta标签告诉它页面内容的,Docsy主题会自动把红框部分填充到`layouts/partials/head.html`中。
38+
39+
![](/images/add_content-2022-01-25-09-38-48.png)
40+
41+
hugo解析编译后,html页面会如下呈现:
42+
43+
![](/images/add_content-2022-01-25-09-37-12.png)
44+
45+
### 日常编写注意事项
46+
47+
#### md文件中相互引用内容的路径要记得对应到站点html的路径上
48+
49+
比如此处引用`自动托管markdown`文章,按照md习惯写,虽然编辑器上可以正常打开,但hugo渲染后的页面是404的。
50+
- `[引用](./actions_pages.md)` 需要改成 `[引用](../actions_pages)`
51+
- `[引用](/content/docs/1-site/actions_pages.md)` 需要改成 `[引用](/docs/1-site/actions_pages)`
52+
53+
54+
55+
不定时更新注意事项。日常编写,建议本机启用`hugo server`实时预览,
56+
57+
#### 文章weight的使用
58+
5959
文章开头的`weight`部分决定了目录中的排序,推荐新开的系列文章,从两位数开始递增,比如`30`, 以后老系列有更新的时候,免去批量修改调整排序的麻烦。

content/docs/1-Site/4-tutorial2.md

Lines changed: 238 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,238 @@
1+
---
2+
title: "该主题的Markdown特色语法"
3+
date: 2017-01-05
4+
weight: 4
5+
description: >
6+
docsy主题中Markdown的常见语法样例展示.
7+
---
8+
9+
{{% pageinfo %}}
10+
这是一个占位页面。请用您自己的内容替换它。
11+
{{% /pageinfo %}}
12+
13+
文本可以是 **粗体**_斜体_~~删除线~~[链接](https://gohugo.io) 应该是蓝色的,没有下划线(除非鼠标悬停在其上)。
14+
15+
段落之间应该有空白。Vape migas chillwave sriracha poutine try-hard distillery。Tattooed shabby chic small batch, pabst art party heirloom letterpress air plant pop-up。Sustainable chia skateboard art party banjo cardigan normcore affogato vexillologist quinoa meggings man bun master cleanse shoreditch readymade。Yuccie prism four dollar toast tbh cardigan iPhone, tumblr listicle live-edge VHS。Pug lyft normcore hot chicken biodiesel, actually keffiyeh thundercats photo booth pour-over twee fam food truck microdosing banh mi。Vice activated charcoal raclette unicorn live-edge post-ironic。Heirloom vexillologist coloring book, beard deep v letterpress echo park humblebrag tilde。
16+
17+
turmeric listicle fam ugh humblebrag。Bespoke leggings gastropub, biodiesel brunch pug fashion axe meh swag art party neutra deep v chia。Enamel pin fanny pack knausgaard tofu, artisan cronut hammock meditation occupy master cleanse chartreuse lumbersexual。Kombucha kogi viral truffaut synth distillery single-origin coffee ugh slow-carb marfa selfies。Pitchfork schlitz semiotics fanny pack, ugh artisan vegan vaporware hexagon。Polaroid fixie post-ironic venmo wolf ramps **kale chips**
18+
19+
> 在这第一句话上面不应该有边距。
20+
>
21+
> 引用块应该是较浅的灰色,并在左侧有一个边框,颜色为辅助色。
22+
>
23+
> 在这最后一句话下面不应该有边距。
24+
25+
## 第一个二级标题
26+
27+
这是跟随标题的普通段落。Knausgaard kale chips snackwave microdosing cronut copper mug swag synth bitters letterpress glossier **craft beer**。Mumblecore bushwick authentic gochujang vegan chambray meditation jean shorts irony。Viral farm-to-table kale chips, pork belly palo santo distillery activated charcoal aesthetic jianbing air plant woke lomo VHS organic。Tattooed locavore succulents heirloom, small batch sriracha echo park DIY af。Shaman you probably haven't heard of them copper mug, crucifix green juice vape *single-origin coffee* brunch actually。Mustache etsy vexillologist raclette authentic fam。Tousled beard humblebrag asymmetrical。I love turkey, I love my job, I love my friends, I love Chardonnay!
28+
29+
Deae legum paulatimque terra, non vos mutata tacet: dic。Vocant docuique me plumas fila quin afuerunt copia haec o neque。
30+
31+
在大屏幕上,段落和标题不应占据整个容器宽度,但我们希望表格、代码块等占据整个宽度。
32+
33+
Scenester tumeric pickled, authentic crucifix post-ironic fam freegan VHS pork belly 8-bit yuccie PBR&B。**我喜欢我们生活的这个世界**
34+
35+
36+
## 第二个二级标题
37+
38+
> 这是一个跟随标题的引用块。培根 ipsum dolor 坐在火腿上 doner shank drumstick,猪腩肉 porchetta 意式香肠 brisket 火腿后臀 rump pig。Chuck kielbasa leberkas,猪肉 bresaola 火腿后臀 牛柳 mignon 牛肩胛 短肋骨 biltong。
39+
40+
### 三级标题
41+
42+
```
43+
这是一个跟随标题的代码块。
44+
```
45+
46+
下一等级的紧身裤在出售前,PBR&B 教堂钥匙萨满回声公园。羽衣甘蓝芯片占据哥谭镇无论何时流行朋克自由人猪肉肚子自拍。美食家贝尔琳达地铁瓷砖醒后赛博朋克西坦。破烂时髦的男人面包圈半语义化学,奇亚信使包格子衫。
47+
48+
#### 四级标题
49+
50+
* 这是一个跟随标题的无序列表。
51+
* 这是一个跟随标题的无序列表。
52+
* 这是一个跟随标题的无序列表。
53+
54+
##### 五级标题
55+
56+
1. 这是一个跟随标题的有序列表。
57+
2. 这是一个跟随标题的有序列表。
58+
3. 这是一个跟随标题的有序列表。
59+
60+
###### 六级标题
61+
62+
| 什么 | 跟随 |
63+
|-----------|-----------------|
64+
| 表格 | 标题 |
65+
| 表格 | 标题 |
66+
| 表格 | 标题 |
67+
68+
----------------
69+
70+
上下都有水平分隔线。
71+
72+
----------------
73+
74+
这是一个无序列表:
75+
76+
* 利物浦足球俱乐部
77+
* 切尔西足球俱乐部
78+
* 曼联足球俱乐部
79+
80+
以及一个有序列表:
81+
82+
1. 迈克尔·布雷克
83+
2. 西阿姆斯·布莱克
84+
3. 布兰福德·马萨利斯
85+
86+
还有一个无序任务列表:
87+
88+
- [x] 创建一个Hugo主题
89+
- [x] 添加任务列表到其中
90+
- [ ] 度假去
91+
92+
还有一个"混合"任务列表:
93+
94+
- [ ] 收拾行李
95+
- ?
96+
- [ ] 出发旅行!
97+
98+
以及一个嵌套列表:
99+
100+
* 杰克逊五兄弟
101+
* 迈克尔
102+
* 蒂托
103+
* 杰基
104+
* 马龙
105+
* 杰梅因
106+
* 忍者神龟
107+
* 莱昂纳多
108+
* 米开朗基罗
109+
* 多纳泰罗
110+
* 拉斐尔
111+
112+
定义列表可以与Markdown语法一起使用。定义标题是粗体。
113+
114+
名字
115+
: 哥斯拉
116+
117+
出生年份
118+
: 1952
119+
120+
出生地
121+
: 日本
122+
123+
颜色
124+
: 绿色
125+
126+
127+
----------------
128+
129+
表格应具有粗体标题和交替的阴影行。
130+
131+
| 艺术家 | 专辑 | 年份 |
132+
|-------------------|-----------------|------|
133+
| 迈克尔·杰克逊 | 颤栗 | 1982 |
134+
| 王子 | 紫雨 | 1984 |
135+
| 比斯蒂男孩 | 许可证到期 | 1986 |
136+
137+
如果表格太宽,应该可以水平滚动。
138+
139+
| 艺术家 | 专辑 | 年份 | 唱片公司 | 奖项 | 歌曲 |
140+
|-------------------|-----------------|------|-------------|----------|-----------|
141+
| 迈克尔·杰克逊 | 颤栗 | 1982 | Epic唱片公司 | 格莱美年度最佳专辑奖,全美音乐奖最受欢迎流行/摇滚专辑奖,全美音乐奖最受欢迎灵魂/R&B专辑奖,全英音乐奖最佳销量专辑奖,格莱美最佳非古典工程专辑奖 | 想要开始某事,宝贝属于我,女孩是我的,颤栗,拍它,比利·珍,人类天性,P.Y.T.(漂亮年轻的事物),我生命中的女士 |
142+
| 王子 | 紫雨 | 1984 | 华纳兄弟唱片公司 | 格莱美最佳视觉媒体原声带奖,全美音乐奖最受欢迎流行/摇滚专辑奖,全美音乐奖最受欢迎灵魂/R&B专辑奖,全英音乐奖最佳原声带/演员录音奖,格莱美最佳二人或组合摇滚表演奖 | 让我们疯狂起来,带上我,美丽的人们,电脑蓝调,亲爱的尼基,当鸽子哭泣,我愿意为你死,宝贝我是明星,紫雨 |
143+
| 比斯蒂男孩 | 许可证到期 | 1986 | 水星唱片公司 | 没有奖项但这个表格单元很宽 | 押韵与偷窃,新风格,她很狡猾,有效果,慢骑,女孩们,(你必须)为你的权利而战,布鲁克林不睡觉,保罗·里维尔,现在就拿起来,击打它,铜猴子,缓慢而低沉,是时候变得病态了 |
144+
145+
----------------
146+
147+
`var foo = "bar";` 这样的代码片段可以以内联方式显示。
148+
149+
同样,`this should vertically align` ~~`with this`~~ ~~and this~~
150+
151+
代码也可以显示在一个块元素中。
152+
153+
```
154+
foo := "bar";
155+
bar := "foo";
156+
```
157+
158+
代码也可以使用语法高亮。
159+
160+
```go
161+
func main() {
162+
input := `var foo = "bar";`
163+
164+
lexer := lexers.Get("javascript")
165+
iterator, _ := lexer.Tokenise(nil, input)
166+
style := styles.Get("github")
167+
formatter := html.New(html.WithLineNumbers())
168+
169+
var buff bytes.Buffer
170+
formatter.Format(&buff, style, iterator)
171+
172+
fmt.Println(buff.String())
173+
}
174+
```
175+
176+
```
177+
长的单行代码块不应该换行。如果它们太长,应该水平滚动。这一行应该足够长以演示这一点。
178+
```
179+
180+
表格单元格内的内联代码仍应可区分。
181+
182+
| 语言 | 代码 |
183+
|-------------|--------------------|
184+
| JavaScript | `var foo = "bar";` |
185+
| Ruby | `foo = "bar"{` |
186+
187+
----------------
188+
189+
小图像应按实际大小显示。
190+
191+
![](https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Picea_abies_shoot_with_buds%2C_Sogndal%2C_Norway.jpg/240px-Picea_abies_shoot_with_buds%2C_Sogndal%2C_Norway.jpg)
192+
193+
大图像应始终缩小并适合内容容器。
194+
195+
![](https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Picea_abies_shoot_with_buds%2C_Sogndal%2C_Norway.jpg/1024px-Picea_abies_shoot_with_buds%2C_Sogndal%2C_Norway.jpg)
196+
197+
_以上挪威松嫩枝带芽的照片:Bjørn Erik Pedersen,CC-BY-SA。_
198+
199+
200+
## 组件
201+
202+
### 警报
203+
204+
{{< alert >}}这是一个警报。{{< /alert >}}
205+
{{< alert title="注意" >}}这是一个带标题的警报。{{< /alert >}}
206+
{{% alert title="注意" %}}这是一个带标题和**Markdown**的警报。{{% /alert %}}
207+
{{< alert color="success" >}}这是一个成功的警报。{{< /alert >}}
208+
{{< alert color="warning" >}}这是一个警告。{{< /alert >}}
209+
{{< alert color="warning" title="警告" >}}这是一个带标题的警告。{{< /alert >}}
210+
211+
212+
## 另一个标题
213+
214+
在这里添加一些章节以查看目录的样子。培根 ipsum dolor 坐在火腿上 doner shank drumstick,猪腩肉 porchetta 意式香肠 brisket 火腿后臀 rump pig。Chuck kielbasa leberkas,猪肉 bresaola 火腿后臀 牛柳 mignon 牛肩胛 短肋骨 biltong。
215+
216+
### 本文档
217+
218+
Inguina genus: Anaphen post: lingua violente voce suae meus aetate diversi。Orbis unam nec flammaeque status deam Silenum erat et a ferrea。Excitus rigidum ait: vestro et Herculis convicia: nitidae deseruit coniuge Proteaque adiciam *eripitur*?Sitim noceat signa *probat quidem*。Sua longis *fugatis* quidem genae。
219+
220+
221+
### 像素计数
222+
223+
Tilde photo booth wayfarers cliche lomo intelligentsia man braid kombucha vaporware farm-to-table mixtape portland。PBR&B pickled cornhole ugh try-hard ethical subway tile。Fixie paleo intelligentsia pabst。Ennui waistcoat vinyl gochujang。Poutine salvia authentic affogato, chambray lumbersexual shabby chic。
224+
225+
### 联系信息
226+
227+
Plaid hell of cred microdosing, succulents tilde pour-over。Offal shabby chic 3 wolf moon blue bottle raw denim normcore poutine pork belly。
228+
229+
230+
### 外部链接
231+
232+
Stumptown PBR&B keytar plaid street art, forage XOXO pitchfork selvage affogato green juice listicle pickled everyday carry hashtag。Organic sustainable letterpress sartorial scenester intelligentsia swag bushwick。Put a bird on it stumptown neutra locavore。IPhone typewriter messenger bag narwhal。Ennui cold-pressed seitan flannel keytar, single-origin coffee adaptogen occupy yuccie williamsburg chillwave shoreditch forage waistcoat。
233+
234+
235+
236+
```
237+
这是页面上的最后一个元素,下方不应有边距。
238+
```

0 commit comments

Comments
 (0)