-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
78 lines (37 loc) · 22.8 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Hexo采用Next主题</title>
<link href="/2019/05/01/hexo-cai-yong-next-zhu-ti/"/>
<url>/2019/05/01/hexo-cai-yong-next-zhu-ti/</url>
<content type="html"><![CDATA[<p>由于Hexo默认的主题是<code>landscape</code>，于是我想将主题改为<code>Next</code></p><h3 id="安装Next"><a href="#安装Next" class="headerlink" title="安装Next"></a>安装Next</h3><p>在博客根目录下，右键，选择<code>Git Bash Here</code><br><img src="https://i.loli.net/2018/11/23/5bf7ada477a0d.png" alt="2018-11-23_153432.png"></p><p>输入命令：<code>git clone https://github.com/iissnan/hexo-theme-next themes/next</code><br><img src="https://i.loli.net/2018/11/23/5bf7ae60a446f.png" alt="2018-11-23_153753.png"></p><blockquote><p>由于经常要涉及到配置文件，根目录（<code>D:\blog</code>）有一个<code>_config.yml</code>，主题目录（<code>D:\blog\themes\next</code>）下也有一个<code>_config.yml</code> 于是将根目录下的配置文件称为<strong>站点配置文件</strong>，主题目录下的配置文件称为<strong>主题配置文件</strong>，</p></blockquote><h3 id="启用Next主题"><a href="#启用Next主题" class="headerlink" title="启用Next主题"></a>启用Next主题</h3><p>编辑站点配置文件，找到<code>theme</code>关键字，将其值修改为next，如下所示</p><pre><code>theme: next</code></pre><blockquote><p>注意冒号后面有一个空格，所有配置文件，键后面是冒号，冒号后面都有空格</p></blockquote><h3 id="设置主题"><a href="#设置主题" class="headerlink" title="设置主题"></a>设置主题</h3><p>next主题有四种风格，在主题配置文件中，将<code>scheme</code>设置为喜欢的风格<br><img src="https://i.loli.net/2018/11/23/5bf7b25a5b1da.png" alt="2018-11-23_155437.png"></p><h3 id="设置语言"><a href="#设置语言" class="headerlink" title="设置语言"></a>设置语言</h3><p>在站点配置文件中，将<code>language</code>设置为中文，注意，这个语言必须在主题的<code>language</code>目录下面有才行<br><img src="https://i.loli.net/2018/11/23/5bf7b2fa4ab21.png" alt="2018-11-23_155710.png"></p><h3 id="修改菜单项"><a href="#修改菜单项" class="headerlink" title="修改菜单项"></a>修改菜单项</h3><p>在主题的配置文件中，选择想要展示的部分，<code>#</code>是注释，<code>||</code>后面是图标的名字，对应着FontAwesome图标库里的名字，Next主题默认的FontAwesome版本为3<br><img src="https://i.loli.net/2018/11/23/5bf7b3870a15f.png" alt="2018-11-23_155953.png"></p><h3 id="设置头像"><a href="#设置头像" class="headerlink" title="设置头像"></a>设置头像</h3><p>在站点配置文件中，新增<code>avatar</code>键，值为链接的地址</p><pre><code>avatar: https://i.loli.net/2018/11/23/5bf79ec4d552f.png</code></pre><h3 id="添加标签"><a href="#添加标签" class="headerlink" title="添加标签"></a>添加标签</h3><p>如果在主题配置文件中的<code>menu</code>选项中开启了标签（<code>tags</code>），那么在博客主页中有标签图标，但是点进去，会有<code>Cannot GET /tags/</code>，这是因为还没有增加标签页面</p><h4 id="新建页面"><a href="#新建页面" class="headerlink" title="新建页面"></a>新建页面</h4><p>cmd进入博客根目录，输入<code>hexo new page tags</code></p><pre><code>D:\blog>hexo new page tags</code></pre><h4 id="修改type"><a href="#修改type" class="headerlink" title="修改type"></a>修改type</h4><p>编辑刚刚新建的<code>index.md</code>文件，新增<code>type</code>属性，值为<code>"tags"</code><br><img src="https://i.loli.net/2018/11/23/5bf7b63ebd0c0.png" alt="2018-11-23_161133.png"></p><h4 id="为文章添加标签"><a href="#为文章添加标签" class="headerlink" title="为文章添加标签"></a>为文章添加标签</h4><p>当需要为文章添加标签时，填入<code>tags</code>对应的值即可，如果有多个，用中括号括起来，标签之间用逗号隔开<br><img src="https://i.loli.net/2018/11/23/5bf7b6d8a1218.png" alt="2018-11-23_161407.png"></p><blockquote><p>逗号必须是英文的</p></blockquote><blockquote><p>categories，about等页面添加的方式和tags添加的方式一样</p></blockquote><h3 id="在博客页面的右上角添加Github导航条"><a href="#在博客页面的右上角添加Github导航条" class="headerlink" title="在博客页面的右上角添加Github导航条"></a>在博客页面的右上角添加Github导航条</h3><p>在<a href="https://blog.github.com/2008-12-19-github-ribbons/" target="_blank" rel="noopener">GitHub Ribbons</a>或者<a href="http://tholman.com/github-corners/" target="_blank" rel="noopener">GitHub Corners</a>选择想要的GitHub样式，复制代码，到主题目录（根目录下的<em>themes/next</em>）下的<code>layout/_layout.swig</code><br>编辑这个文件，在合适的位置</p><blockquote><ul><li>加入div，为<code><div class="headband"></div></code></li><li>粘贴刚刚拷贝的链接，注意将<code>href</code>中的链接进行修改，<code>you</code>改为自己的用户名就行了</li></ul></blockquote><p><img src="https://i.loli.net/2018/11/23/5bf7bb1b4519b.png" alt="2018-11-23_163212.png"></p><h3 id="设置动态背景"><a href="#设置动态背景" class="headerlink" title="设置动态背景"></a>设置动态背景</h3><p>在主题配置文件中，找到<code>canvas_nest</code>键，修改其值为<code>true</code></p><pre><code>canvas_nest: true</code></pre><h3 id="修改文章内链接的样式"><a href="#修改文章内链接的样式" class="headerlink" title="修改文章内链接的样式"></a>修改文章内链接的样式</h3><p>到主题目录(<code>themes/next</code>)下的<code>source/css/_common/components/post/post.styl</code>，在文件的末尾添加下列代码</p><pre class=" language-css"><code class="language-css"><span class="token selector">// 文章内链接文本样式<span class="token class">.post-body</span> p a</span><span class="token punctuation">{</span> <span class="token selector">color: <span class="token id">#0593d3</span>; //原始链接颜色 border-bottom: none; border-bottom: 1px solid <span class="token id">#0593d3</span>; //底部分割线颜色 &<span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#fc6423</span><span class="token punctuation">;</span> //鼠标经过颜色 <span class="token property">border-bottom</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#fc6423</span><span class="token punctuation">;</span> //底部分割线颜色 <span class="token punctuation">}</span><span class="token punctuation">}</span></code></pre><h3 id="修改底部标签的样式"><a href="#修改底部标签的样式" class="headerlink" title="修改底部标签的样式"></a>修改底部标签的样式</h3><p>到主题目录下的<code>layout\_macro\post.swig</code>，搜索<code>rel="tag">#</code>，将<code>#</code>替换为<code><i class="fa fa-tag"></i></code></p><h3 id="修改单行代码块的样式"><a href="#修改单行代码块的样式" class="headerlink" title="修改单行代码块的样式"></a>修改单行代码块的样式</h3><p>到主题目录下的<code>source\css\_custom\custom.styl</code>，添加下列代码</p><pre class=" language-css"><code class="language-css"><span class="token selector">// Custom styles.code </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#ff7600</span><span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token hexcode">#fbf7f8</span><span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">2</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">// 大代码块的自定义样式<span class="token class">.highlight</span>, pre </span><span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">5</span>px <span class="token number">0</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">5</span>px<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">3</span>px<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector"><span class="token class">.highlight</span>, code, pre </span><span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#d6d6d6</span><span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre><h3 id="侧边栏的小图标"><a href="#侧边栏的小图标" class="headerlink" title="侧边栏的小图标"></a>侧边栏的小图标</h3><p>打开主题配置文件，搜索<code>social</code><br>选择需要展示的社交账号<br>格式为：</p><blockquote><p>[社交平台名]: [社交地址] || [图标名称]</p></blockquote><h3 id="文章主页添加阴影效果"><a href="#文章主页添加阴影效果" class="headerlink" title="文章主页添加阴影效果"></a>文章主页添加阴影效果</h3><p>打开主题目录下的<code>source\css\_custom\custom.styl</code>，添加下面的代码</p><pre class=" language-css"><code class="language-css"><span class="token selector">// 主页文章添加阴影效果<span class="token class">.post</span> </span><span class="token punctuation">{</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token number">60</span>px<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token number">60</span>px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">25</span>px<span class="token punctuation">;</span> <span class="token property">-webkit-box-shadow</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span> <span class="token number">5</span>px <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">202</span>, <span class="token number">203</span>, <span class="token number">203</span>, <span class="token number">.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">-moz-box-shadow</span><span class="token punctuation">:</span> <span class="token number">0</span> <span class="token number">0</span> <span class="token number">5</span>px <span class="token function">rgba</span><span class="token punctuation">(</span><span class="token number">202</span>, <span class="token number">203</span>, <span class="token number">204</span>, <span class="token number">.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre><h3 id="博客内添加搜索功能"><a href="#博客内添加搜索功能" class="headerlink" title="博客内添加搜索功能"></a>博客内添加搜索功能</h3><ul><li><p>安装 hexo-generator-search</p><blockquote><p>npm install hexo-generator-search –save</p></blockquote></li><li><p>安装 hexo-generator-searchdb</p><blockquote><p>npm install hexo-generator-searchdb –save</p></blockquote></li><li><p>编辑站点配置文件，添加以下内容</p><pre><code>search:path: search.xmlfield: postformat: htmllimit: 10000</code></pre></li><li><p>编辑主题配置文件，搜索<code>local search</code>，设置为<code>true</code><br><img src="https://i.loli.net/2018/11/23/5bf7c0b1a1161.png" alt="2018-11-23_165609.png"></p></li></ul><h3 id="添加网易云外链"><a href="#添加网易云外链" class="headerlink" title="添加网易云外链"></a>添加网易云外链</h3><ul><li>打开<a href="https://music.163.com" target="_blank" rel="noopener">网易云音乐</a>，登录账户，进入我的主页，选择歌单，生成外链播放器，拷贝HTML代码</li><li>将代码粘贴到合适的位置，比如主题目录下的<code>layout/_macro/sidebar.swig</code></li></ul>]]></content>
<tags>
<tag> Hexo </tag>
<tag> Next </tag>
</tags>
</entry>
<entry>
<title>Hello World</title>
<link href="/2018/11/23/hello-world/"/>
<url>/2018/11/23/hello-world/</url>
<content type="html"><![CDATA[<p>Welcome to <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/" target="_blank" rel="noopener">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html" target="_blank" rel="noopener">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues" target="_blank" rel="noopener">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><pre class=" language-bash"><code class="language-bash">$ hexo new <span class="token string">"My New Post"</span></code></pre><p>More info: <a href="https://hexo.io/docs/writing.html" target="_blank" rel="noopener">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><pre class=" language-bash"><code class="language-bash">$ hexo server</code></pre><p>More info: <a href="https://hexo.io/docs/server.html" target="_blank" rel="noopener">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><pre class=" language-bash"><code class="language-bash">$ hexo generate</code></pre><p>More info: <a href="https://hexo.io/docs/generating.html" target="_blank" rel="noopener">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><pre class=" language-bash"><code class="language-bash">$ hexo deploy</code></pre><p>More info: <a href="https://hexo.io/docs/deployment.html" target="_blank" rel="noopener">Deployment</a></p>]]></content>
<tags>
<tag> 随便写写 </tag>
</tags>
</entry>
<entry>
<title>Github+Hexo+Next搭建个人博客</title>
<link href="/2018/11/23/github-hexo-next-da-jian-ge-ren-bo-ke/"/>
<url>/2018/11/23/github-hexo-next-da-jian-ge-ren-bo-ke/</url>
<content type="html"><![CDATA[<h4 id="安装Node-js环境"><a href="#安装Node-js环境" class="headerlink" title="安装Node.js环境"></a>安装Node.js环境</h4><p>进入<a href="https://nodejs.org/en/" target="_blank" rel="noopener">Nodejs官网</a>下载稳定版本<br><img src="https://i.loli.net/2018/11/23/5bf7a24d8c25b.png" alt="Alt text"><br>一路next，安装好后，打开cmd，如果显示nodejs和npm版本号，则安装成功<br><img src="https://i.loli.net/2018/11/23/5bf7a2d5d63ee.png" alt="Alt text"></p><h4 id="安装Git"><a href="#安装Git" class="headerlink" title="安装Git"></a>安装Git</h4><p>进入<a href="https://git-scm.com/downloads" target="_blank" rel="noopener">Git官网</a>下载合适的版本<br><img src="https://i.loli.net/2018/11/23/5bf7a3f91512f.png" alt="Alt text"><br>如果在任意一个文件夹下面都有这两个，那么安装Git成功<br><img src="https://i.loli.net/2018/11/23/5bf7a42819c6c.png" alt="Alt text"></p><h4 id="注册一个GitHub账户"><a href="#注册一个GitHub账户" class="headerlink" title="注册一个GitHub账户"></a>注册一个GitHub账户</h4><p>新建一个项目， 名称为<code>账户名.github.io</code>，勾选<strong>Initialize this repository with a README</strong><br><img src="https://i.loli.net/2018/11/23/5bf7a45692d6e.png" alt="@由于我的GitHub之前已经存在这个项目，这里才会报error"></p><p>如果已经有一个项目名称为<code>账户名.github.io</code>，那么新建项目的项目名称直接为<code>项目名</code><br><img src="https://i.loli.net/2018/11/23/5bf7a46a273c1.png" alt="Alt text"></p><p>点击项目的设置<br><img src="https://i.loli.net/2018/11/23/5bf7a48bdd74f.png" alt="Alt text"></p><p>下拉到<strong>GitHub Pages</strong>部分，Source下拉框的选项如果是<code>None</code>，那么要改为<code>master branch</code>，点击<code>save</code>按钮保存，上方会显示一个网址，这个就是被部署到外网的网址，能够通过外网访问<br><img src="https://i.loli.net/2018/11/23/5bf7a4b6a027a.png" alt="Alt text"></p><h4 id="本地安装Hexo"><a href="#本地安装Hexo" class="headerlink" title="本地安装Hexo"></a>本地安装Hexo</h4><p>在本地创建一个文件夹，作为博客系统的根目录，我在D盘建立了一个blog文件夹，然后cmd进入这个目录<br><img src="https://i.loli.net/2018/11/23/5bf7a4d2cfd07.png" alt="Alt text"></p><p>输入<code>npm install hexo -g</code>，开始安装Hexo</p><p>输入<code>hexo -v</code>，检查hexo是否安装成功</p><p>输入<code>hexo init</code>，初始化该文件夹</p><p>输入<code>npm install</code>，安装所需要的组件</p><p>输入<code>hexo g</code>，g是generate的缩写</p><p>输入<code>hexo s</code>，s是start的缩写，表明开启服务器，此时浏览器打开该网址<br><img src="https://i.loli.net/2018/11/23/5bf7a4f2dc21e.png" alt="Alt text"></p><p>如果出现下图，那么Hexo就搭建成功了<br><img src="https://i.loli.net/2018/11/23/5bf7a507f1e63.png" alt="Alt text"></p><p><strong>Problem：</strong>如果无法访问，那么是端口被占用，使用<code>hexo server -p 端口号</code>，切换端口即可，这里端口号是用户的端口号，不能和常用端口号冲突，所以最好使用<strong>1024到5000</strong>的端口号</p><h4 id="本地连接GitHub"><a href="#本地连接GitHub" class="headerlink" title="本地连接GitHub"></a>本地连接GitHub</h4><p>现在只是在本地上搭建成功，没有上传到GitHub上，外网不能访问，那么要将本地与GitHub联系起来。</p><p>在博客根目录下，右键，选择Git Bash Here<br><img src="https://i.loli.net/2018/11/23/5bf7a524431fd.png" alt="Alt text"></p><p><strong>设置用户名，邮箱</strong></p><p>使用<code>git config --global user.name "username"</code>设置用户名，注意username是自己的GitHub用户名，邮箱是GitHub邮箱<br><img src="https://i.loli.net/2018/11/23/5bf7a53bb9d51.png" alt="Alt text"></p><p>使用<code>git config --global user.email "email"</code>设置邮箱，注意eamil指的是自己的GitHub绑定的邮箱<br><img src="https://i.loli.net/2018/11/23/5bf7a53e81adb.png" alt="Alt text"></p><p>输入 <code>cd ~/.ssh</code>，再输入<code>ls</code>查看该文件夹下的文件，注意<code>~</code>表示家目录，指的是当前用户的目录，Windows系统中如果不是Administrator，则为<strong>C://Users//username</strong>，如果是Administrator则为<strong>C://Users//Administrator</strong><br>Linux系统中如果不是root则为<strong>/home/username</strong>，如果是root则为<strong>/root</strong><br>反正<code>cd ~/.ssh</code>就是要进入当前目录下的<strong>.ssh</strong>文件夹<br><img src="https://i.loli.net/2018/11/23/5bf7a54286cbf.png" alt="Alt text"></p><p>输入<code>ssh-keygen -t rsa -C "eamil"</code>，这里的email是自己的GitHub绑定的邮箱地址，连续三个回车</p><p>在当前用户目录下的.ssh文件夹下，有个<code>id_rsa.pub</code>文件，复制其内容<br><img src="https://i.loli.net/2018/11/23/5bf7a54ce073d.png" alt="Alt text"></p><p>到GitHub网站，在<code>Settings</code>页面左边的<code>SSH and GPG keys</code>部分，新建一个SSH keys，粘贴刚刚复制过来的内容，匹配密钥对<br><img src="https://i.loli.net/2018/11/23/5bf7a553416b0.png" alt="Alt text"></p><p>再到Git中，输入<code>ssh -T [email protected]</code>，如果出现<strong>Hi，username</strong>，那么表明本地成功连接了GitHub<br><img src="https://i.loli.net/2018/11/23/5bf7a557e0967.png" alt="Alt text"></p><p>配置deployment，在项目文件夹中，找到配置文件<strong>_config.yml</strong>，修改repo的值，增加<strong>branch</strong>的值为<strong>master</strong><br><img src="https://i.loli.net/2018/11/23/5bf7a5bd7eef4.png" alt="Alt text"></p><p>repo的值是GitHub项目右下角，<strong>Use SSH</strong>的，以<strong>git</strong>结尾的一个链接， 默认是<strong>Use HTTPS</strong>，使用<strong>Use SSH</strong>选项就能看到以<strong>git</strong>结尾的链接。复制这个以<strong>git</strong>结尾的链接，粘贴到配置文件<strong>_config.yml</strong>，修改repo的值<br><img src="https://i.loli.net/2018/11/23/5bf7a5c225792.png" alt="Alt text"></p><p>cmd进入博客根目录，安装一个扩展，<code>npm install hexo-deployer-git --save</code><br><img src="https://i.loli.net/2018/11/23/5bf7a5c630157.png" alt="Alt text"></p><p>新建一片博客，在cmd进入根目录后，用<code>hexo new post "文章名"</code><br><img src="https://i.loli.net/2018/11/23/5bf7a5cbb7dc3.png" alt="Alt text"></p><p>找到那篇文章，文章是以.md结尾，Markdown格式，编辑内容，使用<code>hexo d -g</code>生成并且部署到GitHub上，使用之前GitHub Pages的网址就能够访问了</p>]]></content>
<categories>
<category> 个人博客 </category>
<category> Hexo </category>
</categories>
<tags>
<tag> Github </tag>
<tag> Hexo </tag>
<tag> Next </tag>
</tags>
</entry>
</search>