-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.xml
215 lines (103 loc) · 288 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Hexo标签外挂</title>
<link href="/posts/cd41a879/"/>
<url>/posts/cd41a879/</url>
<content type="html"><![CDATA[<span class='p h5 left'>该标签外挂主要针对于hexo-butterfly-tag-plugins-plus插件，可在文章中快速插入特定内容</span> <span class='p h5 left'>用于以后写笔记使用</span><h1 id="Page-Front-matter"><a href="#Page-Front-matter" class="headerlink" title="Page Front-matter"></a>Page Front-matter</h1><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title:</span><br><span class="line">date:</span><br><span class="line">updated:</span><br><span class="line">type:</span><br><span class="line">comments:</span><br><span class="line">description:</span><br><span class="line">keywords:</span><br><span class="line">top<span class="emphasis">_img:</span></span><br><span class="line"><span class="emphasis">mathjax:</span></span><br><span class="line"><span class="emphasis">katex:</span></span><br><span class="line"><span class="emphasis">aside:</span></span><br><span class="line"><span class="emphasis">aplayer:</span></span><br><span class="line"><span class="emphasis">highlight_</span>shrink:</span><br><span class="line">---</span><br></pre></td></tr></table></figure><div class="table-container"><table><thead><tr><th style="text-align:center">写法</th><th style="text-align:center">解释</th></tr></thead><tbody><tr><td style="text-align:center">title</td><td style="text-align:center">【必需】页面标题</td></tr><tr><td style="text-align:center">date</td><td style="text-align:center">【必需】页面创建日期</td></tr><tr><td style="text-align:center">type</td><td style="text-align:center">【必需】标签、分类和友情链接三个页面需要配置</td></tr><tr><td style="text-align:center">updated</td><td style="text-align:center">【可选】页面更新日期</td></tr><tr><td style="text-align:center">description</td><td style="text-align:center">【可选】页面描述</td></tr><tr><td style="text-align:center">keywords</td><td style="text-align:center">【可选】页面关键字</td></tr><tr><td style="text-align:center">comments</td><td style="text-align:center">【可选】显示页面评论模块 (默认 true)</td></tr><tr><td style="text-align:center">top_img</td><td style="text-align:center">【可选】页面顶部图片</td></tr><tr><td style="text-align:center">mathjax</td><td style="text-align:center">【可选】显示 mathjax (当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)</td></tr><tr><td style="text-align:center">katex</td><td style="text-align:center">【可选】显示 katex (当设置 katex 的 per_page: false 时，才需要配置，默认 false)</td></tr><tr><td style="text-align:center">aside</td><td style="text-align:center">【可选】显示侧边栏 (默认 true)</td></tr><tr><td style="text-align:center">aplayer</td><td style="text-align:center">【可选】在需要的页面加载 aplayer 的 js 和 css,</td></tr><tr><td style="text-align:center">highlight_shrink</td><td style="text-align:center">【可选】配置代码框是否展开 (true/false)(默认为设置中 highlight_shrink 的配置)</td></tr></tbody></table></div><h1 id="Post-Front-matter"><a href="#Post-Front-matter" class="headerlink" title="Post Front-matter"></a>Post Front-matter</h1><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title:</span><br><span class="line">date:</span><br><span class="line">updated:</span><br><span class="line">tags:</span><br><span class="line">categories:</span><br><span class="line">keywords:</span><br><span class="line">description:</span><br><span class="line">top<span class="emphasis">_img:</span></span><br><span class="line"><span class="emphasis">comments:</span></span><br><span class="line"><span class="emphasis">cover:</span></span><br><span class="line"><span class="emphasis">toc:</span></span><br><span class="line"><span class="emphasis">toc_</span>number:</span><br><span class="line">copyright:</span><br><span class="line">copyright<span class="emphasis">_author:</span></span><br><span class="line"><span class="emphasis">copyright_</span>author<span class="emphasis">_href:</span></span><br><span class="line"><span class="emphasis">copyright_</span>url:</span><br><span class="line">copyright<span class="emphasis">_info:</span></span><br><span class="line"><span class="emphasis">mathjax:</span></span><br><span class="line"><span class="emphasis">katex:</span></span><br><span class="line"><span class="emphasis">aplayer:</span></span><br><span class="line"><span class="emphasis">highlight_</span>shrink:</span><br><span class="line"><span class="section">aside:</span></span><br><span class="line"><span class="section">---</span></span><br></pre></td></tr></table></figure><div class="table-container"><table><thead><tr><th style="text-align:center">写法</th><th style="text-align:center">解释</th></tr></thead><tbody><tr><td style="text-align:center">title</td><td style="text-align:center">【必需】文章标题</td></tr><tr><td style="text-align:center">date</td><td style="text-align:center">【必需】文章创建日期</td></tr><tr><td style="text-align:center">updated</td><td style="text-align:center">【可选】文章更新日期</td></tr><tr><td style="text-align:center">tags</td><td style="text-align:center">【可选】文章标籤</td></tr><tr><td style="text-align:center">categories</td><td style="text-align:center">【可选】文章分类</td></tr><tr><td style="text-align:center">keywords</td><td style="text-align:center">【可选】文章关键字</td></tr><tr><td style="text-align:center">description</td><td style="text-align:center">【可选】文章描述</td></tr><tr><td style="text-align:center">top_img</td><td style="text-align:center">【可选】文章顶部图片</td></tr><tr><td style="text-align:center">cover</td><td style="text-align:center">【可选】文章缩略图 (如果没有设置 top_img, 文章页顶部将显示缩略图，可设为 false / 图片地址 / 留空)</td></tr><tr><td style="text-align:center">comments</td><td style="text-align:center">【可选】显示文章评论模块 (默认 true)</td></tr><tr><td style="text-align:center">toc</td><td style="text-align:center">【可选】显示文章 TOC (默认为设置中 toc 的 enable 配置)</td></tr><tr><td style="text-align:center">toc_number</td><td style="text-align:center">【可选】显示 toc_number (默认为设置中 toc 的 number 配置)</td></tr><tr><td style="text-align:center">copyright</td><td style="text-align:center">【可选】显示文章版权模块 (默认为设置中 post_copyright 的 enable 配置)</td></tr><tr><td style="text-align:center">copyright_author</td><td style="text-align:center">【可选】文章版权模块的文章作者</td></tr><tr><td style="text-align:center">copyright_author_href</td><td style="text-align:center">【可选】文章版权模块的文章作者链接</td></tr><tr><td style="text-align:center">copyright_url</td><td style="text-align:center">【可选】文章版权模块的文章连结链接</td></tr><tr><td style="text-align:center">copyright_info</td><td style="text-align:center">【可选】文章版权模块的版权声明文字</td></tr><tr><td style="text-align:center">mathjax</td><td style="text-align:center">【可选】显示 mathjax (当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)</td></tr><tr><td style="text-align:center">katex</td><td style="text-align:center">【可选】显示 katex (当设置 katex 的 per_page: false 时，才需要配置，默认 false)</td></tr><tr><td style="text-align:center">aplayer</td><td style="text-align:center">【可选】在需要的页面加载 aplayer 的 js 和 css, 请参考文章下面的音乐 配置</td></tr><tr><td style="text-align:center">highlight_shrink</td><td style="text-align:center">【可选】配置代码框是否展开 (true/false)(默认为设置中 highlight_shrink 的配置)</td></tr><tr><td style="text-align:center">aside</td><td style="text-align:center">【可选】显示侧边栏 (默认 true)</td></tr><tr><td style="text-align:center">hide</td><td style="text-align:center">【可选】隐藏文章</td></tr><tr><td style="text-align:center">sticky</td><td style="text-align:center">【可选】文章置顶，值越大越靠上</td></tr></tbody></table></div><h1 id="外挂标签（Tag-Plugins）"><a href="#外挂标签（Tag-Plugins）" class="headerlink" title="外挂标签（Tag Plugins）"></a>外挂标签（Tag Plugins）</h1><p>标签外挂是Hexo独有的功能，并不是标准的Markdown格式。</p><h2 id="行内文本-span-和-段落文本-p"><a href="#行内文本-span-和-段落文本-p" class="headerlink" title="行内文本 span 和 段落文本 p"></a>行内文本 span 和 段落文本 p</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% span 样式参数(参数以空格划分), 文本内容 %}</span><br></pre></td></tr></table></figure><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% p 样式参数(参数以空格划分), 文本内容 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>字体: logo, code</li><li>颜色: red,yellow,green,cyan,blue,gray</li><li>大小: small, h4, h3, h2, h1, large, huge, ultra</li><li>对齐方向: left, center, right</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="bullet">-</span> 彩色文字</span><br><span class="line">在一段话中方便插入各种颜色的标签，包括：{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。</span><br><span class="line"><span class="bullet">-</span> 超大号文字</span><br><span class="line">文档「开始」页面中的标题部分就是超大号文字。</span><br><span class="line">{% span center logo large, Volantis %}</span><br><span class="line">{% p center small, A Wonderful Theme for Hexo %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><ul><li>彩色文字<br>在一段话中方便插入各种颜色的标签，包括：<span class='p red'>红色</span>、<span class='p yellow'>黄色</span>、<span class='p green'>绿色</span>、<span class='p cyan'>青色</span>、<span class='p blue'>蓝色</span>、<span class='p gray'>灰色</span>。</li><li>超大号文字<br>文档「开始」页面中的标题部分就是超大号文字。<br><span class='p center logo large'>Volantis</span><p class='p center small'>A Wonderful Theme for Hexo</p></li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="上标标签-tip"><a href="#上标标签-tip" class="headerlink" title="上标标签 tip"></a>上标标签 tip</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% tip [参数，可选] %}文本内容{% endtip %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>样式: success,error,warning,bolt,ban,home,sync,cogs,key,bell</li><li>自定义图标：支持 fontawesome。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">{% tip %}默认情况{% endtip %}</span><br><span class="line">{% tip success %}success{% endtip %}</span><br><span class="line">{% tip error %}error{% endtip %}</span><br><span class="line">{% tip warning %}warning{% endtip %}</span><br><span class="line">{% tip bolt %}bolt{% endtip %}</span><br><span class="line">{% tip ban %}ban{% endtip %}</span><br><span class="line">{% tip home %}home{% endtip %}</span><br><span class="line">{% tip sync %}sync{% endtip %}</span><br><span class="line">{% tip cogs %}cogs{% endtip %}</span><br><span class="line">{% tip key %}key{% endtip %}</span><br><span class="line">{% tip bell %}bell{% endtip %}</span><br><span class="line">{% tip fa-atom %}自定义font awesome图标{% endtip %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><div class="tip "><p>默认情况</p></div><div class="tip success"><p>success</p></div><div class="tip error"><p>error</p></div><div class="tip warning"><p>warning</p></div><div class="tip bolt"><p>bolt</p></div><div class="tip ban"><p>ban</p></div><div class="tip home"><p>home</p></div><div class="tip sync"><p>sync</p></div><div class="tip cogs"><p>cogs</p></div><div class="tip key"><p>key</p></div><div class="tip bell"><p>bell</p></div><div class="tip fa-atom"><p>自定义font awesome图标</p></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="动态标签-anima"><a href="#动态标签-anima" class="headerlink" title="动态标签 anima"></a>动态标签 anima</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% tip [参数，可选] %}文本内容{% endtip %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><p>更多详情请参看 <a href="https://l-lin.github.io/font-awesome-animation/">font-awesome-animation 文档</a></p><ol><li>将所需的 CSS 类添加到图标（或 DOM 中的任何元素）。</li><li>对于父级悬停样式，需要给目标元素添加指定 CSS 类，同时还要给目标元素的父级元素添加 CSS 类 faa-parent animated-hover。（详情见示例及示例源码）<br>You can regulate the speed of the animation by adding the CSS class or . faa-fastfaa-slow</li><li>可以通过给目标元素添加 CSS 类 faa-fast 或 faa-slow 来控制动画快慢。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><ol><li>On DOM load（当页面加载时显示动画）<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">{% tip warning faa-horizontal animated %}warning{% endtip %}</span><br><span class="line">{% tip ban faa-flash animated %}ban{% endtip %}</span><br></pre></td></tr></table></figure></li><li>调整动画速度<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">{% tip warning faa-horizontal animated faa-fast %}warning{% endtip %}</span><br><span class="line">{% tip ban faa-flash animated faa-slow %}ban{% endtip %}</span><br></pre></td></tr></table></figure></li><li>On hover（当鼠标悬停时显示动画）<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">{% tip warning faa-horizontal animated-hover %}warning{% endtip %}</span><br><span class="line">{% tip ban faa-flash animated-hover %}ban{% endtip %}</span><br></pre></td></tr></table></figure></li><li>On parent hover（当鼠标悬停在父级元素时显示动画）<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">{% tip warning faa-parent animated-hover %}<span class="xml"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"faa-horizontal"</span>></span></span>warning<span class="xml"><span class="tag"></<span class="name">p</span>></span></span>{% endtip %}</span><br><span class="line">{% tip ban faa-parent animated-hover %}<span class="xml"><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"faa-flash"</span>></span></span>ban<span class="xml"><span class="tag"></<span class="name">p</span>></span></span>{% endtip %}</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><ol><li>On DOM load（当页面加载时显示动画）<div class="tip warning faa-horizontal animated"><p>warning</p></div><div class="tip ban faa-flash animated"><p>ban</p></div> </li><li>调整动画速度<div class="tip warning faa-horizontal animated faa-fast"><p>warning</p></div><div class="tip ban faa-flash animated faa-slow"><p>ban</p></div></li><li>On hover（当鼠标悬停时显示动画）<div class="tip warning faa-horizontal animated-hover"><p>warning</p></div><div class="tip ban faa-flash animated-hover"><p>ban</p></div></li><li>On parent hover（当鼠标悬停在父级元素时显示动画）<div class="tip warning faa-parent animated-hover"><p class="faa-horizontal">warning</p></div><div class="tip ban faa-parent animated-hover"><p class="faa-flash">ban</p></div></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="复选列表-checkbox"><a href="#复选列表-checkbox" class="headerlink" title="复选列表 checkbox"></a>复选列表 checkbox</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% checkbox 样式参数（可选）, 文本（支持简单md） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>样式: plus, minus, times</li><li>颜色: red,yellow,green,cyan,blue,gray</li><li>选中状态: checked</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">{% checkbox 纯文本测试 %}</span><br><span class="line">{% checkbox checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %}</span><br><span class="line">{% checkbox red, 支持自定义颜色 %}</span><br><span class="line">{% checkbox green checked, 绿色 + 默认选中 %}</span><br><span class="line">{% checkbox yellow checked, 黄色 + 默认选中 %}</span><br><span class="line">{% checkbox cyan checked, 青色 + 默认选中 %}</span><br><span class="line">{% checkbox blue checked, 蓝色 + 默认选中 %}</span><br><span class="line">{% checkbox plus green checked, 增加 %}</span><br><span class="line">{% checkbox minus yellow checked, 减少 %}</span><br><span class="line">{% checkbox times red checked, 叉 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><div class='checkbox'><input type="checkbox" /> <p>纯文本测试</p> </div><div class='checkbox checked'><input type="checkbox" checked="checked"/> <p>支持简单的 <a href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p> </div><div class='checkbox red'><input type="checkbox" /> <p>支持自定义颜色</p> </div><div class='checkbox green checked'><input type="checkbox" checked="checked"/> <p>绿色 + 默认选中</p> </div><div class='checkbox yellow checked'><input type="checkbox" checked="checked"/> <p>黄色 + 默认选中</p> </div><div class='checkbox cyan checked'><input type="checkbox" checked="checked"/> <p>青色 + 默认选中</p> </div><div class='checkbox blue checked'><input type="checkbox" checked="checked"/> <p>蓝色 + 默认选中</p> </div><div class='checkbox plus green checked'><input type="checkbox" checked="checked"/> <p>增加</p> </div><div class='checkbox minus yellow checked'><input type="checkbox" checked="checked"/> <p>减少</p> </div><div class='checkbox times red checked'><input type="checkbox" checked="checked"/> <p>叉</p> </div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="单选列表-radio"><a href="#单选列表-radio" class="headerlink" title="单选列表 radio"></a>单选列表 radio</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% radio 样式参数（可选）, 文本（支持简单md） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>颜色:red,yellow,green,cyan,blue,gray</li><li>选中状态: checked</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">{% radio 纯文本测试 %}</span><br><span class="line">{% radio checked, 支持简单的 [<span class="string">markdown</span>](<span class="link">https://guides.github.com/features/mastering-markdown/</span>) 语法 %}</span><br><span class="line">{% radio red, 支持自定义颜色 %}</span><br><span class="line">{% radio green, 绿色 %}</span><br><span class="line">{% radio yellow, 黄色 %}</span><br><span class="line">{% radio cyan, 青色 %}</span><br><span class="line">{% radio blue, 蓝色 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><div class='checkbox'><input type="radio" /> <p>纯文本测试</p> </div><div class='checkbox checked'><input type="radio" checked="checked"/> <p>支持简单的 <a href="https://guides.github.com/features/mastering-markdown/">markdown</a> 语法</p> </div><div class='checkbox red'><input type="radio" /> <p>支持自定义颜色</p> </div><div class='checkbox green'><input type="radio" /> <p>绿色</p> </div><div class='checkbox yellow'><input type="radio" /> <p>黄色</p> </div><div class='checkbox cyan'><input type="radio" /> <p>青色</p> </div><div class='checkbox blue'><input type="radio" /> <p>蓝色</p> </div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="时间轴-timeline"><a href="#时间轴-timeline" class="headerlink" title="时间轴 timeline"></a>时间轴 timeline</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-3">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">{% timeline 时间线标题（可选） %}</span><br><span class="line">{% timenode 时间节点（标题） %}</span><br><span class="line">正文内容</span><br><span class="line">{% endtimenode %}</span><br><span class="line">{% timenode 时间节点（标题） %}</span><br><span class="line">正文内容</span><br><span class="line">{% endtimenode %}</span><br><span class="line">{% endtimeline %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">{% timeline %}</span><br><span class="line"></span><br><span class="line">{% timenode 2020-07-24 [<span class="string">2.6.6 -> 3.0</span>](<span class="link">https://github.com/volantis-x/hexo-theme-volantis/releases</span>) %}</span><br><span class="line"></span><br><span class="line"><span class="bullet">1.</span> 如果有 <span class="code">`hexo-lazyload-image`</span> 插件，需要删除并重新安装最新版本，设置 <span class="code">`lazyload.isSPA: true`</span>。</span><br><span class="line"><span class="bullet">2.</span> 2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 <span class="code">`use_cdn: true`</span> 则需要删除。</span><br><span class="line"><span class="bullet">3.</span> 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。</span><br><span class="line"><span class="bullet">4.</span> 2.x 版本的置顶 <span class="code">`top: true`</span> 改为了 <span class="code">`pin: true`</span>，并且同样适用于 <span class="code">`layout: page`</span> 的页面。</span><br><span class="line"><span class="bullet">5.</span> 如果使用了 <span class="code">`hexo-offline`</span> 插件，建议卸载，3.0 版本默认开启了 pjax 服务。</span><br><span class="line"></span><br><span class="line">{% endtimenode %}</span><br><span class="line"></span><br><span class="line">{% timenode 2020-05-15 [<span class="string">2.6.3 -> 2.6.6</span>](<span class="link">https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6</span>) %}</span><br><span class="line"></span><br><span class="line">不需要额外处理。</span><br><span class="line"></span><br><span class="line">{% endtimenode %}</span><br><span class="line"></span><br><span class="line">{% timenode 2020-04-20 [<span class="string">2.6.2 -> 2.6.3</span>](<span class="link">https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3</span>) %}</span><br><span class="line"></span><br><span class="line"><span class="bullet">1.</span> 全局搜索 <span class="code">`seotitle`</span> 并替换为 <span class="code">`seo_title`</span>。</span><br><span class="line"><span class="bullet">2.</span> group 组件的索引规则有变，使用 group 组件的文章内，<span class="code">`group: group_name`</span> 对应的组件名必须是 <span class="code">`group_name`</span>。</span><br><span class="line"><span class="bullet">2.</span> group 组件的列表名优先显示文章的 <span class="code">`short_title`</span> 其次是 <span class="code">`title`</span>。</span><br><span class="line"></span><br><span class="line">{% endtimenode %}</span><br><span class="line"></span><br><span class="line">{% endtimeline %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><div class="timeline"><div class="timenode"><div class="meta"><p><p>2020-07-24 <a href="https://github.com/volantis-x/hexo-theme-volantis/releases">2.6.6 -> 3.0</a></p></p></div><div class="body"><ol><li>如果有 <code>hexo-lazyload-image</code> 插件，需要删除并重新安装最新版本，设置 <code>lazyload.isSPA: true</code>。</li><li>2.x 版本的 css 和 js 不适用于 3.x 版本，如果使用了 <code>use_cdn: true</code> 则需要删除。</li><li>2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。</li><li>2.x 版本的置顶 <code>top: true</code> 改为了 <code>pin: true</code>，并且同样适用于 <code>layout: page</code> 的页面。</li><li>如果使用了 <code>hexo-offline</code> 插件，建议卸载，3.0 版本默认开启了 pjax 服务。</li></ol></div></div><div class="timenode"><div class="meta"><p><p>2020-05-15 <a href="https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6">2.6.3 -> 2.6.6</a></p></p></div><div class="body"><p>不需要额外处理。</p></div></div><div class="timenode"><div class="meta"><p><p>2020-04-20 <a href="https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3">2.6.2 -> 2.6.3</a></p></p></div><div class="body"><ol><li>全局搜索 <code>seotitle</code> 并替换为 <code>seo_title</code>。</li><li>group 组件的索引规则有变，使用 group 组件的文章内，<code>group: group_name</code> 对应的组件名必须是 <code>group_name</code>。</li><li>group 组件的列表名优先显示文章的 <code>short_title</code> 其次是 <code>title</code>。</li></ol></div></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="链接卡片-link"><a href="#链接卡片-link" class="headerlink" title="链接卡片 link"></a>链接卡片 link</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-3">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% link 标题, 链接, 图片链接（可选） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% link 糖果屋教程贴, https://akilar.top/posts/615e2dec/, https://cdn.jsdelivr.net/gh/Akilarlxh/akilarlxh.github.io/img/siteicon/favicon.ico %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><div class="tag link"><a class="link-card" title="糖果屋教程贴" href="https://akilar.top/posts/615e2dec/"><div class="left"><img src="https://cdn.jsdelivr.net/gh/Akilarlxh/akilarlxh.github.io/img/siteicon/favicon.ico"/></div><div class="right"><p class="text">糖果屋教程贴</p><p class="url">https://akilar.top/posts/615e2dec/</p></div></a></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="按钮-btns"><a href="#按钮-btns" class="headerlink" title="按钮 btns"></a>按钮 btns</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{% btns 样式参数 %}</span><br><span class="line">{% cell 标题, 链接, 图片或者图标 %}</span><br><span class="line">{% cell 标题, 链接, 图片或者图标 %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>圆角样式：rounded, circle</li><li>增加文字样式：可以在容器内增加 <b>标题</b> 和 <p>描述文字</p></li><li>布局方式：<br>默认为自动宽度，适合视野内只有一两个的情况。</li></ol><div class="table-container"><table><thead><tr><th style="text-align:left">参数</th><th style="text-align:left">含义</th></tr></thead><tbody><tr><td style="text-align:left">wide</td><td style="text-align:left">宽一点的按钮</td></tr><tr><td style="text-align:left">fill</td><td style="text-align:left">填充布局，自动铺满至少一行，多了会换行</td></tr><tr><td style="text-align:left">center</td><td style="text-align:left">居中，按钮之间是固定间距</td></tr><tr><td style="text-align:left">around</td><td style="text-align:left">居中分散</td></tr><tr><td style="text-align:left">grid2</td><td style="text-align:left">等宽最多 2 列，屏幕变窄会适当减少列数</td></tr><tr><td style="text-align:left">grid3</td><td style="text-align:left">等宽最多 3 列，屏幕变窄会适当减少列数</td></tr><tr><td style="text-align:left">grid4</td><td style="text-align:left">等宽最多 4 列，屏幕变窄会适当减少列数</td></tr><tr><td style="text-align:left">grid5</td><td style="text-align:left">等宽最多 5 列，屏幕变窄会适当减少列数</td></tr></tbody></table></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><ol><li>如果需要显示类似「团队成员」之类的一组含有头像的链接：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">{% btns circle grid5 %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}</span><br><span class="line">{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure></li><li>或者含有图标的按钮：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{% btns rounded grid5 %}</span><br><span class="line">{% cell 下载源码, /, fas fa-download %}</span><br><span class="line">{% cell 查看文档, /, fas fa-book-open %}</span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure></li><li>圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中:<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">{% btns circle center grid5 %}</span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">'https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">'fab fa-apple'</span>></span></span><span class="xml"><span class="tag"></<span class="name">i</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">b</span>></span></span>心率管家<span class="xml"><span class="tag"></<span class="name">b</span>></span></span></span><br><span class="line"> {% p red, 专业版 %}</span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">'https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">a</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">'https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">i</span> <span class="attr">class</span>=<span class="string">'fab fa-apple'</span>></span></span><span class="xml"><span class="tag"></<span class="name">i</span>></span></span></span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">b</span>></span></span>心率管家<span class="xml"><span class="tag"></<span class="name">b</span>></span></span></span><br><span class="line"> {% p green, 免费版 %}</span><br><span class="line"> <span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">'https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'</span>></span></span></span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">a</span>></span></span></span><br><span class="line">{% endbtns %}</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><ol><li>如果需要显示类似「团队成员」之类的一组含有头像的链接：</li></ol><div class="btns circle grid5"> <a class="button" href='https://xaoxuu.com' title='xaoxuu'><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a><a class="button" href='https://xaoxuu.com' title='xaoxuu'><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a><a class="button" href='https://xaoxuu.com' title='xaoxuu'><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a><a class="button" href='https://xaoxuu.com' title='xaoxuu'><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a><a class="button" href='https://xaoxuu.com' title='xaoxuu'><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png'>xaoxuu</a> </div><ol><li>或者含有图标的按钮：</li></ol><div class="btns rounded grid5"> <a class="button" href='/' title='下载源码'><i class='fas fa-download'></i>下载源码</a><a class="button" href='/' title='查看文档'><i class='fas fa-book-open'></i>查看文档</a> </div><ol><li>圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中:</li></ol><div class="btns circle center grid5"> <a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'> <i class='fab fa-apple'></i> <b>心率管家</b> <p class='p red'>专业版</p> <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'></a><a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'> <i class='fab fa-apple'></i> <b>心率管家</b> <p class='p green'>免费版</p> <img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'></a> </div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="Github卡片-ghcard"><a href="#Github卡片-ghcard" class="headerlink" title="Github卡片 ghcard"></a>Github卡片 ghcard</h2><p><strong>ghcard 使用了 github-readme-stats 的 API，支持直接使用 markdown 语法来写。</strong><br><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">{% ghcard 用户名, 其它参数（可选） %}</span><br><span class="line">{% ghcard 用户名/仓库, 其它参数（可选） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><p>更多参数可以参考：<br><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/anuraghazra/github-readme-stats"><img src="https://github-readme-stats.vercel.app/api/pin/?username=anuraghazra&repo=github-readme-stats&theme=buefy&show_owner=true"/></a><br>使用 <code>,</code> 分割各个参数。写法为：<code>参数名=参数值</code><br>以下只写几个常用参数值。</p><div class="table-container"><table><thead><tr><th style="text-align:left">参数名</th><th style="text-align:left">取值</th><th style="text-align:left">释义</th></tr></thead><tbody><tr><td style="text-align:left">hide</td><td style="text-align:left">stars,commits,prs,issues,contribs</td><td style="text-align:left">隐藏指定统计</td></tr><tr><td style="text-align:left">count_private</td><td style="text-align:left">true</td><td style="text-align:left">将私人项目贡献添加到总提交计数中</td></tr><tr><td style="text-align:left">show_icons</td><td style="text-align:left">true</td><td style="text-align:left">显示图标</td></tr><tr><td style="text-align:left">theme</td><td style="text-align:left">请查阅 <a href="https://github.com/anuraghazra/github-readme-stats/blob/master/themes/README.md">Available Themes</a></td><td style="text-align:left">主题</td></tr></tbody></table></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><ul><li>用户信息卡片<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">| {% ghcard yang-tian-hub %} | {% ghcard yang-tian-hub, theme=buefy %} |</span><br><span class="line">| -- | -- |</span><br><span class="line">| {% ghcard yang-tian-hub, theme=onedark %} | {% ghcard yang-tian-hub, theme=algolia %} |</span><br></pre></td></tr></table></figure></li><li>仓库信息卡片<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">| {% ghcard yang-tian-hub/PictureBed, theme=solarized-light %} | {% ghcard yang-tian-hub/PictureBed, theme=vue %} |</span><br><span class="line">| -- | -- |</span><br><span class="line">| {% ghcard yang-tian-hub/PictureBed, theme=solarized-dark %} | {% ghcard yang-tian-hub/PictureBed, theme=calm %} |</span><br></pre></td></tr></table></figure></li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><ul><li>用户信息卡片</li></ul><div class="table-container"><table><thead><tr><th><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yang-tian-hub"><img src="https://github-readme-stats.vercel.app/api/?username=yang-tian-hub&show_owner=true"/></a></th><th><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yang-tian-hub"><img src="https://github-readme-stats.vercel.app/api/?username=yang-tian-hub&theme=buefy&show_owner=true"/></a></th></tr></thead><tbody><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yang-tian-hub"><img src="https://github-readme-stats.vercel.app/api/?username=yang-tian-hub&theme=onedark&show_owner=true"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yang-tian-hub"><img src="https://github-readme-stats.vercel.app/api/?username=yang-tian-hub&theme=algolia&show_owner=true"/></a></td></tr></tbody></table></div><ul><li>仓库信息卡片</li></ul><div class="table-container"><table><thead><tr><th><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yang-tian-hub/PictureBed"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yang-tian-hub&repo=PictureBed&theme=solarized-light&show_owner=true"/></a></th><th><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yang-tian-hub/PictureBed"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yang-tian-hub&repo=PictureBed&theme=vue&show_owner=true"/></a></th></tr></thead><tbody><tr><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yang-tian-hub/PictureBed"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yang-tian-hub&repo=PictureBed&theme=solarized-dark&show_owner=true"/></a></td><td><a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/yang-tian-hub/PictureBed"><img src="https://github-readme-stats.vercel.app/api/pin/?username=yang-tian-hub&repo=PictureBed&theme=calm&show_owner=true"/></a></td></tr></tbody></table></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div></p><h2 id="网站卡片-sites"><a href="#网站卡片-sites" class="headerlink" title="网站卡片 sites"></a>网站卡片 sites</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-3">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{% sitegroup %}</span><br><span class="line">{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}</span><br><span class="line">{% site 标题, url=链接, screenshot=截图链接, avatar=头像链接（可选）, description=描述（可选） %}</span><br><span class="line">{% endsitegroup %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">{% sitegroup %}</span><br><span class="line">{% site xaoxuu, url=https://xaoxuu.com, screenshot=https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg, avatar=https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png, description=简约风格 %}</span><br><span class="line">{% site inkss, url=https://inkss.cn, screenshot=https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg, avatar=https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg, description=这是一段关于这个网站的描述文字 %}</span><br><span class="line">{% site MHuiG, url=https://blog.mhuig.top, screenshot=https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png, avatar=https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png, description=这是一段关于这个网站的描述文字 %}</span><br><span class="line">{% site Colsrch, url=https://colsrch.top, screenshot=https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png, avatar=https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg, description=这是一段关于这个网站的描述文字 %}</span><br><span class="line">{% site Linhk1606, url=https://linhk1606.github.io, screenshot=https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png, avatar=https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png, description=这是一段关于这个网站的描述文字 %}</span><br><span class="line">{% endsitegroup %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><div class="site-card-group"><a class="site-card" href="https://xaoxuu.com"><div class="img"><img src="https://i.loli.net/2020/08/21/VuSwWZ1xAeUHEBC.jpg"/></div><div class="info"><img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png"/><span class="title">xaoxuu</span><span class="desc">简约风格</span></div></a><a class="site-card" href="https://inkss.cn"><div class="img"><img src="https://i.loli.net/2020/08/21/Vzbu3i8fXs6Nh5Y.jpg"/></div><div class="info"><img src="https://cdn.jsdelivr.net/gh/inkss/common@master/static/web/avatar.jpg"/><span class="title">inkss</span><span class="desc">这是一段关于这个网站的描述文字</span></div></a><a class="site-card" href="https://blog.mhuig.top"><div class="img"><img src="https://i.loli.net/2020/08/22/d24zpPlhLYWX6D1.png"/></div><div class="info"><img src="https://cdn.jsdelivr.net/gh/MHuiG/imgbed@master/data/p.png"/><span class="title">MHuiG</span><span class="desc">这是一段关于这个网站的描述文字</span></div></a><a class="site-card" href="https://colsrch.top"><div class="img"><img src="https://i.loli.net/2020/08/22/dFRWXm52OVu8qfK.png"/></div><div class="info"><img src="https://cdn.jsdelivr.net/gh/Colsrch/images/Colsrch/avatar.jpg"/><span class="title">Colsrch</span><span class="desc">这是一段关于这个网站的描述文字</span></div></a><a class="site-card" href="https://linhk1606.github.io"><div class="img"><img src="https://i.loli.net/2020/08/21/3PmGLCKicnfow1x.png"/></div><div class="info"><img src="https://i.loli.net/2020/02/09/PN7I5RJfFtA93r2.png"/><span class="title">Linhk1606</span><span class="desc">这是一段关于这个网站的描述文字</span></div></a></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="行内图片-inlineimage"><a href="#行内图片-inlineimage" class="headerlink" title="行内图片 inlineimage"></a>行内图片 inlineimage</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% inlineimage 图片链接, height=高度（可选） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>高度：height=20px</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">这是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif %} 一段话。</span><br><span class="line"></span><br><span class="line">这又是 {% inlineimage https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif, height=40px %} 一段话。</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><p>这是 <img no-lazy class="inline" src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/0000.gif" style="height:1.5em"/> 一段话。</p><p>这又是 <img no-lazy class="inline" src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/5150.gif" style="height:40px;"/> 一段话。</p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="单张图片-image"><a href="#单张图片-image" class="headerlink" title="单张图片 image"></a>单张图片 image</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% image 链接, width=宽度（可选）, height=高度（可选）, alt=描述（可选）, bg=占位颜色（可选） %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>图片宽度高度：width=300px, height=32px</li><li>图片描述：alt = 图片描述（butterfly 需要在主题配置文件中开启图片描述）</li><li>占位背景色：bg=#f2f2f2</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><ol><li>添加描述：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, alt=每天下课回宿舍的路，没有什么故事。 %}</span><br></pre></td></tr></table></figure></li><li>指定宽度：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px %}</span><br></pre></td></tr></table></figure></li><li>指定宽度并添加描述：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, alt=每天下课回宿舍的路，没有什么故事。 %}</span><br></pre></td></tr></table></figure></li><li>设置占位背景色：<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% image https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg, width=400px, bg=#1D0C04, alt=优化不同宽度浏览的观感 %}</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><ol><li>添加描述：<div class="img-wrap"><div class="img-bg"><img class="img" src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg" alt="每天下课回宿舍的路，没有什么故事。"/></div><span class="image-caption">每天下课回宿舍的路，没有什么故事。</span></div></li><li>指定宽度：<div class="img-wrap"><div class="img-bg"><img class="img" src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg" style="width:400px;"/></div></div></li><li>指定宽度并添加描述：<div class="img-wrap"><div class="img-bg"><img class="img" src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg" alt="每天下课回宿舍的路，没有什么故事。" style="width:400px;"/></div><span class="image-caption">每天下课回宿舍的路，没有什么故事。</span></div></li><li>设置占位背景色：<div class="img-wrap"><div class="img-bg" style="background:#1D0C04"><img class="img" src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/025.jpg" alt="优化不同宽度浏览的观感" style="width:400px;"/></div><span class="image-caption">优化不同宽度浏览的观感</span></div></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="音频-audio"><a href="#音频-audio" class="headerlink" title="音频 audio"></a>音频 audio</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-3">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% audio 音频链接 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% audio https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><div class="audio"><audio controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/Lumia1020.mp3' type='audio/mp3'>Your browser does not support the audio tag.</audio></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="视频-video"><a href="#视频-video" class="headerlink" title="视频 video"></a>视频 video</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% video 视频链接 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>对其方向：left, center, right</li><li>列数：逗号后面直接写列数，支持 1 ～ 4 列。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><ol><li>100%宽度<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br></pre></td></tr></table></figure></li><li>50%宽度<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">{% videos, 2 %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG<span class="emphasis">_0341.mov %}</span></span><br><span class="line"><span class="emphasis">{% video https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_</span>0341.mov %}</span><br><span class="line">{% endvideos %}</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><ol><li>100%宽度<div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div></li><li>50%宽度<div class="videos" col='2'><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="video"><video controls preload><source src='https://github.com/volantis-x/volantis-docs/releases/download/assets/IMG_0341.mov' type='video/mp4'>Your browser does not support the video tag.</video></div></div></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="Gallery相册图库与Gallery相册"><a href="#Gallery相册图库与Gallery相册" class="headerlink" title="Gallery相册图库与Gallery相册"></a>Gallery相册图库与Gallery相册</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-3">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><ol><li>Gallery相册图库<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery-group-main"</span>></span></span></span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line">{% galleryGroup name description link img-url %}</span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure></li><li>Gallery相册<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% gallery %}</span><br><span class="line">markdown 图片格式</span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>Gallery相册图库<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"gallery-group-main"</span>></span></span></span><br><span class="line">{% galleryGroup 壁纸 收藏的一些壁纸 '/photos/photos-wallpape' /img/wallpapercover.png %}</span><br><span class="line"><span class="xml"><span class="tag"></<span class="name">div</span>></span></span></span><br></pre></td></tr></table></figure></li><li>Gallery相册<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">{% gallery %}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">{% endgallery %}</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><ul><li><p>Gallery相册图库</p><div class="gallery-group-main"><figure class="gallery-group"><img class="gallery-group-img" src='/img/wallpapercover.png' alt="Group Image Gallery"><figcaption><div class="gallery-group-name">壁纸</div><p>收藏的一些壁纸</p><a href='/photos/photos-wallpape'></a></figcaption></figure></div></li><li><p>Gallery相册</p><div class="justified-gallery"><p><img src="/photos-wallpaper/wallpaper/1.webp" alt=""><br><img src="/photos-wallpaper/wallpaper/11.webp" alt=""><br><img src="/photos-wallpaper/wallpaper/12.webp" alt=""><br><img src="/photos-wallpaper/wallpaper/19.webp" alt=""></p> </div></li></ul><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="折叠框-folding"><a href="#折叠框-folding" class="headerlink" title="折叠框 folding"></a>折叠框 folding</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% folding 参数（可选）, 标题 %}</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>颜色：blue, cyan, green, yellow, red</li><li>状态：状态填写 open 代表默认打开。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line">{% folding 查看图片测试 %}</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% folding cyan open, 查看默认打开的折叠框 %}</span><br><span class="line"></span><br><span class="line">这是一个默认打开的折叠框。</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% folding green, 查看代码测试 %}</span><br><span class="line">假装这里有代码块（代码块没法嵌套代码块）</span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% folding yellow, 查看列表测试 %}</span><br><span class="line"></span><br><span class="line"><span class="bullet">-</span> haha</span><br><span class="line"><span class="bullet">-</span> hehe</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% folding red, 查看嵌套测试 %}</span><br><span class="line"></span><br><span class="line">{% folding blue, 查看嵌套测试2 %}</span><br><span class="line"></span><br><span class="line">{% folding 查看嵌套测试3 %}</span><br><span class="line"></span><br><span class="line">hahaha <span class="xml"><span class="tag"><<span class="name">span</span>></span></span><span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">'https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png'</span> <span class="attr">style</span>=<span class="string">'height:24px'</span>></span></span><span class="xml"><span class="tag"></<span class="name">span</span>></span></span></span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br><span class="line"></span><br><span class="line">{% endfolding %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><details ><summary> 查看图片测试 </summary> <div class='content'> <p><img src="https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg" alt=""></p> </div> </details><details cyan open><summary> 查看默认打开的折叠框 </summary> <div class='content'> <p>这是一个默认打开的折叠框。</p> </div> </details><details green><summary> 查看代码测试 </summary> <div class='content'> <figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"></span><br></pre></td></tr></table></figure> </div> </details><details yellow><summary> 查看列表测试 </summary> <div class='content'> <ul><li>haha</li><li>hehe</li></ul> </div> </details><details red><summary> 查看嵌套测试 </summary> <div class='content'> <details blue><summary> 查看嵌套测试2 </summary> <div class='content'> <details ><summary> 查看嵌套测试3 </summary> <div class='content'> <p>hahaha <span><img src='https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%E6%BB%91%E7%A8%BD.png' style='height:24px'></span></p> </div> </details> </div> </details> </div> </details><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="分栏-tab"><a href="#分栏-tab" class="headerlink" title="分栏 tab"></a>分栏 tab</h2><div class="tabs" id="test5"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test5-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test5-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test5-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test5-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test5-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{% tabs Unique name, [index] %}</span><br><span class="line"><!-- tab [Tab caption] [@icon] --></span><br><span class="line">Any content (support inline tags too).</span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test5-2"><ol><li>Unique name :<br>选项卡块标签的唯一名称，不带逗号。<br>将在 #id 中用作每个标签及其索引号的前缀。<br>如果名称中包含空格，则对于生成 #id，所有空格将由破折号代替。<br>仅当前帖子 / 页面的 URL 必须是唯一的！</li><li>[index]:<br>活动选项卡的索引号。<br>如果未指定，将选择第一个标签（1）。<br>如果 index 为 - 1，则不会选择任何选项卡。<br>可选参数。</li><li>[Tab caption]:<br>当前选项卡的标题。<br>如果未指定标题，则带有制表符索引后缀的唯一名称将用作制表符的标题。<br>如果未指定标题，但指定了图标，则标题将为空。<br>可选参数。</li><li>[@icon]:<br>FontAwesome 图标名称（全名，看起来像 “fas fa-font”）<br>可以指定带空格或不带空格；<br>例如’Tab caption @icon’ 和 ‘Tab caption@icon’.<br>可选参数。</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test5-3"><ol><li>预设选择第一个（默认）<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">{% tabs test1 %}</span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure></li><li>预设选择 tabs<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">{% tabs test2, 3 %}</span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure></li><li>没有预设值<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">{% tabs test3, -1 %}</span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 1.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 2.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab --></span><br><span class="line"><span class="strong">**This is Tab 3.**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure></li><li>自定义 Tab 名 + 只有 icon + icon 和 Tab 名<figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">{% tabs test4 %}</span><br><span class="line"><!-- tab 第一个Tab --></span><br><span class="line"><span class="strong">**tab名字为第一个Tab**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab @fab fa-apple-pay --></span><br><span class="line"><span class="strong">**只有图标 没有Tab名字**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line"></span><br><span class="line"><!-- tab 炸弹@fas fa-bomb --></span><br><span class="line"><span class="strong">**名字+icon**</span></span><br><span class="line"><!-- endtab --></span><br><span class="line">{% endtabs %}</span><br></pre></td></tr></table></figure></li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test5-4"><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">test1 1</button></li><li class="tab"><button type="button" data-href="#test1-2">test1 2</button></li><li class="tab"><button type="button" data-href="#test1-3">test1 3</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><p><strong>This is Tab 1.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><p><strong>This is Tab 2.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><p><strong>This is Tab 3.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><div class="tabs" id="test2"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#test2-1">test2 1</button></li><li class="tab"><button type="button" data-href="#test2-2">test2 2</button></li><li class="tab active"><button type="button" data-href="#test2-3">test2 3</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="test2-1"><p><strong>This is Tab 1.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test2-2"><p><strong>This is Tab 2.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content active" id="test2-3"><p><strong>This is Tab 3.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><div class="tabs" id="test3"><ul class="nav-tabs"><li class="tab"><button type="button" data-href="#test3-1">test3 1</button></li><li class="tab"><button type="button" data-href="#test3-2">test3 2</button></li><li class="tab"><button type="button" data-href="#test3-3">test3 3</button></li></ul><div class="tab-contents"><div class="tab-item-content" id="test3-1"><p><strong>This is Tab 1.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test3-2"><p><strong>This is Tab 2.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test3-3"><p><strong>This is Tab 3.</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><div class="tabs" id="test4"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test4-1">第一个Tab</button></li><li class="tab"><button type="button" data-href="#test4-2"><i class="fab fa-apple-pay" style="text-align: center;"></i></button></li><li class="tab"><button type="button" data-href="#test4-3"><i class="fas fa-bomb"></i>炸弹</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test4-1"><p><strong>tab名字为第一个Tab</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test4-2"><p><strong>只有图标 没有Tab名字</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test4-3"><p><strong>名字+icon</strong></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="诗词标签-poem"><a href="#诗词标签-poem" class="headerlink" title="诗词标签 poem"></a>诗词标签 poem</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{% poem [title],[author] %}</span><br><span class="line">诗词内容</span><br><span class="line">{% endpoem %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>title：诗词标题</li><li>author：作者，可以不写</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">{% poem 水调歌头,苏轼 %}</span><br><span class="line">丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</span><br><span class="line">明月几时有？把酒问青天。</span><br><span class="line">不知天上宫阙，今夕是何年？</span><br><span class="line">我欲乘风归去，又恐琼楼玉宇，高处不胜寒。</span><br><span class="line">起舞弄清影，何似在人间？</span><br><span class="line"></span><br><span class="line">转朱阁，低绮户，照无眠。</span><br><span class="line">不应有恨，何事长向别时圆？</span><br><span class="line">人有悲欢离合，月有阴晴圆缺，此事古难全。</span><br><span class="line">但愿人长久，千里共婵娟。</span><br><span class="line">{% endpoem %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><div class='poem'><div class='poem-title'>水调歌头</div><div class='poem-author'>苏轼</div><p>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。<br>明月几时有？把酒问青天。<br>不知天上宫阙，今夕是何年？<br>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。<br>起舞弄清影，何似在人间？</p><p>转朱阁，低绮户，照无眠。<br>不应有恨，何事长向别时圆？<br>人有悲欢离合，月有阴晴圆缺，此事古难全。<br>但愿人长久，千里共婵娟。</p></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="进度条-progress"><a href="#进度条-progress" class="headerlink" title="进度条 progress"></a>进度条 progress</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% progress [width] [color] [text] %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>width: 0 到 100 的阿拉伯数字</li><li>color: 颜色，取值有 red,yellow,green,cyan,blue,gray</li><li>text: 进度条上的文字内容</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">{% progress 10 red 进度条样式预览 %}</span><br><span class="line">{% progress 30 yellow 进度条样式预览 %}</span><br><span class="line">{% progress 50 green 进度条样式预览 %}</span><br><span class="line">{% progress 70 cyan 进度条样式预览 %}</span><br><span class="line">{% progress 90 blue 进度条样式预览 %}</span><br><span class="line">{% progress 100 gray 进度条样式预览 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-red" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-yellow" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-green" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-cyan" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-blue" style="width: 90%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-gray" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"><p>进度条样式预览</p></div></div><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div><h2 id="注释-notation"><a href="#注释-notation" class="headerlink" title="注释 notation"></a>注释 notation</h2><div class="tabs" id="test1"><ul class="nav-tabs"><li class="tab active"><button type="button" data-href="#test1-1">标签语法</button></li><li class="tab"><button type="button" data-href="#test1-2">参数配置</button></li><li class="tab"><button type="button" data-href="#test1-3">示例源码</button></li><li class="tab"><button type="button" data-href="#test1-4">样式预览</button></li></ul><div class="tab-contents"><div class="tab-item-content active" id="test1-1"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% nota [label] , [text] %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-2"><ol><li>label: 注释词汇</li><li>text: 悬停显示的注解内容</li></ol><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-3"><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}</span><br></pre></td></tr></table></figure><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div><div class="tab-item-content" id="test1-4"><p><span class='nota' data-nota='可以看到注解内容出现在顶栏'>把鼠标移动到我上面试试</span></p><button type="button" class="tab-to-top" aria-label="scroll to top"><i class="fas fa-arrow-up"></i></button></div></div></div>]]></content>
<categories>
<category> 博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 标签外挂 </tag>
</tags>
</entry>
<entry>
<title>Matlab使用S函数</title>
<link href="/posts/16b4f539/"/>
<url>/posts/16b4f539/</url>
<content type="html"><![CDATA[<h1 id="什么是S函数？"><a href="#什么是S函数？" class="headerlink" title="什么是S函数？"></a>什么是S函数？</h1><blockquote><p>S-函数是系统函数（System Function）的简称，在Simulink中用<strong>非图形化的方式</strong>来描述一个模块。一个完整的S-函数结构体系包含了<strong>描述一个动态系统</strong>所需要的全部能力。使用S-函数用户可以向Simulink模型中添加自己的模块，可以自由选择使用MATLAB、C、C++等语言来创建自己的模块。Matlab语言编写的S-函数可以充分利用MATLAB所提供的丰富资源，方便地调用各种工具箱函数和图形函数；使用C语言编写的S-函数可以实现对操作系统的访问，如实现与其他进程的通信和同步等。 </p></blockquote><p>Simulink已经提供了大量的内置的系统模块，并且允许用户自定义模块，那么为何还要使用S-函数呢？诚然，对于大多数动态系统仿真分析语言，使用Simulink提供的模块即可实现，而无需使用S-函数。<br>但是，当需要开发一个新的通用的模块作为一个独立的功能单元时，使用S-函数实现则是一种相当简便的方法。另外，由于S-函数可以使用多种语言编写，因此可以将已有的代码结合进来，而不需要在Simulink中重新实现算法，从而在某种程度上实现了代码移植。此外，在S-函数中使用文本方式输入公式、方程，非常适合复杂动态系统的数学描述，并且在仿真过程中可以对仿真进行更精确的控制。如果恰当地使用S函数，理论上，可以在Simulink下对任意复杂的系统进行仿真。 </p><h1 id="基础知识"><a href="#基础知识" class="headerlink" title="基础知识"></a>基础知识</h1><h2 id="Simulink仿真过程"><a href="#Simulink仿真过程" class="headerlink" title="Simulink仿真过程"></a>Simulink仿真过程</h2><p>Simulnk仿真分为两步：初始化、仿真循环。仿真是由求解器控制的，求解器主要作用是：计算模块输出、更新模块离散状态、计算连续状态。求解器传递给系统的信息包括：时间、输入和当前状态。系统的作用：计算模块的输出、更新状态、计算状态导数，然后将这些信息传递给求解器。求解器和系统之间的信息传递是通过不同标志来控制的。</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/Simulink仿真过程.jpg" alt="Simulink仿真过程"></p><h2 id="S函数工作原理"><a href="#S函数工作原理" class="headerlink" title="S函数工作原理"></a>S函数工作原理</h2><p>Matlab为了用户使用方便，有一个S函数的模板sfuntmpl.m，一般来说，<strong>我们仅需要在sfuntmpl.m的基础上进行修改即可</strong>。在主窗口输入<code>edit sfuntmpl</code>即可出现模板函数的内容，可以详细地观察其帮助说明以便更好地了解S函数的工作原理。<br>S函数的定义形式为<code>function[sys,x0,str,ts]=sfunc(t,x,u,flag,p1,…Pn)</code>，其中的sfunc为自己定义的函数名称，以上参数中，t、x、u分别对应时间、状态、输入信号，flag为标志位，其取值不同，S函数执行的任务和返回的数据也是不同的，<strong>Pn为额外的参数，sys为一个通用的返回参数值，其数值根据flag的不同而不同</strong>，x0为状态初始数值，str在目前为止的matlab版本中并没有什么作用，一般str=[]即可，ts为一个两列的矩阵，包含采样时间(整个模型的基础采样时间，各个子系统或模块的采样时间，必须以这个步长为整数倍)和偏移量两个参数，如果设置为[0 0]，那么每个连续的采样时间步都运行，[-1 0]则表示按照所连接的模块的采样速率进行，[0.25 0.1]表示仿真开始的0.1s后每0.25s运行一次，采样时间点为TimeHit=n*period+offset。</p><p><strong>S函数的使用过程中有1个概念值得注意</strong>：</p><p>Direct Feedthrough，<strong>系统的输出是否直接和输入相关联</strong>，即输入是否出现在输出端的标志，若是为1，否则为0，一般可以根据在flag=3的时候，mdlOutputs函数是否调用输入u来判断是否直接馈通。</p><p>S函数中目前支持的flag选择有0、1、2、3、4、9几个数值，下面说一下在不同的flag情况下S函数的执行情况。</p><ol><li>flag=0。进行系统的初始化过程，调用mdlInitializeSizes函数，对参数进行初始化设置，比如离散状态个数、连续状态个数、模块输入和输出的路数、模块的采样周期个数、状态变量初始数值等。</li><li>flag=1。进行连续状态变量的更新，调用mdlDerivatives函数。</li><li>flag=2。进行离散状态变量的更新，调用mdlUpdate函数。</li><li>flag=3。求取系统的输出信号，调用mdlOutputs函数。</li><li>flag=4。调用mdlGetTimeOfNextVarHit函数，计算下一仿真时刻，由sys返回。</li><li>flag=9。终止仿真过程，调用mdlTerminate函数。</li></ol><p>在实际仿真过程中，Simulink会自动将flag设置为0，进行初始化过程，然后将flag的数值设置为3，计算模块的输出，一个仿真周期后，Simulink将flag的数值先后设置为1和2，更新系统的连续和离散状态，再将其设置为3，计算模块的输出，如此循环直至仿真结束条件满足。 </p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/S函数执行顺序.jpg" alt="S函数执行顺序"></p><p>在S函数的编写过程中，首先需要搞清楚模块中有多少个连续和离散状态，离散模块的采样周期是如何的，同时需要了解模块的连续和离散的状态方程分别是什么，输出如何表示。下面以实例说明S函数的具体应用。</p><h1 id="sfuntmpl-m模板代码内容详细解析"><a href="#sfuntmpl-m模板代码内容详细解析" class="headerlink" title="sfuntmpl.m模板代码内容详细解析"></a>sfuntmpl.m模板代码内容详细解析</h1><figure class="highlight matlab"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="params">[sys,x0,str,ts,simStateCompliance]</span> = <span class="title">sfuntmpl</span><span class="params">(t,x,u,flag)</span></span></span><br><span class="line"><span class="comment">%主函数</span></span><br><span class="line"><span class="comment">%主函数包含四个输出：</span></span><br><span class="line"><span class="comment">% sys数组包含某个子函数返回的值</span></span><br><span class="line"><span class="comment">% x0为所有状态的初始化向量</span></span><br><span class="line"><span class="comment">% str是保留参数，总是一个空矩阵</span></span><br><span class="line"><span class="comment">% Ts返回系统采样时间</span></span><br><span class="line"><span class="comment">%函数的四个输入分别为采样时间t、状态x、输入u和仿真流程控制标志变量flag</span></span><br><span class="line"><span class="comment">%输入参数后面还可以接续一系列的附带参数</span></span><br><span class="line"><span class="keyword">switch</span> flag,</span><br><span class="line"> <span class="keyword">case</span> <span class="number">0</span>,</span><br><span class="line"> [sys,x0,str,ts,simStateCompliance]=mdlInitializeSizes;</span><br><span class="line"> <span class="keyword">case</span> <span class="number">1</span>,</span><br><span class="line"> sys=mdlDerivatives(t,x,u);</span><br><span class="line"> <span class="keyword">case</span> <span class="number">2</span>,</span><br><span class="line"> sys=mdlUpdate(t,x,u);</span><br><span class="line"> <span class="keyword">case</span> <span class="number">3</span>,</span><br><span class="line"> sys=mdlOutputs(t,x,u);</span><br><span class="line"> <span class="keyword">case</span> <span class="number">4</span>,</span><br><span class="line"> sys=mdlGetTimeOfNextVarHit(t,x,u);</span><br><span class="line"> <span class="keyword">case</span> <span class="number">9</span>,</span><br><span class="line"> sys=mdlTerminate(t,x,u);</span><br><span class="line"> <span class="keyword">otherwise</span></span><br><span class="line"> DAStudio.error(<span class="string">'Simulink:blocks:unhandledFlag'</span>, num2str(flag));</span><br><span class="line"><span class="keyword">end</span></span><br><span class="line"><span class="comment">%主函数结束</span></span><br><span class="line"><span class="comment">%下面是各个子函数，即各个回调过程</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="params">[sys,x0,str,ts,simStateCompliance]</span>=<span class="title">mdlInitializeSizes</span></span></span><br><span class="line"><span class="comment">%初始化回调子函数</span></span><br><span class="line"><span class="comment">%提供状态、输入、输出、采样时间数目和初始状态的值</span></span><br><span class="line"><span class="comment">%初始化阶段，标志变量flag首先被置为0，S-function首次被调用时</span></span><br><span class="line"><span class="comment">%该子函数首先被调用，且为S-function模块提供下面信息</span></span><br><span class="line"><span class="comment">%该子函数必须存在</span></span><br><span class="line">sizes = simsizes; <span class="comment">%生成sizes数据结构，信息被包含在其中</span></span><br><span class="line">sizes.NumContStates = <span class="number">0</span>; <span class="comment">%连续状态数，缺省为0</span></span><br><span class="line">sizes.NumDiscStates = <span class="number">0</span>; <span class="comment">%离散状态数，缺省为0</span></span><br><span class="line">sizes.NumOutputs = <span class="number">0</span>; <span class="comment">%输出个数，缺省为0</span></span><br><span class="line">sizes.NumInputs = <span class="number">0</span>; <span class="comment">%输入个数，缺省为0</span></span><br><span class="line">sizes.DirFeedthrough = <span class="number">1</span>; <span class="comment">%是否存在直馈通道，1存在，0不存在</span></span><br><span class="line">sizes.NumSampleTimes = <span class="number">1</span>; <span class="comment">%采样时间个数，至少是一个</span></span><br><span class="line">sys = simsizes(sizes); <span class="comment">%返回size数据结构所包含的信息</span></span><br><span class="line">x0 = []; <span class="comment">%设置初始状态</span></span><br><span class="line">str = []; <span class="comment">%保留变量置空</span></span><br><span class="line">ts = [<span class="number">0</span> <span class="number">0</span>]; <span class="comment">%设置采样时间</span></span><br><span class="line">simStateCompliance = <span class="string">'UnknownSimState'</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span>=<span class="title">mdlDerivatives</span><span class="params">(t,x,u)</span></span></span><br><span class="line"><span class="comment">%计算导数回调子函数</span></span><br><span class="line"><span class="comment">%给定t,x,u计算连续状态的导数，可以在此给出系统的连续状态方程</span></span><br><span class="line"><span class="comment">%该子函数可以不存在</span></span><br><span class="line">sys = []; <span class="comment">%sys表示状态导数，即dx</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span>=<span class="title">mdlUpdate</span><span class="params">(t,x,u)</span></span></span><br><span class="line"><span class="comment">%状态更新回调子函数</span></span><br><span class="line"><span class="comment">%给定t、x、u计算离散状态的更新</span></span><br><span class="line"><span class="comment">%每个仿真步内必然调用该子函数，不论是否有意义</span></span><br><span class="line"><span class="comment">%除了在此描述系统的离散状态方程外，还可以在此添加其他每个仿真步内都必须执行的代码</span></span><br><span class="line">sys = []; <span class="comment">%sys表示下一个离散状态，即x(k+1)</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span>=<span class="title">mdlOutputs</span><span class="params">(t,x,u)</span></span></span><br><span class="line"><span class="comment">%计算输出回调函数</span></span><br><span class="line"><span class="comment">%给定t,x,u计算输出，可以在此描述系统的输出方程</span></span><br><span class="line"><span class="comment">%该子函数必须存在</span></span><br><span class="line">sys = []; <span class="comment">%sys表示输出，即y</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span>=<span class="title">mdlGetTimeOfNextVarHit</span><span class="params">(t,x,u)</span></span></span><br><span class="line"><span class="comment">%计算下一个采样时间</span></span><br><span class="line"><span class="comment">%仅在系统是变采样时间系统时调用</span></span><br><span class="line">sampleTime = <span class="number">1</span>; <span class="comment">%设置下一次采样时间是在1s以后</span></span><br><span class="line">sys = t + sampleTime; <span class="comment">%sys表示下一个采样时间点</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span>=<span class="title">mdlTerminate</span><span class="params">(t,x,u)</span></span></span><br><span class="line"><span class="comment">%仿真结束时要调用的回调函数</span></span><br><span class="line"><span class="comment">%在仿真结束时，可以在此完成仿真结束所需的必要工作</span></span><br><span class="line">sys = [];</span><br><span class="line"></span><br></pre></td></tr></table></figure><h1 id="S函数实例"><a href="#S函数实例" class="headerlink" title="S函数实例"></a>S函数实例</h1><p>使用M文件编写S函数形式有两种，Level 1和Level 2，二者的包装模块是不同的。 </p><div class="table-container"><table><thead><tr><th style="text-align:left">类型</th><th style="text-align:center">优点</th><th style="text-align:center">缺点</th></tr></thead><tbody><tr><td style="text-align:left">Level 1</td><td style="text-align:center">运行速度快，能处理矩阵数据</td><td style="text-align:center">只能处理点数据，不能处理复数以及基于帧的数据</td></tr><tr><td style="text-align:left">Level 2</td><td style="text-align:center">能够处理的数据类型多，包括矩阵、复数以及基于帧的数据</td><td style="text-align:center">运行速度慢</td></tr></tbody></table></div><p>Level 1 M文件S函数——这种方式提供了一个简单的M文件接口，可以与少部分的S函数API交互。Matlab对于这种方式的支持更多的是为了保持与以前版本的兼容，现在推荐采用的是Level 2 M文件S函数。 </p><p>下面是几个Level-1 M-file S-function的例子</p><h2 id="连续有限输出的积分器"><a href="#连续有限输出的积分器" class="headerlink" title="连续有限输出的积分器"></a>连续有限输出的积分器</h2><figure class="highlight matlab"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">% 实现一个连续有限积分器，其中输出受下限和上限限制，并包括初始条件。</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="params">[sys,x0,str,ts,simStateCompliance]</span>=<span class="title">limintm</span><span class="params">(t,x,u,flag,lb,ub,xi)</span></span></span><br><span class="line"><span class="keyword">switch</span> flag</span><br><span class="line"> <span class="keyword">case</span> <span class="number">0</span> </span><br><span class="line"> [sys,x0,str,ts,simStateCompliance] = mdlInitializeSizes(lb,ub,xi);</span><br><span class="line"> <span class="keyword">case</span> <span class="number">1</span></span><br><span class="line"> sys = mdlDerivatives(t,x,u,lb,ub);</span><br><span class="line"> <span class="keyword">case</span> {<span class="number">2</span>,<span class="number">9</span>}</span><br><span class="line"> sys = []; <span class="comment">% do nothing</span></span><br><span class="line"> <span class="keyword">case</span> <span class="number">3</span></span><br><span class="line"> sys = mdlOutputs(t,x,u); </span><br><span class="line"> <span class="keyword">otherwise</span></span><br><span class="line"> DAStudio.error(<span class="string">'Simulink:blocks:unhandledFlag'</span>, num2str(flag));</span><br><span class="line"><span class="keyword">end</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="params">[sys,x0,str,ts,simStateCompliance]</span> = <span class="title">mdlInitializeSizes</span><span class="params">(lb,ub,xi)</span></span></span><br><span class="line"></span><br><span class="line">sizes = simsizes;</span><br><span class="line">sizes.NumContStates = <span class="number">1</span>;</span><br><span class="line">sizes.NumDiscStates = <span class="number">0</span>;</span><br><span class="line">sizes.NumOutputs = <span class="number">1</span>;</span><br><span class="line">sizes.NumInputs = <span class="number">1</span>;</span><br><span class="line">sizes.DirFeedthrough = <span class="number">0</span>;</span><br><span class="line">sizes.NumSampleTimes = <span class="number">1</span>;</span><br><span class="line"></span><br><span class="line">sys = simsizes(sizes);</span><br><span class="line">str = [];</span><br><span class="line">x0 = xi;</span><br><span class="line">ts = [<span class="number">0</span> <span class="number">0</span>]; </span><br><span class="line"></span><br><span class="line">simStateCompliance = <span class="string">'DefaultSimState'</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span> = <span class="title">mdlDerivatives</span><span class="params">(t,x,u,lb,ub)</span></span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (x <= lb & u < <span class="number">0</span>) | (x>= ub & u><span class="number">0</span> )</span><br><span class="line"> sys = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">else</span></span><br><span class="line"> sys = u;</span><br><span class="line"><span class="keyword">end</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span> = <span class="title">mdlOutputs</span><span class="params">(t,x,u)</span></span></span><br><span class="line">sys = x;</span><br></pre></td></tr></table></figure><h2 id="一连续系统"><a href="#一连续系统" class="headerlink" title="一连续系统"></a>一连续系统</h2><p>蹦极跳是一种挑战身体极限的运动，蹦极者系着一根弹力绳从高处的桥梁或山崖向下跳。如果蹦极者系在一个弹性系数为 k 的弹力绳索上。定义绳索下端的初始位置为 0，则蹦极者受到的弹性力是</p><p><img src="https://img-blog.csdnimg.cn/20190408111025940.png" alt="弹性力"></p><p>整个蹦极跳系统的数学模型为：</p><p><img src="https://img-blog.csdnimg.cn/2019040811124413.png" alt="数学模型"></p><p>其中m为物体的质量，g为重力加速度取10，x为物体的位置，第二项为物体受到的弹性力，第三项和第四项表示空气的阻力。桥梁距离地面的高度为50m,绳子的原长为30m，弹性系数k为50，a1=a2=1。试判断质量为70kg的人是否能够安全地享受此游戏带来的乐趣。下图为整个系统的示意图。</p><p><img src="https://img-blog.csdnimg.cn/20190408111740533.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjczNjEzMA==,size_16,color_FFFFFF,t_70" alt="系统示意图"></p><p>解：为了便于后面的仿真计算，可以将物理模型写成如下状态方程形式：</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/状态空间方程.png" alt="状态空间方程"></p><figure class="highlight matlab"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="params">[sys,x0,str,ts,simStateCompliance]</span> = <span class="title">jumping</span><span class="params">(t,x,u,flag,len,m,height,k)</span></span></span><br><span class="line"><span class="keyword">switch</span> flag,</span><br><span class="line"> <span class="keyword">case</span> <span class="number">0</span>,</span><br><span class="line"> [sys,x0,str,ts,simStateCompliance]=mdlInitializeSizes(len,m,height,k);</span><br><span class="line"> <span class="keyword">case</span> <span class="number">1</span>,</span><br><span class="line"> sys=mdlDerivatives(t,x,u,len,m,height,k);</span><br><span class="line"> <span class="keyword">case</span> <span class="number">2</span>,</span><br><span class="line"> sys=mdlUpdate(t,x,u);</span><br><span class="line"> <span class="keyword">case</span> <span class="number">3</span>,</span><br><span class="line"> sys=mdlOutputs(t,x,u,len,m,height,k);</span><br><span class="line"> <span class="keyword">case</span> <span class="number">4</span>,</span><br><span class="line"> sys=mdlGetTimeOfNextVarHit(t,x,u);</span><br><span class="line"> <span class="keyword">case</span> <span class="number">9</span>,</span><br><span class="line"> sys=mdlTerminate(t,x,u);</span><br><span class="line"> <span class="keyword">otherwise</span></span><br><span class="line"> DAStudio.error(<span class="string">'Simulink:blocks:unhandledFlag'</span>, num2str(flag));</span><br><span class="line"><span class="keyword">end</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="params">[sys,x0,str,ts,simStateCompliance]</span>=<span class="title">mdlInitializeSizes</span><span class="params">(len,m,height,k)</span></span></span><br><span class="line">sizes = simsizes;</span><br><span class="line">sizes.NumContStates = <span class="number">2</span>;</span><br><span class="line">sizes.NumDiscStates = <span class="number">0</span>;</span><br><span class="line">sizes.NumOutputs = <span class="number">1</span>;</span><br><span class="line">sizes.NumInputs = <span class="number">0</span>;</span><br><span class="line">sizes.DirFeedthrough = <span class="number">1</span>;</span><br><span class="line">sizes.NumSampleTimes = <span class="number">1</span>; </span><br><span class="line">sys = simsizes(sizes);</span><br><span class="line">x0 = [-len;<span class="number">0</span>];</span><br><span class="line">str = [];</span><br><span class="line">ts = [<span class="number">0</span> <span class="number">0</span>];</span><br><span class="line">simStateCompliance = <span class="string">'UnknownSimState'</span>;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span>=<span class="title">mdlDerivatives</span><span class="params">(t,x,u,len,m,height,k)</span></span></span><br><span class="line"><span class="keyword">if</span> x(<span class="number">1</span>)><span class="number">0</span></span><br><span class="line"> b=-k*x(<span class="number">1</span>);</span><br><span class="line"><span class="keyword">else</span> </span><br><span class="line"> b=<span class="number">0</span>;</span><br><span class="line"><span class="keyword">end</span></span><br><span class="line">sys = [x(<span class="number">2</span>);<span class="number">10</span>+b/m<span class="number">-1</span>/m*x(<span class="number">2</span>)<span class="number">-1</span>/m*<span class="built_in">abs</span>(x(<span class="number">2</span>))*x(<span class="number">2</span>)];</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span>=<span class="title">mdlUpdate</span><span class="params">(t,x,u)</span></span></span><br><span class="line">sys = [];</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span>=<span class="title">mdlOutputs</span><span class="params">(t,x,u,len,m,height,k)</span></span></span><br><span class="line">sys = [height-len-x(<span class="number">1</span>)];</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span>=<span class="title">mdlGetTimeOfNextVarHit</span><span class="params">(t,x,u)</span></span></span><br><span class="line"></span><br><span class="line">sampleTime = <span class="number">1</span>; </span><br><span class="line">sys = t + sampleTime;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span>=<span class="title">mdlTerminate</span><span class="params">(t,x,u)</span></span></span><br><span class="line">sys = [];</span><br></pre></td></tr></table></figure><p>s-function参数的配置：</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/S函数参数配置.png" alt="S函数参数配置"></p><p>搭建simulink框图观察上述系统输出</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/蹦极输出.png" alt="蹦极输出"></p><p>综上所述，此蹦极系统并不能让70kg的人嗨。</p><h2 id="一离散系统"><a href="#一离散系统" class="headerlink" title="一离散系统"></a>一离散系统</h2><p>用S-function实现下面的离散系统：</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/离散方程.png" alt=""></p><figure class="highlight matlab"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="params">[sys,x0,str,ts]</span> = <span class="title">dsfunc</span><span class="params">(t,x,u,flag)</span></span></span><br><span class="line">A=[<span class="number">-1.3839</span> <span class="number">0.5097</span></span><br><span class="line"> <span class="number">1.0000</span> <span class="number">0</span>];</span><br><span class="line"></span><br><span class="line">B=[<span class="number">-2.5559</span> <span class="number">0</span></span><br><span class="line"> <span class="number">0</span> <span class="number">4.2382</span>];</span><br><span class="line"></span><br><span class="line">C=[ <span class="number">0</span> <span class="number">2.0761</span></span><br><span class="line"> <span class="number">0</span> <span class="number">7.7891</span>];</span><br><span class="line"></span><br><span class="line">D=[ <span class="number">-0.8141</span> <span class="number">-2.9334</span></span><br><span class="line"> <span class="number">1.2426</span> <span class="number">0</span>];</span><br><span class="line"><span class="keyword">switch</span> flag,</span><br><span class="line"> <span class="keyword">case</span> <span class="number">0</span>,</span><br><span class="line"> [sys,x0,str,ts] = mdlInitializeSizes(A,B,C,D);</span><br><span class="line"> <span class="keyword">case</span> <span class="number">2</span>, </span><br><span class="line"> sys = mdlUpdate(t,x,u,A,B,C,D); </span><br><span class="line"> <span class="keyword">case</span> <span class="number">3</span>, </span><br><span class="line"> sys = mdlOutputs(t,x,u,A,C,D);</span><br><span class="line"> <span class="keyword">case</span> <span class="number">9</span>, </span><br><span class="line"> sys = []; <span class="comment">% do nothing</span></span><br><span class="line"> <span class="keyword">otherwise</span></span><br><span class="line"> DAStudio.error(<span class="string">'Simulink:blocks:unhandledFlag'</span>, num2str(flag));</span><br><span class="line"><span class="keyword">end</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="params">[sys,x0,str,ts]</span> = <span class="title">mdlInitializeSizes</span><span class="params">(A,B,C,D)</span></span></span><br><span class="line">sizes = simsizes;</span><br><span class="line">sizes.NumContStates = <span class="number">0</span>;</span><br><span class="line">sizes.NumDiscStates = <span class="built_in">size</span>(A,<span class="number">1</span>);</span><br><span class="line">sizes.NumOutputs = <span class="built_in">size</span>(D,<span class="number">1</span>);</span><br><span class="line">sizes.NumInputs = <span class="built_in">size</span>(D,<span class="number">2</span>);</span><br><span class="line">sizes.DirFeedthrough = <span class="number">1</span>;</span><br><span class="line">sizes.NumSampleTimes = <span class="number">1</span>;</span><br><span class="line">sys = simsizes(sizes);</span><br><span class="line">x0 = <span class="built_in">ones</span>(sizes.NumDiscStates,<span class="number">1</span>);</span><br><span class="line">str = [];</span><br><span class="line">ts = [<span class="number">1</span> <span class="number">0</span>]; </span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span> = <span class="title">mdlUpdate</span><span class="params">(t,x,u,A,B,C,D)</span></span></span><br><span class="line">sys = A*x+B*u;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sys</span> = <span class="title">mdlOutputs</span><span class="params">(t,x,u,A,C,D)</span></span></span><br><span class="line"></span><br><span class="line">sys = C*x+D*u;</span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 学习 </category>
</categories>
<tags>
<tag> Matlab </tag>
</tags>
</entry>
<entry>
<title>Github自定义个人首页</title>
<link href="/posts/a6ad6885/"/>
<url>/posts/a6ad6885/</url>
<content type="html"><![CDATA[<h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>GitHub个人主页，官方称呼是profile，是一个以markdown脚本语言编写的个人GitHub展示主页面。Guthub个人主页可以展示很多有用的信息，例如添加一个首页被访问次数的计数器，一个Github被Star与Commit的概览信息，以及各种技能标签，设备标签等，还可以利用wakatime显示你最近编码各类语言的使用时长，以及你最近Steam游戏游玩排行榜。本文主要介绍了如何创建个人Github个人主页以及美化个人主页，通过使用一些功能组件，提升主页功能性和视觉效果。</p><h1 id="创建Github主页"><a href="#创建Github主页" class="headerlink" title="创建Github主页"></a>创建Github主页</h1><p>首先登陆Github，创建一个新的<strong>公开</strong>仓库，<strong>仓库名和自己 Github 用户名相同</strong>，并且<strong>添加一个 README.md自述文件</strong>。<br><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/20221115230251.png" alt="新建同名仓库"></p><p>当创建的仓库名称与Github账户名称相同的时候，下面会弹出对话框，内容如下：</p><blockquote><p>xxxx/xxxx is a ✨special ✨ repository that you can use to add a README.md to your GitHub profile. Make sure it’s public and initialize it with a README to get started.</p></blockquote><p>同名仓库创建成功以后，点击Github右上角的头像，然后选择”Your profile”即可看到刚刚初始化的README,点击README.md右上角的编辑图标即可进入编辑模式。在编辑程中想要实时预览，点击左上角的preview按钮即可。</p><p>Github提供了这样一个特殊的Markdown文件以供我们DIY主页，扩展性很高，如果想要定制化更高的排版形式，还可以使用HTML，CSS语法。如果不熟悉Markdown语法，可以直接跳转到本文<strong>Profile编辑器</strong>部分，该部分介绍了一个可视化的编辑工具，省去了Markdown脚本编写，只需要勾选相应的选项即可自动生成profile。</p><h1 id="GitHub-Stats-Card（GitHub-统计卡片）"><a href="#GitHub-Stats-Card（GitHub-统计卡片）" class="headerlink" title="GitHub Stats Card（GitHub 统计卡片）"></a>GitHub Stats Card（GitHub 统计卡片）</h1><p>在 README 文件中添加下面的代码，可以得到关于仓库 Star 、提交、贡献等统计信息：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">align</span>=<span class="string">"center"</span>></span> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://github-readme-stats.vercel.app/api?username=yang-tian-hub&show_icons=true&theme=tokyonight"</span> /></span> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure></p><div align="center"> <img src="https://github-readme-stats.vercel.app/api?username=yang-tian-hub&show_icons=true&theme=tokyonight" /> </div><p>url中username为你的Github用户名,详情可查看<a href="https://github.com/anuraghazra/github-readme-stats">官方文档</a>，其实 Github readme stats 这个开源项目是用来用于在个人 Github 页面上的 Readme 介绍中动态展示自己的Github活跃状态的，不过因为它本质上只是提供一个接口可以返回对应的图片，所以可以用到其他很多地方</p><h1 id="Most-used-languages（GitHub-使用语言统计）"><a href="#Most-used-languages（GitHub-使用语言统计）" class="headerlink" title="Most used languages（GitHub 使用语言统计）"></a>Most used languages（GitHub 使用语言统计）</h1><p>在 README 文件中添加下面的代码，可以得到使用编程语言对比统计图：<br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">align</span>=<span class="string">"center"</span>></span> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://github-readme-stats.vercel.app/api/top-langs/?username=yang-tian-hub"</span> /></span> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure></p><div align="center"> <img src="https://github-readme-stats.vercel.app/api/top-langs/?username=yang-tian-hub" /> </div><p>同样，具体的风格可查看上面的官方文档</p><h1 id="GitHub-streak（GitHub-连续打卡）"><a href="#GitHub-streak（GitHub-连续打卡）" class="headerlink" title="GitHub streak（GitHub 连续打卡）"></a>GitHub streak（GitHub 连续打卡）</h1><p>在 README 中展示您连续提交代码的次数，<a href="https://github.com/DenverCoder1/github-readme-streak-stats">官方文档</a><br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">align</span>=<span class="string">"center"</span>></span> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://github-readme-streak-stats.herokuapp.com/?user=yang-tian-hub"</span> /></span> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure></p><div align="center"> <img src="https://github-readme-streak-stats.herokuapp.com/?user=yang-tian-hub" /> </div><h1 id="GitHub-Readme-Activity-Graph-（GitHub-活动统计图）"><a href="#GitHub-Readme-Activity-Graph-（GitHub-活动统计图）" class="headerlink" title="GitHub Readme Activity Graph （GitHub 活动统计图）"></a>GitHub Readme Activity Graph （GitHub 活动统计图）</h1><p>动态生成的活动图，用于显示您过去 31 天的 GitHub 活动，<a href="https://github.com/Ashutosh00710/github-readme-activity-graph/">官方文档</a><br><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">align</span>=<span class="string">"center"</span>></span> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://activity-graph.herokuapp.com/graph?username=yang-tian-hub&theme=xcode"</span> /></span> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure></p><div align="center"> <img src="https://activity-graph.herokuapp.com/graph?username=yang-tian-hub&theme=xcode" /> </div><h1 id="徽标"><a href="#徽标" class="headerlink" title="徽标"></a>徽标</h1><p>相比于纯文字，徽标显得更显眼，并且有助于提炼关键词，避免写一堆口水话。徽标的生成也很简单，在 <a href="https://shields.io/">shields.io</a> 网站上填想要生成的内容就行了。</p><p>比如这个代码：<br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://img.shields.io/badge/python-3.9-orange</span><br></pre></td></tr></table></figure><br>可以生成下面的徽标：</p><p align="center"><img src="https://img.shields.io/badge/python-3.9-orange" ></p><p>也可以通过接口修改外观：<br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">https://img.shields.io/badge/python-3.9-orange?style=for-the-badge&logo=python&logoColor=orange</span><br></pre></td></tr></table></figure></p><p align="center"><img src="https://img.shields.io/badge/python-3.9-orange?style=for-the-badge&logo=python&logoColor=orange" ></p><h1 id="首页计数器"><a href="#首页计数器" class="headerlink" title="首页计数器"></a>首页计数器</h1><p>这个很容易实现，只需要一个统计资源请求的后台服务即可，有很多第三方的服务可以使用,例如</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">align</span>=<span class="string">"center"</span>></span> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://visitor-badge.glitch.me/badge?page_id=yang-tian-hub"</span> /></span> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><div align="center"> <img src="https://visitor-badge.glitch.me/badge?page_id=yang-tian-hub" /> </div><p>page_id后面替换为自己的Github用户名</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">align</span>=<span class="string">"center"</span>></span> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://profile-counter.glitch.me/yang-tian-hub/count.svg"</span> /></span> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><div align="center"> <img src="https://profile-counter.glitch.me/yang-tian-hub/count.svg" /> </div><p>将yang-tian-hub替换为个人Github用户名</p><p>这些徽标会实时改变，记录Github个人主页被访问的次数</p><h1 id="打字特效"><a href="#打字特效" class="headerlink" title="打字特效"></a>打字特效</h1><p><a href="https://readme-typing-svg.herokuapp.com/demo/">Readme Typing SVG</a>，可以生成循环打字的动图,如下：</p><div align="center"> <img src="https://readme-typing-svg.herokuapp.com/?lines=今日事，今日毕!;活着就是一个个无可替代的;日子的累积;小杨同学祝您今天愉快!¢er=true&font=Roboto&size=27" /></div><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">align</span>=<span class="string">"center"</span>></span> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://readme-typing-svg.herokuapp.com/?lines=今日事，今日毕!;活着就是一个个无可替代的;日子的累积;小杨同学祝您今天愉快!&center=true&font=Roboto&size=27"</span> /></span><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><div align="center"> <a href="https://blog.ytadx.cn/"> <img src="https://readme-typing-svg.herokuapp.com/?lines=今日事，今日毕!;活着就是一个个无可替代的;日子的累积;小杨同学祝您今天愉快!¢er=true&size=27"> </a> </div><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">align</span>=<span class="string">"center"</span>></span> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"https://blog.ytadx.cn/"</span>></span> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://readme-typing-svg.herokuapp.com/?lines=今日事，今日毕!;活着就是一个个无可替代的;日子的累积;小杨同学祝您今天愉快!&center=true&size=27"</span>></span> <span class="tag"></<span class="name">a</span>></span> <span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure><h1 id="全面支持emoji"><a href="#全面支持emoji" class="headerlink" title="全面支持emoji"></a>全面支持emoji</h1><p>下面内容可以直接复制来用，emoji不是图片，所以可以任意字号展示,这里只是一部分，并不是全部：</p><blockquote><p>😀😃😄😁😆😅🤣😂🙂🙃😉😊😇🥰😍🤩😘😚😙😋😛😜🤪😝🤑🤗🤭🤫🤔🤐🤨😐😑😶😏😒🙄😬🤥😌😔😪🤤😴😷🤒🤕🤢🤮🤧🥵🥶🥴😵🤯🤠🥳😎🤓🧐😕😟🙁☹️😮😯😲😳🥺😦😧😨😰😥😢😭😱😖😣😞😓😩😫🥱😤😡😠🤬</p><p>👶🧒👦👧🧑👱👨🧔👨🦰👨🦱👨🦳👨🦲👩👩🦰🧑👩🦱🧑👩🦳🧑👩🦲🧑👱♀️👱♂️🧓👴👵🙍🙍♂️🙍♀️🙎🙎♂️🙎♀️🙅🙅♂️🙅♀️🙆🙆♂️🙆♀️💁💁♂️💁♀️🙋🙋♂️🙋♀️🧏🧏♂️🧏♀️🙇🙇♂️🙇♀️🤦♂️🤦♀️🤷♀️👨⚕️👩⚕️👨🎓👩🎓🧑🏫</p><p>👋🤚🖐️✋🖖👌🤏✌️🤞🤟🤘🤙👈👉👆🖕👇☝️👍👎✊👊🤛🤜👏🙌👐🤲🤝🙏✍️💅🤳💪</p><p>👣👀👁️👄💋👂🦻👃👅🧠🦷🦴💪🦾🦿🦵🦶👓🕶️🥽🥼🦺👔👕👖🧣🧤🧥🧦👗👘🥻🩱🩲🩳👙👚👛👜👝🎒👞👟🥾🥿👠👡🩰👢👑👒🎩🎓🧢⛑️💄💅💍💼🌂☂️💈🛀🛌💥💫💦💨</p><p>📱📲📶📳📴☎📞📟📠🤳♻🏧🚮🚰♿🚹🚺🚻🚼🚾⚠🚸⛔🚫🚳🚭🚯🚱🚷🔞💈☢️☣️⬆️➡️⬇️⬅️↩️↪️⤴️⤵️🔃🔄🔙🔚🔛🔜🔝🛐⚛️🕉️✡️️☯️✝️☦️☪️☮️🕎🔯♈♉♊♋♌♍♎♏♐♑♒♓⛎🔀🔁🔂▶️⏩⏭️⏯️◀️⏪⏮️🔼⏫🔽⏬⏸️⏹️⏺️⏏️🎦🔅🔆📶📳📴✖️➕➖➗♾️‼️⁉️❓❔❕❗〰️💱💲⚕️♻️️🔱📛🔰⭕✅☑️✔️❌❎➰➿〽️✳️✴️❇️©️®️™️#️⃣*️⃣0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🔠🔡🔢🔣🔤🅰️🆎🅱️🆑🆒🆓ℹ️🆔Ⓜ️🆕🆖🅾️🆗🅿️🆘🆙🆚🈁🈂️🈷️🈶🈯🉐🈹🈚🈲🉑🈸🈴🈳㊗️㊙️🈺🈵🔴🟠🟡🟢🔵🟣🟤⚫⚪🟥🟧🟨🟩🟦🟪🟫⬛⬜◼️◻️◾◽▪️▫️🔶🔷🔸🔹🔺🔻💠🔘🔳🔲🏁🚩🎌🏴🏳️🏳️🌈🏳️⚧️🏴☠️</p><p>🙈🙉🙊💥💫💦💨🐵🐒🦍🦧🐶🐕🦮🐕🦺🐩🐺🦊🦝🐱🐈🐈⬛🦁🐯🐅🐆🐴🐎🦄🦓🦌🐮🐂🐃🐄🐷🐖🐗🐽🐏🐑🐐🐪🐫🦙🦒🐘🦏🦛🐭🐁🐀🐹🐰🐇🐿️🦔🦇🐻🐻❄️🐨🐼🦥🦦🦨🦘🦡🐾🦃🐔🐓🐣🐤🐥🐦🐧🕊️🦅🦆🦢🦉🦩🦚🦜🐸🐊🐢🦎🐍🐲🐉🦕🦖🐳🐋🐬🐟🐠🐡🦈🐙🐚🐌🦋🐛🐜🐝🐞🦗🪳🕷️🕸️🦂🦟🦠🦀🦞🦐🦑</p><p>💐🌸💮🏵️🌹🥀🌺🌻🌼🌷🌱🌲🌳🌴🌵🌾🌿☘️🍀🍁🍂🍃</p><p>🌍🌎🌏🌐🌑🌒🌓🌔🌕🌖🌗🌘🌙🌚🌛🌜☀️🌝🌞⭐🌟🌠☁️⛅⛈️🌤️🌥️🌦️🌧️🌨️🌩️🌪️🌫️🌬️🌈☂️☔⚡❄️☃️⛄☄️🔥💧🌊</p><p>🍇🍈🍉🍊🍋🍌🍍🥭🍎🍏🍐🍑🍒🍓🥝🍅🥥🥑🍆🥔🥕🌽🌶️🥒🥬🥦🧄🧅🍄🥜🌰🍞🥐🥖🥨🥯🥞🧇🧀🍖🍗🥩🥓🍔🍟🍕🌭🥪🌮🌯🥙🧆🥚🍳🥘🍲🥣🥗🍿🧈🧂🥫🍱🍘🍙🍚🍛🍜🍝🍠🍢🍣🍤🍥🥮🍡🥟🥠🥡🦪🍦🍧🍨🍩🍪🎂🍰🧁🥧🍫🍬🍭🍮🍯🍼🥛☕🍵🍶🍾🍷🍸🍹🍺🍻🥂🥃🥤🧃🧉🧊🥢🍽️🍴🥄</p><p>🧗🧗♂️🧗♀️🤺🏇⛷️🏂🏌️🏌️♂️🏌️♀️🏄🏄♂️🏄♀️🚣🚣♂️🚣♀️🏊🏊♂️🏊♀️⛹️⛹️♂️⛹️♀️🏋️🏋️♂️🚴🚵🚵♂️🚵♀️🤸🤸♂️🤸♀️🤼🤼♂️🤼♀️🤽🤽♂️🤽♀️🤾🤾♂️🤾♀️🤹🤹♂️🤹♀️🧘🧘♂️🧘♀️🎪🛹🛼🛶🎗️🎟️🎫🎖️🏆🏅🥇🥈🥉⚽⚾🥎🏀🏐🏈🏉🎾🥏🎳🏏🏑🏒🥍🏓🏸🥊🥋🥅⛳⛸️🎣🎽🎿🛷🥌🎯🎱🎮🎰🎲🧩♟️🎭🎨🧵🧶🎼🎤🎧🎷🪗🎸🎹🎺🎻🥁🪘🎬🏹</p><p>😈👿👹👺💀☠👻👽👾💣</p><p>👣🎠🎡🎢🚣🏔️⛰️🌋🗻🏕️🏖️🏜️🏝️🏞️🏟️🏛️🏗️🛖🏘️🏚️🏠🏡🏢🏣🏤🏥🏦🏨🏩🏪🏫🏬🏭🏯🏰💒🗼🗽⛪🕌🛕🕍⛩🕋⛲⛺🌁🌃🏙️🌄🌅🌆🌇🌉🎠🎡🎢🚂🚃🚄🚅🚆🚇🚈🚉🚊🚝🚞🚋🚌🚍🚎🚐🚑🚒🚓🚔🚕🚖🚗🚘🚙🛻🚚🚛🚜🏎️🏍️🛵🛺🚲🛴🚏🛣️🛤️⛽🚨🚥🚦🚧⚓⛵🚤🛳️⛴️🛥️🚢✈️🛩️🛫🛬🪂💺🚁🚟🚠🚡🛰️🚀🛸🪐🌠🌌⛱️🎆🎇🎑💴💵💶💷🗿🛂🛃🛄🛅🧭</p><p>💌💎🔪💈🚪🚽🚿🛁⌛⏳⌚⏰🎈🎉🎊🎎🎏🎐🎀🎁📯📻📱📲☎📞📟📠🔋🔌💻💽💾💿📀🎥📺📷📹📼🔍🔎🔬🔭📡💡🔦🏮📔📕📖📗📘📙📚📓📃📜📄📰📑🔖💰💴💵💶💷💸💳✉📧📨📩📤📥📦📫📪📬📭📮✏✒📝📁📂📅📆📇📈📉📊📋📌📍📎📏📐✂🔒🔓🔏🔐🔑🔨🔫🔧🔩🔗💉💊🚬🔮🚩🎌💦💨</p><p>💘❤💓💔💕💖💗💙💚💛💜💝💞💟</p></blockquote><h1 id="动态更新"><a href="#动态更新" class="headerlink" title="动态更新"></a>动态更新</h1><p>GitHub Actions 是 GitHub 官方推出的持续集成/部署模块服务（CI/CD）。GitHub Actions 自带云环境运行，包括私有仓库也可以享用，只需一个配置文件即可自动开启此服务。</p><p>说白了就相当于你白嫖了一个简易的服务器，他提供了一个配置文件，你在配置文件里书写脚本就可以定时的执行某项任务了。</p><h2 id="1-为GitHub首页添加贪吃蛇动画"><a href="#1-为GitHub首页添加贪吃蛇动画" class="headerlink" title="1. 为GitHub首页添加贪吃蛇动画"></a>1. 为GitHub首页添加贪吃蛇动画</h2><p>首先在仓库页面点击Actions按钮，并新建一个 workflows 工作流，Github 会默认为 Actions 添加配置文件blank.yml，我们只需要修改这个文件的名字并书写我们自己的脚本即可。</p><p>配置如下代码：<br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">#Github Action for generating a contribution graph with a snake eating your contributions.</span><br><span class="line"></span><br><span class="line">name: Generate Snake</span><br><span class="line"></span><br><span class="line">on:</span><br><span class="line"> schedule:</span><br><span class="line"> - cron: "0 0 * * *"</span><br><span class="line"> workflow_dispatch:</span><br><span class="line"></span><br><span class="line">jobs:</span><br><span class="line"> build:</span><br><span class="line"> runs-on: ubuntu-latest</span><br><span class="line"></span><br><span class="line"> steps:</span><br><span class="line"> - name: Checkout</span><br><span class="line"> uses: actions/checkout@v2.3.4</span><br><span class="line"> </span><br><span class="line"> - name: Generate Snake</span><br><span class="line"> uses: Platane/snk@master</span><br><span class="line"> id: snake-gif</span><br><span class="line"> with:</span><br><span class="line"> github_user_name: ${{ github.repository_owner }}</span><br><span class="line"> gif_out_path: ./assets/github-contribution-grid-snake.gif</span><br><span class="line"> svg_out_path: ./assets/github-contribution-grid-snake.svg</span><br><span class="line"></span><br><span class="line"> - name: Push to GitHub</span><br><span class="line"> uses: EndBug/add-and-commit@v7.2.1</span><br><span class="line"> with:</span><br><span class="line"> branch: main</span><br><span class="line"> message: 'Generate Contribution Snake'</span><br></pre></td></tr></table></figure><br>复制上面的脚本代码并替换yml文件默认内容后，commit</p><p>上面的Github Actions执行完毕后，会在当前的仓库中添加一个assets文件夹，文件夹中有github-contribution-grid-snake.gif和github-contribution-grid-snake.svg两个文件。我们把svg文件引入到我们的readme.md文件中即可。（用MarkDown和HTML语法都行）<br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><div align="center"><img src="https://cdn.jsdelivr.net/gh/这里更换为你的 GitHub ID/这里更换为你的 GitHub ID/assets/github-contribution-grid-snake.svg" /></div></span><br></pre></td></tr></table></figure><br>现在整个流程大致算是结束了，GitHub会在每天的零点（UTC时区，和北京时间 (UTC+8)差了八个小时）执行我们的Actions，并生成新的贪吃蛇动画图片，如果你熟悉Github Actions的流程的话，你可以修改yml文件来设置更新频率、文件位置、文件名称、commit信息等等。</p><p>计划任务语法有 5 个字段，中间用空格分隔，每个字段代表一个时间单位。</p><blockquote><pre><code>┌───────────── 分钟 (0 - 59)│ ┌───────────── 小时 (0 - 23)│ │ ┌───────────── 日 (1 - 31)│ │ │ ┌───────────── 月 (1 - 12 或 JAN-DEC)│ │ │ │ ┌───────────── 星期 (0 - 6 或 SUN-SAT)│ │ │ │ │* * * * *</code></pre><div class="table-container"><table><thead><tr><th style="text-align:left">符号</th><th style="text-align:left">描述</th><th style="text-align:left">案例</th></tr></thead><tbody><tr><td style="text-align:left">*</td><td style="text-align:left">任意值</td><td style="text-align:left">* * * * * 每天每小时每分钟</td></tr><tr><td style="text-align:left">,</td><td style="text-align:left">值分隔符</td><td style="text-align:left">1,3,4,7 * * * * 每小时的 1 3 4 7 分钟</td></tr><tr><td style="text-align:left">-</td><td style="text-align:left">范围</td><td style="text-align:left">1-6 * * * * 每小时的 1-6 分钟</td></tr><tr><td style="text-align:left">/</td><td style="text-align:left">每</td><td style="text-align:left">*/15 * * * * 每隔 15 分钟</td></tr></tbody></table></div></blockquote><p><strong>注</strong>：由于 GitHub Actions 的限制，如果设置为 * * * * * ，实际的执行频率为每 5 分执行一次。</p><h2 id="2-编程-amp-游戏时长统计"><a href="#2-编程-amp-游戏时长统计" class="headerlink" title="2. 编程&游戏时长统计"></a>2. 编程&游戏时长统计</h2><p>主要利用了 Github Action 的机制，触发定时任务去 Wakatime 平台拉取数据进行统计，而 Wakatime 平台提供了JetBrains全家桶、VsCode、Chrome的插件，用于统计用户的编程时长数据。</p><ol><li>创建一个Github Gist <a href="https://gist.github.com/">https://gist.github.com/</a></li><li>新建一个拥有gist空间权限的Token，保存它 <a href="https://github.com/settings/tokens/new">https://github.com/settings/tokens/new</a></li><li>创建一个WakaTime的账号 <a href="https://wakatime.com/signup">https://wakatime.com/signup</a></li><li>在你的WakaTime账号设置中选择公开你的编码活动 <a href="https://wakatime.com/settings/profile">https://wakatime.com/settings/profile</a></li></ol><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/gkbmhd.jpg" alt="公开编码活动"></p><ol><li>在你 WakaTime 账户设置中创建 Api-Key ，并且复制它。 <a href="https://wakatime.com/settings/api-key">https://wakatime.com/settings/api-key</a></li><li>Fork这个仓库 <a href="https://github.com/matchai/waka-box">https://github.com/matchai/waka-box</a></li><li>编辑.github/workflows/schedule.yml文件，将其中的GIST_ID设置为你创建的gist页面的url</li><li>在你仓库的安全设置中添加下面两个环境变量 Settings > Secrets<br>GH_TOKEN: 第2步的gist token，WAKATIME_API_KEY: 第5步中的wakatime Api-key</li></ol><p>schedule.yml文件代码如下：<br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">name: Update gist with WakaTime stats</span><br><span class="line">on:</span><br><span class="line"> schedule:</span><br><span class="line"> - cron: "0 0 * * *"</span><br><span class="line">jobs:</span><br><span class="line"> update-gist:</span><br><span class="line"> runs-on: ubuntu-latest</span><br><span class="line"> steps:</span><br><span class="line"> - uses: actions/checkout@master</span><br><span class="line"> - name: Update gist</span><br><span class="line"> uses: matchai/waka-box@master</span><br><span class="line"> env:</span><br><span class="line"> GH_TOKEN: ${{ secrets.GH_TOKEN }}</span><br><span class="line"> GIST_ID: 你创建的gist页面的url</span><br><span class="line"> WAKATIME_API_KEY: ${{ secrets.WAKATIME_API_KEY }}</span><br></pre></td></tr></table></figure><br>你可以将这个 gist 的 script 文件添加到你的 Github Profile 中，用来在首页显示你的编码时间。</p><p>统计 Steam 游戏时间也是类似，不过没有 Wakatime 这样的平台去让我们拉取数据，但是我们可以直接去 Steam 拉取<br>，可以参考<a href="https://github.com/journey-ad/steam-go">这个仓库</a>，本质都是类似于爬虫，利用 Github Action 来达到触发的效果。</p><h1 id="Profile编辑器"><a href="#Profile编辑器" class="headerlink" title="Profile编辑器"></a><a href="https://profilinator.rishav.dev/">Profile编辑器</a></h1><p>这个项目是一个是一个可视化profile生成工具，使用者无需学习markdown语法，仅需要在对应窗口中输入或者选择相应的内容，工具会自动生成markdown脚本。脚本编辑完成以后，直接复制粘贴到自己的github即可。</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/20221117003801.png" alt="Profile编辑器"></p><p>项目左侧是编辑窗口，在输入框中填入对应的信息，右侧展示框实时显示生成的效果，在编辑完成以后，点击右上角的按钮即可生成markdown脚本文件。</p><p>我比较推荐它的logo展示功能，将自己技术栈以logo的方式展现出来，更加生动形象。</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/20221117004103.png" alt="logo展示"></p><h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>以上就是 Github 自定义首页的基本玩法了。如果想搞些更花哨的（比如下象棋），那么可以参考<a href="https://github.com/abhisheknaiidu/awesome-github-profile-readme">awesome-github-profile-readme</a>，<a href="https://github.com/kautukkundan/Awesome-Profile-README-templates">推荐模板仓库1</a>和<a href="https://github.com/EddieHubCommunity/awesome-github-profiles">推荐模板仓库2</a>。后期有能力的话，也可以自己去编写actions，然后交给GitHub去定时触发，比方说写一个爬虫程序，然后将爬取的数据展现到GitHub首页等等。</p><p>本笔记参照文章<a href="https://zhuanlan.zhihu.com/p/265462490">Github个人首页美化指北</a>,<a href="https://zhuanlan.zhihu.com/p/454597068">Github 首页美化教程（一）：打造个性化的GitHub首页</a>,<a href="https://zhuanlan.zhihu.com/p/426231957">花式自定义Github首页：可能是程序员最棒的自我介绍了</a></p>]]></content>
<categories>
<category> 学习 </category>
</categories>
<tags>
<tag> Github </tag>
</tags>
</entry>
<entry>
<title>用MATLAB画SCI论文图</title>
<link href="/posts/1575ed1c/"/>
<url>/posts/1575ed1c/</url>
<content type="html"><![CDATA[<h1 id="从gcf和gca说起"><a href="#从gcf和gca说起" class="headerlink" title="从gcf和gca说起"></a>从gcf和gca说起</h1><p>不论是Python绘图还是Matlab绘图，想要获得更好看的图，都会用到这两个单词。<br>gcf：get current figure，是目标图像的图形句柄对象<br>gca：get current axes,是目标图像的坐标轴句柄对象<br>Matlab同样支持面向对象编程。在Matlab打开一个绘图窗口或画一张图后输入<code>gcf</code>和<code>gca</code>就会获得当前图像对象或当前坐标轴对象的属性</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/gcf.png" alt="gcf"><br><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/gca.png" alt="gca"></p><p>事实上，当 MATLAB 创建一个绘图时，它会创建一系列的图形对象，有图窗、坐标区、线条、填充、文本和图例等等对象。<br>下面的例子有三个图形对象 — 一个坐标区、一条线条和一个文本对象，使用可选输出参数可以存储所创建的图形对象。 </p><figure class="highlight matlab"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">x = -<span class="built_in">pi</span>:<span class="built_in">pi</span>/<span class="number">20</span>:<span class="built_in">pi</span>;</span><br><span class="line">y = <span class="built_in">sin</span>(x);</span><br><span class="line"></span><br><span class="line">f = <span class="built_in">figure</span>;</span><br><span class="line">p = <span class="built_in">plot</span>(x,y);</span><br><span class="line">txt1 = text(<span class="number">0.2</span>,<span class="number">0</span>,<span class="string">'sin(x)'</span>);</span><br></pre></td></tr></table></figure><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/sinx.jpg" alt="sin(x)"></p><p>所有图形对象均有可以查看和修改的属性，这些属性具有默认值。<br>若要访问图形对象的个别属性，请使用圆点表示法语法 object.PropertyName。例如，返回线条对象的 LineWidth 属性。<br><code>pcol = p.LineWidth</code><br>通过设置线条的 Color 属性将其颜色更改为红色。<br><code>p.Color = 'red';</code> </p><h1 id="通用函数get和set"><a href="#通用函数get和set" class="headerlink" title="通用函数get和set"></a>通用函数get和set</h1><p>当查看和修改对象的很多属性时，上面的方法就不适用了，Matlab中有<code>get</code>和<code>set</code>函数用于获取对象的属性和设置对象的属性。<br>使用方法： </p><blockquote><p><code>v = get(h)</code>:返回 h 标识的图形对象的所有属性和属性值, v 是一个结构体<br><code>v = get(h,propertyName1,propertyName2,···)</code>:返回特定属性 propertyName1,propertyName2,··· 的值,使用时须用单引号将属性名引起来<br>使用<code>get</code>和<code>set</code>函数时,MATLAB识别一个属性时是不分大小写的。另外，只要用足够多的字符来唯一地辨识一个属性名即可。例如，坐标轴对象中的位置属性可以用’Position’，’position’，甚至是’pos’来调用。<br><code>set(H,propertyName1,Value1,propertyName2,Value2,···)</code>：为 H 标识的对象指定其属性的值<br><code>s = set(H)</code>:返回 H 标识的对象的、可由用户设置的属性及其可能的值。</p></blockquote><h1 id="父类与子类"><a href="#父类与子类" class="headerlink" title="父类与子类"></a>父类与子类</h1><p>MATLAB 按一定的层次结构排列图形对象。层次结构的顶部是称为图形根的特殊对象。若要访问图形根，请使用 groot 函数。<br>groot定义了figure可以用的最大szie。groot下面是figure。figue就是你画图的时候跳出来的那个新的对话窗口。如果figure变化，groot是不会跟着变化的。但groot变化的话，figure就要跟着变化了。 </p><p>figure下面是axes，line，text，legend等等。axes是那个窗口figure里面你要画的东西。axes的大小和位置取决于figure，如果放大缩小figure的大小，里面的图像也会跟着变化的。</p><p>line，text，legend等等就是你用指令在图上加的东西。 </p><p>所有图形对象（除了根）均有一个父级。例如，坐标区的父级是一个图窗。 </p><p><code>h.Parent</code>和<code>h.Children</code>可获得图形对象的父级和子级。例如下面这张图有八个子级——5个坐标轴对象，2个图例对象，1个颜色条对象</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/复杂图.jpg" alt="复杂图"></p><pre><code>f.Childrenans = 8×1 graphics 数组: Axes Axes Legend (data1) Axes Axes ColorBar Legend (data1, data2) Axes (aaaa)</code></pre><p>因为figure有多个子级，Children 属性的值是一个图形对象数组。要访问figure的个别子级，请对数组建立索引。然后，可以设置子级对象的属性。</p><pre><code>t = f.Children(8); % get the 'aaaa' Axes objectt.FontWeight = 'bold'; % set the font to boldt.Children; % view 'aaaa' Axes object's Childrenans = 2×1 Line 数组: Line (data2) Line (data1)</code></pre><h1 id="常用属性"><a href="#常用属性" class="headerlink" title="常用属性"></a>常用属性</h1><p>当了解以上知识后，理论上，只要知道图形对象的各种属性就可以制作出想要的效果。事实上，当知道这些属性时，在plot，text，legend···时加上这些参数也可以。<br>下面给出常用对象的常用属性表以及可选参数 </p><h2 id="figure-常用属性"><a href="#figure-常用属性" class="headerlink" title="figure 常用属性"></a>figure 常用属性</h2><p>‘Number’: 图窗编号<br>‘Name’： 图窗名字<br>‘Color’: 背景颜色，指定为 RGB 三元组、十六进制颜色代码、颜色名称或短名称<br>‘Position’: 可绘制区域的位置和大小,[left bottom width height]<br>‘Units’: 测量单位,可选择’pixels’ （默认） | ‘normalized’ | ‘inches’ | ‘centimeters’ | ‘points’ | ‘characters’<br>‘MenuBar’: Figure 菜单栏显示方式,可选择’figure’ （默认） | ‘none’<br>‘ToolBar’: Figure 工具栏显示,可选择’auto’ （默认） | ‘figure’ | ‘none’<br>‘Resize’: 图窗能否调整大小，’on’ （默认） | ‘off’ </p><h2 id="axes-常用属性"><a href="#axes-常用属性" class="headerlink" title="axes 常用属性"></a>axes 常用属性</h2><p>‘FontName’: 字体名称，可选支持的字体名称 | ‘FixedWidth’<br>‘FontWeight’: 字符粗细,’normal’ （默认） | ‘bold’<br>‘FontSize’: 字体大小,数值标量<br>‘FontAngle’: 字符倾斜,’normal’ （默认） | ‘italic’<br>‘XTick, YTick, ZTick’: 刻度值，[] （默认） | 由递增值组成的向量<br>‘XTickLabel, YTickLabel, ZTickLabel’: 刻度标签,’’（默认） | 字符向量元胞数组 | 字符串数组 | 分类数组<br><strong>刻度值是坐标轴上显示刻度线的位置,刻度标签是你在每个刻度线旁边看到的标签。</strong><br>‘XLim, YLim, ZLim’: 最小和最大坐标轴范围,[0 1] （默认） | [min max] 形式的二元素向量<br>‘XAxisLocation’: x 轴位置，’bottom’ （默认） | ‘top’ | ‘origin’<br>‘YAxisLocation’: y 轴位置，’left’ （默认） | ‘right’ | ‘origin’<br>‘XGrid, YGrid, ZGrid’: 网格线，’off’ （默认） | on<br>‘GridLineStyle’: 网格线的线型，’-‘ （默认） | ‘—‘ | ‘:’ | ‘-.’ | ‘none’<br>‘GridColor’: 网格线的颜色，[0.15 0.15 0.15] （默认） | RGB 三元组 | 十六进制颜色代码 | ‘r’ | ‘g’ | ‘b’ | …<br>‘Title’: 标题的文本对象<br>‘Color’: 背景色，[1 1 1] （默认） | RGB 三元组 | 十六进制颜色代码 | ‘r’ | ‘g’ | ‘b’ | …<br>‘LineWidth’：线条宽度，0.5 （默认） | 正数值<br>‘Box’： 框轮廓，’off’ （默认） | ‘on’<br>‘Position’: 大小和位置，不包括标签边距,[0.1300 0.1100 0.7750 0.8150] （默认） | [left bottom width height] 形式的四元素向量 </p><h2 id="legend-常用属性"><a href="#legend-常用属性" class="headerlink" title="legend 常用属性"></a>legend 常用属性</h2><p>‘Location’: 相对于坐标区的位置,’north’ | ‘south’ | ‘east’ | ‘west’ | ‘northeast’ | …<br>‘Position’: 自定义位置和大小,[left bottom width height] 形式的四元素向量<br>‘Orientation’: 方向,’vertical’ （默认） | ‘horizontal’<br>‘NumColumns’: 列数,1 （默认） | 正整数<br>‘FontName’: 字体名称,支持的字体名称 | ‘FixedWidth’<br>‘FontSize’: 字体大小,大于 0 的标量值<br>‘Color’: 背景色,[1 1 1] （默认） | RGB 三元组 | 十六进制颜色代码 | ‘r’ | ‘g’ | ‘b’ | …<br>‘EdgeColor’: 框轮廓颜色,[0.15 0.15 0.15] （默认） | RGB 三元组 | 十六进制颜色代码 | ‘r’ | ‘g’ | ‘b’ | …<br>‘Box’: 框轮廓的显示,’on’ （默认） | ‘off’<br>‘LineWidth’: 框轮廓的宽度,0.5 （默认） | 正值 </p><h2 id="line属性"><a href="#line属性" class="headerlink" title="line属性"></a>line属性</h2><p>‘Color’: 线条颜色,[0 0 0] （默认） | RGB 三元组 | 十六进制颜色代码 | ‘r’ | ‘g’ | ‘b’ | …<br>‘LineStyle’: 线型,’-‘ （默认） | ‘—‘ | ‘:’ | ‘-.’ | ‘none’<br>‘LineWidth’: 线条宽度,0.5 （默认） | 正值<br>‘Marker’: 标记符号,’none’ （默认） | ‘o’ | ‘+’ | ‘*’ | ‘.’ | …<br>‘MarkerIndices’: 要显示标记的数据点的索引,1:length(YData) （默认） | 正整数向量 | 正整数标量<br>‘MarkerSize’: 标记大小,6 （默认） | 正值 </p><blockquote><p>事实上，figure,axes,legend都有Position，FontName，Fontsize，Color，Position等属性，它们的意思是一样的，参数形式也是一样的，只是代表了这个对象的属性和那个对象的属性</p></blockquote><h2 id="Simulink示波器"><a href="#Simulink示波器" class="headerlink" title="Simulink示波器"></a>Simulink示波器</h2><p>Simulink示波器也是对象，使用如下指令就可以打开示波器的绘图菜单，进行绘图操作</p><figure class="highlight matlab"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">shh = get(<span class="number">0</span>,<span class="string">'ShowHiddenHandles'</span>);</span><br><span class="line">set(<span class="number">0</span>,<span class="string">'ShowHiddenHandles'</span>,<span class="string">'On'</span>);</span><br><span class="line">set(gcf,<span class="string">'menubar'</span>,<span class="string">'figure'</span>);</span><br><span class="line">set(gcf,<span class="string">'CloseRequestFcn'</span>,<span class="string">'closereq'</span>);</span><br><span class="line">set(gcf,<span class="string">'DefaultLineClipping'</span>,<span class="string">'Off'</span>);</span><br><span class="line">set(<span class="number">0</span>,<span class="string">'ShowHiddenHandles'</span>,shh);</span><br></pre></td></tr></table></figure><h1 id="绘图例子"><a href="#绘图例子" class="headerlink" title="绘图例子"></a>绘图例子</h1><p>下面是绘制一个单列的图片代码示例</p><figure class="highlight matlab"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">clear all</span><br><span class="line"><span class="built_in">figure</span>(<span class="number">2</span>)</span><br><span class="line">set(gcf,<span class="string">'unit'</span>,<span class="string">'centimeters'</span>,<span class="string">'position'</span>,[<span class="number">10</span> <span class="number">5</span> <span class="number">8.4</span> <span class="number">10</span>]); <span class="comment">% 设置窗口位置[10cm,5cm]和大小8.4cm*10cm</span></span><br><span class="line">set(gcf,<span class="string">'ToolBar'</span>,<span class="string">'none'</span>,<span class="string">'ReSize'</span>,<span class="string">'off'</span>); <span class="comment">% 移除工具栏,不可调整大小</span></span><br><span class="line">set(gcf,<span class="string">'color'</span>,<span class="string">'w'</span>); <span class="comment">% 背景设为白色</span></span><br><span class="line"><span class="comment">% 以上也可在 编辑->图窗属性->窗口外观和位置 设置</span></span><br><span class="line"> </span><br><span class="line">t=<span class="number">0</span>:<span class="number">0.1</span>:<span class="number">1</span>;</span><br><span class="line">y1=t;</span><br><span class="line">y2=t.^<span class="number">2</span>;</span><br><span class="line">y3=t+<span class="number">0.1</span>;</span><br><span class="line">y4=t.^<span class="number">4</span>+<span class="number">0.1</span>;</span><br><span class="line"> </span><br><span class="line">subplot(<span class="number">2</span>,<span class="number">1</span>,<span class="number">1</span>) </span><br><span class="line"> </span><br><span class="line">p1 = <span class="built_in">plot</span>(t,y1,<span class="string">'b--'</span>,<span class="string">'LineWidth'</span>,<span class="number">1.5</span>);</span><br><span class="line"><span class="built_in">hold</span> on</span><br><span class="line">p2 = <span class="built_in">plot</span>(t,y2,<span class="string">'color'</span>,[<span class="number">0</span> <span class="number">0.81</span> <span class="number">0.82</span>],<span class="string">'LineWidth'</span>,<span class="number">1.5</span>);</span><br><span class="line">set(gca,<span class="string">'Position'</span>,[<span class="number">0.14</span> <span class="number">0.52</span> <span class="number">0.83</span> <span class="number">0.33</span>]);<span class="comment">%第(1)个图的位置</span></span><br><span class="line">g = get(p1,<span class="string">'Parent'</span>);<span class="comment">%对应p1所在的坐标轴</span></span><br><span class="line">set(g,<span class="string">'Linewidth'</span>,<span class="number">1.5</span>,<span class="string">'FontSize'</span>,<span class="number">10</span>,<span class="string">'FontName'</span>,<span class="string">'Arial'</span>,<span class="string">'FontWeight'</span>,<span class="string">'bold'</span>);</span><br><span class="line">ylabel(<span class="string">'Error [m]'</span>,<span class="string">'FontSize'</span>,<span class="number">10</span>,<span class="string">'FontName'</span>,<span class="string">'Arial'</span>,<span class="string">'FontWeight'</span>,<span class="string">'bold'</span>);</span><br><span class="line">ylim([<span class="number">0</span>,<span class="number">2</span>])</span><br><span class="line"><span class="comment">%xlabel('t [s]','FontSize',10,'FontName','Arial','FontWeight','bold');</span></span><br><span class="line">set(g,<span class="string">'XTick'</span>,[]); <span class="comment">%隐藏X坐标轴</span></span><br><span class="line"></span><br><span class="line">subplot(<span class="number">2</span>,<span class="number">1</span>,<span class="number">2</span>) </span><br><span class="line"></span><br><span class="line">p3 = <span class="built_in">plot</span>(t,y3,<span class="string">'r--'</span>,<span class="string">'LineWidth'</span>,<span class="number">1.5</span>);</span><br><span class="line"><span class="built_in">hold</span> on</span><br><span class="line">p4 = <span class="built_in">plot</span>(t,y4,<span class="string">'color'</span>,[<span class="number">0</span> <span class="number">0.3</span> <span class="number">0.82</span>],<span class="string">'LineWidth'</span>,<span class="number">1.5</span>);</span><br><span class="line">set(gca,<span class="string">'Position'</span>,[<span class="number">0.14</span> <span class="number">0.16</span> <span class="number">0.83</span> <span class="number">0.33</span>]);<span class="comment">%第(3)个图的位置</span></span><br><span class="line">g = get(p4,<span class="string">'Parent'</span>);<span class="comment">%对应p1所在的坐标轴</span></span><br><span class="line">set(g,<span class="string">'Linewidth'</span>,<span class="number">1.5</span>,<span class="string">'FontSize'</span>,<span class="number">10</span>,<span class="string">'FontName'</span>,<span class="string">'Arial'</span>,<span class="string">'FontWeight'</span>,<span class="string">'bold'</span>);</span><br><span class="line">ylim([<span class="number">0</span>,<span class="number">2</span>])</span><br><span class="line">ylabel(<span class="string">'Error [m]'</span>,<span class="string">'FontSize'</span>,<span class="number">10</span>,<span class="string">'FontName'</span>,<span class="string">'Arial'</span>,<span class="string">'FontWeight'</span>,<span class="string">'bold'</span>);</span><br><span class="line">xlabel({<span class="string">'t [s]'</span>,<span class="string">'(a)'</span>},<span class="string">'FontSize'</span>,<span class="number">10</span>,<span class="string">'FontName'</span>,<span class="string">'Arial'</span>,<span class="string">'FontWeight'</span>,<span class="string">'bold'</span>); <span class="comment">%{}作为换行给图标号</span></span><br><span class="line"> </span><br><span class="line">h1=<span class="built_in">legend</span>([p1 p2 p3 p4],<span class="string">'\fontname{Arial}y_1'</span>,<span class="string">'\fontname{Arial}y_2'</span>,<span class="string">'\fontname{Arial}y_3'</span>,...</span><br><span class="line"> <span class="string">'\fontname{Arial}y_4'</span>,<span class="string">'Orientation'</span>,<span class="string">'horizontal'</span>);</span><br><span class="line">set(h1,<span class="string">'Linewidth'</span>,<span class="number">1.5</span>,<span class="string">'FontSize'</span>,<span class="number">10</span>,<span class="string">'FontWeight'</span>,<span class="string">'bold'</span>);</span><br><span class="line">set(h1,<span class="string">'position'</span>,[<span class="number">0.4</span>,<span class="number">0.9</span>,<span class="number">0.2</span>,<span class="number">0.1</span>]);<span class="comment">%legend位置</span></span><br><span class="line">set(h1,<span class="string">'Box'</span>,<span class="string">'off'</span>);</span><br></pre></td></tr></table></figure><p>当使用Matlab编写程序代码时，遇到行数较长的情况，如果不换行，将使得代码不易阅读，这时可以进行换行。但换行不是简单的用回车进行，需要增添 … ，表示连接下一行</p><h1 id="导出SCI论文能用的图"><a href="#导出SCI论文能用的图" class="headerlink" title="导出SCI论文能用的图"></a>导出SCI论文能用的图</h1><p>先在渲染处设置一下dpi，SCI论文都要求dpi300以上，再导出为tiff格式（SCI论文推荐用这个），这样得到的图片怎样放缩都不会模糊，用Latex写论文可导出为pdf或者eps格式</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/dpi设置.png" alt=""></p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/tiff格式.png" alt=""></p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/论文图.png" alt=""></p><p>也可以指令导出，<code>print(figure_handle,fileformat,filename)</code>，其中的三个参数：<br>a、figure_handle： 图形句柄<br>b、fileformat：单引号字符串，指定存储格式：<br>png格式： ‘-dpng’<br>jpeg格式: ‘-djpeg’<br>tiff格式： ‘-dtiff’<br>bmp格式: ‘-dbitmap’<br>gif格式：’-dgif’<br>emf无损格式：’-dmeta’<br>c、 filename：文件名，可带路径，不设置就存当前文件夹。</p>]]></content>
<categories>
<category> 论文 </category>
</categories>
<tags>
<tag> Matlab </tag>
</tags>
</entry>
<entry>
<title>博客搭建日记</title>
<link href="/posts/3d5b12da/"/>
<url>/posts/3d5b12da/</url>
<content type="html"><![CDATA[<h1 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h1><blockquote><ol><li>本博客使用Nodejs+Hexo搭建而成 </li><li>主题使用的是一款简单的卡片式UI设计主题Butterfly </li><li>博客托管在Github和码云</li><li>不知不觉，我的博客已经改动很多内容了，回想这一次次的修改，我觉得有必要详细记录一下博客搭建的过程，以防我不小心搞崩了博客…</li></ol></blockquote><h1 id="Hexo简介"><a href="#Hexo简介" class="headerlink" title="Hexo简介"></a>Hexo简介</h1><p>Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。</p><p><a href="https://hexo.io/zh-cn/">Hexo</a>搭建博客优点:</p><ul><li><strong>超快速度</strong>: Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染</li><li><strong>一键部署</strong>: 只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台，无需服务器与域名</li><li><strong>支持Markdown</strong>: 只要写md文件，就能生产blog</li><li><strong>插件和可扩展性</strong>： 超级多的插件，无所不能。留言板，聊天，阅读量统计，url短链接转化等等</li></ul><h1 id="环境配置"><a href="#环境配置" class="headerlink" title="环境配置"></a>环境配置</h1><ol><li>安装Git</li></ol><p> 安装好后，用<code>git --version</code>查看版本,本机Git版本v2.33.1.windows.1<br> 顺便说一下，windows在git安装完后，就可以直接使用Git Bash来敲命令行了，不用自带的cmd。<br> （Git Bash的复制<kbd>ctrl</kbd>+<kbd>ins</kbd>;粘贴<kbd>shift</kbd>+<kbd>ins</kbd>）</p><ol><li>Hexo是基于nodeJS编写的，所以需要安装一下NodeJs和里面的npm工具</li></ol><p> 安装好后，用<code>node -v</code>和<code>npm -v</code>检查一下有没有安装成功并查看版本,本机Nodejs版本v16.13.0,npm版本v8.1.0。<br> （npm安装好后需要设置下npm在安装全局模块时的路径和环境变量，防止安装模块的时把模块装到C盘，占用C盘的空间，或安装好hexo后无法使用）</p><ol><li>安装Hexo</li></ol><p> 前面Git和Nodejs安装好后，就可以安装Hexo了，你可以先创建一个文件夹Blog，然后到这个文件夹下Git Bash。<br> 输入命令<code>npm install -g hexo-cli</code>安装</p><h1 id="hexo常用基本指令"><a href="#hexo常用基本指令" class="headerlink" title="hexo常用基本指令"></a>hexo常用基本指令</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">hexo new "文章"</span><br><span class="line">hexo new post "文章"</span><br><span class="line">hexo new page "页面"</span><br><span class="line"></span><br><span class="line">hexo clean #清除缓存，每次重新部署时最好执行</span><br><span class="line">hexo g #生成静态页面</span><br><span class="line">hexo s #本地端口，默认4000运行</span><br><span class="line">hexo s -p 5000 # 端口5000</span><br><span class="line">hexo d #部署</span><br><span class="line">hexo deploy #部署</span><br></pre></td></tr></table></figure><p>为了方便，每次准备推送时,可以<code>hexo c && hexo g && hexo s</code>和<code>hexo c && hexo g && hexo d</code></p><h1 id="博客部署到Github"><a href="#博客部署到Github" class="headerlink" title="博客部署到Github"></a>博客部署到Github</h1><p> 以上环境配置好后，在Blog文件夹输入 hexo init 命令初始化博客，完成后，Blog文件夹目录下有：</p><ul><li>node_modules: 依赖包</li><li>public：存放生成的页面</li><li>scaffolds：生成文章的一些模板</li><li>source：用来存放你的文章</li><li>themes：主题</li><li>_config.yml: 博客的配置文件**</li></ul><p>等文件<br>然后<code>hexo c && hexo g && hexo s</code>后，就可以在浏览器输入localhost:4000就可以看到生成的博客了</p><p><img src="https://img-blog.csdnimg.cn/img_convert/84e7c09ee0395f0faac60fdc381cd526.png" alt="Hexo生成的博客"></p><p>在Github创建一个和你用户名相同的仓库，后面加.github.io，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是xxxx.github.io<br>建议建立一个gh-pages分支，并作为默认分支，以后生成的页面都将部署到该分支</p><p>然后将Hexo和GitHub关联起来，也就是将Hexo生成的页面部署到GitHub上，打开站点配置文件 _config.yml</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line"> type: git</span><br><span class="line"> repository: https://github.com/xxx/xxx.github.io.git #此处xxx为你Github的用户名</span><br><span class="line"> branch: gh-pages</span><br></pre></td></tr></table></figure><p>这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure><p>然后<code>hexo c && hexo g && hexo d</code>，过一会儿就可以在<code>http://yourname.github.io</code>这个网站看到你的博客了！<br>部署到Github经常会有超时错误且网站响应慢，部署到Gitee步骤类似<br>注意： 部署到Gitee要勾选强制使用HTTPS,每次部署后记得更新</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/部署到Gitee.png" alt="部署到Gitee"></p><p>双线部署：</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line"> type: git</span><br><span class="line"> repository: </span><br><span class="line"> github: git@github.com:yang-tian-hub/yang-tian-hub.github.io.git,gh-pages</span><br><span class="line"> gitee: https://gitee.com/yang-tian-hub/yang-tian-hub.git,gh-pages</span><br></pre></td></tr></table></figure><p>部署到 Github 和 Gitee 站长之家Ping检测对比:</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/github_ping检测.png" alt="github_ping检测"></p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/gitee_ping检测.png" alt="gitee_ping检测"></p><h1 id="关于域名"><a href="#关于域名" class="headerlink" title="关于域名"></a>关于域名</h1><p>如果部署到Gitee Pages不可以自定义域名，Gitee Pages Pro支持自定义域名，但因业务调整，Gitee Pages Pro暂时关闭个人用户购买入口</p><p>部署到Github，进入自己的域名控制台添加一条CNAME类型的解析记录</p><p><img src="https://images2.pianshen.com/286/3a/3a0733a0ae06a4ac04f905350c4a7c4e.png" alt="域名解析"></p><p>并在Github Pages页面上Custom domain处填写你的域名</p><p><img src="https://images4.pianshen.com/851/0b/0b239140210eb74cc5d49eea90b908bb.png" alt="填上域名"></p><p>以上搭建博客详细参照<a href="https://zhuanlan.zhihu.com/p/102592286">从零开始搭建个人博客（超详细）</a></p><h1 id="博客美化"><a href="#博客美化" class="headerlink" title="博客美化"></a>博客美化</h1><p>到上一步完成就可以在博客上写文章了</p><p>但是因为自带的主题并不好看，所以可以更换主题，常见主题的很多，例如Next，Ghost等。</p><p>蝴蝶主题是由大佬Jerry制作的，其简洁，具有现代风格，扩展强，配置简单明了，使用的人也不少，出了问题比较好求助。</p><p>我的配置过程主要参照于<a href="https://butterfly.js.org/posts/21cfbf15/">Butterfly帮助文档</a></p><p>主要进行了如下配置：</p><h2 id="创建标签，分类，音乐，相册，留言，友链，关于页面"><a href="#创建标签，分类，音乐，相册，留言，友链，关于页面" class="headerlink" title="创建标签，分类，音乐，相册，留言，友链，关于页面"></a>创建标签，分类，音乐，相册，留言，友链，关于页面</h2><h2 id="404页面配置"><a href="#404页面配置" class="headerlink" title="404页面配置"></a>404页面配置</h2><h2 id="更改网站资料，导航菜单"><a href="#更改网站资料，导航菜单" class="headerlink" title="更改网站资料，导航菜单"></a>更改网站资料，导航菜单</h2><p>获取网站 favicon.ico的三种方法:<br>1.直接在网站网址后面加favicon.ico<br>2.F12查看网页源代码<br>3.<a href="http://www.google.com/s2/favicons?domain=网站地址">http://www.google.com/s2/favicons?domain=网站地址</a></p><h2 id="社交图标设置"><a href="#社交图标设置" class="headerlink" title="社交图标设置"></a>社交图标设置</h2><p>这里引用了阿里图标，主要参照文章<a href="https://blog.csdn.net/qq_43740362/article/details/113796473">Hexo-使用阿里iconfont图标</a></p><p>发起QQ临时对话链接为<a href="tencent://message/?uin=2360051431&amp">tencent://message/?uin=2360051431&amp</a>,更改uin即可</p><h2 id="配置顶部图"><a href="#配置顶部图" class="headerlink" title="配置顶部图"></a>配置顶部图</h2><h2 id="配置文章封面"><a href="#配置文章封面" class="headerlink" title="配置文章封面"></a>配置文章封面</h2><h2 id="文章页相关配置"><a href="#文章页相关配置" class="headerlink" title="文章页相关配置"></a>文章页相关配置</h2><h2 id="文章页永久链接"><a href="#文章页永久链接" class="headerlink" title="文章页永久链接"></a>文章页永久链接</h2><p>参考文章<a href="https://ifibe.com/posts/cd6eb56d/">Hexo 的 SEO 优化 - 使用 abbrlink 设置永久链接为随机值</a></p><h2 id="头像配置"><a href="#头像配置" class="headerlink" title="头像配置"></a>头像配置</h2><h2 id="复制相关配置"><a href="#复制相关配置" class="headerlink" title="复制相关配置"></a>复制相关配置</h2><h2 id="Footer设置"><a href="#Footer设置" class="headerlink" title="Footer设置"></a>Footer设置</h2><p>这里加了页脚徽标，教程参照文章<a href="https://blog.imzjw.cn/posts/b74f504f/">关于我 Butterfly 主题的所有美化</a></p><h2 id="右下角按钮"><a href="#右下角按钮" class="headerlink" title="右下角按钮"></a>右下角按钮</h2><h2 id="侧边栏设置"><a href="#侧边栏设置" class="headerlink" title="侧边栏设置"></a>侧边栏设置</h2><h2 id="标签外挂：Gallery相册图库"><a href="#标签外挂：Gallery相册图库" class="headerlink" title="标签外挂：Gallery相册图库"></a>标签外挂：Gallery相册图库</h2><h2 id="评论配置"><a href="#评论配置" class="headerlink" title="评论配置"></a>评论配置</h2><p>这里进行了基于Valine和Twikoo的评论配置，参照文章<a href="https://zhuanlan.zhihu.com/p/347517840">Hexo博客接入Twikoo评论系统</a>和<a href="https://blog.csdn.net/qq_35117024/article/details/107248047">Hexo博客接入Valine评论系统配置博客评论邮件提醒</a></p><h2 id="本地搜索配置"><a href="#本地搜索配置" class="headerlink" title="本地搜索配置"></a>本地搜索配置</h2><h2 id="网站验证"><a href="#网站验证" class="headerlink" title="网站验证"></a>网站验证</h2><h2 id="美化-特效"><a href="#美化-特效" class="headerlink" title="美化/特效"></a>美化/特效</h2><h3 id="打字效果"><a href="#打字效果" class="headerlink" title="打字效果"></a>打字效果</h3><h3 id="背景特效"><a href="#背景特效" class="headerlink" title="背景特效"></a>背景特效</h3><h3 id="鼠标点击效果"><a href="#鼠标点击效果" class="headerlink" title="鼠标点击效果"></a>鼠标点击效果</h3><h3 id="网站副标题"><a href="#网站副标题" class="headerlink" title="网站副标题"></a>网站副标题</h3><h3 id="页面加载动画Preloader"><a href="#页面加载动画Preloader" class="headerlink" title="页面加载动画Preloader"></a>页面加载动画Preloader</h3><h2 id="字数统计"><a href="#字数统计" class="headerlink" title="字数统计"></a>字数统计</h2><h2 id="图片大图查看模式"><a href="#图片大图查看模式" class="headerlink" title="图片大图查看模式"></a>图片大图查看模式</h2><h2 id="音乐界面与全局吸底音乐配置"><a href="#音乐界面与全局吸底音乐配置" class="headerlink" title="音乐界面与全局吸底音乐配置"></a>音乐界面与全局吸底音乐配置</h2><p>参照文章<a href="https://butterfly.js.org/posts/507c070f/">Butterfly添加全局吸底Aplayer教程</a></p><h2 id="电影页面配置"><a href="#电影页面配置" class="headerlink" title="电影页面配置"></a>电影页面配置</h2><p>参照文章<a href="https://blog.csdn.net/weixin_58068682/article/details/116614109">Hexo博客技巧：爬取豆瓣数据生成电影页面</a><br>注意：当安装了hexo douban之后，就不能用hexo d了，因为hexo douban跟hexo deploy的前缀都是hexo d</p><h2 id="说说页面"><a href="#说说页面" class="headerlink" title="说说页面"></a>说说页面</h2><p>参考<a href="https://www.npmjs.com/package/hexo-butterfly-artitalk">hexo-butterfly-artitalk</a>和<a href="https://blog.csdn.net/Mikon_0703/article/details/112555627">Butterfly主题配置Artitalk</a></p><h2 id="提升博客访问速度"><a href="#提升博客访问速度" class="headerlink" title="提升博客访问速度"></a>提升博客访问速度</h2><p>参照<a href="https://amnesia-f.github.io/posts/241519a2/#%E6%BC%94%E7%A4%BA">Hexo 博客技巧：提升博客访问速度</a></p><h2 id="其他美化"><a href="#其他美化" class="headerlink" title="其他美化"></a>其他美化</h2><h3 id="樱花飘落背景"><a href="#樱花飘落背景" class="headerlink" title="樱花飘落背景"></a>樱花飘落背景</h3><p>参照文章<a href="https://blog.csdn.net/qq_43489474/article/details/106889352">hexo-butterfly美化1</a></p><h3 id="看板娘"><a href="#看板娘" class="headerlink" title="看板娘"></a>看板娘</h3><p>参照文章<a href="https://akilar.top/posts/5b8f515f/">Hexo 插件版看板娘</a></p><h3 id="留言界面信封"><a href="#留言界面信封" class="headerlink" title="留言界面信封"></a>留言界面信封</h3><p>参照文章<a href="https://blog.imzjw.cn/posts/b74f504f/">关于我 Butterfly 主题的所有美化</a></p><h3 id="滚动条"><a href="#滚动条" class="headerlink" title="滚动条"></a>滚动条</h3><h3 id="鼠标样式"><a href="#鼠标样式" class="headerlink" title="鼠标样式"></a>鼠标样式</h3><p>以上两条均参考文章<a href="https://www.cnblogs.com/antmoe/p/12846393.html">Hexo博客之butterfly主题优雅魔改系列(持续更新)</a></p><h3 id="添加天气小部件"><a href="#添加天气小部件" class="headerlink" title="添加天气小部件"></a>添加天气小部件</h3><p>参考文章<a href="https://sunguoqi.com/2021/09/01/weather/">Butterfly 主题添加天气小部件</a></p><h3 id="文章加密"><a href="#文章加密" class="headerlink" title="文章加密"></a>文章加密</h3><p>在Blog目录下<code>npm install hexo-blog-encrypt</code><br>在想要使用加密功能的Blog头部加上对应文字：<br><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">title: Hexo加密功能</span><br><span class="line">date: 2019-09-04 23:20:00 </span><br><span class="line">tags: [学习笔记,Hexo]</span><br><span class="line">categories: Hexo </span><br><span class="line">password: smile </span><br><span class="line">abstract: Welcome to my blog, enter password to read. </span><br><span class="line">message: 密码输入框上描述性内容</span><br></pre></td></tr></table></figure></p><h1 id="使用PicGo和Github搭建图床，并使用jsDelivr-CDN对Github图床进行加速"><a href="#使用PicGo和Github搭建图床，并使用jsDelivr-CDN对Github图床进行加速" class="headerlink" title="使用PicGo和Github搭建图床，并使用jsDelivr CDN对Github图床进行加速"></a>使用PicGo和Github搭建图床，并使用jsDelivr CDN对Github图床进行加速</h1><blockquote><p>什么是图床：图床一般是指储存图片的服务器，就相当于我们手机上的相册，不过他是在线的，而且是对大家开放的，大家都可以访问查看，但是编辑删除这些功能仅限于拥有者，就相当于用百度云分享的公开照片，你可以查看，也可以下载下来编辑，但是拥有权还是属于分享者。<br>我们写博客有很多图片需要插入，我们这些博客要保留在本地的时候可以预览到图片，但一旦把它发布到网上，这时候问题来了！发现图片上传失败，那是因为本地的图片都是存在本地的，Hexo平台不会自动给你上传，那这个时候就凸显出图床的重要性了。当然如果是直接在平台进行编辑，那就一点就不用担心了，基本平台都会自动给你上传到它自己的服务器。<br>有了图床，我们在本地写好博客之后，就能够任意复制到其他平台，不用担心图片丢失问题了。</p><p>jsDelivr 是国外的一家开源的公共CDN服务提供商，也是首个打通中国大陆（网宿公司运营）与海外的免费CDN服务。jsDelivr 有一个十分好用的功能——它可以加速 Github、npm、wordpress的文件。因此可以借Github 搭建一个免费、全球访问速度超快的图床。</p><p>PS: GitHub公开仓库大小为100GB，单个仓库限制1G容量,仓库超过1G后会有人工审核仓库内容，如果发现用来做图床～～～😏，轻则删库，重则封号，因此为了安全建议在1G之前就换个仓库；单个文件不能超过100M,有50M的文件,就会有邮件警告</p></blockquote><p>参照教程<a href="https://blog.csdn.net/DreamHome_S/article/details/105957616">使用 jsDelivr CDN 对 Github 图床进行加速，带给你如丝滑般的图片体验！</a></p><h1 id="一些关于Butetrfly主题美化的文章"><a href="#一些关于Butetrfly主题美化的文章" class="headerlink" title="一些关于Butetrfly主题美化的文章"></a>一些关于Butetrfly主题美化的文章</h1><p><a href="https://guole.fun/posts/butterfly-custom/">我的 Blog 美化日记 ——Hexo+Butterfly</a></p><p><a href="https://blog.justlovesmile.top/posts/6a260bf6.html">Hexo博客 | 如何让你的博客拥有星空背景和流星特效</a></p><p><a href="https://blog.justlovesmile.top/posts/c8972b63.html">必看 | Hexo博客搭建超级指南</a></p><h1 id="千里之行，始于足下"><a href="#千里之行，始于足下" class="headerlink" title="千里之行，始于足下"></a>千里之行，始于足下</h1><p>目前还有一个小bug待解决，音乐界面与全局冲突，我目前是解决不了… </p><p>有一点喜欢<a href="https://amnesia-f.github.io/">Amnesia’s blog</a>的主页循环播放视频，也有一点羡慕<a href="https://www.antmoe.com/love/">小康博客的相册</a></p><p align="center"><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/bqb.jpg" width="30%"></p><p>博客再好看还是要写文章啊，美化的尽头是默认，美化的本质是简洁…好好学习,不要玩花里胡哨的</p>]]></content>
<categories>
<category> 博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> Butterfly </tag>
</tags>
</entry>
<entry>
<title>加密文档测试</title>
<link href="/posts/c9238145/"/>
<url>/posts/c9238145/</url>
<content type="html"><![CDATA[<div class="hbe hbe-container" id="hexo-blog-encrypt" data-wpm="Oh, this is an invalid password. Check and try again, please." data-whm="OOPS, these decrypted content may changed, but you can still have a look."> <script id="hbeData" type="hbeData" data-hmacdigest="4a30f3ab0eca9de2e1dc4d45f3f0ee58df2885b7c5ee69e429da1b10adb8cb22">95e097afe1da7f606f39573f02772518db11b7c69dc214ad251ac3521bbfd0ebfc812a3fbf6215df6e68bd9dcd97b14e4f3f4f0074bea6b4b98deda4084240cc27bfbfb4ab9d90044b652a5d283c82ac1cc6cc743456b4de92c444211f473601263198b84c063696c55c266badb7c1f75e941e07f11ffa08a831220c673a02bfd3697d17c871ba482afdbf12b704e51f2319a00a65f189045fc45c24f22e4236ba4f45dc3c3e2ad8ef688c2ee4e638e36489b734e763a0cffc3de0858e70cdc0259051b0f2241da06e7bf3556637c3d7a4ca8fe5ddb79f4707a0fcf23998da10309ffb92fc1008a3e52ef59d234f6bba82c455e06f16352528a457790ab09e4fa93237ef1c8ef32d1a4792293a93866642daa637683f45e6926cbde6edd170b4b0b94f712183fed926ff14694ebf3650c06bbb3bc0dd70138e6f46e4da9fcf7460cef08dfc3a49474a4ddf814c140a559b1d2f1b9714f7a7ad0ab6ef4dc2cded91fbf9cef74f3720cf17c9523eba44fbb9fa5839b4c006a135687c5c855dac40d42564b42078ed412716495ee7c440875864cd4912e130fb97d1b08632c08cce6ca13944fb782d9811c8c5b4a624a12241ba215520c40cfc86ee8bb9b352fc939857f2ed8e83d1d02c6cd462db65624fcf1ced151e4a8f9d897f9a61bf4e974f9028d17549b27b223cf9cbd889d27ea42bc768f63b90f3112c83c34b8a264a9b54440bbc575c38c594d5a21880ea87344207acfe3195cd8c0acc881ddf975f68ac36a37606ed6af7fb3290980641c70b7b328743700c48d1e57db969f7c8b110ce2278ef4a8d7e97d2cd81c40220f67338544be777d8e04a4575a7a887016e0fb756074183442abc5c1bb93b9d869e083984183347e0c60a2b7b1e2d3adc388baef384e78c4d9807ad8e6291deb3b35356318f756544576464683e6327e4ebf2320c9cd4c5e9792f7d0d3e1ac8695aa47803ad5686b3ca89dcef679f5f348790c949c8f5c1d9a14144dafab72aeabf833bff72f93113c1d072c717d26a475b9d47db8d77ccbca4c1d700797fdc5786dccf5860f3708790f97f3860a869e9ba060110921744a98f403ff94ce9acd81b34fae50efae24a803ebc6938b1baa12a80a566fc46f78ae6786f25e28acf7748e63331c3da8dfce8e2896b8ce0b836125681ead82d8b1f59b4462a1e2c07c3271337536013a98cdf406da30606e68fc68cb7edb0e4ac095bf20bc2732a2df5e43318899a7c6d1c5bed27874015cc24c864f223c6d1b13265ecba4cd8a8143c91a61b41bddd8a1dc81c91830dd555873d4ea44197ff8fc22b4063d651fafe148a4a893ac5bcb145dc1c486dcee09f4d6f3b5faa1cbfddcfc9f3c0161bea71c045199bfec0ce8904557e697fba04964f43c37f6401aebcf3a84628b147af8203c31d9d837fa350254c575eeed67ff28313a288a06db2d1a03982d0fedbab271843a2a6b8a76d63d63b4bbd9ec141466f4d9b887b2d784b595c8dda698fe94eaf6026827516e821010792fefe96d0eeced5eb01fb5f7e6d030a0ca58f155f8d735055c93bd782a23f4f1c37818cc36d59b7a2687697aeb2697e49eacde96ac2ca19ca434f8f40ad24a318815ff965c0712a59a4b0d9d6bef1784324362f5443c9c5c222691203cdd1a8b49d5ba4a704633bbfa0e3de5e535a8b34d8594919688e2da904d09590cf8e13191b6d2dfc69da8723e86abca73c1eb5abe223b1e42d63c36f648ab17acfae0e40882267d1b33bbb651d9c6caea3ad097e0e765f2d2842944fe9e13fe41f4525f92a283eb0f46bf0a09ecb40a5abe63950ef41fbe5960e5039cb786464a96eba524315c01af5d3100d195968bb267265b50537bebb99f896cbbcec77b9cac88d20b07b0f90a8667b41c3326f63ca4a769206634e6bbfc8745ef07f67caf024964f65f3e446addcd3148e0366ee1f910c665774d5256f579cf66fd4ed176becd7270373caaa5dc7536c32aa3ff02567f24f5f766eb16166b4bc3925154d6d4daeecc36ffa551893a33a43aea136bb8ef908170e6d2e7ab025f5648490ade0b0041fef84a9e2138213ca4546f93797d7a308929d41c8d27526ef1feac4671f43c74c77e93190cda8fa66663933a9dfeeec1eee7b038b3f0a7a1d2260bf8fd519c2d8629beb645223afee360270db026290c343ab3e676b77626c41a5845973ea7454661ba90552802226868d9b29495f3439afa94b2ff9b336acbde35a4373ba82dcb102b3a14d0fbc2b1f4d8e434b7930cf86e9493dd3b966f32593e113907f2127407b30ed8aff6116b13418512a04f5dec39b1f40e04e59f56b5ca26e261478f5b1d064838f771b2985929287e669a5bf54be43e98e8c820f29ef9565eb7d2cea6e6836f50a4f5d82cca8c28c805d8520c4587a0d9c05848ecbce9d087b591333e20f43a8843f24bae9b3e811c95265ccaa4ec8354030bcad782dd2b4e309f131c669cea2c12814e764433f2e9aff87e1f2990a4ccd6edbe5a91b6fed5f86ddbd97eba41984dd0fcc53556b62886de72d6c9164259dd4e808e39b337e2021f4972ad097c168a9ada77578bbd9ca0a2a2ed5defe7026dcc3b21d9a9529934a104ce1dcc6ae363cef4ec748d799a7e74cd782fd498fe9a311eda672209c653523d73631437054abefced63e1ebb804b926d602899d753e7d4e98ecff8969bc49a3c0da645849e4514df1853ac6ea971cb70a4c9ce2ff98b29569d25b23bc853510ffbaf91f090408a20da502542980822a85cc1a46bc81e3ea6445f5613736efbd0ba63a2ec0107a1f25d34d755c72e830dd618b3dd60c486745909745877c01f6479d6c2ece099888f03e7a4c12f03c29c74fe9990766d372962caee8a334212a28bbe9ccd880e565fe58ad0f1d943000ac85102f261cf4f4514861987fd5c7aeaca56c0d84c9f8333424382cc9b7671c41cc14d3ceca0fd03264077d9784f5eee5088a8616bf1d8a007d8e185826e5fdd018c0e9ebc084a7df1687e9247dd76c12ec73ddc62c2bdbc68bbf1b071b9c0c979323abca3f55b22567650179f611697b410fc7a0ca98f644f34b072d23803d180f610c8a33525f392f17ad9130eee148d5958865007e79b22bd3c5cd210c95f826502e65d818f54</script> <div class="hbe hbe-content"> <div class="hbe hbe-input hbe-input-default"> <input class="hbe hbe-input-field hbe-input-field-default" type="password" id="hbePass"> <label class="hbe hbe-input-label hbe-input-label-default" for="hbePass"> <span class="hbe hbe-input-label-content hbe-input-label-content-default">本文档需要输入密码查看</span> </label> </div> </div></div><script data-pjax src="/lib/hbe.js"></script><link href="/css/hbe.style.css" rel="stylesheet" type="text/css">]]></content>
<categories>
<category> 博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> Butterfly </tag>
</tags>
</entry>
<entry>
<title>Git与Github</title>
<link href="/posts/84e79669/"/>
<url>/posts/84e79669/</url>
<content type="html"><![CDATA[<h1 id="Git与Github简介"><a href="#Git与Github简介" class="headerlink" title="Git与Github简介"></a>Git与Github简介</h1><p>Git是一个开源的分布式版本控制系统，Github是<del>全球最大的同性交友网站</del>基于Git的代码托管平台，就是一个平台上面有无数个Git仓库————Git版的百度云，承担存储远程仓库的作用。</p><h1 id="为什么需要版本控制工具"><a href="#为什么需要版本控制工具" class="headerlink" title="为什么需要版本控制工具"></a>为什么需要版本控制工具</h1><p>在大学的时候老师要求你交一个论文或大作业，但你不知道在老师的要求下你的版和最终版差了多少个兄弟姐妹</p><blockquote><p>初版.rar——>修改版.rar——>再次修改版.rar——>进阶版.rar——>最终版.rar——>真的最终版.rar<br>完成版.rar——>再改我是狗.rar——>cnm不想再改了.rar——>……</p></blockquote><p>那如果大作业是程序设计的话，你的代码可能前一秒还健步如飞，下一秒就当场去世了，就算程序员没对象，也总是会问自己到底我哪错了，版本控制的作用之一就是解决这些问题的，它可以帮助你管理不同的版本，并且可以随时回退到任意时刻。</p><p>版本控制的第二个作用是协同开发，Git可以自动合并代码，从而大大增加生产效率</p><h1 id="Git配置用户信息"><a href="#Git配置用户信息" class="headerlink" title="Git配置用户信息"></a>Git配置用户信息</h1><p>在本地配置用户信息</p><ol><li>配置内容：user.name 和 user.email</li><li>配置目的：Git用来记录谁做了什么事</li><li>配置方法：windows下打开Git Bash进行操作或直接在config文件里改，位置在C:\Users\你的用户名.gitconfig</li></ol><blockquote><p>git config #查看本机是否配置了个人信息<br>git config —global user.name “……” #定义全局的用户名<br>git config —global user.email “……” #定义全局的邮件地址<br>git config —list #查看配置信息</p></blockquote><h1 id="添加公钥到Github服务器"><a href="#添加公钥到Github服务器" class="headerlink" title="添加公钥到Github服务器"></a>添加公钥到Github服务器</h1><ol><li>配置目的: <code>pull</code>,<code>push</code>每次都要输入密码，相当的烦。使用SSH密钥，可以省去每次都输密码</li><li>生成SSH key方法：首先确认本地是否已经有该文件，确认C:\Users\你的用户名.ssh目录下是否有文件id_rsa和id_rsa.pub，如果没有通过以下方法生成</li></ol><p>运行<code>ssh-keygen -t rsa -C "你在github上注册的邮箱"</code>,最后在你的主目录中能看到这两个文件。<br>id_rsa是私钥不要轻易告诉别人，id_rsa.pub是公钥可放心告诉任何人</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/生成的SSH_key.png" alt="生成的SSH key"></p><p>添加公钥到Github服务器：copy本地id_rsa.pub的内容到Github，具体如图：</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/添加公钥到Github.png" alt="添加公钥到Github"></p><h1 id="Git工作流程"><a href="#Git工作流程" class="headerlink" title="Git工作流程"></a>Git工作流程</h1><p>下图展示了 Git 的工作流程，以及主要的命令对仓库的影响</p><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/Git工作流程.jpg" alt="Git工作流程"></p><blockquote><p>workspace 即工作区，逻辑上是本地计算机，还没添加到repository的状态；<br>staging area 即版本库中的stage，是暂存区。修改已经添加进repository，但还没有作为commit提交，类似于缓存；<br>local repository 即版本库中master那个地方。到这一步才算是成功生成一个新版本；<br>remote repository 则是远程仓库。用来将本地仓库上传到网络，可以用于备份、共享、合作。 </p></blockquote><h1 id="Git常用命令"><a href="#Git常用命令" class="headerlink" title="Git常用命令"></a>Git常用命令</h1><blockquote><h2 id="创建版本库"><a href="#创建版本库" class="headerlink" title="创建版本库"></a>创建版本库</h2><p><code>git clone <url></code>：从网络上某个地址拷贝仓库(repository)到本地<br><code>git init</code>：在本地的当前目录里初始化git仓库,会在当前目录生成一个隐藏的 .git 目录</p><h2 id="修改与提交"><a href="#修改与提交" class="headerlink" title="修改与提交"></a>修改与提交</h2><p><code>git status</code>: 查看当前仓库的状态<br><code>git diff</code>： 显示暂存区和工作区的差异<br><code>git add .</code>: 添加当前目录下的所有文件到暂存区<br><code>git add <file1><file2></code>: 添加一个或多个文件到暂存区<br><code>git mv <old> <new></code>: 文件改名<br><code>git rm <file></code>: 将文件从暂存区和工作区中删除<br><code>git rm --cached <file></code>: 把文件从暂存区域移除，但仍然保留在当前工作目录中<br><code>git commit -m "commit message"</code>: 提交暂存区到本地仓库中,提交信息最好能体现更改了什么</p><h2 id="查看提交历史"><a href="#查看提交历史" class="headerlink" title="查看提交历史"></a>查看提交历史</h2><p><code>git log</code>: 查看当前版本及之前的commit记录<br><code>git log -p <file></code>: 查看指定文件的提交历史<br><code>git blame <file></code>: 以列表形式查看指定文件的提交历史</p><h2 id="分支与标签"><a href="#分支与标签" class="headerlink" title="分支与标签"></a>分支与标签</h2><p><code>git branch</code>: 列出分支基本信息<br><code>git branch <new-branch></code>: 创建新分支<br><code>git branch -d <branch></code>: 删除分支<br><code>git checkout <branch/tag></code>: 切换到指定分支或标签<br><code>git tag</code>: 列出所有本地标签<br><code>git tag <tagname></code>: 基于最新提交创建标签<br><code>git tag -d <tagname></code>: 删除标签</p><h2 id="合并与衍合"><a href="#合并与衍合" class="headerlink" title="合并与衍合"></a>合并与衍合</h2><p><code>git merge <branch></code>: 合并指定分支到当前分支<br><code>git rebase <branch></code>: 衍合指定分支到当前分支</p><h2 id="远程操作"><a href="#远程操作" class="headerlink" title="远程操作"></a>远程操作</h2><p><code>git remote -v</code>: 查看所有远程版本库<br><code>git remote show <remote></code>: 显示某个远程仓库的信息<br><code>git remote add <shortname> <url></code>: 添加远程版本库<br><code>git fetch <remote></code>: 从远程库获取代码<br><code>git pull <remote> <branch></code>: 下载代码及快速合并<br><code>git push <remote> <branch></code>: 上传代码及快速合并<br><code>git push <remote> :<branch/tag></code>: 删除远程分支或标签<br><code>git push --tags</code>: 上传所有标签</p></blockquote>]]></content>
<categories>
<category> 学习 </category>
</categories>
<tags>
<tag> Git </tag>
<tag> Github </tag>
</tags>
</entry>
<entry>
<title>Markdown学习笔记</title>
<link href="/posts/cd41a811/"/>
<url>/posts/cd41a811/</url>
<content type="html"><</code></pre><ul><li>开头一个感叹号 !</li><li>接着一个方括号，里面放上图片的描述文本,不会显示出来,仅仅用于图片无法显示的时候</li><li>接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的 ‘title’ 属性的文字。</li></ul><p><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/快看这个小姐姐x.jpg" alt="快看这个小姐姐x"></p><h2 id="链接"><a href="#链接" class="headerlink" title="链接"></a>链接</h2><p>链接使用方法如下：</p><pre><code>[链接名称](链接地址)或<链接地址></code></pre><p>这是一个<a href="https://tool.lu/markdown/">Markdown<strong>在线编辑器</strong></a>,<br>这是一个Markdown教程<a href="https://www.runoob.com/markdown/md-tutorial.html">https://www.runoob.com/markdown/md-tutorial.html</a></p><h2 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h2><p>Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。语法格式如下:</p><pre><code>| 表头 | 表头 || ---- | ---- || 单元格 | 单元格 || 单元格 | 单元格 |</code></pre><p>以上代码显示结果如下：</p><div class="table-container"><table><thead><tr><th>表头</th><th>表头</th></tr></thead><tbody><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr></tbody></table></div><p>我们可以设置表格的对齐方式,实例如下：</p><pre><code>| 左对齐 | 右对齐 | 居中对齐 || :-----| ----: | :----: || 单元格 | 单元格 | 单元格 || 单元格 | 单元格 | 单元格 |</code></pre><p>以上代码显示结果如下：</p><div class="table-container"><table><thead><tr><th style="text-align:left">左对齐</th><th style="text-align:right">右对齐</th><th style="text-align:center">居中对齐</th></tr></thead><tbody><tr><td style="text-align:left">单元格</td><td style="text-align:right">单元格</td><td style="text-align:center">单元格</td></tr><tr><td style="text-align:left">单元格</td><td style="text-align:right">单元格</td><td style="text-align:center">单元格</td></tr></tbody></table></div><h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><p>如果是段落上的一个函数或片段的代码可以用反引号把它包起来（`），例如：<code>printf()</code>函数</p><p>代码区块使用 4 个空格或者一个制表符<kbd>TAB</kbd>。<br>也可以用 ``` 包裹一段代码，并指定一种语言（也可以不指定）：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"> alert(<span class="string">'RUNOOB'</span>);</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h2 id="支持Html元素"><a href="#支持Html元素" class="headerlink" title="支持Html元素"></a>支持Html元素</h2><ul><li><p><strong>键盘</strong> <code><kbd>测试一下</kbd></code><br> 效果：<kbd>测试一下</kbd></p></li><li><p><strong>加粗</strong> <code><s>测试一下</s></code><br> 效果：<s>测试一下</s></p></li><li><p><strong>斜体</strong> <code><i>测试一下</i></code><br> 效果：<i>测试一下</i></p></li><li><p><strong>换行</strong> <code>测试<br />一下</code><br> 效果：测试<br />一下</p></li><li><p><strong>标记</strong> <code><mark>测试一下</mark></code><br> 效果：<mark>测试一下</mark></p></li><li><p><strong>空格</strong> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;测试一下</code><br> 效果： 测试一下<br> 此分号为英文分号，Markdown不推荐使用此方法,在全角输入状态下直接使用空格键就行了</p></li><li><p><strong>删除线</strong> <code><s>测试一下</s></code><br> 效果：<s>测试一下</s></p></li><li><p><strong>下划线</strong> <code><u>测试一下</u></code><br> 效果：<u>测试一下</u></p></li><li><p><strong>字体增大</strong> <code><big>测试一下</big></code><br> 效果：<big>测试一下</big></p></li><li><p><strong>字体减小</strong> <code><small>测试一下</small></code><br> 效果：<small>测试一下</small></p></li><li><p><strong>文字上标</strong> <code>测试<sup>一下</sup></code><br> 效果：测试<sup>一下</sup></p></li><li><p><strong>文字下标</strong> <code>测试<sub>一下</sub></code><br> 效果：测试<sub>一下</sub></p></li><li><p><strong>右对齐</strong> <code><p align=right>测试一下</p></code><br> 效果： </p><p align=right>测试一下</p></li><li><p><strong>文字居中</strong> <code><center>测试一下</center></code><br> 效果： </p><center>测试一下</center></li><li><p><strong>图片居中</strong> <code><p align="center"><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/140158585091919.jpg" width="80%"></p></code><br> 效果： </p><p align="center"><img src="https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/140158585091919.jpg" width="80%"></p></li></ul><h2 id="注释"><a href="#注释" class="headerlink" title="注释"></a>注释</h2><ol><li><p>使用html标签<br><code><div style='display: none'>哈哈我是注释，不会在浏览器中显示。</div></code><br>你如果看不到下面的注释说明已经成功注释 </p><div style='display: none'>哈哈我是注释，不会在浏览器中显示。</div> </li><li><p>使用html注释<br><code><!--哈哈我是注释，不会在浏览器中显示。--></code><br>你如果看不到下面的注释说明已经成功注释 </p><!--哈哈我是注释，不会在浏览器中显示。--></li></ol><h1 id="嗯……听说你想看一看我这一段的源码？"><a href="#嗯……听说你想看一看我这一段的源码？" class="headerlink" title="嗯……听说你想看一看我这一段的源码？"></a>嗯……听说你想看一看我这一段的源码？</h1><figure class="highlight markdown"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br></pre></td><td class="code"><pre><span class="line"><span class="section"># Markdown是什么</span></span><br><span class="line"></span><br><span class="line"><span class="quote">> We believe that writing is about content, about what you want to say – not about fancy formatting.</span></span><br><span class="line"><span class="quote">></span></span><br><span class="line"><span class="quote">> 我们坚信写作写的是内容，所思所想，而不是花样格式。 — Ulysses for Mac</span></span><br><span class="line"></span><br><span class="line">Markdown是一种<span class="strong">**轻量级标记语言**</span>，文件后缀名.md, .markdown，允许人们使用易读易写的<span class="strong">**纯文本格式**</span>编写文档，然后转换成有效的<span class="strong">**XHTML（或者HTML）文档**</span>,也支持导出 WORD、PDF、图片等多种类型文件。当前许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。</span><br><span class="line"></span><br><span class="line"><span class="section"># Markdown语法</span></span><br><span class="line"><span class="section">## 标题</span></span><br><span class="line"></span><br><span class="line">使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。</span><br><span class="line"></span><br><span class="line"><span class="quote">> \# 一级标题</span></span><br><span class="line"><span class="quote">> \#\# 二级标题</span></span><br><span class="line"><span class="quote">> \#\#\# 三级标题</span></span><br><span class="line"><span class="quote">> \#\#\#\# 四级标题</span></span><br><span class="line"><span class="quote">> \#\#\#\#\# 五级标题</span></span><br><span class="line"><span class="quote">> \#\#\#\#\#\# 六级标题</span></span><br><span class="line"></span><br><span class="line"><span class="section">## 段落</span></span><br><span class="line"></span><br><span class="line">Markdown 段落没有特殊的格式，直接编写文字就好，<span class="strong">**段落的换行是使用两个以上空格加上回车或在段落后面使用一个空行**</span>。</span><br><span class="line"></span><br><span class="line"><span class="section">## 字体</span></span><br><span class="line"></span><br><span class="line">Markdown的正文有不少可以使用的标记，比如说<span class="strong">**加粗**</span>和<span class="emphasis">*斜体*</span>。</span><br><span class="line">如果你愿意，当然不是不可以<span class="strong">**<span class="emphasis">*两个一起啦<span class="strong">**<span class="emphasis">*</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">当然了，还有另一种标记呢！~~文字还可以加删除线喔~~√</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">下划线可以通过 HTML 的< u >标签来实现：<span class="xml"><span class="tag"><<span class="name">u</span>></span></span>这句话是要带下划线的文本<span class="xml"><span class="tag"></<span class="name">u</span>></span></span></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">## 脚注</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">脚注是对文本的补充说明。</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">Markdown 脚注的格式如下:</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">> [^要注明的文本]</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">## 分割线</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">可以在一行中用三个以上的星号、减号、底线来建立一个分隔线，行内不能有其他东西。你也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线：</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">> \*</span>\<span class="emphasis">*\*</span></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">> </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">> \<span class="emphasis">* \*</span> \<span class="emphasis">*</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">> \*</span>\<span class="emphasis">*\*</span>\<span class="emphasis">*\*</span></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">> \- \- \-</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">> \-\-\-\-\-</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">显示效果如下所示：</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">---</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">## 列表</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">Markdown 支持有序列表和无序列表。</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">无序列表使用星号(<span class="emphasis">*)、加号(+)或是减号(-)作为列表标记，这些标记后面要添加一个空格，然后再填写内容：</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">*</span> 第一项</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="emphasis">* 第二项</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">*</span> 第三项</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">有序列表使用数字并加上.号来表示，如：</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">1. 第一项</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">2. 第二项</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">3. 第三项</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">列表嵌套只需在子列表中的选项前面添加四个空格即可：</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">1. 第一项：</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> - 第一项嵌套的第一个元素</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> - 第一项嵌套的第二个元素</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">2. 第二项：</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> - 第二项嵌套的第一个元素</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> - 第二项嵌套的第二个元素</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">## 引用或区块</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">开头使用 > 符号 ，然后后面紧跟一个空格符号</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">> 引用的文字是这样放进来的。</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">这个标记有一个特点，既可以每一行加一个，也可以一次管很多行，就像这样。</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">当然啦，如果一直这样没完没了下去也不好。怎么办呢？中间空一行就好了√</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">> 多层嵌套的话，就像这样。</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">> > 一层，又一层。</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">> > >一层，一层，又一层</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">如果要终止，依然需要多空一行。【摊手</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进。</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">## 图片</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">Markdown 图片语法格式如下：</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> ![<span class="string">alt 属性文本</span>](<span class="link">图片地址</span>)</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> ![<span class="string">alt 属性文本</span>](<span class="link">图片地址 "可选标题"</span>)</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="emphasis">* 开头一个感叹号 !</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">*</span> 接着一个方括号，里面放上图片的描述文本,不会显示出来,仅仅用于图片无法显示的时候</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="emphasis">* 接着一个普通括号，里面放上图片的网址，最后还可以用引号包住并加上选择性的 'title' 属性的文字。</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">![<span class="string">快看这个小姐姐x</span>](<span class="link">https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/快看这个小姐姐x.jpg</span>)</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">## 链接</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">链接使用方法如下：</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> [<span class="string">链接名称</span>](<span class="link">链接地址</span>)</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> 或</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> <链接地址></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">这是一个[<span class="string">Markdown**在线编辑器**</span>](<span class="link">https://tool.lu/markdown/</span>),</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">这是一个Markdown教程<span class="xml"><https://www.runoob.com/markdown/md-tutorial.html></span></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">## 表格</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">Markdown 制作表格使用 | 来分隔不同的单元格，使用 - 来分隔表头和其他行。语法格式如下:</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> | 表头 | 表头 |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> | ---- | ---- |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> | 单元格 | 单元格 |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> | 单元格 | 单元格 |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">以上代码显示结果如下：</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">| 表头 | 表头 |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">| ---- | ---- |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">| 单元格 | 单元格 |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">| 单元格 | 单元格 |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">我们可以设置表格的对齐方式,实例如下：</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> | 左对齐 | 右对齐 | 居中对齐 |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> | :-----| ----: | :----: |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> | 单元格 | 单元格 | 单元格 |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> | 单元格 | 单元格 | 单元格 |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">以上代码显示结果如下：</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">| 左对齐 | 右对齐 | 居中对齐 |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">| :-----| ----: | :----: |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">| 单元格 | 单元格 | 单元格 |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">| 单元格 | 单元格 | 单元格 |</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">## 代码</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">如果是段落上的一个函数或片段的代码可以用反引号把它包起来（\`），例如：`printf()`函数</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">代码区块使用 4 个空格或者一个制表符<span class="xml"><span class="tag"><<span class="name">kbd</span>></span></span>TAB<span class="xml"><span class="tag"></<span class="name">kbd</span>></span></span>。</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">也可以用 ``` 包裹一段代码，并指定一种语言（也可以不指定）：</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> javascript</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> $(document).ready(function () {</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> alert('RUNOOB');</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> });</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">## 支持Html元素</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">*</span> **</span>键盘<span class="strong">** `<span class="xml"><span class="tag"><<span class="name">kbd</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">kbd</span>></span></span>` </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> 效果：<span class="xml"><span class="tag"><<span class="name">kbd</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">kbd</span>></span></span></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="emphasis">* <span class="strong">**加粗**</span> `<span class="xml"><span class="tag"><<span class="name">s</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">s</span>></span></span>` </span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> 效果：<span class="xml"><span class="tag"><<span class="name">s</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">s</span>></span></span></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">*</span> **</span>斜体<span class="strong">** `<span class="xml"><span class="tag"><<span class="name">i</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">i</span>></span></span>` </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> 效果：<span class="xml"><span class="tag"><<span class="name">i</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">i</span>></span></span></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="emphasis">* <span class="strong">**换行**</span> `测试<span class="xml"><span class="tag"><<span class="name">br</span> /></span></span>一下` </span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> 效果：测试<span class="xml"><span class="tag"><<span class="name">br</span> /></span></span>一下</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">*</span> **</span>标记<span class="strong">** `<span class="xml"><span class="tag"><<span class="name">mark</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">mark</span>></span></span>` </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> 效果：<span class="xml"><span class="tag"><<span class="name">mark</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">mark</span>></span></span></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="emphasis">* <span class="strong">**空格**</span> `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;测试一下` </span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> 效果：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;测试一下 </span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> 此分号为英文分号，Markdown不推荐使用此方法,在全角输入状态下直接使用空格键就行了</span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">*</span> **</span>删除线<span class="strong">** `<span class="xml"><span class="tag"><<span class="name">s</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">s</span>></span></span>` </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> 效果：<span class="xml"><span class="tag"><<span class="name">s</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">s</span>></span></span></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="emphasis">* <span class="strong">**下划线**</span> `<span class="xml"><span class="tag"><<span class="name">u</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">u</span>></span></span>` </span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> 效果：<span class="xml"><span class="tag"><<span class="name">u</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">u</span>></span></span></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">*</span> **</span>字体增大<span class="strong">** `<span class="xml"><span class="tag"><<span class="name">big</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">big</span>></span></span>` </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> 效果：<span class="xml"><span class="tag"><<span class="name">big</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">big</span>></span></span></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="emphasis">* <span class="strong">**字体减小**</span> `<span class="xml"><span class="tag"><<span class="name">small</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">small</span>></span></span>` </span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> 效果：<span class="xml"><span class="tag"><<span class="name">small</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">small</span>></span></span></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">*</span> **</span>文字上标<span class="strong">** `测试<span class="xml"><span class="tag"><<span class="name">sup</span>></span></span>一下<span class="xml"><span class="tag"></<span class="name">sup</span>></span></span>` </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> 效果：测试<span class="xml"><span class="tag"><<span class="name">sup</span>></span></span>一下<span class="xml"><span class="tag"></<span class="name">sup</span>></span></span></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="emphasis">* <span class="strong">**文字下标**</span> `测试<span class="xml"><span class="tag"><<span class="name">sub</span>></span></span>一下<span class="xml"><span class="tag"></<span class="name">sub</span>></span></span>` </span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> 效果：测试<span class="xml"><span class="tag"><<span class="name">sub</span>></span></span>一下<span class="xml"><span class="tag"></<span class="name">sub</span>></span></span></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">*</span> **</span>右对齐<span class="strong">** `<span class="xml"><span class="tag"><<span class="name">p</span> <span class="attr">align</span>=<span class="string">right</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">p</span>></span></span>` </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> 效果： </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="xml"><span class="tag"><<span class="name">p</span> <span class="attr">align</span>=<span class="string">right</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">p</span>></span></span></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="emphasis">* <span class="strong">**文字居中**</span> `<span class="xml"><span class="tag"><<span class="name">center</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">center</span>></span></span>` </span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"> 效果： </span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"><span class="xml"><span class="tag"><<span class="name">center</span>></span></span>测试一下<span class="xml"><span class="tag"></<span class="name">center</span>></span></span></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span></span><br><span class="line"><span class="emphasis"><span class="strong"><span class="emphasis"><span class="strong">*</span> **</span>图片居中<span class="strong">** `<span class="xml"><span class="tag"><<span class="name">p</span> <span class="attr">align</span>=<span class="string">"center"</span>></span></span><span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/140158585091919.jpg"</span> <span class="attr">width</span>=<span class="string">"80%"</span>></span></span><span class="xml"><span class="tag"></<span class="name">p</span>></span></span>` </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"> 效果： </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="xml"><span class="tag"><<span class="name">p</span> <span class="attr">align</span>=<span class="string">"center"</span>></span></span><span class="xml"><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/gh/yang-tian-hub/PictureBed/140158585091919.jpg"</span> <span class="attr">width</span>=<span class="string">"80%"</span>></span></span><span class="xml"><span class="tag"></<span class="name">p</span>></span></span></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">## 注释</span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">1. 使用html标签 </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">`<span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">'display: none'</span>></span></span>哈哈我是注释，不会在浏览器中显示。<span class="xml"><span class="tag"></<span class="name">div</span>></span></span>` </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">你如果看不到下面的注释说明已经成功注释 </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><span class="xml"><span class="tag"><<span class="name">div</span> <span class="attr">style</span>=<span class="string">'display: none'</span>></span></span>哈哈我是注释，不会在浏览器中显示。<span class="xml"><span class="tag"></<span class="name">div</span>></span></span> </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"></span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">2. 使用html注释 </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">`<!--哈哈我是注释，不会在浏览器中显示。-->` </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong">你如果看不到下面的注释说明已经成功注释 </span></span></span></span><br><span class="line"><span class="strong"><span class="emphasis"><span class="strong"><!--哈哈我是注释，不会在浏览器中显示。--></span></span></span></span><br></pre></td></tr></table></figure>]]></content>
<categories>
<category> 学习 </category>
</categories>
<tags>
<tag> Markdown </tag>
</tags>
</entry>
</search>