index.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>泽郴老仙 —— 目前只是学习笔记</title>
    <link>https://knightwupz.github.io/</link>
    <description>Recent content on 泽郴老仙 —— 目前只是学习笔记</description>
    <generator>Hugo -- gohugo.io</generator>
    <lastBuildDate>Mon, 10 Jun 2019 17:30:05 +0800</lastBuildDate>
    
        <atom:link href="https://knightwupz.github.io/index.xml" rel="self" type="application/rss+xml" />
    
    
    <item>
      <title>Markdown语法规则</title>
      <link>https://knightwupz.github.io/post/blogs/markdown%E8%AF%AD%E6%B3%95%E8%A7%84%E5%88%99/</link>
      <pubDate>Mon, 10 Jun 2019 17:30:05 +0800</pubDate>
      
      <guid>https://knightwupz.github.io/post/blogs/markdown%E8%AF%AD%E6%B3%95%E8%A7%84%E5%88%99/</guid>
      
        <description>&lt;h1 id=&#34;markdown语法规则&#34;&gt;Markdown语法规则&lt;/h1&gt;

&lt;p&gt;前言：本网站的所有内容都是基于markdown语法规则，使用VS Code编辑器，并加载了Markdown Preview Enhanced 0.4.1,本文将简介基础的mardown语法规则，和基于扩展包的扩展规则。&lt;/p&gt;

&lt;h2 id=&#34;1-markdown语法兼容html语法&#34;&gt;1. Markdown语法兼容HTML语法&lt;/h2&gt;

&lt;p&gt;Markdown语法兼容html语法，可以使用html标签设置字体格式，颜色等：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;# 示例代码
 &amp;lt;div align=&amp;#34;center&amp;#34; style=&amp;#34;color:red&amp;#34;&amp;gt;使用 Markdown 编写文档&amp;lt;/div&amp;gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;p&gt;&lt;div align=&#34;center&#34; style=&#34;color:red&#34;&gt;使用 Markdown 编写文档&lt;/div&gt;&lt;/p&gt;

&lt;p&gt;可以借用html语法书写上下标：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;# 示例代码
H&amp;lt;sub&amp;gt;2&amp;lt;/sub&amp;gt;O  CO&amp;lt;sub&amp;gt;2&amp;lt;/sub&amp;gt;
爆米&amp;lt;sup&amp;gt;TM&amp;lt;/sup&amp;gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;p&gt;H&lt;sub&gt;2&lt;/sub&gt;O  CO&lt;sub&gt;2&lt;/sub&gt;
爆米&lt;sup&gt;TM&lt;/sup&gt;&lt;/p&gt;

&lt;h2 id=&#34;2-标题&#34;&gt;2. 标题&lt;/h2&gt;

&lt;p&gt;标题格式为若干个&lt;code&gt;#&lt;/code&gt; + &lt;code&gt;titile&lt;/code&gt;，拥有几个&lt;code&gt;#&lt;/code&gt;符号表示第几级，最多支持6级子标题,注意&lt;code&gt;#&lt;/code&gt;与标题之间要有空格&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;8
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;#代码
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
####### 不支持7级或更多子标题，反正字数太小也看不清&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;效果：&lt;/p&gt;

&lt;h1 id=&#34;一级标题-ignore-true&#34;&gt;一级标题 {ignore=true}&lt;/h1&gt;

&lt;h2 id=&#34;二级标题-ignore-true&#34;&gt;二级标题 {ignore=true}&lt;/h2&gt;

&lt;h3 id=&#34;三级标题-ignore-true&#34;&gt;三级标题 {ignore=true}&lt;/h3&gt;

&lt;h4 id=&#34;四级标题-ignore-true&#34;&gt;四级标题 {ignore=true}&lt;/h4&gt;

&lt;h5 id=&#34;五级标题-ignore-true&#34;&gt;五级标题 {ignore=true}&lt;/h5&gt;

&lt;h6 id=&#34;六级标题-ignore-true&#34;&gt;六级标题 {ignore=true}&lt;/h6&gt;

&lt;p&gt;####### 不支持7级或更多子标题，反正字数太小也看不清 {ignore=true}&lt;/p&gt;

&lt;h2 id=&#34;3-目录&#34;&gt;3. 目录&lt;/h2&gt;

&lt;p&gt;显示目录需要扩展包的支持，本文使用的是Markdown Preview Enhanced 0.4.1，其可根据标题级别生成目录，并可设置显示的级别。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;# 示例代码：显示本文目录
[TOC]

# 注意： 若某级标题不需要在目录中出现，可在该标题后面添加参数`{ignore=true}`&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;p&gt;[TOC]&lt;/p&gt;

&lt;h2 id=&#34;4-段落&#34;&gt;4. 段落&lt;/h2&gt;

&lt;p&gt;每一个自然段前后都要空行，如果只是换行而没有多出中间的空行，编辑器将认为上下两端是同一段文字。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;#示例代码
段落1
段落2*&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;p&gt;段落1
段落2*&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;#示例代码
段落1

段落2*&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;p&gt;段落1&lt;/p&gt;

&lt;p&gt;段落2*&lt;/p&gt;

&lt;h2 id=&#34;5-区块引用&#34;&gt;5. 区块引用&lt;/h2&gt;

&lt;p&gt;使用右括号&lt;code&gt;&amp;gt;&lt;/code&gt;表示区块引用：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt; 1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 9
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;10
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;11
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;12
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;13
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;14
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;#示例代码
&amp;gt; 引用1 随便写点东西
&amp;gt;&amp;gt; 引用2
&amp;gt;&amp;gt; 引用2 ## 此两行将显示为同一行，
&amp;gt;&amp;gt;&amp;gt; 引用3.1
&amp;gt;&amp;gt;&amp;gt;
&amp;gt;&amp;gt;&amp;gt; 引用3.2 # 3.1和3.2之间多了一个空行
&amp;gt;&amp;gt;&amp;gt;&amp;gt; 引用4.1 
&amp;gt;&amp;gt;&amp;gt;&amp;gt; \
&amp;gt;&amp;gt;&amp;gt;&amp;gt; 引用4.2 通过添加一行引用符`&amp;gt;`加上转义符`\`，可以达到换行且两行之间没有空行的效果。
&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt; 引用5 可以一直嵌套引用
&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt; 引用6 可以一直嵌套引用
&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt; 引用7 可以一直嵌套引用
&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt; 引用8 可以一直嵌套引用&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;引用1 随便写点东西
&amp;gt; 引用2.1
&amp;gt; 引用2.2
&amp;gt;&amp;gt; 引用3 引用可以嵌套
&amp;gt;&amp;gt;&amp;gt; 引用4 引用可以嵌套
&amp;gt;&amp;gt;&amp;gt;&amp;gt; 引用5 引用可以嵌套&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2 id=&#34;6-代码区块&#34;&gt;6. 代码区块&lt;/h2&gt;

&lt;p&gt;位于文章内段落中间的小段代码，可以用一对反引号表示：&lt;code&gt;code&lt;/code&gt;。&lt;/p&gt;

&lt;p&gt;对于大段的代码区块，则用成对的3个反引号括住，在其中书写代码，或者将所有代码都缩进一个制表符。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;7
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;# 示例代码
# 方法1：用成对的3个反引号括住
    ```python #此行可添加语言标记
    print(&amp;#34;Something&amp;#34;)
    ```
# 方法2：在代码前面添加一个制表符
        print(&amp;#34;nothing&amp;#34;) #test前面加一个相当于4个空格的制表符，或直接用四个空格&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;p&gt;方法1：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python #此行可添加语言标记&#34; data-lang=&#34;python #此行可添加语言标记&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python #此行可添加语言标记&#34; data-lang=&#34;python #此行可添加语言标记&#34;&gt;print(&amp;#34;Something&amp;#34;)&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;方法2：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;print(&amp;#34;nothing&amp;#34;)&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id=&#34;7-列表&#34;&gt;7. 列表&lt;/h2&gt;

&lt;p&gt;Markdown 支持无序列表（用&lt;code&gt;*&lt;/code&gt;, &lt;code&gt;+&lt;/code&gt;, &lt;code&gt;-&lt;/code&gt;作为一行开头）和有序列表（用数字作为行首）。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt; 1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 9
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;10
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;11
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;12
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;13
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;14
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;15
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;16
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;17
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;18
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;19
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;20
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;21
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;22
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;23
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;24
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;25
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;26
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;27
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;28
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;29
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;30
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;31
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;32
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;33
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;34
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;# 示例代码

# 无序列表的三种表示方法，分别是用*，+，-开头并接一个空格，后面是列表内容

无序列表1

* 苹果，西瓜
* 橘子，菠萝
* 香蕉，
    
    草莓

无序列表2：

- 猴子
- 豹子
- 狗子

无序列表3：

+ 电脑  
    &amp;gt; 屏幕
    &amp;gt;
    &amp;gt; 主机
+ 手机
    
        print(&amp;#34;mobilephone&amp;#34;)
+ 平板

# 有序列表用数字开始，数字后是英文字符.和一个空格，然后是列表内容。注意数字编号不一定要完全按照顺序写，但列表第一项最好还是以1开头

1. 眼睛
1. 鼻子
5. 耳朵 &lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;p&gt;无序列表1
* 苹果，西瓜
* 橘子，菠萝
* 香蕉，&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;草莓&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;无序列表2：&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;猴子&lt;/li&gt;
&lt;li&gt;豹子&lt;/li&gt;
&lt;li&gt;狗子&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;无序列表3：&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;电脑&lt;br /&gt;
&amp;gt; 屏幕
&amp;gt;
&amp;gt; 主机&lt;/li&gt;

&lt;li&gt;&lt;p&gt;手机&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;print(&amp;#34;mobilephone&amp;#34;)&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;平板&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;有序列表：&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;眼睛&lt;/li&gt;
&lt;li&gt;鼻子&lt;/li&gt;
&lt;li&gt;耳朵&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;注意事项：&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;列表内项目可以包括不止一段内容，每个段落都需要首行缩进以表示其是该列表子项目的一部分。&lt;/p&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;列表内可以包含引用和代码块。&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&#34;8-分割线&#34;&gt;8. 分割线&lt;/h2&gt;

&lt;p&gt;有以下几种方式都可以建立分割线：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;6
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;# 示例代码：
* * *
***
*****
- - -
---------------------------------------&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;hr /&gt;

&lt;hr /&gt;

&lt;hr /&gt;

&lt;hr /&gt;

&lt;hr /&gt;

&lt;h2 id=&#34;9-插入网页链接&#34;&gt;9. 插入网页链接&lt;/h2&gt;

&lt;p&gt;有两种方式可以插入链接：行内式和参考式。当链接较多时后者更方便。&lt;/p&gt;

&lt;p&gt;行内式格式为&lt;code&gt;[example](links &amp;quot;titile&amp;quot;)&lt;/code&gt;。&lt;/p&gt;

&lt;p&gt;参考式格式分两部分，第一部分是在要插入链接的位置标记好id&lt;code&gt;[example][id]&lt;/code&gt;， 该链接将显示成example的名字，接着在全文任意地方(一般是全文最后以注解，脚注或参考文献的方式标出)将该id代表的网址和标题按格式写在后面&lt;code&gt;[id]: links &amp;quot;titile&amp;quot;&lt;/code&gt;，id可以是字母、数字、空白和标点符号，但不区分大小写。 简短的网址也可以直接用方括号括起来，markdown会将该网址直接转变成一个链接&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt; 1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 9
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;10
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;11
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;#示例代码：行内式插入链接
[Blog of WUPZ](https://knightwupz.github.io/ &amp;#39;MY Blog&amp;#39;)

# 示例代码：参考式插入链接
[百度][2] 



# 示例代码：自动链接
&amp;lt;https://knightwupz.github.io&amp;gt;
&amp;lt;username@126.com&amp;gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;p&gt;&lt;a href=&#34;https://knightwupz.github.io/&#34; title=&#34;MY Blog&#34;&gt;Blog of WUPZ&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href=&#34;https://knightwupz.github.io/&#34; title=&#34;MY Blog&#34;&gt;Blog of WUPZ&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href=&#34;https://knightwupz.github.io&#34;&gt;https://knightwupz.github.io&lt;/a&gt;
&lt;a href=&#34;mailto:username@126.com&#34;&gt;username@126.com&lt;/a&gt;&lt;/p&gt;

&lt;h2 id=&#34;10-插入图片&#34;&gt;10. 插入图片&lt;/h2&gt;

&lt;p&gt;插入图片与插入链接的格式有些类似，也有两种行内式和参考式两种方式，书写格式分别是在插入链接的格式之前添加一个&lt;code&gt;!&lt;/code&gt;。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt; 1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 9
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;10
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;11
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;行内式格式：
![picture](links &amp;#34;titile&amp;#34;)

参考式格式：
[picture][id]



# 注意：
# 1. links表示图片的存放地址，可以是相对当前文档的路径，也可以是网络上公开的图片网址
# 2. markdown暂时没办法指定图片大小，如有需要可以参考html语法添加&amp;lt;img&amp;gt;标签插入图片&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id=&#34;11-字体强调&#34;&gt;11. 字体强调&lt;/h2&gt;

&lt;p&gt;在需要强调的内容前后分别加上一个或两个&lt;code&gt;*&lt;/code&gt;,可以达到使该段内容变成斜体或加粗的效果。&lt;code&gt;*&lt;/code&gt;也可换成&lt;code&gt;_&lt;/code&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt; 1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 9
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;10
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;11
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;12
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;13
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;14
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;15
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;16
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;17
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;18
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;19
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;20
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;21
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;22
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;23
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;24
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;25
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;26
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;27
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;28
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;# 示例代码

*斜体*

_斜体_

**加粗**

__加粗__

***斜体+加粗***

**_斜体+加粗_**

&amp;lt;i&amp;gt;斜体&amp;lt;/i&amp;gt;  
            &amp;lt;b&amp;gt;加粗&amp;lt;/b&amp;gt;  
            &amp;lt;em&amp;gt;强调&amp;lt;/em&amp;gt;  
            &amp;lt;u&amp;gt;下划线&amp;lt;/u&amp;gt;   
            &amp;lt;del&amp;gt;删除&amp;lt;/del&amp;gt;  
            Z&amp;lt;sup&amp;gt;a&amp;lt;/sup&amp;gt;  
            Z&amp;lt;sub&amp;gt;a&amp;lt;/sub&amp;gt;  
            &amp;lt;kbd&amp;gt;Ctrl&amp;lt;/kbd&amp;gt;

# 以下代码需要扩展包

==背景色==

~~删除~~&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;p&gt;&lt;em&gt;斜体&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;斜体&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;加粗&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;_&lt;em&gt;加粗&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;斜体加粗&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;斜体加粗&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;&lt;strong&gt;斜体加粗&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;em&gt;斜体加粗&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;i&gt;斜体&lt;/i&gt;&lt;br /&gt;
            &lt;b&gt;加粗&lt;/b&gt;&lt;br /&gt;
            &lt;em&gt;强调&lt;/em&gt;&lt;br /&gt;
            &lt;u&gt;下划线&lt;/u&gt;&lt;br /&gt;
            &lt;del&gt;删除&lt;/del&gt;&lt;br /&gt;
            Z&lt;sup&gt;a&lt;/sup&gt;&lt;br /&gt;
            Z&lt;sub&gt;a&lt;/sub&gt;&lt;br /&gt;
            &lt;kbd&gt;Ctrl&lt;/kbd&gt;&lt;/p&gt;

&lt;p&gt;==背景色==&lt;/p&gt;

&lt;p&gt;&lt;del&gt;删除&lt;/del&gt;&lt;/p&gt;

&lt;h2 id=&#34;12-特殊字符&#34;&gt;12. 特殊字符&lt;/h2&gt;

&lt;p&gt;有些特殊字符需要在前面加入反斜杠来表示，这些字符包括：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt; 1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 9
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;10
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;11
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;12
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id=&#34;markdown扩展语法&#34;&gt;Markdown扩展语法&lt;/h2&gt;

&lt;p&gt;本部分的语法需要加载扩展包，推荐使用Markdown Preview Enhanced最新版。&lt;/p&gt;

&lt;h3 id=&#34;表格&#34;&gt;表格&lt;/h3&gt;

&lt;p&gt;markdown表格使用&lt;code&gt;|&lt;/code&gt;作为列与列之间的分隔符，每一行要有相同的&lt;code&gt;|&lt;/code&gt;个数。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;9
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;# 示例代码

| 表格  | 第一列          | 第二列    |
|:----|:----------------:|----------:| 
| 第一行| 写点什么         | 吧 |
| 第二行| 还是空着     |   好了 |
| 第三行 | 就这样      |   吧 |

# 注意：|:----|:----------------:|----------:| 这一行只能写在第二行，：表示对其方式，写在左边表示左对齐，写在右边表示右对齐，写在两边表示居中对齐&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th align=&#34;left&#34;&gt;表格&lt;/th&gt;
&lt;th align=&#34;center&#34;&gt;第一列&lt;/th&gt;
&lt;th align=&#34;right&#34;&gt;第二列&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;

&lt;tbody&gt;
&lt;tr&gt;
&lt;td align=&#34;left&#34;&gt;第一行&lt;/td&gt;
&lt;td align=&#34;center&#34;&gt;写点什么&lt;/td&gt;
&lt;td align=&#34;right&#34;&gt;吧&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td align=&#34;left&#34;&gt;第二行&lt;/td&gt;
&lt;td align=&#34;center&#34;&gt;还是空着&lt;/td&gt;
&lt;td align=&#34;right&#34;&gt;好了&lt;/td&gt;
&lt;/tr&gt;

&lt;tr&gt;
&lt;td align=&#34;left&#34;&gt;第三行&lt;/td&gt;
&lt;td align=&#34;center&#34;&gt;就这样&lt;/td&gt;
&lt;td align=&#34;right&#34;&gt;吧&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;

&lt;h3 id=&#34;数学公式&#34;&gt;数学公式&lt;/h3&gt;

&lt;p&gt;Markdown Preview Enhanced 默认使用KaTeX渲染数学表达式，可在设置中更改为MathJax。KaTeX速度更快，但不如MathJax支持的特性多。&lt;/p&gt;

&lt;p&gt;行内公式使用 &lt;code&gt;$...$&lt;/code&gt; 或者 &lt;code&gt;\(...\)&lt;/code&gt; 分隔符表示，一个大段区块的数学公式用 &lt;code&gt;$$...$$&lt;/code&gt; 或者 &lt;code&gt;\[...\]&lt;/code&gt; 表示。分隔符内的数学公式语法参考LaTeX语法。KaTeX所支持的符号和函数可以在&lt;a href=&#34;https://katex.org/docs/supported.html&#34;&gt;KaTeX Supported Functions&lt;/a&gt;中找到。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;# 示例代码

$$ x \href{why-equal.html}{=} y^2 + 1 $$

\( x = {-b \pm \sqrt{b^2-4ac} \over 2a} \)&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;p&gt;$$ x \href{why-equal.html}{=} y^2 + 1 $$&lt;/p&gt;

&lt;p&gt;( x = {-b \pm \sqrt{b^2-4ac} \over 2a} )&lt;/p&gt;

&lt;h3 id=&#34;脚注&#34;&gt;脚注&lt;/h3&gt;

&lt;p&gt;脚注的使用方法是在插入位置插入一对中括号，其中内容以&lt;code&gt;^&lt;/code&gt;+&lt;code&gt;脚注id&lt;/code&gt;。然后在全文最后添加对该id的说明内容。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;# 示例代码

Markdown[^1]&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;示例效果：&lt;/p&gt;

&lt;p&gt;Markdown&lt;sup class=&#34;footnote-ref&#34; id=&#34;fnref:1&#34;&gt;&lt;a href=&#34;#fn:1&#34;&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/p&gt;

&lt;h3 id=&#34;流程图&#34;&gt;流程图&lt;/h3&gt;

&lt;p&gt;Markdown Preview Enhanced支持flow charts, sequence diagrams, mermaid, PlantUML, WaveDrom, GraphViz，Vega &amp;amp; Vega-lite，Ditaa格式代码的流程图渲染，并且也可以通过运行代码框内的TikZ, Python Matplotlib, Plotly等代码来得到流程图。具体内容可参考&lt;a href=&#34;https://shd101wyy.github.io/markdown-preview-enhanced/#/zh-cn/diagrams&#34;&gt;MPE说明文档流程图部分&lt;/a&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-flow&#34; data-lang=&#34;flow&#34;&gt;&lt;span class=&#34;lnt&#34;&gt; 1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 9
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;10
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;11
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-flow&#34; data-lang=&#34;flow&#34;&gt;st=&amp;gt;start:Start:&amp;gt;http://www.google.com[blank]
e=&amp;gt;end:&amp;gt;http://www.google.com
opl=&amp;gt;operation: My Operationv
sub1=&amp;gt;subroutine: My subroutine
cond=&amp;gt;cindition: Yes
or No?&amp;#34;&amp;gt;http://www.google.com
io=&amp;gt;inputoutout: catch somthing

st-&amp;gt;op1-&amp;gt;cond
cond(yes)-&amp;gt;io-&amp;gt;e
cond(no)-&amp;gt;sub1(right)-&amp;gt;op1&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h4 id=&#34;sequence流程图&#34;&gt;Sequence流程图&lt;/h4&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-sequence {theme=&#34;hand&#34;}&#34; data-lang=&#34;sequence {theme=&#34;hand&#34;}&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-sequence {theme=&#34;hand&#34;}&#34; data-lang=&#34;sequence {theme=&#34;hand&#34;}&#34;&gt;Andrew-&amp;gt;China:Says Helo
Note right of China: China thinks\nabout it
China--&amp;gt;Andrew: How are you ?
Andrew -&amp;gt;&amp;gt; China: I am good thanks!&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h4 id=&#34;mermaid流程图&#34;&gt;mermaid流程图&lt;/h4&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-mermaid&#34; data-lang=&#34;mermaid&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-mermaid&#34; data-lang=&#34;mermaid&#34;&gt;graph LR
A --&amp;gt; B
B --&amp;gt; C
C --&amp;gt; A&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h4 id=&#34;plantuml&#34;&gt;PlantUML&lt;/h4&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-puml&#34; data-lang=&#34;puml&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-puml&#34; data-lang=&#34;puml&#34;&gt;A -&amp;gt; B&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-puml&#34; data-lang=&#34;puml&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-puml&#34; data-lang=&#34;puml&#34;&gt;@startuml
A -&amp;gt; B
B -&amp;gt; C
@enduml&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h4 id=&#34;graphviz&#34;&gt;GraphViz&lt;/h4&gt;

&lt;p&gt;MPE使用 Viz.js 来渲染 dot 语言流程图。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-dot&#34; data-lang=&#34;dot&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-dot&#34; data-lang=&#34;dot&#34;&gt;digraph G {
    A -&amp;gt; B;
    B -&amp;gt; C;
    B -&amp;gt; D;
}&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;8
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h4 id=&#34;ditaa&#34;&gt;ditaa&lt;/h4&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-ditaa {cmd=true args=[&#34;-E&#34;]}&#34; data-lang=&#34;ditaa {cmd=true args=[&#34;-E&#34;]}&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;9
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-ditaa {cmd=true args=[&#34;-E&#34;]}&#34; data-lang=&#34;ditaa {cmd=true args=[&#34;-E&#34;]}&#34;&gt;  +--------+   +-------+    +-------+
  |        | --+ ditaa +--&amp;gt; |       |
  |  Text  |   +-------+    |diagram|
  |Document|   |!magic!|    |       |
  |     {d}|   |       |    |       |
  +---+----+   +-------+    +-------+
      :                         ^
      |       Lots of work      |
      +-------------------------+&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python {cmd=true matplotlib=true}&#34; data-lang=&#34;python {cmd=true matplotlib=true}&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-python {cmd=true matplotlib=true}&#34; data-lang=&#34;python {cmd=true matplotlib=true}&#34;&gt;import matplotlib.pyplot as plt
plt.plot([1,2,3, 4])
plt.show() # show figure&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3 id=&#34;导入文件&#34;&gt;导入文件&lt;/h3&gt;

&lt;p&gt;支持导入的文件包括：图片（.jpeg(.jpg), .gif, .png, .apng, .svg, .bmp），表格（.csv）,pdf文档，流程图代码文件（.mermaid， .plantuml(.puml) .dot），html文件，md文件，.less和.css文件，在线文件，其他文件将视为代码块。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;# 示例代码
@import &amp;#34;test.csv&amp;#34;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3 id=&#34;插入视频&#34;&gt;插入视频&lt;/h3&gt;

&lt;p&gt;需要借助第三方工具。&lt;/p&gt;

&lt;h2 id=&#34;参考资料&#34;&gt;参考资料&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href=&#34;https://www.appinn.com/markdown/#html&#34;&gt;Markdown 语法说明 (简体中文版)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;https://www.jianshu.com/p/13b3366f0260&#34;&gt;在markdown中如何加入上标、下标？&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;https://shd101wyy.github.io/markdown-preview-enhanced/#/&#34;&gt;markdown-preview-enhanced插件说明文档&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;div class=&#34;footnotes&#34;&gt;

&lt;hr /&gt;

&lt;ol&gt;
&lt;li id=&#34;fn:1&#34;&gt;Markdown是一种纯文本标记语言 
 &lt;a class=&#34;footnote-return&#34; href=&#34;#fnref:1&#34;&gt;&lt;sup&gt;[return]&lt;/sup&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;</description>
      
    </item>
    
    <item>
      <title>Git bash中文显示问题</title>
      <link>https://knightwupz.github.io/post/pipelines/git-bash%E4%B8%AD%E6%96%87%E6%98%BE%E7%A4%BA%E9%97%AE%E9%A2%98/</link>
      <pubDate>Fri, 07 Jun 2019 16:01:23 +0800</pubDate>
      
      <guid>https://knightwupz.github.io/post/pipelines/git-bash%E4%B8%AD%E6%96%87%E6%98%BE%E7%A4%BA%E9%97%AE%E9%A2%98/</guid>
      
        <description>

&lt;h1 id=&#34;git-bash中文显示问题&#34;&gt;git bash中文显示问题&lt;/h1&gt;

&lt;p&gt;在Windows中使用git bash遇到了中文乱码的问题，当提交中文名字的文档“Git的基本使用方法.md”并添加评论&lt;code&gt;git commit -m &amp;quot;first note&amp;quot;&lt;/code&gt;后，git显示中文乱码：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;[master 4c7cc5d] first note
 1 file changed, 6 insertions(+)
 create mode 100644 &amp;#34;Git\347\232\204\345\237\272\346\234\254\344\275\277\347\224\250\346\226\271\346\263\225.md&amp;#34;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;造成乱码的几个原因主要有&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Windows默认使用GB2312来处理文件名和内容，但Git默认使用UTF-8&lt;/li&gt;
&lt;li&gt;Git命令在输出log的时候会使用less这个工具，默认和Windows的编码格式不兼容&lt;/li&gt;
&lt;li&gt;不同的命令行工具（终端）对环境变量的处理方式不同&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;解决的办法是统一使用UTF-8编码。需要修改的设置有：
1. 设置 Git 支持 utf-8 编码&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;git config --global core.quotepath false # 不对0x80以上的字符进行quote，解决git status/commit时中文文件名乱码
git config --global i18n.commitencoding utf-8 # 提交信息编码
git config --global i18n.logoutputencoding utf-8 # 输出log编码
git config --global svn.pathnameencoding GB2312 # 支持中文路径
export LESSCHARSET=utf-8 # git log 默认使用less分页，所以需要bash对less命令进行utf-8编码&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;gui显示中文&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;git config --global gui.encoding utf-8 # 图形界面编码&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;针对Windows的其他命令行工具
在系统环境变量中添加LESSCHARSET变量，其值设置为utf-8，可解决windows其他命令行工具如Powershell, cmd和cmder的中文乱码问题。&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2 id=&#34;参考资料&#34;&gt;参考资料&lt;/h2&gt;

&lt;p&gt;&lt;a href=&#34;https://gist.github.com/nightire/5069597&#34;&gt;解决 Git 在 windows 下中文乱码的问题&lt;/a&gt;
&lt;a href=&#34;https://devopshub.cn/2018/01/07/g4e-faq-4-git-encoding-error/&#34;&gt;g4e常见问题#4 解决Git在Windows上的中文乱码问题&lt;/a&gt;&lt;/p&gt;
</description>
      
    </item>
    
    <item>
      <title>Git的基本使用方法</title>
      <link>https://knightwupz.github.io/post/notes/git%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95/</link>
      <pubDate>Sat, 03 Mar 2018 16:01:23 +0800</pubDate>
      
      <guid>https://knightwupz.github.io/post/notes/git%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95/</guid>
      
        <description>

&lt;h1 id=&#34;git的基本使用方法&#34;&gt;Git的基本使用方法&lt;/h1&gt;

&lt;h2 id=&#34;安装&#34;&gt;安装&lt;/h2&gt;

&lt;p&gt;下载官方网站最新版本：&lt;a href=&#34;https://git-scm.com/downloads，&#34;&gt;https://git-scm.com/downloads，&lt;/a&gt; 支持Windows，Linux/Unix，macOS系统。&lt;/p&gt;

&lt;h2 id=&#34;git配置&#34;&gt;Git配置&lt;/h2&gt;

&lt;h3 id=&#34;常用git配置&#34;&gt;常用git配置&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;配置命令别名&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;可以给常用命令设置别名，提高使用效率。&lt;/p&gt;

&lt;p&gt;别名的配置也使用config命令，比如给&lt;code&gt;git status&lt;/code&gt;设置别名&lt;code&gt;st&lt;/code&gt;：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;git config --global alias.st status&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;修改log显示效果：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;git config --global alias.lg &amp;#34;log --color --graph --pretty=format:&amp;#39;%C(bold red)%h%C(reset) - %C(bold green)(%cr)%C(bold blue)&amp;lt;%an&amp;gt;%C(reset) -%C(bold yellow)%d%C(reset) %s&amp;#39; --abbrev-commit&amp;#34;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;修改句尾换行设置
不同操作系统句尾换行设置不同，windows为CRLF（回车+换行，即\r\n），linux为LF（换行）， macOS为CR（回车）。当文件在不同操作系统之间传递时可能引起乱码，windows系统需要修改autocrlf设置为true。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;git config --global core.autocrlf true&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;配置默认文本编辑器&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;默认编辑器为vim，可更改为自己熟悉的编辑器。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;git config [--system|global] core.editor emacs&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;配置差异分析工具
默认工具为git diff，可修改为其他工具：kdiff3、tkdiff、meld、xxdiff、emerge、vimdiff、gvimdiff、ecmerge、opendiff等等。&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;例如要改用vimdiff，可以这样设置：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;git config [--system|global] merge.tool vimdiff&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3 id=&#34;git配置文件&#34;&gt;git配置文件&lt;/h3&gt;

&lt;p&gt;修改配置文件内容可以直接修改git环境变量。&lt;/p&gt;

&lt;p&gt;git有三个级别的配置文件，可以使用&lt;code&gt;git config&lt;/code&gt;工具来配置或读取相应的环境变量。&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;版本库级配置文件&lt;/li&gt;
&lt;li&gt;位置：&lt;code&gt;gitrepos/.git/config&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;配置仅对当前版本库有效&lt;/li&gt;

&lt;li&gt;&lt;p&gt;使用&lt;code&gt;git config --local&lt;/code&gt;进行修改&lt;/p&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;全局配置文件&lt;/p&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;位置：&lt;code&gt;C:/Users/xxx/.gitconfig&lt;/code&gt; （windows）&lt;/p&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;配置仅对当前用户有效&lt;/p&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;使用&lt;code&gt;git config --global&lt;/code&gt;进行修改
0&lt;/p&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;系统级配置文件&lt;/p&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;位置：Windows系统为&lt;code&gt;C:/ProgramData/Git&lt;/code&gt;，mac和Linux为&lt;code&gt;/etc/gitconfig&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;配置仅对当前用户有效&lt;/p&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;使用&lt;code&gt;git config --global&lt;/code&gt;进行修改&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;全局配置文件(C:/Users/xxx/.gitconfig)的一个简单模板：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt; 1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 9
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;10
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;11
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;12
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;13
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;14
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;15
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;16
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;[core]
    editor = \&amp;#34;C:\\Program Files\\Sublime Text 3\\subl.exe\&amp;#34; -w
[user]
    name = knightwupz
    email = wpzno1@126.com
[alias]
    lg = log --color --graph --pretty=format:&amp;#39;%C(bold red)%h%C(reset) - %C(bold green)(%cr)%C(bold blue)&amp;lt;%an&amp;gt;%C(reset) -%C(bold yellow)%d%C(reset) %s&amp;#39; --abbrev-commit
    co = checkout
    br = branch
    mg = merge
    cm = commit
    df = difftools
    mt = mergetool
    last = log -1 HEAD
    cf = config
    st = status&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id=&#34;创建版本库-repository&#34;&gt;创建版本库(repository)&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;创建空文件&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;mkdir learningGit
cd learningGit&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;初始化git仓库&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;git init&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;添加文件
用编辑器创建文件readme.txt&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;Git is a version control system.
This repository is for my notes of learning Git.&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;提交评论&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;git commit -m &amp;#34;wrote a readme file&amp;#34;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;查看提交记录&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt; 1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 9
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;10
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;11
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;12
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;13
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;14
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;15
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;16
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;17
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;18
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;19
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;20
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;21
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;22
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;23
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;24
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;$ git log
commit 046e987b8118c7845485889d3373d84f2fe7e893 (HEAD -&amp;gt; master)
Author: knightwupz &amp;lt;wpzno1@126.com&amp;gt;
Date:   Tue May 28 20:41:52 2019 +0800

20190528修改版

commit fd2ddbef702e7f736a8066ee49c940a16e04145d
Author: knightwupz &amp;lt;wpzno1@126.com&amp;gt;
Date:   Mon May 27 19:27:28 2019 +0800

解决git的中文显示问题

commit 4c7cc5dc24d45b1b8163664a39bf1ef84b19ee55
Author: knightwupz &amp;lt;wpzno1@126.com&amp;gt;
Date:   Mon May 27 18:42:59 2019 +0800

first note

commit df93cccc31b1d516d588bb5f2d38bef88586dffc
Author: knightwupz &amp;lt;wpzno1@126.com&amp;gt;
Date:   Mon May 27 18:41:32 2019 +0800

wrote a readme file&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;查看版本库当前状态&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;使用&lt;code&gt;git status&lt;/code&gt;命令查看版本库当前状态。&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;$ git st
On branch master
nothing to commit, working tree clean&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;&lt;p&gt;查看文档修改内容&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;8
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;$ git diff
diff --git a/Git的基本使用方法.md b/Git的基本使用方法.md
index 77fe77e..df5619f 100644
--- a/Git的基本使用方法.md
+++ b/Git的基本使用方法.md
@@ -135,13 +135,18 @@ Date:   Mon May 27 18:41:32 2019 +0800

# ……以下内容有所省略&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2 id=&#34;参考文档&#34;&gt;参考文档&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href=&#34;https://git-scm.com/book/zh/v1/%E8%87%AA%E5%AE%9A%E4%B9%89-Git-%E9%85%8D%E7%BD%AE-Git&#34;&gt;自定义-Git-配置-Git&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;https://www.liaoxuefeng.com/wiki/896043488029600&#34;&gt;廖雪峰Git教程&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
</description>
      
    </item>
    
    <item>
      <title>Image Preview</title>
      <link>https://knightwupz.github.io/post/blogs/image-preview/</link>
      <pubDate>Sat, 03 Mar 2018 16:01:23 +0800</pubDate>
      
      <guid>https://knightwupz.github.io/post/blogs/image-preview/</guid>
      
        <description>&lt;p&gt;Thanks for &lt;a href=&#34;https://github.com/liwenyip/hugo-easy-gallery&#34;&gt;liwenyip/hugo-easy-gallery&lt;/a&gt; &amp;amp; &lt;a href=&#34;https://github.com/xianmin/hugo-theme-jane/pull/48&#34;&gt;Zebradil · Pull Request #48&lt;/a&gt; .&lt;/p&gt;

&lt;p&gt;Now, we could use &lt;code&gt;{{&amp;lt; gallery &amp;gt;}}&lt;/code&gt; shortcode in hugo-theme-jane.&lt;/p&gt;

&lt;h2 id=&#34;normal-image&#34;&gt;Normal Image&lt;/h2&gt;

&lt;p&gt;This is an image in &lt;code&gt;static/image&lt;/code&gt; folder.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;![&lt;span class=&#34;nt&#34;&gt;This is an image in `static/image` folder.&lt;/span&gt;](&lt;span class=&#34;na&#34;&gt;/image/example.jpg&lt;/span&gt;)&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id=&#34;figure-shortcode&#34;&gt;&lt;code&gt;{{&amp;lt; figure &amp;gt;}}&lt;/code&gt; shortcode&lt;/h2&gt;

&lt;h3 id=&#34;figure-image-with-title&#34;&gt;figure image with title&lt;/h3&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{&amp;lt; figure src=&amp;#34;/image/example.jpg&amp;#34; title=&amp;#34;figure image with title&amp;#34; &amp;gt;}}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3 id=&#34;figure-image-with-caption&#34;&gt;figure image with caption&lt;/h3&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{&amp;lt; figure src=&amp;#34;/image/example.jpg&amp;#34; caption=&amp;#34;figure image with caption figure image with caption figure image with caption figure image with caption figure image with caption&amp;#34; &amp;gt;}}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3 id=&#34;more-figure-shortcode-usage&#34;&gt;more &lt;code&gt;{{&amp;lt; figure &amp;gt;}}&lt;/code&gt; shortcode usage&lt;/h3&gt;

&lt;p&gt;Specifying your image files:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;{{&amp;lt; figure src=&amp;quot;thumb.jpg&amp;quot; link=&amp;quot;image.jpg&amp;quot; &amp;gt;}}&lt;/code&gt; will use &lt;code&gt;thumb.jpg&lt;/code&gt; for thumbnail and &lt;code&gt;image.jpg&lt;/code&gt; for lightbox&lt;/li&gt;
&lt;li&gt;&lt;code&gt;{{&amp;lt; figure src=&amp;quot;image.jpg&amp;quot; &amp;gt;}}&lt;/code&gt; or &lt;code&gt;{{&amp;lt; figure link=&amp;quot;image.jpg&amp;quot; &amp;gt;}}&lt;/code&gt; will use &lt;code&gt;image.jpg&lt;/code&gt; for both thumbnail and lightbox&lt;/li&gt;
&lt;li&gt;&lt;code&gt;{{&amp;lt; figure link=&amp;quot;image.jpg&amp;quot; thumb=&amp;quot;-small&amp;quot; &amp;gt;}}&lt;/code&gt; will use &lt;code&gt;image-small.jpg&lt;/code&gt; for thumbnail and &lt;code&gt;image.jpg&lt;/code&gt; for lightbox&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Optional parameters:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;All the &lt;a href=&#34;https://gohugo.io/extras/shortcodes&#34;&gt;features/parameters&lt;/a&gt; of Hugo&amp;rsquo;s built-in &lt;code&gt;figure&lt;/code&gt; shortcode work as normal, i.e. src, link, title, caption, class, attr (attribution), attrlink, alt&lt;/li&gt;
&lt;li&gt;&lt;code&gt;size&lt;/code&gt; (e.g. &lt;code&gt;size=&amp;quot;1024x768&amp;quot;&lt;/code&gt;) pre-defines the image size for PhotoSwipe. Use this option if you don&amp;rsquo;t want to pre-load the linked image to determine its size.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;class&lt;/code&gt; allows you to set any custom classes you want on the &lt;code&gt;&amp;lt;figure&amp;gt;&lt;/code&gt; tag.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Optional parameters for standalone &lt;code&gt;{{&amp;lt; figure &amp;gt;}}&lt;/code&gt; shortcodes only (i.e. don&amp;rsquo;t use on &lt;code&gt;{{&amp;lt; figure &amp;gt;}}&lt;/code&gt; inside &lt;code&gt;{{&amp;lt; gallery &amp;gt;}}&lt;/code&gt; - strange things may happen if you do):&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;caption-position&lt;/code&gt; and &lt;code&gt;caption-effect&lt;/code&gt; work the same as for the &lt;code&gt;{{&amp;lt; gallery &amp;gt;}}&lt;/code&gt; shortcode (see below).&lt;/li&gt;
&lt;li&gt;&lt;code&gt;width&lt;/code&gt; defines the &lt;a href=&#34;https://www.w3schools.com/cssref/pr_dim_max-width.asp&#34;&gt;&lt;code&gt;max-width&lt;/code&gt;&lt;/a&gt; of the image displayed on the page. If using a thumbnail for a standalone figure, set this equal to your thumbnail&amp;rsquo;s native width to make the captions behave properly (or feel free to come up with a better solution and submit a pull request :-)). Also use this option if you don&amp;rsquo;t have a thumbnail and you don&amp;rsquo;t want the hi-res image to take up the entire width of the screen/container.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;class=&amp;quot;no-photoswipe&amp;quot;&lt;/code&gt; prevents a &lt;code&gt;&amp;lt;figure&amp;gt;&lt;/code&gt; from being loaded into PhotoSwipe. If you click on the figure you&amp;rsquo;ll instead a good ol&amp;rsquo; fashioned hyperlink to a bigger image (or - if you haven&amp;rsquo;t specified a bigger image - the same one).&lt;/li&gt;
&lt;/ul&gt;

&lt;h2 id=&#34;gallery-shortcode&#34;&gt;&lt;code&gt;{{&amp;lt; gallery &amp;gt;}}&lt;/code&gt; shortcode&lt;/h2&gt;

&lt;h3 id=&#34;simple-gallery&#34;&gt;simple gallery&lt;/h3&gt;

&lt;p&gt;To specify a directory of image files:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{&amp;lt; gallery dir=&amp;#34;/img/your-directory-of-images/&amp;#34; &amp;gt;}}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;ul&gt;
&lt;li&gt;The images are automatically captioned with the file name.&lt;/li&gt;
&lt;li&gt;&lt;code&gt;[image].jpg&lt;/code&gt; is used for the hi-res image, and &lt;code&gt;[image]-thumb.jpg&lt;/code&gt; is used for the thumbnails.&lt;/li&gt;
&lt;li&gt;If &lt;code&gt;[image]-thumb.jpg&lt;/code&gt; doesn&amp;rsquo;t exist, then &lt;code&gt;[image].jpg&lt;/code&gt; will be used for both hi-res and thumbnail images.&lt;/li&gt;
&lt;li&gt;The default thumbnail suffix is &lt;code&gt;-thumb&lt;/code&gt;, but you can specify a different one e.g. &lt;code&gt;thumb=&amp;quot;-small&amp;quot;&lt;/code&gt; or &lt;code&gt;thumb=&amp;quot;_150x150&amp;quot;&lt;/code&gt;.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3 id=&#34;to-specify-individual-image-files&#34;&gt;To specify individual image files&lt;/h3&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{&amp;lt; gallery &amp;gt;}}
  {{&amp;lt; figure src=&amp;#34;image1.jpg&amp;#34; &amp;gt;}}
  {{&amp;lt; figure src=&amp;#34;image2.jpg&amp;#34; &amp;gt;}}
  {{&amp;lt; figure src=&amp;#34;image3.jpg&amp;#34; &amp;gt;}}
{{&amp;lt; /gallery &amp;gt;}}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Optional parameters:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;caption-position&lt;/code&gt; - determines the captions&amp;rsquo; position over the image. Options:

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;bottom&lt;/code&gt; (default)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;center&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;none&lt;/code&gt; hides captions on the page (they will only show in PhotoSwipe)&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;caption-effect&lt;/code&gt; - determines if/how captions appear upon hover. Options:

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;slide&lt;/code&gt; (default)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;fade&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;none&lt;/code&gt; (captions always visible)&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;hover-effect&lt;/code&gt; - determines if/how images change upon hover. Options:

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;zoom&lt;/code&gt; (default)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;grow&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;shrink&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;slideup&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;slidedown&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;none&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;hover-transition&lt;/code&gt; - determines if/how images change upon hover. Options:

&lt;ul&gt;
&lt;li&gt;not set - smooth transition (default)&lt;/li&gt;
&lt;li&gt;&lt;code&gt;none&lt;/code&gt; - hard transition&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;</description>
      
    </item>
    
    <item>
      <title>胡搞一个博客</title>
      <link>https://knightwupz.github.io/post/blogs/%E8%83%A1%E6%90%9E%E4%B8%80%E4%B8%AA%E5%8D%9A%E5%AE%A2/</link>
      <pubDate>Sat, 29 Apr 2017 16:50:00 +0800</pubDate>
      
      <guid>https://knightwupz.github.io/post/blogs/%E8%83%A1%E6%90%9E%E4%B8%80%E4%B8%AA%E5%8D%9A%E5%AE%A2/</guid>
      
        <description>

&lt;h1 id=&#34;胡搞一个博客&#34;&gt;胡搞一个博客&lt;/h1&gt;

&lt;h2 id=&#34;hugo简介&#34;&gt;hugo简介&lt;/h2&gt;

&lt;h2 id=&#34;git简介&#34;&gt;git简介&lt;/h2&gt;

&lt;h2 id=&#34;生成本地站点&#34;&gt;生成本地站点&lt;/h2&gt;

&lt;p&gt;首先创建一个新的本地站点，命名为knightwupz-hugo：&lt;code&gt;hugo new site knightwupz-hugo&lt;/code&gt;
。切换到新站点目录里：&lt;code&gt;cd knightwupz-hugo&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;创建一个新的页面“about”：
&lt;code&gt;hugo new about.md&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;再创建一个新的页面“post/first”:
&lt;code&gt;hugo new post/first.md&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;注意&lt;code&gt;hugo new&lt;/code&gt;命令创建的页面都位于content目录里。&lt;/p&gt;

&lt;p&gt;查看页面内容：
&lt;code&gt;cat content/post/first.md&lt;/code&gt;, 已经自动生成了如下内容：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;6
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;+++
date = &amp;#34;2017-04-29T15:06:24+08:00&amp;#34;
draft = true
title = &amp;#34;first&amp;#34;

+++&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;此时可以自由编辑新创建的“first”文件内容，使用markdown格式。&lt;/p&gt;

&lt;p&gt;在hugo 的github网站上下载网页模板：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;cd themes
git clone https://github.com/digitalcraftsman/hugo-icarus-theme.git&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;启动本地调试查看效果：
&lt;code&gt;hugo server --theme=hugo-icarus-theme --buildDrafts --watch&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;在浏览器中打开网址即可查看本地站点的内容：&lt;a href=&#34;http://localhost:1313/&#34;&gt;http://localhost:1313/&lt;/a&gt;&lt;/p&gt;

&lt;h2 id=&#34;将本地站点资料同步到github仓库&#34;&gt;将本地站点资料同步到github仓库&lt;/h2&gt;

&lt;p&gt;这一步主要是方便以后的资料管理，比如可以在不同的笔记本上分别编辑不同的文件，并保持内容同步。
参考：&lt;a href=&#34;https://gohugo.io/tutorials/github-pages-blog/&#34;&gt;https://gohugo.io/tutorials/github-pages-blog/&lt;/a&gt; 。
1. 在github上“&lt;your-project&gt;-hugo”仓库用于存储本地站点资料。
2. 在本地站点根目录下初始化git仓库：&lt;code&gt;git init&lt;/code&gt;
3. 查看本地内容改动：&lt;code&gt;git status&lt;/code&gt;
4. 将改动文件添加到本地git仓库：&lt;code&gt;git add xx_files&lt;/code&gt;，并添加改动评语：&lt;code&gt;git commit -m &#39;20170429 test my hugo websites&#39;&lt;/code&gt;
5. 将本地仓库与github远端仓库链接起来：&lt;code&gt;git remote add origin https://github.com/knightwupz/knightwupz-hugo&lt;/code&gt;
6. 将本地仓库同步到远端仓库：&lt;code&gt;git pull origin master&lt;/code&gt;&lt;/p&gt;

&lt;h2 id=&#34;将本地站点资料部署到github-page&#34;&gt;将本地站点资料部署到github-page&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;在github网站上创建一个“&lt;username&gt;.github.io”仓库用于存储静态网站页面。&lt;/li&gt;
&lt;li&gt;进入本地站点根目录，确认本地站点运行正常：&lt;code&gt;hugo server -t &amp;lt;yourtheme&amp;gt;&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;确保没有问题之后，ctrl+c退出本地服务器，并清除public目录内容：&lt;code&gt;rm -rf public&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;使用git submodule功能将public目录连接到github-page页面：&lt;code&gt;git submodule add -b master git@github.com:knightwupz/knightwupz.github.io.git public&lt;/code&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;使用deploy.sh脚本自动实现自动部署：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt; 1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt; 9
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;10
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;11
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;12
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;13
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;14
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;15
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;16
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;17
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;18
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;19
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;20
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;21
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;22
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;23
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;24
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;cp&#34;&gt;#!/bin/bash
&lt;/span&gt;&lt;span class=&#34;cp&#34;&gt;&lt;/span&gt;
&lt;span class=&#34;nb&#34;&gt;echo&lt;/span&gt; -e &lt;span class=&#34;s2&#34;&gt;&amp;#34;\033[0;32mDeploying updates to GitHub...\033[0m&amp;#34;&lt;/span&gt;

&lt;span class=&#34;c1&#34;&gt;# Build the project.&lt;/span&gt;
hugo -t hugo-icarus-theme &lt;span class=&#34;c1&#34;&gt;# if using other themes, replace by `hugo -t &amp;lt;yourtheme&amp;gt;`&lt;/span&gt;

&lt;span class=&#34;c1&#34;&gt;# Go To Public folder&lt;/span&gt;
&lt;span class=&#34;nb&#34;&gt;cd&lt;/span&gt; public
&lt;span class=&#34;c1&#34;&gt;# Add changes to git.&lt;/span&gt;
git add -A

&lt;span class=&#34;c1&#34;&gt;# Commit changes.&lt;/span&gt;
&lt;span class=&#34;nv&#34;&gt;msg&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;rebuilding site `date`&amp;#34;&lt;/span&gt;
&lt;span class=&#34;k&#34;&gt;if&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;[&lt;/span&gt; &lt;span class=&#34;nv&#34;&gt;$#&lt;/span&gt; -eq &lt;span class=&#34;m&#34;&gt;1&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;]&lt;/span&gt;
    &lt;span class=&#34;k&#34;&gt;then&lt;/span&gt; &lt;span class=&#34;nv&#34;&gt;msg&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;$1&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;&lt;/span&gt;
&lt;span class=&#34;k&#34;&gt;fi&lt;/span&gt;
git commit -m &lt;span class=&#34;s2&#34;&gt;&amp;#34;&lt;/span&gt;&lt;span class=&#34;nv&#34;&gt;$msg&lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;&lt;/span&gt;

&lt;span class=&#34;c1&#34;&gt;# Push source and build repos.&lt;/span&gt;
git push origin master

&lt;span class=&#34;c1&#34;&gt;# Come Back&lt;/span&gt;
&lt;span class=&#34;nb&#34;&gt;cd&lt;/span&gt; ..&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/li&gt;

&lt;li&gt;&lt;p&gt;更新网站并提交评语：&lt;code&gt;./deploy.sh &amp;quot;Your optional commit message&amp;quot;&lt;/code&gt;
7.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;
</description>
      
    </item>
    
    <item>
      <title>Go is for lovers</title>
      <link>https://knightwupz.github.io/go-is-for-lovers/</link>
      <pubDate>Thu, 17 Sep 2015 13:47:08 +0200</pubDate>
      
      <guid>https://knightwupz.github.io/go-is-for-lovers/</guid>
      
        <description>

&lt;p&gt;Hugo uses the excellent &lt;a href=&#34;http://golang.org/&amp;gt;&#34;&gt;go&lt;/a&gt; &lt;a href=&#34;http://golang.org/pkg/html/template/&amp;gt;&#34;&gt;html/template&lt;/a&gt; library for
its template engine. It is an extremely lightweight engine that provides a very
small amount of logic. In our experience that it is just the right amount of
logic to be able to create a good static website. If you have used other
template systems from different languages or frameworks you will find a lot of
similarities in go templates.&lt;/p&gt;

&lt;p&gt;This document is a brief primer on using go templates. The &lt;a href=&#34;http://golang.org/pkg/html/template/&amp;gt;&#34;&gt;go docs&lt;/a&gt;
provide more details.&lt;/p&gt;

&lt;h2 id=&#34;introduction-to-go-templates&#34;&gt;Introduction to Go Templates&lt;/h2&gt;

&lt;p&gt;Go templates provide an extremely simple template language. It adheres to the
belief that only the most basic of logic belongs in the template or view layer.
One consequence of this simplicity is that go templates parse very quickly.&lt;/p&gt;

&lt;p&gt;A unique characteristic of go templates is they are content aware. Variables and
content will be sanitized depending on the context of where they are used. More
details can be found in the &lt;a href=&#34;http://golang.org/pkg/html/template/&amp;gt;&#34;&gt;go docs&lt;/a&gt;.&lt;/p&gt;

&lt;h2 id=&#34;basic-syntax&#34;&gt;Basic Syntax&lt;/h2&gt;

&lt;p&gt;Go lang templates are html files with the addition of variables and
functions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Go variables and functions are accessible within {{ }}&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Accessing a predefined variable &amp;ldquo;foo&amp;rdquo;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ foo }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Parameters are separated using spaces&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Calling the add function with input of 1, 2:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ add 1 2 }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Methods and fields are accessed via dot notation&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Accessing the Page Parameter &amp;ldquo;bar&amp;rdquo;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ .Params.bar }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Parentheses can be used to group items together&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ if or (isset .Params &amp;#34;alt&amp;#34;) (isset .Params &amp;#34;caption&amp;#34;) }} Caption {{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id=&#34;variables&#34;&gt;Variables&lt;/h2&gt;

&lt;p&gt;Each go template has a struct (object) made available to it. In hugo each
template is passed either a page or a node struct depending on which type of
page you are rendering. More details are available on the
&lt;a href=&#34;https://knightwupz.github.io/layout/variables&#34;&gt;variables&lt;/a&gt; page.&lt;/p&gt;

&lt;p&gt;A variable is accessed by referencing the variable name.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&amp;lt;title&amp;gt;{{ .Title }}&amp;lt;/title&amp;gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Variables can also be defined and referenced.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ $address := &amp;#34;123 Main St.&amp;#34;}}
{{ $address }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id=&#34;functions&#34;&gt;Functions&lt;/h2&gt;

&lt;p&gt;Go template ship with a few functions which provide basic functionality. The go
template system also provides a mechanism for applications to extend the
available functions with their own. &lt;a href=&#34;https://knightwupz.github.io/layout/functions&#34;&gt;Hugo template
functions&lt;/a&gt; provide some additional functionality we believe
are useful for building websites. Functions are called by using their name
followed by the required parameters separated by spaces. Template
functions cannot be added without recompiling hugo.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ add 1 2 }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id=&#34;includes&#34;&gt;Includes&lt;/h2&gt;

&lt;p&gt;When including another template you will pass to it the data it will be
able to access. To pass along the current context please remember to
include a trailing dot. The templates location will always be starting at
the /layout/ directory within Hugo.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ template &amp;#34;chrome/header.html&amp;#34; . }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id=&#34;logic&#34;&gt;Logic&lt;/h2&gt;

&lt;p&gt;Go templates provide the most basic iteration and conditional logic.&lt;/p&gt;

&lt;h3 id=&#34;iteration&#34;&gt;Iteration&lt;/h3&gt;

&lt;p&gt;Just like in go, the go templates make heavy use of range to iterate over
a map, array or slice. The following are different examples of how to use
range.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example 1: Using Context&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ range array }}
    {{ . }}
{{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Example 2: Declaring value variable name&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{range $element := array}}
    {{ $element }}
{{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Example 2: Declaring key and value variable name&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{range $index, $element := array}}
    {{ $index }}
    {{ $element }}
{{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3 id=&#34;conditionals&#34;&gt;Conditionals&lt;/h3&gt;

&lt;p&gt;If, else, with, or, &amp;amp; and provide the framework for handling conditional
logic in Go Templates. Like range, each statement is closed with &lt;code&gt;end&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Go Templates treat the following values as false:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;false&lt;/li&gt;
&lt;li&gt;0&lt;/li&gt;
&lt;li&gt;any array, slice, map, or string of length zero&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Example 1: If&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ if isset .Params &amp;#34;title&amp;#34; }}&amp;lt;h4&amp;gt;{{ index .Params &amp;#34;title&amp;#34; }}&amp;lt;/h4&amp;gt;{{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Example 2: If -&amp;gt; Else&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ if isset .Params &amp;#34;alt&amp;#34; }}
    {{ index .Params &amp;#34;alt&amp;#34; }}
{{else}}
    {{ index .Params &amp;#34;caption&amp;#34; }}
{{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Example 3: And &amp;amp; Or&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ if and (or (isset .Params &amp;#34;title&amp;#34;) (isset .Params &amp;#34;caption&amp;#34;)) (isset .Params &amp;#34;attr&amp;#34;)}}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Example 4: With&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;An alternative way of writing &amp;ldquo;if&amp;rdquo; and then referencing the same value
is to use &amp;ldquo;with&amp;rdquo; instead. With rebinds the context &lt;code&gt;.&lt;/code&gt; within its scope,
and skips the block if the variable is absent.&lt;/p&gt;

&lt;p&gt;The first example above could be simplified as:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ with .Params.title }}&amp;lt;h4&amp;gt;{{ . }}&amp;lt;/h4&amp;gt;{{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;Example 5: If -&amp;gt; Else If&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ if isset .Params &amp;#34;alt&amp;#34; }}
    {{ index .Params &amp;#34;alt&amp;#34; }}
{{ else if isset .Params &amp;#34;caption&amp;#34; }}
    {{ index .Params &amp;#34;caption&amp;#34; }}
{{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id=&#34;pipes&#34;&gt;Pipes&lt;/h2&gt;

&lt;p&gt;One of the most powerful components of go templates is the ability to
stack actions one after another. This is done by using pipes. Borrowed
from unix pipes, the concept is simple, each pipeline&amp;rsquo;s output becomes the
input of the following pipe.&lt;/p&gt;

&lt;p&gt;Because of the very simple syntax of go templates, the pipe is essential
to being able to chain together function calls. One limitation of the
pipes is that they only can work with a single value and that value
becomes the last parameter of the next pipeline.&lt;/p&gt;

&lt;p&gt;A few simple examples should help convey how to use the pipe.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example 1 :&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ if eq 1 1 }} Same {{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;is the same as&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ eq 1 1 | if }} Same {{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;It does look odd to place the if at the end, but it does provide a good
illustration of how to use the pipes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example 2 :&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ index .Params &amp;#34;disqus_url&amp;#34; | html }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Access the page parameter called &amp;ldquo;disqus_url&amp;rdquo; and escape the HTML.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example 3 :&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{ if or (or (isset .Params &amp;#34;title&amp;#34;) (isset .Params &amp;#34;caption&amp;#34;)) (isset .Params &amp;#34;attr&amp;#34;)}}
Stuff Here
{{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Could be rewritten as&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{  isset .Params &amp;#34;caption&amp;#34; | or isset .Params &amp;#34;title&amp;#34; | or isset .Params &amp;#34;attr&amp;#34; | if }}
Stuff Here
{{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id=&#34;context-aka-the-dot&#34;&gt;Context (aka. the dot)&lt;/h2&gt;

&lt;p&gt;The most easily overlooked concept to understand about go templates is that {{ . }}
always refers to the current context. In the top level of your template this
will be the data set made available to it. Inside of a iteration it will have
the value of the current item. When inside of a loop the context has changed. .
will no longer refer to the data available to the entire page. If you need to
access this from within the loop you will likely want to set it to a variable
instead of depending on the context.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;  {{ $title := .Site.Title }}
  {{ range .Params.tags }}
    &amp;lt;li&amp;gt; &amp;lt;a href=&amp;#34;{{ $baseurl }}/tags/{{ . | urlize | lower  }}&amp;#34;&amp;gt;{{ . }}&amp;lt;/a&amp;gt; - {{ $title }} &amp;lt;/li&amp;gt;
  {{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Notice how once we have entered the loop the value of {{ . }} has changed. We
have defined a variable outside of the loop so we have access to it from within
the loop.&lt;/p&gt;

&lt;h1 id=&#34;hugo-parameters&#34;&gt;Hugo Parameters&lt;/h1&gt;

&lt;p&gt;Hugo provides the option of passing values to the template language
through the site configuration (for sitewide values), or through the meta
data of each specific piece of content. You can define any values of any
type (supported by your front matter/config format) and use them however
you want to inside of your templates.&lt;/p&gt;

&lt;h2 id=&#34;using-content-page-parameters&#34;&gt;Using Content (page) Parameters&lt;/h2&gt;

&lt;p&gt;In each piece of content you can provide variables to be used by the
templates. This happens in the &lt;a href=&#34;https://knightwupz.github.io/content/front-matter&#34;&gt;front matter&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;An example of this is used in this documentation site. Most of the pages
benefit from having the table of contents provided. Sometimes the TOC just
doesn&amp;rsquo;t make a lot of sense. We&amp;rsquo;ve defined a variable in our front matter
of some pages to turn off the TOC from being displayed.&lt;/p&gt;

&lt;p&gt;Here is the example front matter:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;6
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;7
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;8
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;9
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;---
title: &amp;#34;Permalinks&amp;#34;
date: &amp;#34;2013-11-18&amp;#34;
aliases:
  - &amp;#34;/doc/permalinks/&amp;#34;
groups: [&amp;#34;extras&amp;#34;]
groups_weight: 30
notoc: true
---&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Here is the corresponding code inside of the template:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;  {{ if not .Params.notoc }}
    &amp;lt;div id=&amp;#34;toc&amp;#34; class=&amp;#34;well col-md-4 col-sm-6&amp;#34;&amp;gt;
    {{ .TableOfContents }}
    &amp;lt;/div&amp;gt;
  {{ end }}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h2 id=&#34;using-site-config-parameters&#34;&gt;Using Site (config) Parameters&lt;/h2&gt;

&lt;p&gt;In your top-level configuration file (eg, &lt;code&gt;config.yaml&lt;/code&gt;) you can define site
parameters, which are values which will be available to you in chrome.&lt;/p&gt;

&lt;p&gt;For instance, you might declare:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;params&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;CopyrightHTML&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;Copyright &amp;amp;#xA9; 2013 John Doe. All Rights Reserved.&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;TwitterUser&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;s2&#34;&gt;&amp;#34;spf13&amp;#34;&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;
&lt;/span&gt;&lt;span class=&#34;w&#34;&gt;  &lt;/span&gt;SidebarRecentLimit&lt;span class=&#34;p&#34;&gt;:&lt;/span&gt;&lt;span class=&#34;w&#34;&gt; &lt;/span&gt;&lt;span class=&#34;m&#34;&gt;5&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Within a footer layout, you might then declare a &lt;code&gt;&amp;lt;footer&amp;gt;&lt;/code&gt; which is only
provided if the &lt;code&gt;CopyrightHTML&lt;/code&gt; parameter is provided, and if it is given,
you would declare it to be HTML-safe, so that the HTML entity is not escaped
again.  This would let you easily update just your top-level config file each
January 1st, instead of hunting through your templates.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{if .Site.Params.CopyrightHTML}}&amp;lt;footer&amp;gt;
&amp;lt;div class=&amp;#34;text-center&amp;#34;&amp;gt;{{.Site.Params.CopyrightHTML | safeHtml}}&amp;lt;/div&amp;gt;
&amp;lt;/footer&amp;gt;{{end}}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;An alternative way of writing the &amp;ldquo;if&amp;rdquo; and then referencing the same value
is to use &amp;ldquo;with&amp;rdquo; instead. With rebinds the context &lt;code&gt;.&lt;/code&gt; within its scope,
and skips the block if the variable is absent:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;{{with .Site.Params.TwitterUser}}&amp;lt;span class=&amp;#34;twitter&amp;#34;&amp;gt;
&amp;lt;a href=&amp;#34;https://twitter.com/{{.}}&amp;#34; rel=&amp;#34;author&amp;#34;&amp;gt;
&amp;lt;img src=&amp;#34;/images/twitter.png&amp;#34; width=&amp;#34;48&amp;#34; height=&amp;#34;48&amp;#34; title=&amp;#34;Twitter: {{.}}&amp;#34;
 alt=&amp;#34;Twitter&amp;#34;&amp;gt;&amp;lt;/a&amp;gt;
&amp;lt;/span&amp;gt;{{end}}&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Finally, if you want to pull &amp;ldquo;magic constants&amp;rdquo; out of your layouts, you can do
so, such as in this example:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;div class=&#34;chroma&#34;&gt;
&lt;table class=&#34;lntable&#34;&gt;&lt;tr&gt;&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&lt;span class=&#34;lnt&#34;&gt;1
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;2
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;3
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;4
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;5
&lt;/span&gt;&lt;span class=&#34;lnt&#34;&gt;6
&lt;/span&gt;&lt;/pre&gt;&lt;/td&gt;
&lt;td class=&#34;lntd&#34;&gt;
&lt;pre class=&#34;chroma&#34;&gt;&amp;lt;nav class=&amp;#34;recent&amp;#34;&amp;gt;
  &amp;lt;h1&amp;gt;Recent Posts&amp;lt;/h1&amp;gt;
  &amp;lt;ul&amp;gt;{{range first .Site.Params.SidebarRecentLimit .Site.Recent}}
    &amp;lt;li&amp;gt;&amp;lt;a href=&amp;#34;{{.RelPermalink}}&amp;#34;&amp;gt;{{.Title}}&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
  {{end}}&amp;lt;/ul&amp;gt;
&amp;lt;/nav&amp;gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/div&gt;
&lt;/div&gt;</description>
      
    </item>
    
    <item>
      <title></title>
      <link>https://knightwupz.github.io/post/blogs/markdown-preview-enhanced%E4%B8%8E%E9%BB%98%E8%AE%A4markdown%E8%AF%AD%E6%B3%95%E8%A7%84%E5%88%99%E6%9C%89%E4%BA%9B%E5%8C%BA%E5%88%AB/</link>
      <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
      
      <guid>https://knightwupz.github.io/post/blogs/markdown-preview-enhanced%E4%B8%8E%E9%BB%98%E8%AE%A4markdown%E8%AF%AD%E6%B3%95%E8%A7%84%E5%88%99%E6%9C%89%E4%BA%9B%E5%8C%BA%E5%88%AB/</guid>
      
        <description>

&lt;h1 id=&#34;示例代码&#34;&gt;示例代码&lt;/h1&gt;

&lt;blockquote&gt;
&lt;p&gt;引用1 随便写点东西
&amp;gt; 引用2
&amp;gt; 引用2 ## 此两行将显示为同一行，
&amp;gt;&amp;gt; 引用3.1
&amp;gt;&amp;gt;
&amp;gt;&amp;gt; 引用3.2 # 3.1和3.2之间多了一个空行
&amp;gt;&amp;gt;&amp;gt; 引用4.1
&amp;gt;&amp;gt;&amp;gt; &lt;br /&gt;
&amp;gt;&amp;gt;&amp;gt; 引用4.2 通过添加一行引用符&lt;code&gt;&amp;gt;&lt;/code&gt;加上转义符&lt;code&gt;\&lt;/code&gt;，可以达到换行且两行之间没有空行的效果。
&amp;gt;&amp;gt;&amp;gt;&amp;gt; 引用5 可以一直嵌套引用
&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt; 引用6 可以一直嵌套引用
&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt; 引用7 可以一直嵌套引用
&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt; 引用8 可以一直嵌套引用&lt;/p&gt;
&lt;/blockquote&gt;
</description>
      
    </item>
    
  </channel>
</rss>