博客发文教程

"Blog post tutorial"

Posted by 张凡 on July 3, 2019

Hello world,hello blog.

1、前言

该博客的成功搭建,离不开Hux Github Pages教程的帮助,在此感谢Hux和为了开源而努力的人们,正是因为你们的存在,才使得有更多的人能享受到计算机和互联网带来的便利。

2、如何发表自己的博客文章

为了方便博客文章的撰写与发布,使用C#编写了一个博客文章格式编辑器,自动生成博客文章设置头部信息,如下图所示为该软件的运行界面

image-20211031180147530

点击【导出】按钮保存博客初始文章至博客项目_post目录下,如下图所示是博客文章的参数信息,在其下方就可以使用Markdown语法撰写博客了

image-20211030231906785

撰写完毕后,使用git工具上传到远程服务器,更新部署即可实现文章的发布。

3、本博客支持的博文格式

3.1、段落引用

段落语法如下所示:

1
> 这句话将被引用

效果如下所示

这句话将被引用

3.2、插入图片

插入图片的语法如下所示

1
2
![图片名称——这部分可留空](图片的网络地址)
例如:![飞机](https://auroraus-1258416167.cos.ap-beijing.myqcloud.com/images/j20luori.jpg)

显示效果如下所示:

飞机

3.3、文本链接

如果你想在某段文本中插入链接,就可以使用文本链接。语法如下所示

1
2
[文本](文本中插入的链接)
例如:[去流浪](https://music.163.com/#/song?id=1344340338)

你听过周笔畅唱的流浪地球的主题曲《去流浪》吗?可好听了

3.4、插入代码

如果你的博文中需要插入代码,可以使用如下语法使你的代码高亮,显示更美观

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
举个python代码的例子
```python
import requests   #导入requests模块

headers={"user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36"}
url='http://www.baidu.com'
req=rwquests.get(url,headers=headers)
req.encoding=req.apparent_encoding
if req.status==200:
    text=req.text
else:
    text=''
    pass
print(text)
``` ``` 上面所举例的代码高亮显示效果如下所示 ~~~python
import requests   #导入requests模块

headers={"user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36"}
url='http://www.baidu.com'
req=rwquests.get(url,headers=headers)
req.encoding=req.apparent_encoding
if req.status==200:
    text=req.text
else:
    text=''
    pass
print(text) ~~~

3.5、插入无序列表

插入无序列表的语法如下所示 ​```python 无序列表使用*或+或-标识 例如:

  • 我是第一个无序列表
  • 我是第二个无序列表
  • 我是第三个无序列表 ```

效果如下所示:

  • 我是第一个无序列表
  • 我是第二个无序列表
  • 我是第三个无序列表

3.6、插入有序列表

插入有序列表的语法如下所示

1
2
3
4
5
有序列表为数字+小数点
例如
1. 我是第一个有序列表
2. 我是第二个有序列表
3. 我是第三个有序列表

效果如下所示:

  1. 我是第一个有序列表
  2. 我是第二个有序列表
  3. 我是第三个有序列表

3.7、插入表格

插入表格的语法如下所示:

1
2
3
4
| 左对齐 | 中间对齐 | 右对齐 |
| :---   |  :---:   |   ---: |
| 左1    |  中1     |  右1   |
| 左2    |  中2     |  右3   |

显示效果如下所示:

左对齐 中间对齐 右对齐
左1 中1 右1
左2 中2 右3

3.8、插入视频

由于markdown没有插入视频的语法,故需要直接插入html代码来实现插入视频的效果了(很简单的),如下所示

1
2
3
4
5
6
插入视频的html代码如下所示
<div markdown="0">
<video id="video" controls="" width="400" height="300" preload="none" poster="视频封面图片地址">
<source id="mp4" src="视频地址">
</video>
</div>

效果如下所示:

3.9、插入音频

由于markdown没有插入音频的语法,故需要直接插入html代码来实现插入音频的效果了(很简单的),如下所示

1
2
3
4
5
6
插入音频的html代码如下所示

<div markdown="0">
<audio id="audio" controls="" preload="none">
      <source id="mp3" src="音频地址" >
</audio></div>

效果如下所示:

3.10、插入公式

插入公式要借助在线公式编辑器LaTeX,该编辑区下方有公式链接,可以直接粘贴在markdown中。具体方法如下所示

1
2
3
4
5
6
7
8
1.打开LaTeX公式在线编辑网站
2.编辑好公示后,把生成的代码复制下来
3.代码按以下格式写到markdown编辑器中
<div markdown="0">+复制到生成的代码+</div>

以显示三行四列的矩阵为例:
<div markdown="0">
<a href="https://www.codecogs.com/eqnedit.php?latex=\begin{bmatrix}&space;1&space;&&space;2&space;&&space;3&space;&&space;\\&space;2&&space;0&&space;2&space;&&space;\\&space;3&&space;9&&space;4&&space;\end{bmatrix}" target="_blank"><img src="https://latex.codecogs.com/gif.latex?\begin{bmatrix}&space;1&space;&&space;2&space;&&space;3&space;&&space;\\&space;2&&space;0&&space;2&space;&&space;\\&space;3&&space;9&&space;4&&space;\end{bmatrix}" title="\begin{bmatrix} 1 & 2 & 3 & \\ 2& 0& 2 & \\ 3& 9& 4& \end{bmatrix}" /></a></div>

3.10.1 矩阵示例

3.10.2 微积分示例

3.10.3 求极限

3.10.4 公式组

纳维-斯托克斯方程(大名鼎鼎的N-S方程)

除这些数学公式之外,还可以书写很多类型的数学公式,限于篇幅就不在这里一一示范了。

3.11 文字处理

3.11.1 普通文字处理

博文中可对文字进行处理,处理内容包含文字大小、格式、颜色、字体等等。

1
2
3
4
5
6
7
8
9
10
11
12
13
其中文字倾斜可以使用markdown自带语法,例如:
**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~等等。
但若要修改字体、文字大小、文字颜色,就要用到Html 代码了。
例如:
<div markdown="0"><font face="黑体">我是黑体字</font></div>
<div markdown="0"><font face="微软雅黑">我是微软雅黑</font> </div>
<div markdown="0"><font color="red">我是红色</font></div>
<div markdown="0"><font color="blue">我是蓝色</font></div>
<div markdown="0"><font size="5">我是文字尺寸</font> </div>
<div markdown="0"><font face="黑体" color="green" size="5">我是黑体,绿色,尺寸为5</font></div>

效果分别如下所示: 这是加粗的文字 这是倾斜的文字` 这是斜体加粗的文字 这是加删除线的文字

我是黑体字
我是微软雅黑
我是红色
我是蓝色
我是文字尺寸
我是黑体,绿色,尺寸为5

3.11.2 特殊文字处理

3.11.2.1 上标
1
例如:E = mc<sup>2</sup>

效果为:E = mc2

3.11.2.2 下标
1
例如:Water: H<sub>2</sub>O

效果为:Water: H2O

3.11.2.3 下划线
1
2
例如:<u>下划内容</u>

效果为:下划内容

3.12 脚注或引用

使用语法如下所示:

1
2
3
人有悲欢离合,月有阴晴圆缺.[^1]

[^1]: 《水调歌头》

效果如下所示: 人有悲欢离合,月有阴晴圆缺.1

3.13 图片名称

使用语法如下所示:

1
2
<div align="center" markdown="0"><font size="字号大小">图片名称</font> </div>
例如:<div align="center" markdown="0"><font size="2">图片名称</font> </div>

效果如下所示:

图片名称

3.14 任务列表

使用语法如下所示:

1
2
3
- [x] 已完成任务

- [ ] 未完成任务

效果如下所示:

  • 已完成任务

  • 未完成任务

3.15 可直接点击链接

在markdown中将链接地址或邮箱地址用<>包围,则会被自动转换成可点击的链接。使用语法如下所示:

1
2
3
<http://zhangfan.top>

<zf083415@gmail.com>

效果如下所示:

http://zhangfan.top

zf083415@gmail.com

3.16 插入引用链接

使用语法如下所示:

1
2
3
这是一个引用链接的[例子][2]。

[2]: http://example.com/

效果如下所示: 这是一个引用链接的例子

3.17 文章内部跳转

文章内部跳转语法和文本链接语法类似,使用语法如下所示:

1
2
3
4
5
语法:[标签](#跳转文本)
跳转文本要放到id 里面

例如:[跳转到3.14 任务列表](#任务列表)
3.14 任务列表后面跟了这段代码:<div align="center" markdown="0" id="任务列表"></div>

效果如下所示:

跳转到3.14 任务列表,点击即可跳转到对应的文本。

结语

记录生活,记录精彩

1
  1. 《水调歌头》