-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathatom.xml
193 lines (103 loc) · 127 KB
/
atom.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
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>欢迎来到剃蛙铽</title>
<link href="http://example.com/atom.xml" rel="self"/>
<link href="http://example.com/"/>
<updated>2023-09-23T03:01:01.223Z</updated>
<id>http://example.com/</id>
<author>
<name>魔皇地狱</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>测试</title>
<link href="http://example.com/2023/09/23/%E6%B5%8B%E8%AF%95/"/>
<id>http://example.com/2023/09/23/%E6%B5%8B%E8%AF%95/</id>
<published>2023-09-23T01:41:21.000Z</published>
<updated>2023-09-23T03:01:01.223Z</updated>
<content type="html"><![CDATA[<script src="/js/sakura.js"></script><script src="/js/fairyDustCursor.js"></script>]]></content>
<summary type="html"><script src="/js/sakura.js"></script>
<script src="/js/fairyDustCursor.js"></script></summary>
</entry>
<entry>
<title>博客报错的一些问题</title>
<link href="http://example.com/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/"/>
<id>http://example.com/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/</id>
<published>2023-09-22T23:40:27.644Z</published>
<updated>2023-09-23T01:40:57.026Z</updated>
<content type="html"><![CDATA[<h1 id="Hexo-d部署报错之spawn-failed的解决方案"><a href="#Hexo-d部署报错之spawn-failed的解决方案" class="headerlink" title="Hexo d部署报错之spawn failed的解决方案"></a>Hexo d部署报错之spawn failed的解决方案</h1><p>这是我遇到的并且解决掉的问题有遇到一样的可以参考下</p><span id="more"></span><p>关于Hexo部署的时候报错导致无法推送到github估计是很多小伙伴第一次接触Hexo框架编写博客的常见问题, 下面介绍两种解决方案.</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/fsRDw1AS2VpO35o.png"></p><h2 id="解决方案-一"><a href="#解决方案-一" class="headerlink" title="解决方案(一)"></a>解决方案(一)</h2><ol><li>在博客文件夹(通常是<strong>\blog</strong>)中删除时 <strong>.deploy_git</strong> 文件</li><li>命令行(terminal)[不推荐使用<strong>cmd</strong>, 使用 <strong>git bash</strong> 等] 中输入 <code>git config --global core.autocrlf false</code>把git加入系统环境变量</li><li>重新执行<code>hexo c</code> <code>hexo g</code> <code>hexo d</code></li></ol><p>上Google百度一查大部分都是这种方法, xdm可以自己试试看万一成了呢. 但我下面推荐另一种可能的解决方案</p><h2 id="解决方案-二"><a href="#解决方案-二" class="headerlink" title="解决方案(二)"></a>解决方案(二)</h2><ol><li><p>首先用文本编辑器(我使用的是Notepad++)打开博客文件夹(通常是<strong>\blog</strong>)中的 <strong>_config.yml</strong> 配置文件</p></li><li><p>修改配置文件中的<strong>repo</strong></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><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"># Deployment</span><br><span class="line">## Docs: https://hexo.io/docs/one-command-deployment</span><br><span class="line">deploy:</span><br><span class="line"> type: git</span><br><span class="line"> repo:https://github.com/YourName/YourName.github.io.git(不要使用这个)</span><br><span class="line"> [email protected]:YourName/YourName.github.io.git(用这个)</span><br><span class="line"> branch: master</span><br><span class="line">1234567</span><br></pre></td></tr></table></figure></li><li><p>重新执行<code>hexo c</code> <code>hexo g</code> <code>hexo d</code></p></li></ol><p>这样就大功告成啦, 很简单吧, 继续写你的博客吧!</p><h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><p><a href="https://blog.zhheo.com/p/128998ac.html">https://blog.zhheo.com/p/128998ac.html</a></p><p><a href="https://blog.csdn.net/njc_sec/article/details/89021083">https://blog.csdn.net/njc_sec/article/details/89021083</a></p><h1 id="Hexo-添加背景图片并自适应"><a href="#Hexo-添加背景图片并自适应" class="headerlink" title="Hexo 添加背景图片并自适应"></a>Hexo 添加背景图片并自适应</h1><ol><li>在站点配置文件夹<code>source/images/</code>放入你的<strong>背景图片</strong></li><li>然后修改主题文件夹<code>themes/source/css/_custom/custom.styl</code><br><strong>PS:</strong> 这个文件是存放用户自定义css样式的<br>在<code>custom.styl</code>开头加入如下的代码</li></ol><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></pre></td><td class="code"><pre><span class="line">body {</span><br><span class="line"> background:url(/images/background.jpg);</span><br><span class="line"> background-repeat: no-repeat;</span><br><span class="line"> background-attachment:fixed;</span><br><span class="line"> background-position:50% 50%;</span><br><span class="line"> background-size: cover;</span><br><span class="line"> -webkit-background-size: cover;</span><br><span class="line"> -o-background-size: cover;</span><br><span class="line"> -moz-background-size: cover;</span><br><span class="line"> -ms-background-size: cover;</span><br><span class="line"></span><br><span class="line"> /*这是设置底部文字, 看个人需要修改*/</span><br><span class="line"> #footer > div > div {</span><br><span class="line"> color:#eee;</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h1 id="hexo博客如何插入图片"><a href="#hexo博客如何插入图片" class="headerlink" title="hexo博客如何插入图片"></a>hexo博客如何插入图片</h1><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">title: hexo博客如何插入图片</span><br></pre></td></tr></table></figure><p>Hexo是一个静态的博客网站生成器，生成一个博客只需要分分钟的时间就能搞定。</p><p>Hexo的博文是支持Markdown格式的，发表一篇文章只需要简简单单的几个命令。</p><p><code>hexo new '文章'</code>就会生成一个名为’文章’的md文件。</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/v2-430494922ffd9d3e40aea0cb0b7fe98f_720w.webp"></p><p>在图中位置添加描述，分类以及标签，有利于搜索分类。</p><h2 id="如何向hexo博客中插入图片"><a href="#如何向hexo博客中插入图片" class="headerlink" title="如何向hexo博客中插入图片"></a><strong>如何向hexo博客中插入图片</strong></h2><p>众所周知，在md文件中插入图片的语法为<code>![]()</code>。</p><p>其中<strong>方括号</strong>是图片描述，<strong>圆括号</strong>是图片路径。</p><p>一般来说有三种图片路径，分别是<strong>相对路径，绝对路径和网络路径</strong>。</p><p>所谓的网络路径就是直接引用网上的图片，直接复制图片地址，放在圆括号中就完事了。</p><p>这种方式十分的方便，但是也存在一定的问题：</p><ul><li>图片失效导致无法加载；</li><li>打开网页后要再请求加载图片；</li><li>原网站限制，如微信公众号的图片会变得不可见等。</li></ul><p>这种方式算是有利有弊。</p><p>绝对路径是图片在计算机中的绝对位置，相对路径是相对于当前文件的路径。</p><p>由于我们的博客是要部署在网站上，部署后会生成新的文件目录，所以我们选择使用相对路径的方式。</p><p>在hexo中使用<strong>文章资源文件夹</strong>需要在<code>config.yaml</code>文件中更改一下配置：</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">post_asset_folder:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>当该配置被应用后，使用<code>hexo new</code>命令创建新文章时，会生成相同名字的文件夹，也就是文章资源文件夹。</p><blockquote><p>由于项目会生成新的文件目录，同时会解析Markdown中的图片路径，会导致一个问题。<br>如在一个文件目录下，博客名为<code>1.md</code>，相应的存在一个<code>1</code>文件夹存放图片<code>image.jpg</code>。<br>在Typora编辑器中，普通的md文件使用<code></code>能在编辑器中正常显示图片。<br>在hexo中，按理说应该是使用<code></code>，但网页中却无法正常显示。<br>此时应该使用这样的方式来引入图片：</p></blockquote><p>虽然可以正常引用图片了，但是这种引用图片的方式只有一句话能形容，wtf。</p><h2 id="图片插件"><a href="#图片插件" class="headerlink" title="图片插件"></a><strong>图片插件</strong></h2><p>插件<a href="https://github.com/hexojs/hexo-renderer-marked">hexo-renderer-marked</a>解决了这个问题。可以只用<code>npm install hexo-renderer-marked</code>命令直接安装，之后在<code>config.yaml</code>中更改配置如下：</p><figure class="highlight yaml"><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 class="attr">post_asset_folder:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">marked:</span></span><br><span class="line"> <span class="attr">prependRoot:</span> <span class="literal">true</span></span><br><span class="line"> <span class="attr">postAsset:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>之后就可以在使用<code></code>的方式愉快的插入图片了。</p><p>我们做了这么多都是为了方便，那么为什么不再方便一点呢。</p><h2 id="hexo与Typora的完美结合"><a href="#hexo与Typora的完美结合" class="headerlink" title="hexo与Typora的完美结合"></a><strong>hexo与Typora的完美结合</strong></h2><p>上述是从文章资源文件夹中引用图片，前提是<strong>先将图片放入到文章资源文件夹</strong>，如果图片数量众多的话，一张一张的放很影响效率。但是不用怕，我们有很方便的解决方法。</p><p><strong>Typora</strong>是我非常喜欢的Markdown文本编辑器，在之前的文章中也介绍过一点。</p><p>Typora对于插入图片的支持做得非常好，在<code>文件->偏好设置</code>或者直接<code><C-,></code>进入设置。</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/v2-52220b2dba6901ee2181b72951d25a7b_720w.webp"></p><p>新版本可能为<img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/image-20230923075031026.png"></p><p>使用该配置后，可以直接复制网页中的图片地址，粘贴到Typora中后，会直接复制该图片到文章资源文件夹，同时自动更改路径。</p><p>如复制网络路径的图片<code>https://...../image.jpg</code>粘贴到Typora中叫<code>文章名</code>的文章后，图片会自动变为<code></code>。</p><p>但我们知道部署后，文件路径是不同的，所以当我们插入完所有的图片后，我们还需要删除每个图片路径中的<code>文件名/</code>。不慌，也很简单。</p><p>在Typora编辑器中，使用<code><C-f></code>快捷键，将所有的<code>文章名/</code>替换为空即可删除。</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/v2-9202796d27f4659d96ff13b11e6808c1_720w.png" alt="img"></p><p>然后再将博客上传，图片就会随着文章一起打包。在网页中就可以看到正常显示的图片，大功告成。</p><p>————-本地预览不显示图片的问题—————-</p><p>在typora的设置中选择图片工具，为文章设置一个图片根目录。设置方式如下，之后选中存放图片的目录即可，根据不同版本的typora该设置项可以能在不能的位置。</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/v2-8d28ac51aedad913907c45b4907d325f_720w.webp"></p><p>格式 -> 图片工具 -> 设置图片根目录</p><p>————再更————</p><p>为了方便，可以在<code>scaffolds -> post</code>中添加如下设置。</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">typora-root-url:</span> {{ <span class="string">title</span> }}</span><br></pre></td></tr></table></figure><p>这样每次执行hexo new命令新建文章的时候，会在Front Matter中自动添加该配置，如下：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">typora-root-url: hexo图片显示问题</span><br></pre></td></tr></table></figure><p>至此，在本地和服务器的图片都能正常预览。</p><h1 id="Markdown-编辑器-Typora-永久激活"><a href="#Markdown-编辑器-Typora-永久激活" class="headerlink" title="Markdown 编辑器 Typora 永久激活"></a>Markdown 编辑器 Typora 永久激活</h1><h2 id="Typora-介绍："><a href="#Typora-介绍：" class="headerlink" title="Typora 介绍："></a>Typora 介绍：</h2><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">复制代码一款 Markdown 编辑器和阅读器，之前是免费的， 现在收费了，看网上有些是使用dll替换破解的，这里记录一下修改代码破解的方式。</span><br></pre></td></tr></table></figure><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/ffddd9cf50dc4105aee8d10955d98181tplv-k3u1fbpfcp-zoom-in-crop-mark1512000.webp"></p><h2 id="教程"><a href="#教程" class="headerlink" title="教程"></a>教程</h2><h3 id="1-官网下载安装"><a href="#1-官网下载安装" class="headerlink" title="1.官网下载安装"></a>1.官网下载安装</h3><figure class="highlight arduino"><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">arduino</span><br><span class="line">复制代码https:<span class="comment">//www.typoraio.cn/</span></span><br></pre></td></tr></table></figure><h3 id="2-不运行软件的情况下，进入安装目录打开-LicenseIndex-180dd4c7-5c394f9a-chunk-js-文件"><a href="#2-不运行软件的情况下，进入安装目录打开-LicenseIndex-180dd4c7-5c394f9a-chunk-js-文件" class="headerlink" title="2.不运行软件的情况下，进入安装目录打开 LicenseIndex.180dd4c7.5c394f9a.chunk.js 文件"></a>2.不运行软件的情况下，进入安装目录打开 LicenseIndex.180dd4c7.5c394f9a.chunk.js 文件</h3><figure class="highlight arduino"><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">arduino</span><br><span class="line">复制代码安装盘符(默认C盘):\Typora\resources\page-dist\<span class="type">static</span>\js\LicenseIndex<span class="number">.180</span>dd4c7<span class="number">.5</span>c394f9a.chunk.js</span><br></pre></td></tr></table></figure><h3 id="3-搜索关键代码e-hasActivated-”true”"><a href="#3-搜索关键代码e-hasActivated-”true”" class="headerlink" title="3.搜索关键代码e.hasActivated=”true”"></a>3.搜索关键代码e.hasActivated=”true”</h3><figure class="highlight ini"><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">1.将搜索到的位置的【<span class="attr">e.hasActivated</span>=<span class="string">"true"</span>==】 后面添加 【<span class="string">"true"</span>,】</span><br><span class="line">2.即：<span class="attr">e.hasActivated</span>=<span class="string">"true"</span>==<span class="string">"true"</span>,</span><br></pre></td></tr></table></figure><h3 id="4-保存后运行软件"><a href="#4-保存后运行软件" class="headerlink" title="4.保存后运行软件"></a>4.保存后运行软件</h3><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/a93202d217e047468761d18685253081tplv-k3u1fbpfcp-zoom-in-crop-mark1512000.webp"></p><h3 id="缺点："><a href="#缺点：" class="headerlink" title="缺点："></a>缺点：</h3><p>每次打开都会弹出激活并且底栏会显示未激活</p><h1 id="Hexo文章中图片点击实现全屏查看"><a href="#Hexo文章中图片点击实现全屏查看" class="headerlink" title="Hexo文章中图片点击实现全屏查看"></a>Hexo文章中图片点击实现全屏查看</h1><p>这种方法使用了图片浏览放大功能fancybox插件</p><h3 id="切换到lib目录"><a href="#切换到lib目录" class="headerlink" title="切换到lib目录"></a>切换到lib目录</h3><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cd next/source/lib</span><br></pre></td></tr></table></figure><h3 id="下载插件"><a href="#下载插件" class="headerlink" title="下载插件"></a>下载插件</h3><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https:<span class="comment">//github.com/theme-next/theme-next-fancybox3 fancybox</span></span><br></pre></td></tr></table></figure><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/format,png.png" alt="img"></p><h3 id="更改主题配置文件"><a href="#更改主题配置文件" class="headerlink" title="更改主题配置文件"></a>更改主题配置文件</h3><p>更改next/_config.yml文件</p><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fancybox: <span class="literal">true</span></span><br></pre></td></tr></table></figure><p>一定要注意fancybox是否开对</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/image-20230923080102625.png" alt="image-20230923080102625"></p><h3 id="测试效果"><a href="#测试效果" class="headerlink" title="测试效果"></a>测试效果</h3><p>部署hexo s之后点击图片，如图：</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E6%8A%A5%E9%94%99%E7%9A%84%E4%B8%80%E4%BA%9B%E9%97%AE%E9%A2%98/format,png-1695427100497-34.png" alt="img"></p><p>编辑于2023/09/23</p>]]></content>
<summary type="html"><h1 id="Hexo-d部署报错之spawn-failed的解决方案"><a href="#Hexo-d部署报错之spawn-failed的解决方案" class="headerlink" title="Hexo d部署报错之spawn failed的解决方案"></a>Hexo d部署报错之spawn failed的解决方案</h1><p>这是我遇到的并且解决掉的问题有遇到一样的可以参考下</p></summary>
</entry>
<entry>
<title>第八篇博客</title>
<link href="http://example.com/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/"/>
<id>http://example.com/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/</id>
<published>2023-09-22T23:34:47.492Z</published>
<updated>2023-09-22T23:39:27.451Z</updated>
<content type="html"><![CDATA[<h1 id="个人博客第8篇——优化主题"><a href="#个人博客第8篇——优化主题" class="headerlink" title="个人博客第8篇——优化主题"></a>个人博客第8篇——优化主题</h1><p>给博客进行一些美化</p><span id="more"></span><h2 id="目录："><a href="#目录：" class="headerlink" title="目录："></a>目录：</h2><ol><li>设置菜单</li><li>设置建站时间</li><li>设置头像</li><li>网站图标设置</li><li>设置动态背景</li><li>设置背景图片</li><li>主页文章添加阴影效果</li><li>添加顶部加载条</li><li>设置预览摘要</li><li>设置侧边栏显示效果</li><li>侧边栏推荐阅读</li><li>添加社交链接</li><li>设置博文内链接为蓝色</li><li>显示文章字数和阅读时长</li><li>显示站点文章总字数（另一种统计站点总字数的方法）</li><li>设置文章末尾”本文结束”标记</li><li>文章末尾添加版权说明</li><li>添加访问量统计</li><li>添加评论功能</li><li>添加Fork me on Github</li><li>安装Markdown编译器</li><li>安装RSS插件</li><li>项目主页添加README</li><li>忽略要编译的文件</li><li>代码块样式自定义</li><li>支持mathjax公式</li><li>图床网站</li><li>本地搜索</li><li>Hexo博客提交百度和Google收录</li><li>博文置顶</li><li>添加打赏</li><li>添加分享（未完成）</li><li>图片可点击放大查看，放大后可关闭（fancybox可能有点问题，暂时未实现）</li></ol><h2 id="1-设置菜单"><a href="#1-设置菜单" class="headerlink" title="1. 设置菜单"></a>1. 设置菜单</h2><p>打开主题配置文件即themes/next下的_config.yml，查找menu，将前面的#删除就行了：</p><figure class="highlight text"><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">menu:</span><br><span class="line"> home: / || home #首页</span><br><span class="line"> archives: /archives/ || archive #归档</span><br><span class="line"> categories: /categories/ || th #分类</span><br><span class="line"> tags: /tags/ || tags #标签</span><br><span class="line"> about: /about/ || user #关于</span><br><span class="line"> resources: /resources/ || download #资源</span><br><span class="line"> #schedule: /schedule/ || calendar #日历</span><br><span class="line"> #sitemap: /sitemap.xml || sitemap #站点地图，供搜索引擎爬取</span><br><span class="line"> #commonweal: /404/ || heartbeat #腾讯公益404</span><br></pre></td></tr></table></figure><p>“||”前面的是目标链接，后面的是图标名称，next使用的图标全是<a href="https://www.fontawesome.com.cn/faicons/%23web-application">图标库 - Font Awesome 中文网</a>这一网站的，有想用的图标直接在fontawesome上面找图标的名称就行。resources是我自己添加的。</p><p>新添加的菜单需要翻译对应的中文，打开theme/next/languages/zh-CN.yml，在menu下设置：</p><figure class="highlight text"><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">menu:</span><br><span class="line"> home: 首页</span><br><span class="line"> archives: 归档</span><br><span class="line"> categories: 分类</span><br><span class="line"> tags: 标签</span><br><span class="line"> about: 关于</span><br><span class="line"> resources: 资源</span><br><span class="line"> search: 搜索</span><br></pre></td></tr></table></figure><p>在根目录下打开Git Bash，输入如下代码：</p><figure class="highlight text"><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">hexo new page "categories"</span><br><span class="line">hexo new page "tags"</span><br><span class="line">hexo new page "about"</span><br><span class="line">hexo new page "resources"</span><br></pre></td></tr></table></figure><p>此时在根目录的sources文件夹下会生成categories、tags、about、resources四个文件，每个文件中有一个<code>index.md</code>文件，修改内容分别如下：</p><figure class="highlight text"><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">---</span><br><span class="line">title: 分类</span><br><span class="line">date: 2020-02-10 22:07:08</span><br><span class="line">type: "categories"</span><br><span class="line">comments: false</span><br><span class="line">---</span><br><span class="line"></span><br><span class="line">---</span><br><span class="line">title: 标签</span><br><span class="line">date: 2020-02-10 22:07:08</span><br><span class="line">type: "tags"</span><br><span class="line">comments: false</span><br><span class="line">---</span><br><span class="line"></span><br><span class="line">---</span><br><span class="line">title: 关于</span><br><span class="line">date: 2020-02-10 22:07:08</span><br><span class="line">type: "about"</span><br><span class="line">comments: false</span><br><span class="line">---</span><br><span class="line"></span><br><span class="line">---</span><br><span class="line">title: 资源</span><br><span class="line">date: 2020-02-10 22:07:08</span><br><span class="line">type: "resources"</span><br><span class="line">comments: false</span><br><span class="line">---</span><br></pre></td></tr></table></figure><p>注：如果有启用评论，默认页面带有评论。需要关闭的话，添加字段comments并将值设置为false。</p><h2 id="2-设置建站时间"><a href="#2-设置建站时间" class="headerlink" title="2. 设置建站时间"></a>2. 设置建站时间</h2><p>打开主题配置文件即themes/next下的_config.yml，查找since：</p><figure class="highlight text"><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">footer:</span><br><span class="line"> # Specify the date when the site was setup. If not defined, current year will be used.</span><br><span class="line"> since: 2020-02 #建站时间</span><br></pre></td></tr></table></figure><h2 id="3-设置头像"><a href="#3-设置头像" class="headerlink" title="3. 设置头像"></a>3. 设置头像</h2><p>打开主题配置文件即themes/next下的_config.yml，查找avatar，url后是图片的链接地址：</p><figure class="highlight text"><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"># Sidebar Avatar</span><br><span class="line">avatar:</span><br><span class="line"> # Replace the default image and set the url here.</span><br><span class="line"> url: /images/avatar.gif #图片的位置，也可以是http://xxx.com/avatar.png</span><br><span class="line"> # If true, the avatar will be dispalyed in circle.</span><br><span class="line"> rounded: true #头像展示在圈里</span><br><span class="line"> # If true, the avatar will be rotated with the cursor.</span><br><span class="line"> rotated: false #头像随光标旋转</span><br></pre></td></tr></table></figure><p>然后将你要的头像图片复制到themes/next/source/images里，重命名为avatar.png。</p><h2 id="4-网站图标设置"><a href="#4-网站图标设置" class="headerlink" title="4. 网站图标设置"></a>4. 网站图标设置</h2><p>我是在这个网站找的图标，免费的图标素材网站：<a href="https://www.easyicon.net/1220579-maple_leaf_icon.html">Easyicon</a></p><p>下载16x16和32x32的图标后，打开主题配置文件，查找favicon，只要修改small和medium为你的图标路径：</p><figure class="highlight text"><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">favicon:</span><br><span class="line"> small: /images/favicon-16x16.png</span><br><span class="line"> medium: /images/favicon-32x32.png</span><br><span class="line"> apple_touch_icon: /images/apple-touch-icon-next.png</span><br><span class="line"> safari_pinned_tab: /images/logo.svg</span><br><span class="line"> #android_manifest: /images/manifest.json</span><br><span class="line"> #ms_browserconfig: /images/browserconfig.xml</span><br></pre></td></tr></table></figure><h2 id="5-设置动态背景"><a href="#5-设置动态背景" class="headerlink" title="5. 设置动态背景"></a>5. 设置动态背景</h2><h3 id="5-1-canvas-nest-风格"><a href="#5-1-canvas-nest-风格" class="headerlink" title="5.1 canvas nest 风格"></a>5.1 canvas nest 风格</h3><p>效果图：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-0948505c3e3161c767466b90c2649aa2_720w.webp" alt="img"></p><p>在themes/next目录下打开Git Bash，输入：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest</span><br></pre></td></tr></table></figure><p>打开主题配置文件即themes/next下的_config.yml，找到canvas-nest，将enable：false改为true：（<strong>如果找不到canvas-nest，可能是文件修改了，试试将下面的代码复制粘贴到themes/next中</strong>）</p><figure class="highlight text"><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"># Canvas-nest</span><br><span class="line"># Dependencies: https://github.com/theme-next/theme-next-canvas-nest</span><br><span class="line"># For more information: https://github.com/hustcc/canvas-nest.js</span><br><span class="line">canvas_nest:</span><br><span class="line"> enable: true</span><br><span class="line"> onmobile: true # Display on mobile or not</span><br><span class="line"> color: "0,0,255" # RGB values, use `,` to separate</span><br><span class="line"> opacity: 0.5 # The opacity of line: 0~1</span><br><span class="line"> zIndex: -1 # z-index property of the background</span><br><span class="line"> count: 99 # The number of lines</span><br></pre></td></tr></table></figure><h3 id="5-2-JavaScript-3D-library风格"><a href="#5-2-JavaScript-3D-library风格" class="headerlink" title="5.2 JavaScript 3D library风格"></a>5.2 JavaScript 3D library风格</h3><p>在themes/next目录下打开Git Bash，输入：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https://github.com/theme-next/theme-next-three source/lib/three</span><br></pre></td></tr></table></figure><p>打开主题配置文件即themes/next下的_config.yml，找到three，这里有三种风格，可以试一下看看喜欢哪种风格，直接将false改为true就行了，我已经选了canvas-nest，就没有选这种风格：</p><figure class="highlight text"><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"># JavaScript 3D library.</span><br><span class="line"># Dependencies: https://github.com/theme-next/theme-next-three</span><br><span class="line">three:</span><br><span class="line"> enable: true</span><br><span class="line"> three_waves: false</span><br><span class="line"> canvas_lines: false</span><br><span class="line"> canvas_sphere: false</span><br></pre></td></tr></table></figure><h2 id="6-设置背景图片"><a href="#6-设置背景图片" class="headerlink" title="6. 设置背景图片"></a>6. 设置背景图片</h2><p>打开主题配置文件即themes/next下的_config.yml，将 style: source/_data/styles.styl 取消注释：</p><figure class="highlight text"><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">custom_file_path:</span><br><span class="line"> style: source/_data/styles.styl</span><br></pre></td></tr></table></figure><p>打开根目录Blog/source创建文件_data/styles.styl，添加以下内容：</p><figure class="highlight text"><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">// 添加背景图片</span><br><span class="line">body {</span><br><span class="line"> background: url(images/background.png);//自己喜欢的图片地址</span><br><span class="line"> background-size: cover;</span><br><span class="line"> background-repeat: no-repeat;</span><br><span class="line"> background-attachment: fixed;</span><br><span class="line"> background-position: 50% 50%;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="7-主页文章添加阴影效果"><a href="#7-主页文章添加阴影效果" class="headerlink" title="7. 主页文章添加阴影效果"></a>7. 主页文章添加阴影效果</h2><p>打开themes/next/source/css/_common/conponents/post/post.styl，修改.post-block，如下：</p><figure class="highlight text"><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></pre></td><td class="code"><pre><span class="line">.use-motion {</span><br><span class="line"> if (hexo-config('motion.transition.post_block')) {</span><br><span class="line"> .post-block {</span><br><span class="line"> opacity: 0;</span><br><span class="line"> margin-top: 60px;</span><br><span class="line"> margin-bottom: 60px;</span><br><span class="line"> padding: 25px;</span><br><span class="line"> background:rgba(255,255,255,0.9) none repeat scroll !important;</span><br><span class="line"> -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);</span><br><span class="line"> -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);</span><br><span class="line"></span><br><span class="line"> }</span><br><span class="line"> .pagination, .comments{</span><br><span class="line"> opacity: 0;</span><br><span class="line"> }</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p>还有一种方法打开Blog/source/_date/style.styl文件，添加以下代码：</p><figure class="highlight text"><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">// 主页文章添加阴影效果</span><br><span class="line">.post {</span><br><span class="line"> margin-top: 60px;</span><br><span class="line"> margin-bottom: 60px;</span><br><span class="line"> padding: 25px;</span><br><span class="line"> -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);</span><br><span class="line"> -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);</span><br></pre></td></tr></table></figure><h2 id="8-添加顶部加载条"><a href="#8-添加顶部加载条" class="headerlink" title="8. 添加顶部加载条"></a>8. 添加顶部加载条</h2><p>在themes/next目录下打开Git Bash，输入：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https://github.com/theme-next/theme-next-pace source/lib/pace</span><br></pre></td></tr></table></figure><p>打开<strong>主题配置文件</strong>即themes/next下的_config.yml，找到pace，将enable：false改为true，你还可以选择类型（theme）：</p><figure class="highlight text"><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">pace:</span><br><span class="line"> enable: true</span><br><span class="line"> # Themes list:</span><br><span class="line"> # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple</span><br><span class="line"> # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal</span><br><span class="line"> theme: minimal</span><br></pre></td></tr></table></figure><h2 id="9-设置预览摘要"><a href="#9-设置预览摘要" class="headerlink" title="9. 设置预览摘要"></a>9. 设置预览摘要</h2><p>next（v7.7.1）已经没有如下代码：</p><figure class="highlight text"><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">auto_excerpt:</span><br><span class="line"> enable: true</span><br><span class="line"> length: 150</span><br></pre></td></tr></table></figure><p>所以不需要设置，只要我们在文章中插入 <!-- more -->，该标签之上的是摘要，之后的内容不可见，需点击全文阅读按钮：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><!-- more --></span><br></pre></td></tr></table></figure><h2 id="10-设置侧边栏显示效果"><a href="#10-设置侧边栏显示效果" class="headerlink" title="10. 设置侧边栏显示效果"></a>10. 设置侧边栏显示效果</h2><p>打开<strong>主题配置文件</strong>即themes/next下的_config.yml，找到Sidebar Settings，设置：</p><figure class="highlight text"><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">sidebar:</span><br><span class="line"> # Sidebar Position. #设置侧边栏位置</span><br><span class="line"> position: left</span><br><span class="line"> #position: right</span><br><span class="line"></span><br><span class="line"> # - post 默认显示模式</span><br><span class="line"> # - always 一直显示</span><br><span class="line"> # - hide 初始隐藏</span><br><span class="line"> # - remove 移除侧边栏</span><br><span class="line"> display: post</span><br></pre></td></tr></table></figure><h2 id="11-侧边栏推荐阅读"><a href="#11-侧边栏推荐阅读" class="headerlink" title="11. 侧边栏推荐阅读"></a>11. 侧边栏推荐阅读</h2><p>打开<strong>主题配置文件</strong>即themes/next下的_config.yml，搜索links（里面写你想要的链接）：</p><figure class="highlight text"><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">links_settings:</span><br><span class="line"> icon: link</span><br><span class="line"> title: 链接网站 #修改名称</span><br><span class="line"></span><br><span class="line">links:</span><br><span class="line"> #Title: http://yoursite.com</span><br><span class="line"> 百度: https://baidu.com</span><br><span class="line"> 鱼C论坛: https://fishc.com.cn</span><br></pre></td></tr></table></figure><h2 id="12-添加社交链接"><a href="#12-添加社交链接" class="headerlink" title="12. 添加社交链接"></a>12. 添加社交链接</h2><p>打开<strong>主题配置文件</strong>即themes/next下的_config.yml，搜索social：</p><figure class="highlight text"><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">social:</span><br><span class="line"> GitHub: https://github.com/fengye97 || github</span><br><span class="line"> E-Mail: mailto:[email protected] || envelope</span><br><span class="line"> 知乎: https://www.zhihu.com/people/mai-nv-hai-de-xiao-huo-chai-35-19 || gratipay</span><br><span class="line"> CSDN: https://https://blog.csdn.net/Later_001 || codiepie</span><br></pre></td></tr></table></figure><p>“||”前面的是链接，后面的是<a href="https://www.fontawesome.com.cn/faicons/%23web-application"> FontAwesome</a>图标名称。</p><h2 id="13-设置博文内链接为蓝色"><a href="#13-设置博文内链接为蓝色" class="headerlink" title="13. 设置博文内链接为蓝色"></a>13. 设置博文内链接为蓝色</h2><p>打开themes/next/source/css/_common/components/post/post.styl文件，将下面的代码复制到文件最后：</p><figure class="highlight text"><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">.post-body p a{</span><br><span class="line"> color: #0593d3;</span><br><span class="line"> border-bottom: none;</span><br><span class="line"> &:hover {</span><br><span class="line"> color: #0477ab;</span><br><span class="line"> text-decoration: underline;</span><br><span class="line"> }</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p>重新部署一下后，效果如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-637b3019539b4943151ca472582c90cc_720w.webp" alt="img"></p><h2 id="14-显示文章字数和阅读时长"><a href="#14-显示文章字数和阅读时长" class="headerlink" title="14. 显示文章字数和阅读时长"></a>14. 显示文章字数和阅读时长</h2><p>从根目录Blog打开Git Bash，执行下面的命令，安装插件：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-wordcount --save</span><br></pre></td></tr></table></figure><p>然后打开<strong>站点配置文件，</strong>在文件末尾加上下面的代码：</p><figure class="highlight text"><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">symbols_count_time:</span><br><span class="line"> symbols: true # 文章字数统计</span><br><span class="line"> time: true # 文章阅读时长</span><br><span class="line"> total_symbols: true # 站点总字数统计</span><br><span class="line"> total_time: true # 站点总阅读时长</span><br><span class="line"> exclude_codeblock: false # 排除代码字数统计</span><br></pre></td></tr></table></figure><p>效果如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-6691afc39f011c010bd0d9e054b50e75_720w.webp" alt="img"></p><h2 id="15-显示站点文章总字数（另一种统计站点总字数的方法）"><a href="#15-显示站点文章总字数（另一种统计站点总字数的方法）" class="headerlink" title="15. 显示站点文章总字数（另一种统计站点总字数的方法）"></a>15. 显示站点文章总字数（另一种统计站点总字数的方法）</h2><p>从根目录Blog打开Git Bash，执行下面的命令，安装插件：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-wordcount --save</span><br></pre></td></tr></table></figure><p>然后在/themes/next/layout/_partials/footer.swig文件尾部加上：</p><figure class="highlight text"><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"><div class="theme-info"></span><br><span class="line"> <div class="powered-by"></div></span><br><span class="line"> <span class="post-count">博客全站共{{ totalcount(site) }}字</span></span><br><span class="line"></div></span><br></pre></td></tr></table></figure><h2 id="16-设置文章末尾”本文结束”标记"><a href="#16-设置文章末尾”本文结束”标记" class="headerlink" title="16. 设置文章末尾”本文结束”标记"></a>16. 设置文章末尾”本文结束”标记</h2><p>在路径/themes/next/layout/_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：</p><figure class="highlight text"><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"><div></span><br><span class="line"> {% if not is_index %}</span><br><span class="line"> <div style="text-align:center;color: #ccc;font-size:24px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div></span><br><span class="line"> {% endif %}</span><br><span class="line"></div></span><br></pre></td></tr></table></figure><p>接着打开/themes/next/layout/_macro/post.swig文件，在post-footer前添加代码：</p><figure class="highlight text"><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">{% if not is_index and theme.passage_end_tag.enabled %}</span><br><span class="line"> <div></span><br><span class="line"> {% include 'passage-end-tag.swig' %}</span><br><span class="line"> </div></span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure><p>具体位置如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-a449da45307774c93857b03b6585a0b7_720w.webp" alt="img"></p><p>然后打开<strong>主题配置文件</strong>（_config.yml)，在末尾添加：</p><figure class="highlight text"><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><br><span class="line">passage_end_tag:</span><br><span class="line"> enabled: true</span><br></pre></td></tr></table></figure><p>完成以上设置之后，在每篇文章之后都会添加如下效果图的样子：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-22e980312c1b9c433e642757dea7e91b_720w.webp" alt="img"></p><h2 id="17-文章末尾添加版权说明"><a href="#17-文章末尾添加版权说明" class="headerlink" title="17. 文章末尾添加版权说明"></a>17. 文章末尾添加版权说明</h2><p>查找<strong>主题配置文件</strong>themes/next/_config.yml中的creative_commons：</p><figure class="highlight text"><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">creative_commons:</span><br><span class="line"> license: by-nc-sa</span><br><span class="line"> sidebar: false</span><br><span class="line"> post: true # 将false改为true即可显示版权信息</span><br><span class="line"> language:</span><br></pre></td></tr></table></figure><p>效果图：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-8539d1dd82bbb3b295b631402ffeeb49_720w.webp" alt="img"></p><h2 id="18-添加访问量统计"><a href="#18-添加访问量统计" class="headerlink" title="18. 添加访问量统计"></a>18. 添加访问量统计</h2><p>打开<strong>主题配置文件</strong>即themes/next下的_config.yml，找到busuanzi_count，改为true：</p><figure class="highlight text"><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">busuanzi_count:</span><br><span class="line"> enable: true</span><br></pre></td></tr></table></figure><p>打开/themes/next/layout/_partials/footer.swig，在最后添加如下内容：</p><figure class="highlight text"><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">{% if theme.busuanzi_count.enable %}</span><br><span class="line"> <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script></span><br><span class="line"></span><br><span class="line"> <span id="busuanzi_container_site_pv">总访问量<span id="busuanzi_value_site_pv"></span>次</span></span><br><span class="line"> <span class="post-meta-divider">|</span></span><br><span class="line"> <span id="busuanzi_container_site_uv">总访客数<span id="busuanzi_value_site_uv"></span>人</span></span><br><span class="line"> <span class="post-meta-divider">|</span></span><br><span class="line"><!-- 不蒜子计数初始值纠正 --></span><br><span class="line"><script></span><br><span class="line">$(document).ready(function() {</span><br><span class="line"></span><br><span class="line"> var int = setInterval(fixCount, 50); // 50ms周期检测函数</span><br><span class="line"> var countOffset = 20000; // 初始化首次数据</span><br><span class="line"></span><br><span class="line"> function fixCount() { </span><br><span class="line"> if (document.getElementById("busuanzi_container_site_pv").style.display != "none")</span><br><span class="line"> {</span><br><span class="line"> $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + countOffset); </span><br><span class="line"> clearInterval(int);</span><br><span class="line"> } </span><br><span class="line"> if ($("#busuanzi_container_site_pv").css("display") != "none")</span><br><span class="line"> {</span><br><span class="line"> $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + countOffset); // 加上初始数据 </span><br><span class="line"> clearInterval(int); // 停止检测</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"></script> </span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure><h2 id="19-添加评论功能"><a href="#19-添加评论功能" class="headerlink" title="19. 添加评论功能"></a>19. 添加评论功能</h2><h3 id="19-1-注册安装"><a href="#19-1-注册安装" class="headerlink" title="19.1 注册安装"></a>19.1 注册安装</h3><p>我采用的是来必力，具体过程很简单，打开官网：<a href="https://livere.com/">Welcome to LiveRe.com</a></p><p>注册账号：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-c30f176fdfb32b60b281cbda3d9d3ef8_720w.webp" alt="img"></p><p>然后发送邮箱验证码，输入验证码验证，完成注册后点击上方<strong>安装：</strong></p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-72c5684e3347f69eea26d0e39bce026d_720w.webp" alt="img"></p><p>选择免费的现在安装，会弹出一个框让你填网站的信息：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-e97bae324c5c0a7e218d5bdcc107cfc2_720w.webp" alt="img"></p><p>然后获取代码：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-6a1dc9f416337cf185846ab0835386f4_720w.webp" alt="img"></p><p>将data-uid后的代码复制，然后打开主题配置文件_config.yml，找到livere_uid，将代码复制到其后即可：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">livere_uid: "你的代码"</span><br></pre></td></tr></table></figure><h3 id="19-2-设置提醒"><a href="#19-2-设置提醒" class="headerlink" title="19.2 设置提醒"></a>19.2 设置提醒</h3><p>当有新评论出现时，通过邮箱提醒，点击右上角->管理页面->评论提醒：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-1682aedc503a43caea0687cc1bb3e305_720w.webp" alt="img"></p><p>完成后效果如图：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-01b42e4056c2ff1520d3723762707699_720w.webp" alt="img"></p><h2 id="20-添加Fork-me-on-Github"><a href="#20-添加Fork-me-on-Github" class="headerlink" title="20. 添加Fork me on Github"></a>20. 添加Fork me on Github</h2><p>有两种，分别是：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-0b21691ed6309ea63de8913dd235310d_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-4ed720c24acbae939eaf72bb236b478b_720w.webp" alt="img"></p><p>选择你喜欢的类型，打开<a href="https://link.zhihu.com/?target=http://tholman.com/github-corners/">小猫</a>或者<a href="https://link.zhihu.com/?target=https://github.blog/2008-12-19-github-ribbons/">字</a>，复制代码添加到themes/next/layout/_layout.swig文件中，放在<div class="headband"></div>后面：</p><figure class="highlight text"><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"><div class="headband"></div></span><br><span class="line"> <a href="https://github.com/fengye97" class="github-corner" aria-label="View source on GitHub"><s</span><br></pre></td></tr></table></figure><h2 id="21-安装Markdown编译器"><a href="#21-安装Markdown编译器" class="headerlink" title="21. 安装Markdown编译器"></a>21. 安装Markdown编译器</h2><p>可以看这篇文章然后选一个适合的文本编译器：<a href="https://blog.csdn.net/davidhzq/article/details/100815332">几款主流好用的markdown编辑器介绍</a></p><p>我是用的Windows系统，所以我用的是MarkdownPad2，下载地址：<a href="https://www.markdownpad.com/">The Markdown Editor for Windows</a>，默认安装就行</p><p>如果是win10系统还需要安装一个组件 <strong>awesomium_v1.6.6_sdk_win，</strong>下载链接：链接：<a href="https://pan.baidu.com/s/1UJRtOBF8vj19ikOq4452sQ">https://pan.baidu.com/s/1UJRtOBF8vj19ikOq4452sQ</a> 提取码：yd8k</p><p>下载完<strong>awesomium_v1.6.6_sdk_win</strong>默认安装就行</p><h2 id="22-安装RSS插件"><a href="#22-安装RSS插件" class="headerlink" title="22. 安装RSS插件"></a>22. 安装RSS插件</h2><p>为什么要安装RSS插件呢？不了解的可以看看这篇文章：<a href="https://www.netshop168.com/article-85934.html">rss订阅是什么意思?为什么要使用RSS?</a>简单来说，RSS是一种协议，允许网站将其内容或其部分内容提供给其他网站或应用程序。通过使用RSS，可以节省宝贵的时间，并将各个站点提供的新闻和信息组织到一个中心点进行查看，也可以通过从使用RSS联合其内容的其他站点导入新闻来向你的站点添加新闻。</p><h3 id="（1）安装hexo-generator-feed插件"><a href="#（1）安装hexo-generator-feed插件" class="headerlink" title="（1）安装hexo-generator-feed插件"></a>（1）安装hexo-generator-feed插件</h3><p>RSS需要有一个Feed链接，而这个链接需要靠hexo-generator-feed插件来生成，所以第一步需要添加插件，在Blog根目录打开Git Bash执行安装指令：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-feed --save</span><br></pre></td></tr></table></figure><h3 id="（2）配置feed信息"><a href="#（2）配置feed信息" class="headerlink" title="（2）配置feed信息"></a>（2）配置feed信息</h3><p>在<strong>站点配置文件</strong>末尾加上如下代码：</p><figure class="highlight text"><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">feed:</span><br><span class="line"> type: rss2</span><br><span class="line"> path: rss2.xml</span><br><span class="line"> limit: 10</span><br><span class="line"> hub:</span><br><span class="line"> content: 'true'</span><br></pre></td></tr></table></figure><h3 id="（3）配置rss"><a href="#（3）配置rss" class="headerlink" title="（3）配置rss"></a>（3）配置rss</h3><p>打开<strong>主题配置文件，</strong>搜索rss，将前面的#去掉：</p><figure class="highlight text"><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">follow_me:</span><br><span class="line"> #Twitter: https://twitter.com/username || twitter</span><br><span class="line"> #Telegram: https://t.me/channel_name || telegram</span><br><span class="line"> 微信: /images/wechat_channel.jpg || wechat</span><br><span class="line"> RSS: /atom.xml || rss</span><br></pre></td></tr></table></figure><p>效果如图：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-e31964bed191136716e02326589e15c3_720w.webp" alt="img"></p><h2 id="23-项目主页添加README"><a href="#23-项目主页添加README" class="headerlink" title="23. 项目主页添加README"></a>23. 项目主页添加README</h2><p>在建立Github上建立自己的博客仓库的时候，没有生成README文件，这样使得其他人无法知道我们这个仓库是做什么，即我们的这个仓库缺少一个说明文件；但是如果直接使用命令hexo n README，再部署至远程的时候，hexo会将它解析为html文件，这不是我们想要的。</p><p>因此，解决方式是在路径Blog\source下手动新建README.md注意这里的后缀是.mdown，Mardownpad2可以将文件保存为.mdown后缀文件；然后再在这个新建文件中写README即可。再之后hexo g会把它复制到public文件夹，而不会被解析成html文件，发布在博客中。</p><p>也可以参考第24项，在根目录Blog/source 目录下添加一个 README.md 文件，修改站点配置文件 _config.yml ，将 skip_render 参数的值设置为:</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">skip_render: README.md</span><br></pre></td></tr></table></figure><h2 id="24-忽略要编译的文件"><a href="#24-忽略要编译的文件" class="headerlink" title="24. 忽略要编译的文件"></a>24. 忽略要编译的文件</h2><p>搜索引擎确认网站所有权时往往会提供一个html文件来进行验证，要是这个文件被渲染了，验证自然就会失败了。或者，有时候会有一些文件不希望Hexo渲染的，因此有必要针对某个文件或者目录进行排除。Hexo的配置文件中提供了配置项skip_render。只有source目录下的文件才会发布到public（能够在网络上访问到），因此Hexo只渲染source目录下的文件。skip_render参数设置的路径是相对于source目录的路径。</p><figure class="highlight text"><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></pre></td><td class="code"><pre><span class="line">skip_render: #部署时不包含的文件</span><br><span class="line"></span><br><span class="line">#单个文件</span><br><span class="line">skip_render: hello.html</span><br><span class="line"></span><br><span class="line">#单个文件夹下全部文件</span><br><span class="line">skip_render: test/* </span><br><span class="line"></span><br><span class="line">#单个文件夹下指定类型文件</span><br><span class="line">skip_render: test/*.md </span><br><span class="line"></span><br><span class="line">#单个文件夹下全部文件以及子目录</span><br><span class="line">skip_render: test/** </span><br><span class="line"></span><br><span class="line">#跳过多个目录，或者多个文件</span><br><span class="line">skip_render: ['*.html', demo/**, test/*]</span><br></pre></td></tr></table></figure><h2 id="25-代码块样式自定义"><a href="#25-代码块样式自定义" class="headerlink" title="25. 代码块样式自定义"></a>25. 代码块样式自定义</h2><p>打开根目录Blog/source/_data/styles.styl，添加以下内容：</p><figure class="highlight text"><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">// Custom styles.</span><br><span class="line">code {</span><br><span class="line"> color: #ff7600;</span><br><span class="line"> background: #fbf7f8;</span><br><span class="line"> margin: 2px;</span><br><span class="line">}</span><br><span class="line">// 大代码块的自定义样式</span><br><span class="line">.highlight, pre {</span><br><span class="line"> margin: 5px 0;</span><br><span class="line"> padding: 5px;</span><br><span class="line"> border-radius: 3px;</span><br><span class="line">}</span><br><span class="line">.highlight, code, pre {</span><br><span class="line"> border: 1px solid #d6d6d6;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>效果图：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-551527018a7813118ca9074691fab82a_720w.webp" alt="img"></p><h2 id="26-支持mathjax公式"><a href="#26-支持mathjax公式" class="headerlink" title="26. 支持mathjax公式"></a>26. 支持mathjax公式</h2><p>打开<strong>主题配置文件</strong>，搜索mathjax：</p><figure class="highlight text"><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">mathjax:</span><br><span class="line"> enable: true #将false改为true</span><br><span class="line"> mhchem: false #用来写化学方程式</span><br></pre></td></tr></table></figure><h2 id="27-图床网站"><a href="#27-图床网站" class="headerlink" title="27. 图床网站"></a>27. 图床网站</h2><p>推荐七牛云，免费网站，快速，方便，或者可以看看这篇文章选一个合适的网站：<a href="https://zhuanlan.zhihu.com/p/35270383">软件小编：盘点一下免费好用的图床</a></p><p>网站：<a href="https://link.zhihu.com/?target=https://www.qiniu.com/?utm_campaign=SEM&utm_content=pinzhuan&utm_medium=pinzhuan&utm_source=baiduSEM&utm_term=pinzhuan">七牛云</a>，后面我再写一篇关于如何注册使用七牛云存储图片的文章吧，我先研究研究。</p><h2 id="28-本地搜索"><a href="#28-本地搜索" class="headerlink" title="28. 本地搜索"></a>28. 本地搜索</h2><p>打开cmd安装插件：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-search</span><br></pre></td></tr></table></figure><p>查找主题配置文件themes/next/_config.yml中的local_search ：</p><figure class="highlight text"><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">local_search:</span><br><span class="line"> enable: true</span><br><span class="line"> trigger: manual #手动，按回车键或搜索按钮触发搜索</span><br></pre></td></tr></table></figure><h2 id="29-Hexo博客提交百度和Google收录"><a href="#29-Hexo博客提交百度和Google收录" class="headerlink" title="29. Hexo博客提交百度和Google收录"></a>29. Hexo博客提交百度和Google收录</h2><p>这篇文章写得很详细：<a href="https://www.jianshu.com/p/f8ec422ebd52">Hexo博客提交百度和Google收录</a></p><h2 id="30-博文置顶"><a href="#30-博文置顶" class="headerlink" title="30. 博文置顶"></a>30. 博文置顶</h2><h3 id="（1）安装插件"><a href="#（1）安装插件" class="headerlink" title="（1）安装插件"></a>（1）安装插件</h3><p>在根目录Blog打开Git Bash，执行下面的命令：</p><figure class="highlight text"><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">npm uninstall hexo-generator-index --save</span><br><span class="line">npm install hexo-generator-index-pin-top --save</span><br></pre></td></tr></table></figure><h3 id="（2）设置置顶标志"><a href="#（2）设置置顶标志" class="headerlink" title="（2）设置置顶标志"></a>（2）设置置顶标志</h3><p>打开blog/themes/next/layout/_macro目录下的post.swig文件，定位到<div class="post-meta">标签下，插入如下代码：</div></p><figure class="highlight text"><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">{% if post.top %}</span><br><span class="line"> <i class="fa fa-thumb-tack"></i></span><br><span class="line"> <font color=7D26CD>置顶</font></span><br><span class="line"> <span class="post-meta-divider">|</span></span><br><span class="line">{% endif %}</span><br></pre></td></tr></table></figure><h3 id="（3）在文章中添加top"><a href="#（3）在文章中添加top" class="headerlink" title="（3）在文章中添加top"></a>（3）在文章中添加top</h3><p>然后在需要置顶的文章的Front-matter中加上top: true即可，如下：</p><figure class="highlight text"><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><br><span class="line">title: Hello World</span><br><span class="line"></span><br><span class="line">top: true</span><br><span class="line"></span><br><span class="line">---</span><br></pre></td></tr></table></figure><p>效果如图：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AB%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-9ab04ff8d13761343e6b12057d0288ec_720w.webp" alt="img"></p><h2 id="31-添加打赏"><a href="#31-添加打赏" class="headerlink" title="31. 添加打赏"></a>31. 添加打赏</h2><p>next（v7.7.1）已经有打赏功能，只要准备好微信和支付宝二维码，具体操作：<a href="https://jingyan.baidu.com/article/b907e627b641b646e6891c6b.html">制作微信二维码收款</a>，很简单我就不详细说了。</p><p>打开<strong>主题配置文件</strong>，查找reward：</p><figure class="highlight text"><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></pre></td><td class="code"><pre><span class="line">reward_settings:</span><br><span class="line"> enable: true #改为true</span><br><span class="line"> animation: false</span><br><span class="line"> comment: 原创技术分享，您的支持将鼓励我继续创作</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">reward:</span><br><span class="line"> wechatpay: /images/wechatpay.png #将前面的#去掉</span><br><span class="line"> alipay: /images/alipay.png #将前面的#去掉</span><br><span class="line"> #paypal: /images/paypal.png</span><br><span class="line"> #bitcoin: /images/bitcoin.png</span><br></pre></td></tr></table></figure><p>将制作好的二维码图片放入themes/next/source/images文件里，并命名为wechatpay.png和alipay.png。</p><h2 id="32-添加分享（未完成）"><a href="#32-添加分享（未完成）" class="headerlink" title="32. 添加分享（未完成）"></a>32. 添加分享（未完成）</h2><p>原来的 jiathis share 和 baidushare 已经没有了，现在的是 addthis，但是我注册不了addthis账号 <a href="https://link.zhihu.com/?target=https://www.addthis.com/">AddThis官网</a></p><p>不知道什么原因，我用Firefox不行，下次用Chrome试试，先放着吧！</p><h2 id="33-图片可点击放大查看，放大后可关闭（fancybox可能有点问题，暂时未实现）"><a href="#33-图片可点击放大查看，放大后可关闭（fancybox可能有点问题，暂时未实现）" class="headerlink" title="33. 图片可点击放大查看，放大后可关闭（fancybox可能有点问题，暂时未实现）"></a>33. 图片可点击放大查看，放大后可关闭（fancybox可能有点问题，暂时未实现）</h2><p>打开<strong>主题配置文件</strong>_config.yml，搜索fancybox，设置其值为true：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">fancybox: true</span><br></pre></td></tr></table></figure><p>进入到theme/next文件夹下，打开Git Bash，输入如下代码：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone theme-next/theme-next-fancybox3 source/lib/fancybox</span><br></pre></td></tr></table></figure><h2 id="主要参考文献："><a href="#主要参考文献：" class="headerlink" title="主要参考文献："></a>主要参考文献：</h2><ol><li><a href="https://zhuanlan.zhihu.com/p/33616481">Hexo搭建的GitHub博客之优化大全</a></li><li><a href="https://link.zhihu.com/?target=https://segmentfault.com/a/1190000009544924%23item-2">Hexo的next主题个性化配置教程</a></li><li><a href="https://link.zhihu.com/?target=https://blog.csdn.net/weixin_39345384/article/details/80785373">Hexo框架下用NexT(v7.0+)主题美化博客</a></li></ol><p>转自<a href="https://zhuanlan.zhihu.com/p/102592286">从零开始搭建个人博客（超详细） - 知乎 (zhihu.com)</a></p><p>源自于 2020-09-13 22:16</p>]]></content>
<summary type="html"><h1 id="个人博客第8篇——优化主题"><a href="#个人博客第8篇——优化主题" class="headerlink" title="个人博客第8篇——优化主题"></a>个人博客第8篇——优化主题</h1><p>给博客进行一些美化</p></summary>
</entry>
<entry>
<title>第七篇博客</title>
<link href="http://example.com/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/"/>
<id>http://example.com/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/</id>
<published>2023-09-22T23:29:39.000Z</published>
<updated>2023-09-22T23:34:35.467Z</updated>
<content type="html"><![CDATA[<h1 id="个人博客第7篇——设置next主题"><a href="#个人博客第7篇——设置next主题" class="headerlink" title="个人博客第7篇——设置next主题"></a>个人博客第7篇——设置next主题</h1><p>设置next主题可使用其他主题</p><span id="more"></span><p>现在博客也搭建好了，但是这样光秃秃的什么也没有不好看，是时候美化一波了！</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-b619291dae90317cb7a56ff905f2419f_720w.webp" alt="img"></p><h2 id="更换主题"><a href="#更换主题" class="headerlink" title="更换主题"></a>更换主题</h2><p>当前用得最多的是next主题，那为什么用得多呢？当然是符合大多数人的审美。我使用的是next(v7.7.1)，下载地址：<a href="https://github.com/theme-next/hexo-theme-next">theme-next/hexo-theme-next</a></p><p>打开博客根目录Blog文件夹，右键Git Bash，输入如下代码将next主题下载到目录Blog/themes：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https://github.com/theme-next/hexo-theme-next themes/next</span><br></pre></td></tr></table></figure><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-4d4e54afc1550a4e6af02fe489c696ce_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-021a9180a69ad0e17e5da81289b19a65_720w.webp" alt="img"></p><p>打开根目录下的_config.yml(称为<strong>站点配置文件</strong>)，修改主题（<strong>注意冒号后都要有空格</strong>）：</p><figure class="highlight text"><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"># Site</span><br><span class="line">title: 枫叶苑 #标题</span><br><span class="line">subtitle: ''</span><br><span class="line">description: 选择有时候比努力更重要 #简介或者格言</span><br><span class="line">keywords:</span><br><span class="line">author: 枫叶 #作者</span><br><span class="line">language: zh-CN #主题语言</span><br><span class="line">timezone: Asia/Shanghai #中国的时区</span><br><span class="line"></span><br><span class="line"># Extensions</span><br><span class="line">## Plugins: https://hexo.io/plugins/</span><br><span class="line">## Themes: https://hexo.io/themes/</span><br><span class="line">theme: next #主题改为next</span><br></pre></td></tr></table></figure><p>主题语言主要是看你的themes/next/language中的简体中文是 zh-CN 还是 zh-Hans：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-b0fb2299bceee4ab42f867344393ae9f_720w.webp" alt="img"></p><p>next主题有四种，如下图依次为Muse、Mist、Pisces、Gemini（反正我没看出来后两个有什么区别）：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-80b50d2c94624c7da33a018e269325db_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-b9137d53a1626f4ae1be79b181bb3f88_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-3f000eb2cdf5bff60da3b68ff660e470_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-6e7209c21235563b39db4c6d6359e0dd_720w.webp" alt="img"></p><p>我选的是Gemini，打开目录Blog/themes/next/下的_config.yml（称为<strong>主题配置文件</strong>），只要将你选的主题前的#删除就行了：</p><figure class="highlight text"><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"># Schemes</span><br><span class="line">#scheme: Muse</span><br><span class="line">#scheme: Mist</span><br><span class="line">#scheme: Pisces</span><br><span class="line">scheme: Gemini #这是我选的主题</span><br></pre></td></tr></table></figure><p>回到根目录打开Git Bash，输入如下三条命令：</p><figure class="highlight text"><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">hexo clean</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure><p>完成后打开你的博客：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-f7fb0d06f6c256a445d3053a09aee726_720w.webp" alt="img"></p><p>问题：改主题为Gemini时，hexo clean，hexo g，hexo d 三个命令完成后主题未改变；</p><p>解决办法：删除next下的.git文件夹（这好像是个隐藏文件夹），再上传时修改成功。</p><p>附：后来我又发现用 hexo s 命令查看网页部署时是成功的，但是 hexo d 部署到GitHub上就不行，后来等一会就行了，可能是有延迟。</p><p>转自<a href="https://zhuanlan.zhihu.com/p/102592286">从零开始搭建个人博客（超详细） - 知乎 (zhihu.com)</a></p><p>源自于 2020-02-15 17:12</p><p>hexo命令无效编辑环境变量</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/image-20230923073333438.png" alt="image-20230923073333438"></p><p>新建添加路径选择你的node.js安装目录下的hexo</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%83%E7%AF%87%E5%8D%9A%E5%AE%A2/image-20230923073356682.png" alt="image-20230923073356682"></p>]]></content>
<summary type="html"><h1 id="个人博客第7篇——设置next主题"><a href="#个人博客第7篇——设置next主题" class="headerlink" title="个人博客第7篇——设置next主题"></a>个人博客第7篇——设置next主题</h1><p>设置next主题可使用其他主题</p></summary>
</entry>
<entry>
<title>第六篇博客</title>
<link href="http://example.com/2023/09/23/%E7%AC%AC%E5%85%AD%E7%AF%87%E5%8D%9A%E5%AE%A2/"/>
<id>http://example.com/2023/09/23/%E7%AC%AC%E5%85%AD%E7%AF%87%E5%8D%9A%E5%AE%A2/</id>
<published>2023-09-22T23:27:22.409Z</published>
<updated>2023-09-22T23:29:01.534Z</updated>
<content type="html"><![CDATA[<h1 id="个人博客第6篇——解析域名"><a href="#个人博客第6篇——解析域名" class="headerlink" title="个人博客第6篇——解析域名"></a>个人博客第6篇——解析域名</h1><p>域名需自行购买看第四篇</p><span id="more"></span><h2 id="解析域名"><a href="#解析域名" class="headerlink" title="解析域名"></a>解析域名</h2><p>第一步：登录<a href="https://link.zhihu.com/?target=https://wanwang.aliyun.com/">万网</a>，点击控制台，在你已购买的域名后点击解析添加两条解析记录：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AD%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-dfe2e69910f62b27dcd638a121b3e87d_720w.png" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AD%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-09e6f42649e43d667f97042fac168e38_720w.png" alt="img"></p><p>那个IPV4地址可以通过ping得到，具体方法是：打开cmd输入下面命令：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ping fengye97.github.io #ping + 你的GitHub的网址</span><br></pre></td></tr></table></figure><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AD%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-a55fc3c79e88a0648cbde43c0ed91ad3_720w.webp" alt="img"></p><p>第二步：打开 Blog 文件夹里的 source 文件夹，添加CNAME文件，可以先创建一个CNAME.txt文件，打开后写上你的域名，不要加www否则每次访问都必须加www，但如果不带有www，以后访问的时候带不带www都可以访问，保存后记得要重命名，将.txt删除，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AD%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-baa37d179051eebab009eee4d4b4c3d1_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AD%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-dc6b077f1a2ababc47ef1cb3f9d29277_720w.webp" alt="img"></p><p>第三步回到 Blog 文件夹，右键打开 Git Bash，依次输入下面三条命令：</p><figure class="highlight text"><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">hexo clean</span><br><span class="line">hexo g</span><br><span class="line">hexo d</span><br></pre></td></tr></table></figure><p>打开GitHub，看看CNAME文件是否已经在你的项目中，点击 *<strong>settings ：*</strong></p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AD%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-794b60703c12493db0af6e3bee662fdb_720w.webp" alt="img"></p><p>查看你的网址是否已保存：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AD%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-1d143d2af3271ec95ce5aeec8cc6ded0_720w.webp" alt="img"></p><p>如果是空白的看看能不能自己填上去，我的 *<strong>save*</strong> 键一直是灰白的不能点击，但我的CNAME文件传上去了之后就自动填上了。如果你没有CNAME文件，可以自己添加，方法如下：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AD%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-3302636f22b32bc651fc3413a033cf3e_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AD%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-513827098b83b5517cb1cbf2778f7828_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E5%85%AD%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-85b812b5bb5c2390b4fa30ccf403d0b4_720w.webp" alt="img"></p><p>这样就完成啦！这时候你就可以浏览器直接输入你的域名就会进入你搭建的网页啦！</p><p>转自<a href="https://zhuanlan.zhihu.com/p/102592286">从零开始搭建个人博客（超详细） - 知乎 (zhihu.com)</a></p><p>源自于 2020-02-08 09:33</p>]]></content>
<summary type="html"><h1 id="个人博客第6篇——解析域名"><a href="#个人博客第6篇——解析域名" class="headerlink" title="个人博客第6篇——解析域名"></a>个人博客第6篇——解析域名</h1><p>域名需自行购买看第四篇</p></summary>
</entry>
<entry>
<title>第五篇博客</title>
<link href="http://example.com/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/"/>
<id>http://example.com/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/</id>
<published>2023-09-22T23:22:06.749Z</published>
<updated>2023-09-22T23:27:13.637Z</updated>
<content type="html"><![CDATA[<h1 id="个人博客第5篇——安装node-js和Hexo"><a href="#个人博客第5篇——安装node-js和Hexo" class="headerlink" title="个人博客第5篇——安装node.js和Hexo"></a>个人博客第5篇——安装node.js和Hexo</h1><p>node.js和Hexo安装教程</p><span id="more"></span><h2 id="1-安装nodejs"><a href="#1-安装nodejs" class="headerlink" title="1. 安装nodejs"></a>1. 安装nodejs</h2><p>下载地址：<a href="https://nodejs.org/en/">node.js官网</a></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-513ec2adc4a328ce83c2a4179503c05d_720w.webp" alt="img"></p><p>如上图，直接点击下载，完成后双击安装，安装直接默认 <em><strong>next</strong></em> 就好，很简单，需要改的也就是安装位置改一下，我是在D盘新建了一个文件夹 nodejs，安装在这个文件夹里。如果要看详细到每一步的话，可以看一下这个文章：<a href="https://blog.csdn.net/antma/article/details/86104068">node.js 安装详细步骤教程</a>。</p><p>安装完成可以用打开cmd检验一下是否安装成功，用 node -v 和 npm -v 命令检查版本，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-6b7a4812c7136797111e4e3cff46d91a_720w.jpeg" alt="img"></p><h3 id="设置npm在安装全局模块时的路径和环境变量"><a href="#设置npm在安装全局模块时的路径和环境变量" class="headerlink" title="设置npm在安装全局模块时的路径和环境变量"></a>设置npm在安装全局模块时的路径和环境变量</h3><p>因为如果不设置的话，安装模块的时候就会把模块装到C盘，占用C盘的空间，并且有可能安装好hexo后却无法使用，所以我们需要设置一下：</p><p>在 nodejs 文件夹中新建两个空文件夹 node_cache、node_global，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-29f016d553ed391fd5a7d447b8347706_720w.webp" alt="img"></p><p>打开cmd，输入如下两个命令：</p><figure class="highlight text"><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">npm config set prefix "D:\nodejs\node_global"</span><br><span class="line">npm config set cache "D:\nodejs\node_cache"</span><br></pre></td></tr></table></figure><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-46234877dbb7978d7935e3512a5fd8dc_720w.webp" alt="img"></p><p>设置环境变量：<strong>win10系统 –> 打开控制面板 –> 系统 –>高级系统设置 –> 环境变量 ，</strong>然后在系统变量中新建一个变量名为“NODE_PATH”，值为“D:\nodejs\node_global\node_modules”，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-32e082000b954265c1a00e17918dea5c_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-a9a898db5d88f3a11f1b1c390d4dcced_720w.webp" alt="img"></p><p>然后编辑用户变量里的Path，将相应npm的路径改为：D:\nodejs\node_global，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-c74349d22c77b1e6add874bd27ab6a3b_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-ac8d2c68b356f2dfcfcf051b58a1c71f_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-6747c5c280f7d53565e60b6cb1c761be_720w.webp" alt="img"></p><h3 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h3><p>在 cmd 命令下执行 npm install webpack -g ：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-d00cd21a722a0b861bfc30293ae6fcbb_720w.webp" alt="img"></p><p>然后 webpack 这个模块已经在我们设置默认的文件夹中了：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-2b8ee5f8f53ab2db8fc6f9739e481de9_720w.webp" alt="img"></p><h2 id="2-安装Hexo"><a href="#2-安装Hexo" class="headerlink" title="2. 安装Hexo"></a>2. 安装Hexo</h2><p>Hexo就是我们的个人博客网站的框架，在安装之前，我们要先在GitHub上创立一个仓库，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-010e684d021680e94f0142adc3e014b8_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-d6fa95cce4e455153187135c8ee12359_720w.webp" alt="img"></p><p>点击 settings 设置：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-39e664f7edf18ee56795a8c96f669424_720w.webp" alt="img"></p><p>滑到页面底端，出现如下图所示就说明已经成功了：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-6a000b836ae32c3d118c1fdeb4696f1c_720w.webp" alt="img"></p><p>接下来就是安装Hexo，首先在D盘建立一个文件夹 Blog，点开 Blog 文件夹，鼠标右键打开 Git Bush Here，输入npm命令安装Hexo：</p><figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-7b36dbcaf294d16ebcbf46888ff4ff5d_720w.webp" alt="img"></p><p>安装完成后，输入 hexo init 命令初始化博客：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-e58d83d78710849cdc32321f122550e8_720w.webp" alt="img"></p><p>然后输入 hexo g 静态部署：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-fdc87aa8600fdbbecdc0c9bc2c141412_720w.webp" alt="img"></p><p>这时网页已经部署完成，输入 hexo s 命令可以查看：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-11a0b4917c962bab07a48f7a04160e8b_720w.png" alt="img"></p><p>浏览器输入 <a href="http://localhost:4000/">http://localhost:4000</a> 就可以打开新部署的网页：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-5a8d3a94b1eb5e4e79f2e733ddaed2aa_720w.webp" alt="img"></p><p>看完之后 ctrl +c 停止运行服务器。</p><h3 id="将Hexo部署到GitHub"><a href="#将Hexo部署到GitHub" class="headerlink" title="将Hexo部署到GitHub"></a>将Hexo部署到GitHub</h3><p>现在回到我们的 Blog 文件夹，用笔记本打开 _config.yml 文件，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-b60225e9260cd78e1142e81c133b567a_720w.webp" alt="img"></p><p>下滑到文件底部，填上如下内容：</p><figure class="highlight text"><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/fengye97/fengye97.github.io.git #你的仓库地址</span><br><span class="line"> branch: master</span><br></pre></td></tr></table></figure><p>注意空格：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-7f9e09b1827fd9202088cc9d9b19880e_720w.png" alt="img"></p><p>你的仓库地址就是下图这个：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-5014abdff592085ca394335730020fae_720w.webp" alt="img"></p><p>然后回到 Blog 文件夹中，打开 Git Bash，安装Git部署插件，输入命令：</p><figure class="highlight text"><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><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-a5172536904c8eaa602debc6e54c877b_720w.webp" alt="img"></p><p>然后分别输入以下三条命令：</p><figure class="highlight text"><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">hexo clean #清除缓存文件 db.json 和已生成的静态文件 public</span><br><span class="line">hexo g #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)</span><br><span class="line">hexo d #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)</span><br></pre></td></tr></table></figure><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-54e0b045f1d46c70e740ec83a3552fe0_720w.webp" alt="img"></p><p>完成以后，打开浏览器，输入 <a href="https://link.zhihu.com/?target=https://fengye97.github.io/">https://xxx.github.io</a> 就可以打开你的网页了：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-aa3a0b56dbcadf942397b8ea224b78b9_720w.webp" alt="img"></p><p>现在虽然可以访问我们的网站，但是网址是GitHub提供的：<a href="https://link.zhihu.com/?target=http://xxxx.github.io">http://xxxx.github.io</a> 而我们想使用我们自己的个性化域名，这就需要绑定我们自己的域名。下一篇介绍解析域名和绑定域名。</p><p>参考文献：</p><ol><li><a href="https://link.zhihu.com/?target=https://blog.csdn.net/antma/article/details/86104068">node.js 安装详细步骤教程</a></li><li><a href="https://link.zhihu.com/?target=https://blog.csdn.net/AinUser/article/details/77609180">hexo+github搭建个人博客</a></li><li><a href="https://link.zhihu.com/?target=https://blog.csdn.net/qq_40871466/article/details/86763540">hexo+github搭建个人博客 2019.2 详细教程</a></li></ol><p>转自<a href="https://zhuanlan.zhihu.com/p/102592286">从零开始搭建个人博客（超详细） - 知乎 (zhihu.com)</a></p><p>源于 2020-06-06 17:36</p><p>https不行就用ssh这个</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%94%E7%AF%87%E5%8D%9A%E5%AE%A2/image-20230923071914978.png" alt="image-20230923071914978"></p>]]></content>
<summary type="html"><h1 id="个人博客第5篇——安装node-js和Hexo"><a href="#个人博客第5篇——安装node-js和Hexo" class="headerlink" title="个人博客第5篇——安装node.js和Hexo"></a>个人博客第5篇——安装node.js和Hexo</h1><p>node.js和Hexo安装教程</p></summary>
</entry>
<entry>
<title>第四篇博客</title>
<link href="http://example.com/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/"/>
<id>http://example.com/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/</id>
<published>2023-09-22T23:19:53.115Z</published>
<updated>2023-09-22T23:21:15.435Z</updated>
<content type="html"><![CDATA[<h1 id="个人博客第四篇——购买域名"><a href="#个人博客第四篇——购买域名" class="headerlink" title="个人博客第四篇——购买域名"></a>个人博客第四篇——购买域名</h1><p>！！！可不需要没需求不用买！！！</p><span id="more"></span><p>购买域名有几个网站，可以在<a href="https://link.zhihu.com/?target=https://sg.godaddy.com/zh/offers/domains/godaddycom?isc=gennbacn07&countryview=1¤cyType=CNY&utm_source=baidu&utm_medium=cpc&utm_term=Title&utm_campaign=zh-cn_corp_sem_x_b_x_bz_001&utm_content=Brandzone%20PC&gclid=CIXh9LjPmecCFdOavAoddDkHcw&gclsrc=ds">Godaddy</a>上，也可以在<a href="https://link.zhihu.com/?target=https://wanwang.aliyun.com/">万网</a>，<a href="https://link.zhihu.com/?target=https://cloud.tencent.com/?fromSource=gwzcw.2212127.2212127.2212127&utm_medium=cpd&utm_id=gwzcw.2212127.2212127.2212127">腾讯云</a>等网站购买，我是在万网上购买的，一个.com的域名第一年就55元。</p><p>具体过程我就不详述了，以免又被当成是广告信息给我把号都封了。就说一下实名认证，选好要购买的域名后，需要创建一个个人信息模板，创造好后等待认证，此时可以直接付款购买，购买完成后等待认证就可以了，时间也不长，我的几分钟还是十几分钟就给我发短信认证成功了。</p><hr><p>2020.02.07，想了想还是把详细过程补上，莎闭眸忽。阿里云万网购买域名详细步骤：</p><p>首先登录万网：<a href="https://link.zhihu.com/?target=https://wanwang.aliyun.com/">万网-阿里云官网</a></p><p><img src="/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-e568cfda7b1348006825f2110571a2b0_720w.webp" alt="img"></p><p>如果没有注册要先注册一个账号，如果已经注册过直接登录就行，然后点击控制台：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-b52c3b71178c63505928992452821d5a_720w.webp" alt="img"></p><p>点击域名：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-444cc0ec64d35886e8abe9df8f158173_720w.webp" alt="img"></p><p>点击域名注册：</p><p>先查询你要注册的域名是否已经被注册：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-e85c984cf18f83806b060d412f2c44ee_720w.webp" alt="img"></p><p>如果你需要的域名没有被注册，点击<em><strong>加入清单</strong></em>，再点击<em><strong>立即结算</strong></em>：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-aab673dfdeba4a5aa36eedded512220f_720w.webp" alt="img"></p><p>先选择你要的年限，再点击<em><strong>个人</strong></em>，接着点击<em><strong>创建新的信息模板</strong></em>：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-0eecf52a60cc24d6fad6f97ac9da48dd_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-faf0224e55eaa3110d93b61146c48f25_720w.png" alt="img"></p><p>填完下图信息，点击 *<strong>保存*</strong> 即可：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-90158465178214adf9660dcb3852fc1a_720w.webp" alt="img"></p><p>接下来，先验证邮箱，再实名认证：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-4f3846ab375ccc146b498cfe8c7f251c_720w.webp" alt="img"></p><p>验证邮箱即登录填的邮箱，然后打开万网给你发的邮件验证，实名认证需要上传身份证，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-982183032043cb6efb38c3b86d48064c_720w.webp" alt="img"></p><p>上面说验证需要3-5个工作日，此时模板还是未认证状态，但是也可以支付，勾选模板，再勾选<strong>我已阅读，</strong>点击<em><strong>立即购买：</strong></em></p><p><img src="/2023/09/23/%E7%AC%AC%E5%9B%9B%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-ba67e22ffce2518b165c58adf76ac1b3_720w.webp" alt="img"></p><p>支付成功后，等待认证就可以了，其实我没等一会儿就认证成功了，也不需要几天。</p><p>转自<a href="https://zhuanlan.zhihu.com/p/102592286">从零开始搭建个人博客（超详细） - 知乎 (zhihu.com)</a></p><p>源自于 2020-02-08 12:04</p>]]></content>
<summary type="html"><h1 id="个人博客第四篇——购买域名"><a href="#个人博客第四篇——购买域名" class="headerlink" title="个人博客第四篇——购买域名"></a>个人博客第四篇——购买域名</h1><p>！！！可不需要没需求不用买！！！</p></summary>
</entry>
<entry>
<title>第三篇博客</title>
<link href="http://example.com/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/"/>
<id>http://example.com/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/</id>
<published>2023-09-22T23:03:29.799Z</published>
<updated>2023-09-22T23:27:15.160Z</updated>
<content type="html"><![CDATA[<h1 id="个人博客第3篇——绑定GitHub并提交文件"><a href="#个人博客第3篇——绑定GitHub并提交文件" class="headerlink" title="个人博客第3篇——绑定GitHub并提交文件"></a>个人博客第3篇——绑定GitHub并提交文件</h1><p>绑定github并尝试提交文件</p><span id="more"></span><p>在之前我已经完成了GitHub的注册还有git的安装，现在就是将git与GitHub绑定了。为什么要绑定GitHub呢？就是为了方便我们上传文件。虽然在GitHub上我们可以直接上传文件，但是我试了一下发现并不好用，点击上传完全没反应，可能是网络的原因吧。所以我们利用SSH来完成GitHub的绑定并提交文件，这样很方便快捷。首先来简单介绍一下SSH协议。</p><p>SSH（安全外壳协议，Secure Shell 的缩写）是建立在应用层基础上的安全协议。SSH 是目前较可靠，专为远程登录会话和其他网络服务提供安全性的协议，利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。简单来说，SSH就是保障你的账户安全，将你的数据加密压缩，不仅防止其他人截获你的数据，还能加快传输速度。如果想详细了解的话，可以看这篇文章：<a href="https://blog.csdn.net/qq_35246620/article/details/54317740">详述 SSH 的原理及其应用 - CSDN</a>，下面就详细介绍如何绑定GitHub和提交文件。</p><h2 id="1-绑定GitHub"><a href="#1-绑定GitHub" class="headerlink" title="1.绑定GitHub"></a>1.绑定GitHub</h2><p>我们要用git上传文件到GitHub首先得利用SSH登录远程主机，而登录方式有两种：一种是口令登录；另一种是公钥登录。口令登录每次都要输入密码十分麻烦，而公钥登录就省去了输入密码的步骤，所以我们选择公钥授权。首先我们得在 GitHub 上添加 SSH key 配置，要想生成SSH key，就要先安装 SSH，不过我们安装了 Git Bash，其应该自带了 SSH。检验一下是否安装 SSH，我们在新建的文件夹中右键打开 Git Bash：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-daee176b8f87fbc5c6ff5feca6bd0887_720w.png" alt="img"></p><p>输入 ssh 命令，查看本机是否安装 SSH：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-b4792b227defc69aa7927ca9b73e4316_720w.webp" alt="img"></p><p>如上图所示，即已安装 SSH. 然后，输入 ssh-keygen -t rsa 命令<em><strong>（注意空格）</strong></em>，表示我们指定 RSA 算法生成密钥，然后敲四次回车键，之后就就会生成两个文件，分别为秘钥 id_rsa 和公钥 id_rsa.pub. ***（注意：git中的复制粘贴不是 Ctrl+C 和 Ctrl+V，而是 Ctrl+insert 和 Shift+insert.）***文件的位置在 Git Bash 上面都有显示，默认生成在以下目录：</p><ul><li>Linux 系统：~/.ssh</li><li>Mac 系统：~/.ssh</li><li>Windows 10 ：C:/Users/ASUS/.ssh</li></ul><p>接下来我们要做的事情就是把公钥 id_rsa.pub 的内容添加到 GitHub。复制公钥 id_rsa.pub 文件里的内容，你可以通过目录找到 id_rsa.pub 文件的位置，用记事本打开文件复制。如果你实在找不到文件也没有关系，按照以下步骤直接在 Git Bash 上打开就行：</p><figure class="highlight c"><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">$ cd ~/.ssh </span><br><span class="line">$ ls</span><br><span class="line">$ cat id_rsa.pub</span><br></pre></td></tr></table></figure><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-692b1cd8e719dac8012afe6fda775209_720w.webp" alt="img"></p><p><em><strong>（再次注意：git中的复制粘贴不是 Ctrl+C 和 Ctrl+V，而是 Ctrl+insert 和Shift+insert.）</strong></em>接下来进入我们的 GitHub 主页，先点击右上角，再点击 *<strong>settings*</strong> ：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-0fe5a7f1dcbff38030bfdfeaba2c9515_720w.webp" alt="img"></p><p>如下图，先点击 ***SSH and GPG keys，***再点击 <em><strong>New SSH key.</strong></em></p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-c799cbbea9d6ca9572796364571790bd_720w.webp" alt="img"></p><p>将复制的公钥 id_rsa.pub 的内容粘贴到 key 内，再点击 ***Add SSH key，***如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-0b61abaf4069dc04003e85e7499d42b0_720w.webp" alt="img"></p><p>验证是否成功，我们可以通过在 Git Bash 中输入 ssh -T <a href="mailto:[email protected]">[email protected]</a> 进行检验：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-5b4f05ea2e2a7fb8b13fd35a9bafa8ce_720w.png" alt="img"></p><p>第一次会出现这种情况，填 yes 就行，若出现下图中的情况，则表明绑定成功：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-3915b3e46e40010d3d911f84d4e8b0ff_720w.png" alt="img"></p><h2 id="2-提交文件"><a href="#2-提交文件" class="headerlink" title="2.提交文件"></a>2.提交文件</h2><p>提交文件有两种方法：</p><h3 id="第一种：本地没有-git-仓库"><a href="#第一种：本地没有-git-仓库" class="headerlink" title="第一种：本地没有 git 仓库"></a>第一种：本地没有 git 仓库</h3><ol><li>直接将远程仓库 clone 到本地；</li><li>将文件添加并 commit 到本地仓库；</li><li>将本地仓库的内容push到远程仓库。</li></ol><h3 id="第二种：本地有-Git-仓库，并且我们已经进行了多次-commit-操作"><a href="#第二种：本地有-Git-仓库，并且我们已经进行了多次-commit-操作" class="headerlink" title="第二种：本地有 Git 仓库，并且我们已经进行了多次 commit 操作"></a>第二种：本地有 Git 仓库，并且我们已经进行了多次 commit 操作</h3><ol><li>建立一个本地仓库进入，init 初始化；</li><li>关联远程仓库；</li><li>同步远程仓库和本地仓库；</li><li>将文件添加提交到本地仓库；</li><li>将本地仓库的内容 push 到远程仓库。</li></ol><h3 id="第一种方法详细步骤："><a href="#第一种方法详细步骤：" class="headerlink" title="第一种方法详细步骤："></a>第一种方法详细步骤：</h3><p>首先，进入GitHub个人主页：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-e581af472b57655afc1f08c621a2b394_720w.webp" alt="img"></p><p>点击进入我新建的 *<strong>text*</strong> 项目：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-51d2acfef3fe245f470eb5c70083e210_720w.webp" alt="img"></p><p>点击 ***Clone or download***，再复制地址，然后进入我们准备存储 Git 仓库的目录，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-b92a188226f31b52e341872e92dd3152_720w.webp" alt="img"></p><p>接下来，输入 git clone <a href="https://link.zhihu.com/?target=https://github.com/fengye97/text.git">https://github.com/fengye97/text.git</a>，将远程仓库 clone 到本地，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-2494f3caca458107f57963286330f98b_720w.webp" alt="img"></p><p>我们看看 clone 到本地的仓库内容与远程仓库的内容，是否完全一致：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-819a3b9654e68a1183dc14cc2346b7e4_720w.webp" alt="img"></p><p>现在我们创建一个 text.txt 测试文件，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-c970e59aaf58c57d58531f5f073de0ea_720w.webp" alt="img"></p><p>从此目录进入 Git Bash，输入 git status 命令查看仓库状态：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-14f62bfed24bbe3682d7675ac46b073f_720w.webp" alt="img"></p><p>text 已经是一个 Git 仓库了，而我们刚刚创建的文件 text.txt 没有被追踪，也就是没有提交到本地仓库。现在我们使用 git add 命令将文件添加到了「临时缓冲区」，再用 git commit -m “提交信息” 将其提交到本地仓库，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-8ab219eaf21f28af8641aa908585a585_720w.webp" alt="img"></p><p>如果你是第一次提交的话，就会出现下图的情况，会让你输入用户名和邮箱：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-53a22acbdcbd4e1c0f8ba8df5b33f8ce_720w.webp" alt="img"></p><figure class="highlight c"><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><br><span class="line">$ git config --global user.name<span class="string">"fengye97"</span></span><br><span class="line">$ git config --global user.email<span class="string">"***@***.com"</span></span><br></pre></td></tr></table></figure><p>完成后输入 git log 命令查看仓库提交日志：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-15b1fe69c604fabef1755014d7893772_720w.webp" alt="img"></p><p>再输入 git status 查看一下仓库状态：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-5c8806b97bde37394c558a6da575abeb_720w.webp" alt="img"></p><p>现在输入 git push origin master 命令，将本地仓库提交到远程仓库，origin是远程主机的名字：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-a6dd07e3a40ea265f2b821db2f33266c_720w.webp" alt="img"></p><p>第一次上传需要输入密码，验证成功后，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-9a5b17a0a6f21e97407150ffdcbb2d02_720w.webp" alt="img"></p><p>刷新 GitHub 中 text 仓库：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-7a0650e21d8c6d4171ecc6aeae04040b_720w.webp" alt="img"></p><p>这时我们的测试文件已经上传到了 text 仓库中。</p><h3 id="第二种方法详细步骤："><a href="#第二种方法详细步骤：" class="headerlink" title="第二种方法详细步骤："></a>第二种方法详细步骤：</h3><p>首先，我们建立一个本地仓库 demo，使用 git init 命令初始化这个仓库，如下图:</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-d159b1c54326f23f7b810d4dca27d988_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-86ac46ad9ef847b17056d80cdd0cfb39_720w.webp" alt="img"></p><p>输入 git remote add origin <a href="https://link.zhihu.com/?target=https://github.com/fengye97/text.git">https://github.com/fengye97/text.git</a> 命令，关联远程仓库，接着输入 git pull origin master 命令，同步远程仓库和本地仓库，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-5035f6cbeabffc1a79f0b7ad75aff277_720w.webp" alt="img"></p><p>回到本地仓库，发现我们已经把远程仓库的内容同步到了本地仓库：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-58bf4f785d0a05fd0d7006998b242425_720w.webp" alt="img"></p><p>接下来的步骤就与第一种方法一样（可以参考上面，已经写得很详细了），先输入 git add 和 git commit 命令，将要提交的文件添加并提交到 demo 仓库；然后再输入 git push origin master 命令，将本地仓库修改（或者添加）的内容提交到远程仓库就完成啦！！！</p><p>参考文献：</p><ol><li><a href="https://link.zhihu.com/?target=https://blog.csdn.net/qq_35246620/article/details/69061355">利用 SSH 完成 Git 与 GitHub 的绑定 - CSDN</a></li><li><a href="https://link.zhihu.com/?target=https://www.cnblogs.com/kermitjam/p/10697185.html">Git与Github的连接与使用 - tank_jam - 博客园</a></li><li><a href="https://link.zhihu.com/?target=https://blog.csdn.net/qq_35246620/article/details/69230109">通过 Git 将代码提交到 GitHub（上）- CSDN</a></li><li><a href="https://link.zhihu.com/?target=https://blog.csdn.net/qq_35246620/article/details/69668846">通过 Git 将代码提交到 GitHub（下）- CSDN</a></li></ol><p>转自<a href="https://zhuanlan.zhihu.com/p/102592286">从零开始搭建个人博客（超详细） - 知乎 (zhihu.com)</a></p><p>源于 2020-01-21 22:09</p><p>https不行就用ssh这个</p><p><img src="/2023/09/23/%E7%AC%AC%E4%B8%89%E7%AF%87%E5%8D%9A%E5%AE%A2/image-20230923071914978.png" alt="image-20230923071914978"></p>]]></content>
<summary type="html"><h1 id="个人博客第3篇——绑定GitHub并提交文件"><a href="#个人博客第3篇——绑定GitHub并提交文件" class="headerlink" title="个人博客第3篇——绑定GitHub并提交文件"></a>个人博客第3篇——绑定GitHub并提交文件</h1><p>绑定github并尝试提交文件</p></summary>
</entry>
<entry>
<title>第二篇博客</title>
<link href="http://example.com/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/"/>
<id>http://example.com/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/</id>
<published>2023-09-22T22:51:32.118Z</published>
<updated>2023-09-22T23:02:16.966Z</updated>
<content type="html"><![CDATA[<h1 id="个人博客第2篇——Git-2-25-0详细安装步骤"><a href="#个人博客第2篇——Git-2-25-0详细安装步骤" class="headerlink" title="个人博客第2篇——Git 2.25.0详细安装步骤"></a>个人博客第2篇——Git 2.25.0详细安装步骤</h1><p>git详细安装步骤</p><span id="more"></span><p>Git 2.25.0 安装步骤：</p><p>进入Git官网<a href="https://git-scm.com/">Git官网</a>，点击 <em><strong>Downloads</strong></em> 下载：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-2b31d71e0a1f88ac25aa580094602d8a_720w.webp" alt="img"></p><p>选择你的系统类型，我的是 Windows：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-27d1caaa40faeafaf23e8e087948b02a_720w.webp" alt="img"></p><p>应该会直接弹出下载：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-28c8d91e603ccc8e491e68459f152381_720w.jpeg" alt="img"></p><p>如果没弹出的话，选择适合你的系统的即可，如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-910eda78b2932aadb839cc07d7900fa7_720w.webp" alt="img"></p><p>下载完成双击打开：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-ffd6a780ac8b9f7f7e66604f1c796f99_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-df7dfe1d55e72e2f28292733194ed1f2_720w.webp" alt="img"></p><p>可以选择 Git 安装位置，然后点击 ***next***：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-acdb676bf346b7bc844946ba5b4994d2_720w.webp" alt="img"></p><p>保持默认就好，直接点击 <em><strong>next</strong></em>：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-01beee7ec450d746190901e14896f183_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-6f8213444c1d382a9f72c012b43cf9f4_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-3dcca92f4b2ab2a909e773c75d55bb9e_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-99ba29abf274903ac4319558920d5741_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-09bafa50241530e08ea6ca7a215de2dd_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-a5179b18ef6e7ee2373278803d07eeb5_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-51a46602b6b59bf66447a47ea1117232_720w.webp" alt="img"></p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-b63d3a8617a7c9d2574c8eb5ed98d217_720w.webp" alt="img"></p><p>完成后选择打开 Git Bash 即可：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-c4f1129c5fbb5ed081e6817d1bb3b97d_720w.webp" alt="img"></p><p>检验成功，点击鼠标右键，出现下图中图标即完成：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-f9c4facc5feccfd6613965fabc8d0833_720w.webp" alt="img"></p><p>打开 Git Bash, 输入git:</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-3d312f3ae164edbe8627faeb25684805_720w.webp" alt="img"></p><p>回车得到如下图：</p><p><img src="/2023/09/23/%E7%AC%AC%E4%BA%8C%E7%AF%87%E5%8D%9A%E5%AE%A2/v2-0f41afdb907b3f7f9b26769a2eab1784_720w.webp" alt="img"></p><p>此时你的 Git 就已经安装完成啦！</p><p>转自<a href="https://zhuanlan.zhihu.com/p/102592286">从零开始搭建个人博客（超详细） - 知乎 (zhihu.com)</a></p><p>源于 2020-01-18 22:21</p><p>上传于2023/09/23</p>]]></content>
<summary type="html"><h1 id="个人博客第2篇——Git-2-25-0详细安装步骤"><a href="#个人博客第2篇——Git-2-25-0详细安装步骤" class="headerlink" title="个人博客第2篇——Git 2.25.0详细安装步骤"></a>个人博客第2篇——Git 2.25.0详细安装步骤</h1><p>git详细安装步骤</p></summary>
</entry>
<entry>
<title>第一篇博客</title>
<link href="http://example.com/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/"/>
<id>http://example.com/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/</id>
<published>2023-09-22T21:15:58.624Z</published>
<updated>2023-09-22T23:01:54.386Z</updated>
<content type="html"><![CDATA[<h1 id="个人博客第1篇——注册GitHub"><a href="#个人博客第1篇——注册GitHub" class="headerlink" title="个人博客第1篇——注册GitHub"></a>个人博客第1篇——注册GitHub</h1><p>github详细步骤</p><span id="more"></span><p>注册GitHub详细步骤：</p><p>打开官网: <a href="https://github.com/">https://github.com/</a></p><p>1.如下图点击 sign up 注册</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/1-1695419645443-2-1695420655665-9.jpg"></p><p>注意：我点击sign up 之后，弹出如下页面，箭头所指提示 GitHub 不支持这个浏览器（我用的是搜狗），我看了一下，支持 Chrome，Firefox，就用了 Firefox</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/v2-aa60d95764906967d86f1f2b37876812_r-1695420655665-7.jpg"></p><p>2.用 Firefox 打开 GitHub 官网，进入注册页面：</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/v2-1ff6182b94270639bd6b30f7429f7b4a_r-1695420655665-8.jpg"></p><p>填完上图中的昵称、邮箱地址（QQ/163邮箱都行）、密码（确保至少有15个字符或至少包括数字和小写字母的8个字符），再验证一下，点击 Next: select a plan, 进入如下页面：</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/v2-085ea285eef5ea083157f5f2f37fd161_720w.webp" alt="img"></p><p>3.如上图所示，在选择账户类型这里有一点需要我们注意，那就是：GitHub 的仓库分为两种，一种是public repositories公开免费版，一种是private repositories私有付费版。其中，免费版是完全公开的，而私有版一般是由企业或者不愿公开仓库的个人用户购买，在这里，我们选择免费版就可以，然后点击 Choose Free，进入如下界面：</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/v2-d732e119579c1e4221beb9fc06a2c7cf_720w.webp" alt="img"></p><p>4.如上图所示，有一个问卷调查，填不填都无所谓，如果填完就点击 Complete setup, 如果不想填就点击 Skip this step 跳过，不管选择哪个都会进入如下页面：</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/v2-950e7f7126ebae4231338e0e66ceb34a_720w.webp" alt="img"></p><p>5.接下来就是验证邮箱地址了，GitHub会发送邮件到你刚才填的邮箱地址，例如我填的是QQ邮箱，登录QQ邮箱，打开收到的邮件，如下图：</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/v2-cc2d4571d47a3b3ccf6bbf9e2d083977_720w.webp" alt="img"></p><p>点击 Verify email address, 进入如下页面：</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/v2-bef55004624f4e79250bcb312a5bc737_720w.webp" alt="img"></p><p>填好信息点击 sign in 登录,会要求填写验证码，如下图:</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/v2-726ced0f531b2c04805e94b8eb877e8f_720w.webp" alt="img"></p><p>验证码已发送到你的邮箱，点击查看：</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/v2-9c09b094315f77a6bfa0722170a92926_720w.webp" alt="img"></p><p>输入验证码，进入如下页面：</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/v2-86ae0674a4343f91750e63cea2b5edee_720w.webp" alt="img"></p><p>点击创建仓库，现在你就有一个名为hello的项目啦！</p><p><img src="/2023/09/23/%E5%8D%9A%E5%AE%A2%E7%AC%AC%E4%B8%80%E7%AF%87/v2-649230bd83b5a42f47ab206fb7f9e696_720w.webp" alt="img"></p><p>到这里已经基本上完成了注册!</p><p>转自<a href="https://zhuanlan.zhihu.com/p/102592286">从零开始搭建个人博客（超详细） - 知乎 (zhihu.com)</a></p><p>文章源于 2020-01-18 19:45</p><p>上传于2023/09/23略有不同依旧可用</p>]]></content>
<summary type="html"><h1 id="个人博客第1篇——注册GitHub"><a href="#个人博客第1篇——注册GitHub" class="headerlink" title="个人博客第1篇——注册GitHub"></a>个人博客第1篇——注册GitHub</h1><p>github详细步骤</p></summary>
</entry>
</feed>