-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
186 lines (89 loc) · 267 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Hello World</title>
<link href="posts/4a17b156.html"/>
<url>posts/4a17b156.html</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">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">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">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="line-numbers language-bash" data-language="bash"><code class="language-bash">$ hexo new <span class="token string">"My New Post"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">$ hexo server<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>More info: <a href="https://hexo.io/docs/server.html">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="line-numbers language-bash" data-language="bash"><code class="language-bash">$ hexo generate<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>More info: <a href="https://hexo.io/docs/generating.html">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="line-numbers language-bash" data-language="bash"><code class="language-bash">$ hexo deploy<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>More info: <a href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>]]></content>
</entry>
<entry>
<title>LuckyBlog开源搭建教程</title>
<link href="posts/d74d8b76.html"/>
<url>posts/d74d8b76.html</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>之前在<a href="https://www.bilibili.com/">B站</a>上发布了个人博客的视频，播放量也破千了，有网友私聊也想要搭建一个这样的博客。经过一段时间的准备，现将本人博客的源代码公布出来，大家只需要根据以下的步骤，即可快速搭建一个漂亮完善的博客。</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20210518215948.png"></p><h3 id="0x01-LuckyBlog-介绍"><a href="#0x01-LuckyBlog-介绍" class="headerlink" title="0x01 LuckyBlog 介绍"></a>0x01 LuckyBlog 介绍</h3><p>上一个LuckyBlog版本发布于2020年的9月份，是在 <a href="https://sunhwee.com/">洪卫の博客</a> 基础上进行修改的。自从发布以来有很多网友都私信搭建了博客，同时也发现了旧版本中存在的一些问题需要解决，例如：搜索框不适配XML代码搜索，部分图片失效，代码块问题以及各种小问题。现在将最新的LuckyBlog版本代码发布出来，修复改进了不少的BUG，使其更加稳定运行。同时完善了博客的基础功能，例如：音乐、视频、相册、百宝箱等页面。同时增加了不少的新功能，例如：适配Hexo5.x、黑白天浏览模式、仿Windows页面，站点统计等。</p><ul><li>博客演示地址：<a href="http://luckyzmj.cn/">http://luckyzmj.cn/</a></li><li>开源项目地址：<a href="https://github.com/LuckyZmj/LuckyBlog">https://github.com/LuckyZmj/LuckyBlog</a></li></ul><p><strong>主题特性</strong></p><ul><li><input checked="" disabled="" type="checkbox"> 简单漂亮，文章内容美观易读</li><li><input checked="" disabled="" type="checkbox"> <a href="https://material.io/">Material Design</a> 设计</li><li><input checked="" disabled="" type="checkbox"> 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现</li><li><input checked="" disabled="" type="checkbox"> 首页轮播文章及每天动态切换 <code>Banner</code> 图片</li><li><input checked="" disabled="" type="checkbox"> 瀑布流式的博客文章列表（文章无特色图片时会有 <code>24</code> 张漂亮的图片代替）</li><li><input checked="" disabled="" type="checkbox"> 时间轴式的归档页</li><li><input checked="" disabled="" type="checkbox"> <code>词云</code>的标签页和<code>雷达图</code>的分类页</li><li><input checked="" disabled="" type="checkbox"> 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）</li><li><input checked="" disabled="" type="checkbox"> 可自定义的数据的友情链接页面</li><li><input checked="" disabled="" type="checkbox"> 支持文章置顶和文章打赏</li><li><input checked="" disabled="" type="checkbox"> 支持 <code>MathJax</code></li><li><input checked="" disabled="" type="checkbox"> <code>TOC</code> 目录，优化了目录显示效果</li><li><input checked="" disabled="" type="checkbox"> 可设置复制文章内容时追加版权信息</li><li><input checked="" disabled="" type="checkbox"> 可设置阅读文章时做密码验证</li><li><input checked="" disabled="" type="checkbox"> <a href="https://gitalk.github.io/">Gitalk</a>、<a href="https://imsun.github.io/gitment/">Gitment</a>、<a href="https://valine.js.org/">Valine</a> 和 <a href="https://disqus.com/">Disqus</a> 评论模块（推荐使用 <code>Valine</code>）</li><li><input checked="" disabled="" type="checkbox"> 集成了<a href="http://busuanzi.ibruce.info/">不蒜子统计</a>、谷歌分析（<code>Google Analytics</code>）和文章字数统计等功能</li><li><input checked="" disabled="" type="checkbox"> 支持在首页的音乐播放和视频播放功能</li><li><input checked="" disabled="" type="checkbox"> 修改了原主题以及基础主题中的一些<code>BUG</code></li><li><input checked="" disabled="" type="checkbox"> 加入图片懒加载功能，在根目录配置文件开启和关闭</li><li><input checked="" disabled="" type="checkbox"> 增加<code>留言板</code>功能 </li><li><input checked="" disabled="" type="checkbox"> 在关于板块,加入<code>简历</code>功能页</li><li><input checked="" disabled="" type="checkbox"> 增加完善<code>音乐</code>、<code>相册</code>、<code>视频</code>等功能页面 </li><li><input checked="" disabled="" type="checkbox"> 支持<code>emoji</code>表情，用<code>markdown emoji</code>语法书写直接生成对应的能<strong>跳跃</strong>的表情</li><li><input checked="" disabled="" type="checkbox"> 增加网站运行时间显示</li><li><input checked="" disabled="" type="checkbox"> 增加<code>live2d</code> 动漫人物模型</li><li><input checked="" disabled="" type="checkbox"> 整体替换Banner图片和文章特色图片</li><li><input checked="" disabled="" type="checkbox"> 增加实用的快捷导航栏功能</li><li><input checked="" disabled="" type="checkbox"> 修改了一些控件的参数以及部分样式</li><li><input checked="" disabled="" type="checkbox"> 优化了代码显示块的效果</li><li><input checked="" disabled="" type="checkbox"> 增加页面樱花飘落动效</li><li><input checked="" disabled="" type="checkbox"> 增加鼠标点击烟花爆炸动效</li><li><input checked="" disabled="" type="checkbox"> 增加页面雪花飘落动效</li><li><input checked="" disabled="" type="checkbox"> 增加博客白云背景效果</li><li><input checked="" disabled="" type="checkbox"> 增加天气接口控件</li><li><input checked="" disabled="" type="checkbox"> 加入鼠标点击文字特效</li><li><input checked="" disabled="" type="checkbox"> 增加<code>DaoVoice</code>在线聊天插件</li><li><input checked="" disabled="" type="checkbox"> 增加博客代码、图片压缩功能</li><li><input checked="" disabled="" type="checkbox"> 增加黑白天浏览模式功能</li><li><input checked="" disabled="" type="checkbox"> 增加仿<code>Windows</code>功能</li><li><input checked="" disabled="" type="checkbox"> 增加站点统计功能</li><li><input checked="" disabled="" type="checkbox"> 增加留言版一言功能</li><li><input checked="" disabled="" type="checkbox"> 其他</li></ul><h3 id="0x02-LuckyBlog-安装"><a href="#0x02-LuckyBlog-安装" class="headerlink" title="0x02 LuckyBlog 安装"></a>0x02 LuckyBlog 安装</h3><h4 id="1-安装Git"><a href="#1-安装Git" class="headerlink" title="1. 安装Git"></a>1. 安装Git</h4><p><code>Git</code>是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。<code>Git</code>的作用是将本地的网页文件传到<code>github</code>上。</p><ul><li>Git<a href="https://git-scm.com/download">下载地址</a></li><li>Git<a href="https://www.liaoxuefeng.com/wiki/896043488029600">教程</a></li></ul><p><strong>windows：</strong> 到git官网上下载.exe文件,Download git,安装选项全部默认即可。</p><h4 id="2-安装node-js"><a href="#2-安装node-js" class="headerlink" title="2. 安装node.js"></a>2. 安装node.js</h4><p><code>Hexo</code>是基于<code>node.js</code>编写的，所以需要安装一下<code>node.js</code>和里面的<code>npm</code>工具。</p><p><strong>windows：</strong> 到<a href="http://nodejs.cn/download/">Node.js官网</a>下载<code>.exe</code>文件，安装选项全部默认。安装好之后，按<code>Win+R</code>打开cmd命令提示符，输入<code>node -v</code>和<code>npm -v</code>，若出现版本号，则说明安装成功。</p><h4 id="3-添加npm国内源"><a href="#3-添加npm国内源" class="headerlink" title="3. 添加npm国内源"></a>3. 添加npm国内源</h4><p>使用阿里的国内镜像进行加速下载</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> config <span class="token builtin class-name">set</span> registry https://registry.npm.taobao.org<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h4 id="4-安装Hexo"><a href="#4-安装Hexo" class="headerlink" title="4. 安装Hexo"></a>4. 安装Hexo</h4><p>前面<code>git</code>和<code>nodejs</code>安装好后，就可以安装<code>hexo</code>了，你可以先创建一个文件夹<code>MyBlog</code>，用来存放自己的博客文件，然后<code>cd</code>到这个文件夹下（或者在这个文件夹下直接鼠标右键<code>git bash</code>打开）。</p><p>比如我的博客文件都存放在<code>C:\MyBlog</code>目录下。</p><p>在该目录下右键点击<code>Git Bash Here</code>，打开<code>git</code>的控制台窗口，以后我们所有的操作都在<code>git</code>控制台进行，就不用<code>Windows</code>自带的<code>cmd</code>了。</p><p>定位到该目录下，输入<code>npm install -g hexo-cli</code>安装<code>Hexo</code>。可能会有几个报错，不用理会。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> -g hexo-cli<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>安装完后输入<code>hexo -v</code>验证是否安装成功。</p><p>接下来初始化一下<code>hexo</code>,即初始化我们的博客网站。例如我的在<code>C:\MyBlog</code>文件夹下的命令行中，输入<code>hexo init</code>初始化文件夹</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo init<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>新建完成后，指定文件夹<code>MyBlog</code>目录下有：</p><ul><li><code>node_modules</code>: 依赖包</li><li><code>public</code>：存放生成的页面</li><li><code>scaffolds</code>：生成文章的一些模板</li><li><code>source</code>：用来存放你的文章</li><li><code>themes</code>：主题**</li><li><code>_config.yml</code>: 博客的配置文件**</li></ul><p>到此为止，本地的Hexo基础环境搭建完成了。</p><h4 id="5-安装LuckyBlog"><a href="#5-安装LuckyBlog" class="headerlink" title="5. 安装LuckyBlog"></a>5. 安装LuckyBlog</h4><p>下载源代码到本地文件下</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> clone https://github.com/LuckyZmj/LuckyBlog.git<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>将下载好的<code>LuckyBlog</code>全部复制到<code>MyBlog</code>目录下，如果复制过程中出现重复文件，点击替换。</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20210518202657.png"></p><p>最后使用 <code>npm i</code> 或者 <code>npm install</code> 安装依赖环境包即可。</p><blockquote><p>如果安装依赖环境出错，可以参考<a href="https://blog.csdn.net/Seven71111/article/details/103364738">这篇文章</a>。</p></blockquote><p>最后执行 <code>hexo clean</code> 和 <code>hexo s -g</code> 启动Hexo本地预览，即可看到效果。</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20210518204521.JPG"></p><p>到此为止LuckyBlog安装完成，接下来就是个性化设置了。</p><h3 id="0x03-LuckyBlog-个性化"><a href="#0x03-LuckyBlog-个性化" class="headerlink" title="0x03 LuckyBlog 个性化"></a>0x03 LuckyBlog 个性化</h3><blockquote><p>注意！注意！注意！在阅读以下博客个性化之前，最好希望大家有Hexo博客配置主题的基础。如果是完全小白，建议去网上搜索学习相关Hexo搭建博客的过程，另外去B站上也有很多视频教程。博客个性化是需要大家有耐心的，因为每个人的操作不同，在配置过程中可能会遇到一些不可预期的问题，希望大家可以克服这些困难，如有需要帮助，也可以私信博主帮助大家解决问题。</p></blockquote><h4 id="1-修改部署平台"><a href="#1-修改部署平台" class="headerlink" title="1. 修改部署平台"></a>1. 修改部署平台</h4><p>编辑根目录下的配置文件<code>MyBlog/_config.yml</code>，找到如下内容并修改</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">deploy:- type: <span class="token function">git</span> repo: [email protected]:LuckyZmj/LuckyZmj.github.io.git <span class="token comment"># 替换为你的部署平台地址</span> branch: master<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-修改网站信息"><a href="#2-修改网站信息" class="headerlink" title="2. 修改网站信息"></a>2. 修改网站信息</h4><p>编辑根目录下的配置文件<code>MyBlog/_config.yml</code>，找到如下内容并修改</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># Site</span>title: Luckeysubtitle: <span class="token string">'Luckeyの博客'</span> description: <span class="token string">'本科 | 计算机科学与技术 | 网络安全'</span>keywords: <span class="token string">'luckyzmj 计算机 网络安全 渗透测试'</span> <span class="token comment"># 博客网站关键词</span>author: Luckey <span class="token comment"># 博主名称</span>language: zh-CNtimezone: <span class="token string">''</span><span class="token comment"># URL</span><span class="token comment">## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'</span>url: http://www.luckyzmj.cn <span class="token comment"># 更改为你的博客地址</span>root: /<span class="token comment"># permalink: :year/:month/:day/:title/</span>permalink: posts/:abbrlink.html <span class="token comment"># p 是自定义的前缀</span>abbrlink: alg: crc32 <span class="token comment">#算法： crc16(default) and crc32</span> rep: hex <span class="token comment">#进制： dec(default) and hex</span>permalink_defaults:pretty_urls: trailing_index: <span class="token boolean">true</span> <span class="token comment"># Set to false to remove trailing 'index.html' from permalinks</span> trailing_html: <span class="token boolean">true</span> <span class="token comment"># Set to false to remove trailing '.html' from permalinks</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="3-修改博客头像"><a href="#3-修改博客头像" class="headerlink" title="3. 修改博客头像"></a>3. 修改博客头像</h4><p>编辑主题目录下的配置文件<code>MyBlog/themes/matery/_config.yml</code>，找到如下内容并修改</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># Configure website favicon and LOGO</span><span class="token comment"># 将以下改为自己的头像链接即可</span>favicon: https://s1.ax1x.com/2020/05/17/YR20js.jpglogo: https://s1.ax1x.com/2020/05/17/YRWsYT.png<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><h4 id="4-修改留言板简介"><a href="#4-修改留言板简介" class="headerlink" title="4. 修改留言板简介"></a>4. 修改留言板简介</h4><p>演示效果如下：</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20210518204949.png"></p><p>编辑 <code>/MyBlog/contact/index.md</code>，修改你想要内容即可</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">---title: contactdate: <span class="token number">2019</span>-10-25 00:00:00type: <span class="token string">"contact"</span>layout: <span class="token string">"contact"</span>---<span class="token comment">## 畅所欲言</span>---在这里可以留下你的足迹，欢迎在下方留言，欢迎交换友链，一起交流学习！<span class="token comment">## 友链</span>---Lucky_Meの友链信息博客名称: Lucky_Meの博客博客网址: http://luckyzmj.cn博客头像: https://s1.ax1x.com/2020/05/17/YRWsYT.png博客介绍: 知识面决定攻击面，知识链决定攻击深度！<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="5-修改音乐列表"><a href="#5-修改音乐列表" class="headerlink" title="5. 修改音乐列表"></a>5. 修改音乐列表</h4><p>想要修改自己喜欢的音乐之前，需要先获取音乐列表的id。</p><p>以QQ音乐为例：先登录<a href="https://y.qq.com/">QQ音乐网页版</a>，点击打开自己喜欢的音乐列表，在网页的URL处包含了音乐列表的id，如下图所示</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/posts/20200916213029.png"></p><p>编辑主题目录下的配置文件<code>MyBlog/themes/matery/_config.yml</code>，找到如下内容并修改</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 默认是博主的QQ音乐的id，大家可以改为自己音乐喜欢列表的id</span><span class="token comment"># 更新完id，就可以同步加载自己喜欢的列表音乐了</span><span class="token comment"># Whether to display the musics.</span><span class="token comment"># 是否在首页显示音乐.</span>music: enable: <span class="token boolean">true</span> title: <span class="token comment">#非吸底模式有效</span> enable: <span class="token boolean">true</span> show: 听听音乐 autoHide: <span class="token boolean">true</span> <span class="token comment"># hide automaticaly</span> server: tencent <span class="token comment">#require music platform: netease, tencent, kugou, xiami, baidu</span> type: playlist <span class="token comment">#require song, playlist, album, search, artist</span> id: <span class="token number">1776127550</span> <span class="token comment">#require song id / playlist id / album id / search keyword</span> fixed: <span class="token boolean">true</span> <span class="token comment"># 开启吸底模式</span> autoplay: <span class="token boolean">false</span> <span class="token comment"># 是否自动播放</span> theme: <span class="token string">'#42b983'</span> loop: <span class="token string">'all'</span> <span class="token comment"># 音频循环播放, 可选值: 'all', 'one', 'none'</span> order: <span class="token string">'random'</span> <span class="token comment"># 音频循环顺序, 可选值: 'list', 'random'</span> preload: <span class="token string">'auto'</span> <span class="token comment"># 预加载，可选值: 'none', 'metadata', 'auto'</span> volume: <span class="token number">0.7</span> <span class="token comment"># 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效</span> listFolded: <span class="token boolean">true</span> <span class="token comment"># 列表默认折叠</span> hideLrc: <span class="token boolean">true</span> <span class="token comment"># 隐藏歌词</span><span class="token comment"># Whether to display the musics.</span><span class="token comment"># 单独的音乐页面.</span>musics: enable: <span class="token boolean">true</span> title: <span class="token comment">#非吸底模式有效</span> enable: <span class="token boolean">true</span> show: 听听音乐 server: tencent <span class="token comment">#require music platform: netease, tencent, kugou, xiami, baidu</span> type: playlist <span class="token comment">#require song, playlist, album, search, artist</span> id: <span class="token number">1776127550</span> <span class="token comment">#require song id / playlist id / album id / search keyword</span> fixed: <span class="token boolean">false</span> <span class="token comment"># 开启吸底模式</span> autoplay: <span class="token boolean">true</span> <span class="token comment"># 是否自动播放</span> theme: <span class="token string">'#42b983'</span> loop: <span class="token string">'all'</span> <span class="token comment"># 音频循环播放, 可选值: 'all', 'one', 'none'</span> order: <span class="token string">'random'</span> <span class="token comment"># 音频循环顺序, 可选值: 'list', 'random'</span> preload: <span class="token string">'auto'</span> <span class="token comment"># 预加载，可选值: 'none', 'metadata', 'auto'</span> volume: <span class="token number">0.7</span> <span class="token comment"># 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效</span> listFolded: <span class="token boolean">false</span> <span class="token comment"># 列表默认折叠</span> listMaxHeight: <span class="token string">"525px"</span> <span class="token comment">#列表最大高度</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="6-绑定-Valine-评论"><a href="#6-绑定-Valine-评论" class="headerlink" title="6. 绑定 Valine 评论"></a>6. 绑定 Valine 评论</h4><p>编辑主题目录下的配置文件<code>MyBlog/themes/matery/_config.yml</code>，找到如下内容并修改</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.</span>valine: enable: <span class="token boolean">true</span> appId: Ucrxxxxxxxxxxxxxxxx-xxxxsz <span class="token comment"># 自行注册valine获取</span> appKey: zPsLxxxxxxxxxxxxxxerLmd <span class="token comment"># 自行注册valine获取</span> notify: <span class="token boolean">true</span> verify: <span class="token boolean">true</span> visitor: <span class="token boolean">true</span> avatar: <span class="token string">'monsterid'</span> <span class="token comment"># Gravatar style : mm/identicon/monsterid/wavatar/retro/hide</span> pageSize: <span class="token number">10</span> placeholder: <span class="token string">'留下你的足迹..'</span> <span class="token comment"># Comment Box placeholder</span> background: /medias/comment_bg.png count: <span class="token boolean">true</span> enableQQ: <span class="token number">16463223</span> <span class="token comment"># 改为自己的QQ号</span> recordIP: <span class="token boolean">true</span> requiredFields: - nick - mail guest_info: - nick - mail - <span class="token function">link</span> master: - 46606772953bed0812789d6dc955614e <span class="token comment"># md5加密后的博主邮箱</span> metaPlaceholder: <span class="token comment"># 输入框的背景文字</span> nick: 昵称/QQ号<span class="token punctuation">(</span>必填<span class="token punctuation">)</span> mail: 邮箱<span class="token punctuation">(</span>必填<span class="token punctuation">)</span> link: 网址<span class="token punctuation">(</span>https://<span class="token punctuation">)</span> lang: zh-CN tagMeta: <span class="token comment"># The String Array of Words to show Flag.[Just Only xCss Style mode]</span> - 博主 - 小伙伴 - 访客 friends: <span class="token comment"># The MD5 String Array of friends Email to show friends Flag.[Just Only xCss Style mode]</span> - cb3e577ff029d6073400d5557effd41f -<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="7-绑定-DaoVoice-在线聊天"><a href="#7-绑定-DaoVoice-在线聊天" class="headerlink" title="7. 绑定 DaoVoice 在线聊天"></a>7. 绑定 DaoVoice 在线聊天</h4><p>编辑主题目录下的配置文件<code>MyBlog/themes/matery/_config.yml</code>，找到如下内容并修改</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">daovoice: enable: <span class="token boolean">true</span> app_id: 4xxxxxxxe <span class="token comment">#DaoVoice中的app_id</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h4 id="8-快捷导航页面个性化"><a href="#8-快捷导航页面个性化" class="headerlink" title="8. 快捷导航页面个性化"></a>8. 快捷导航页面个性化</h4><p>编辑文件<code>MyBlog/source/tools/index.html</code>，以下简单标记出几处，还有其他涉及到博客信息的内容都需要改为你自己的博客信息即可。</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/posts/20200916235833.png"></p><h4 id="9-添加友情链接"><a href="#9-添加友情链接" class="headerlink" title="9. 添加友情链接"></a>9. 添加友情链接</h4><p>编辑文件<code>MyBlog/suorce/_data/friends.json</code>，按如下格式添加友情</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token string">"avatar"</span><span class="token builtin class-name">:</span> <span class="token string">"https://s1.ax1x.com/2020/05/17/YRWsYT.png"</span>, <span class="token string">"name"</span><span class="token builtin class-name">:</span> <span class="token string">"Luckey"</span>, <span class="token string">"introduction"</span><span class="token builtin class-name">:</span> <span class="token string">"越努力，越幸运"</span>, <span class="token string">"url"</span><span class="token builtin class-name">:</span> <span class="token string">"http://www.luckyzmj.cn"</span>, <span class="token string">"title"</span><span class="token builtin class-name">:</span> <span class="token string">"访问主页"</span> <span class="token punctuation">}</span>,<span class="token punctuation">{</span> <span class="token string">"avatar"</span><span class="token builtin class-name">:</span> <span class="token string">"https://sunhwee.com/hwsun.jpg"</span>, <span class="token string">"name"</span><span class="token builtin class-name">:</span> <span class="token string">"洪卫の博客"</span>, <span class="token string">"introduction"</span><span class="token builtin class-name">:</span> <span class="token string">"UESTC CVer"</span>, <span class="token string">"url"</span><span class="token builtin class-name">:</span> <span class="token string">"http://sunhwee.com"</span>, <span class="token string">"title"</span><span class="token builtin class-name">:</span> <span class="token string">"访问主页"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="10-添加相册"><a href="#10-添加相册" class="headerlink" title="10. 添加相册"></a>10. 添加相册</h4><p>比如你的图片上传图床后，链接地址如下</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/璀璨星空/01.jpghttps://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/璀璨星空/02.jpghttps://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/动漫风景/01.jpghttps://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/动漫风景/02.jpg<span class="token punctuation">..</span>.<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>首先提取出图片链接公共的部分，作为图床地址</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>然后再提取图片地址中不同的部分，作为图片地址</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">璀璨星空/01.jpg璀璨星空/02.jpg动漫风景/01.jpg动漫风景/03.jpg<span class="token punctuation">..</span>.<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><blockquote><p>具体怎么分割根据你自己图床的链接格式而定，以上为我的github图床格式为例。</p></blockquote><p>将相册图床的地址改为你自己的图床地址，需要更改两处文件</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 例如我的图床地址为：</span>https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>themes/matery/layout/galleries.ejs</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/posts/20201008183019.png"></p><p>themes/matery/layout/gallerie.ejs</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/posts/20201008183219.png"></p><p>为每个相册添加链接地址，在根目录/source/List/galleries/下新建 相册名称 文件夹，并在该文件夹下新建 <code>index.md</code> </p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/posts/20201008183808.png"></p><p>最后，在根目录/source/_data/galleries.json中添加图片链接，格式如下,</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token string">"name"</span><span class="token builtin class-name">:</span> <span class="token string">"璀璨星空"</span>, <span class="token string">"cover"</span><span class="token builtin class-name">:</span> <span class="token string">"璀璨星空/01.jpg"</span>, <span class="token string">"description"</span><span class="token builtin class-name">:</span> <span class="token string">"璀璨星空"</span>, <span class="token string">"photos"</span><span class="token builtin class-name">:</span> <span class="token punctuation">[</span> <span class="token string">"璀璨星空/01.jpg"</span>, <span class="token string">"璀璨星空/02.jpg"</span>, <span class="token string">"璀璨星空/03.jpg"</span>, <span class="token string">"璀璨星空/04.jpg"</span>, <span class="token string">"璀璨星空/05.jpg"</span>, <span class="token string">"璀璨星空/06.jpg"</span>, <span class="token string">"璀璨星空/07.jpg"</span>, <span class="token string">"璀璨星空/08.jpg"</span>, <span class="token string">"璀璨星空/09.jpg"</span>, <span class="token string">"璀璨星空/10.jpg"</span>, <span class="token string">"璀璨星空/11.jpg"</span>, <span class="token string">"璀璨星空/12.jpg"</span>, <span class="token string">"璀璨星空/13.jpg"</span>, <span class="token string">"璀璨星空/14.jpg"</span>, <span class="token string">"璀璨星空/15.jpg"</span>, <span class="token string">"璀璨星空/16.jpg"</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span>, <span class="token punctuation">{</span> <span class="token string">"name"</span><span class="token builtin class-name">:</span> <span class="token string">"动漫风景"</span>, <span class="token string">"cover"</span><span class="token builtin class-name">:</span> <span class="token string">"动漫风景/01.jpg"</span>, <span class="token string">"description"</span><span class="token builtin class-name">:</span> <span class="token string">"动漫风景"</span>, <span class="token string">"photos"</span><span class="token builtin class-name">:</span> <span class="token punctuation">[</span> <span class="token string">"动漫风景/01.jpg"</span>, <span class="token string">"动漫风景/02.jpg"</span>, <span class="token string">"动漫风景/03.jpg"</span>, <span class="token string">"动漫风景/04.jpg"</span>, <span class="token string">"动漫风景/05.jpg"</span>, <span class="token string">"动漫风景/06.jpg"</span>, <span class="token string">"动漫风景/07.jpg"</span>, <span class="token string">"动漫风景/08.jpg"</span>, <span class="token string">"动漫风景/09.jpg"</span>, <span class="token string">"动漫风景/10.jpg"</span>, <span class="token string">"动漫风景/11.jpg"</span>, <span class="token string">"动漫风景/12.jpg"</span>, <span class="token string">"动漫风景/13.jpg"</span>, <span class="token string">"动漫风景/14.jpg"</span>, <span class="token string">"动漫风景/15.jpg"</span>, <span class="token string">"动漫风景/16.jpg"</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="11-站点统计功能"><a href="#11-站点统计功能" class="headerlink" title="11. 站点统计功能"></a>11. 站点统计功能</h4><p>站点统计的数据来源于<a href="https://tongji.baidu.com/web/welcome/login">百度统计</a>,当你的网站被百度收录后就会在百度统计中出现数据，具体效果如下：</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20210518211242.png"></p><p>由于博客的统计页面数据不能直接从百度站点中调用，因此需要自行从百度站点中将相应数据填入博客站点统计页面的源代码文件中，个人建议每隔一个月手动更新一次数据。</p><p>打开<code>MyBlog\themes\matery\layout\census.ejs</code>文件，将百度统计中的数据填入源代码中，修改代码如下：</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20210518210629.png"></p><h4 id="11-仿Windows个性化"><a href="#11-仿Windows个性化" class="headerlink" title="11. 仿Windows个性化"></a>11. 仿Windows个性化</h4><p>仿Windows页面是采用<a href="https://ylui.yuri2.cn/">YLUI</a>实现的，YLUI提供了社区版本供大家学习使用，具体效果如下：</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20210518211817.png"></p><p>大家可以查看YLUI官方的<a href="https://github.com/yuri2peter/ylui/tree/master/documents">开发文档</a>进行开发，有不懂的可以加官方的QQ群：<code>191372634</code> 进行讨论。</p><h4 id="12-博客动漫风格背景图"><a href="#12-博客动漫风格背景图" class="headerlink" title="12. 博客动漫风格背景图"></a>12. 博客动漫风格背景图</h4><p>因为在上一个LuckyBlog版本发布的网站风格是偏向动漫风格的，如果大家喜欢动漫风格，只需要替换以下配置即可。</p><p><strong>博客每日轮播图：</strong> 以下链接图片全部下载保存到<code>MyBlog\themes\matery\source\medias\banner</code>中，以0~7.jpg的文件名格式命名即可。</p><pre class="line-numbers language-html" data-language="html"><code class="language-html">https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/0.jpghttps://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/1.jpghttps://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/2.jpghttps://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/3.jpghttps://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/4.jpghttps://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/5.jpghttps://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/6.jpghttps://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/7.jpg<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><strong>无文章特色背景图：</strong> 打开主题配置文件<code>MyBlog\themes\matery\_config.yml</code>，修改替换如下代码即可：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># The post featured images that needs to be displayed when there is no image.</span><span class="token comment"># 无文章特色图片时需要显示的文章特色图片.</span>featureImages: - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/01.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/02.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/04.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/06.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/07.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/10.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/11.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/12.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/09.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/14.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/15.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/16.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E4%BA%8C%E6%AC%A1%E5%85%83%E9%A3%8E/06.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/02.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/03.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/04.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/07.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/08.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/11.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/10.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/09.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/12.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/13.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/14.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/16.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/15.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/11.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/09.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/03.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/08.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/03.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/13.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/01.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/05.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/14.jpg- https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/01.jpg<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="0x04-更多内容优化"><a href="#0x04-更多内容优化" class="headerlink" title="0x04 更多内容优化"></a>0x04 更多内容优化</h3><p>以上简单介绍了 <code>LuckyBlog</code> 中一些要修改的个性化地方，其他更详细的优化参考其他关于<code>Matery</code>的文章。以下几篇文章都是基于<code>hexo-theme-matery</code>主题优化的教程，大家如果遇到问题，可以参考其中的方法。</p><ul><li><a href="http://luckyzmj.cn/posts/e3e08109.html">个人博客搭建</a></li><li><a href="https://sunhwee.com/posts/6e8839eb.html">Hexo+Github博客搭建完全教程</a></li><li><a href="https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md">hexo-theme-matery作者教程</a></li><li><a href="https://yafine-blog.cn/posts/4ab2.html">Hexo+github搭建博客(超级详细版，精细入微)</a></li><li><a href="https://blog.csdn.net/cungudafa/article/details/106278206">hexo（matery）背景、滚动条优化+增加点击跳评论</a></li></ul>]]></content>
<categories>
<category> 博客篇 </category>
</categories>
<tags>
<tag> hexo-blog-lucky </tag>
<tag> 博客搭建教程 </tag>
</tags>
</entry>
<entry>
<title>Hexo之渲染绕过</title>
<link href="posts/17fd92ae.html"/>
<url>posts/17fd92ae.html</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="0x001-Hexo-渲染"><a href="#0x001-Hexo-渲染" class="headerlink" title="0x001 Hexo 渲染"></a>0x001 Hexo 渲染</h3><p> 在Hexo部署时会默认渲染source下的所有html页面，但有时候想在Hexo博客上单独自定义html页面或README.md时，却不希望被Hexo渲染。因此对某个文件或者目录进行排除渲染是非常必要的。</p><h3 id="0x002-方法一：font-matter"><a href="#0x002-方法一：font-matter" class="headerlink" title="0x002 方法一：font matter"></a>0x002 方法一：font matter</h3><p><code>Hexo</code>新建网站页面，然后将你的代码直接写入 <code>index.md</code> 中</p><p>在 <code>Front matter</code> 中添加 <code>layout: false</code>，此方法适用于单一的纯<code>HTML</code><br><code>CSS</code> 页面。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">---title: toolsdate: <span class="token number">2020</span>-04-28 00:00:00type: <span class="token string">"tools"</span>layout: <span class="token boolean">false</span>---<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="0x003-方法二：skip-render"><a href="#0x003-方法二：skip-render" class="headerlink" title="0x003 方法二：skip render"></a>0x003 方法二：skip render</h3><p>在博客根目录下的 <code>_config.yml</code>，找到 <code>skip_render</code>，大概在32行左右，写入你想要的跳过渲染的路径，注意缩进和空格。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 指定目录跳过hexo渲染</span>skip_render: - <span class="token string">'tools/*'</span> - <span class="token string">'tools/**'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><blockquote><p>注释：<code>tools/*</code> 表示在目录 <code>source/fireworks</code> 下的文件全部跳过渲染，<code>tools/**</code> 表示在博客根目录 <code>source/tools/</code> 文件夹下的文件全部跳过渲染（例如页面的 js、css 在另一个文件夹中）。</p></blockquote><h3 id="0x004-案例：webstack-导航"><a href="#0x004-案例：webstack-导航" class="headerlink" title="0x004 案例：webstack 导航"></a>0x004 案例：webstack 导航</h3><p><code>webstack</code>是一个纯静态的网址导航网站，内容均由<code>viggo</code>收集并整理。项目基于<code>bootstrap</code>前端框架开发。</p><p><img src="https://camo.githubusercontent.com/41111c4c1d9922982f380566e6a2f8415204c52c/687474703a2f2f7777772e776562737461636b2e63632f6173736574732f696d616765732f707265766965772e676966" alt="image"></p><ul><li>Github：<a href="https://github.com/WebStackPage/WebStackPage.github.io">https://github.com/WebStackPage/WebStackPage.github.io</a></li></ul><p>在博客根目录 <code>source/</code>下新建<code>tools</code>，然后新建<code>index.html</code>,将<code>webstack</code>网页源码全选复制粘贴到里面。</p><ul><li>本站的webstack源码：<a href="view-source:http://luckyzmj.cn/tools/">view-source:http://luckyzmj.cn/tools/</a></li></ul><blockquote><p>注意：将源码里的部分信息以及跳转链接按照你真实个人博客的环境进行修改。</p></blockquote><p>然后打开博客根目录下配置文件<code>_config.yml</code>，找到<code>skip_render</code>，做如下修改：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">skip_render: - <span class="token string">'tools/*'</span> - <span class="token string">'tools/**'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>最后执行<code>hexo clean</code>和<code>hexo s -g </code>本地预览，检查无误后<code>hexo g -d</code>部署到服务器上即可。</p><h3 id="参考文章"><a href="#参考文章" class="headerlink" title="参考文章"></a>参考文章</h3><ul><li><a href="https://xiabor.com/2020/04/21/hexo3/#%E5%A6%82%E4%BD%95%E8%B7%B3%E8%BF%87hexo%E7%9A%84%E6%B8%B2%E6%9F%93">https://xiabor.com/2020/04/21/hexo3/#%E5%A6%82%E4%BD%95%E8%B7%B3%E8%BF%87hexo%E7%9A%84%E6%B8%B2%E6%9F%93</a></li></ul>]]></content>
<categories>
<category> 博客篇 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 渲染绕过 </tag>
</tags>
</entry>
<entry>
<title>文字背景粒子特效</title>
<link href="posts/4b3510a4.html"/>
<url>posts/4b3510a4.html</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>一款jQuery+CSS3的文字背景粒子动画特效，一共6种粒子效果，每种文字背景的粒子效果都不同，有漂浮的有坠落的等等。 </p><h3 id="0x001-特效演示"><a href="#0x001-特效演示" class="headerlink" title="0x001 特效演示"></a>0x001 特效演示</h3><hr><div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;"><span class="particletext fire" style="font-size:48px;position: relative;">This is fires</span></div><div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;"> <span class="particletext lines" style="font-size:48px; position: relative;">This is lines</span></div><div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;"><span class="particletext hearts" style="font-size:48px; position: relative;">This is hearts</span></div><div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;"> <span class="particletext bubbles" style="font-size:48px; position: relative;">This is bubbles</span></div><div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;"> <span class="particletext confetti" style="font-size:48px; position: relative;">This is confetti</span></div><div style="width: 100%;text-align: center; height: 120px; position: relative; bottom: 0px;"> <span class="particletext sunbeams" style="font-size:48px; position: relative;">This is sunbeams</span></div><style>.particletext {}.fire > .particle { position: absolute; background-color: rgba(255, 193, 7, 0.5); border-radius: 40px; border-top-right-radius: 0px; -webkit-animation: fires 0.8s linear infinite; animation: fires 0.8s linear infinite; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0;}/*css keyframes 动画*/@-webkit-keyframes fires { 0% { -webkit-transform: rotate(-70deg) translateY(0%); transform: rotate(-70deg) translateY(0%); } 25% { -webkit-transform: rotate(-20deg) translateY(-5%); transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { -webkit-transform: rotate(-70deg) translateY(-10%); transform: rotate(-70deg) translateY(-10%); } 75% { -webkit-transform: rotate(-20deg) translateY(-20%); transform: rotate(-20deg) translateY(-20%); } 100% { -webkit-transform: rotate(-70deg) translateY(-40%); transform: rotate(-70deg) translateY(-40%); opacity: 1; }}@keyframes fires { 0% { -webkit-transform: rotate(-70deg) translateY(0%); transform: rotate(-70deg) translateY(0%); } 25% { -webkit-transform: rotate(-20deg) translateY(-5%); transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { -webkit-transform: rotate(-70deg) translateY(-10%); transform: rotate(-70deg) translateY(-10%); } 75% { -webkit-transform: rotate(-20deg) translateY(-20%); transform: rotate(-20deg) translateY(-20%); } 100% { -webkit-transform: rotate(-70deg) translateY(-40%); transform: rotate(-70deg) translateY(-40%); opacity: 1; }}</style><script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script>function fire() { $.each($(".particletext.fire"), function(){ var firecount = ($(this).width()/50)*20; for(var i = 0; i <= firecount; i++) { var size = $.rnd(8,12); $(this).append('<span class="particle" style="top:' + $.rnd(40,70) + '%; left:' + $.rnd(-10,100) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0,20)/10) + 's;"></span>'); } }); } </script><style>.lines > .particle { position: absolute; background-color: rgba(244, 67, 54, 0.5); -webkit-animation: lines 3s linear infinite; animation: lines 3s linear infinite;}@-webkit-keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }}@keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); }}</style><script>function lines() { $.each($(".particletext.lines"), function(){ var linecount = ($(this).width()/50)*10; for(var i = 0; i <= linecount; i++) { $(this).append('<span class="particle" style="top:' + $.rnd(-30,30) + '%; left:' + $.rnd(-10,110) + '%;width:' + $.rnd(1,3) + 'px; height:' + $.rnd(20,80) + '%;animation-delay: -' + ($.rnd(0,30)/10) + 's;"></span>'); } }); } </script><style>.hearts > .particle { opacity: 0; position: absolute; background-color: #cc2a5d; -webkit-animation: hearts 3s ease-in infinite; animation: hearts 3s ease-in infinite;}.hearts > .particle:before,.hearts > .particle:after { position: absolute; content: ''; border-radius: 100px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #cc2a5d;}.hearts > .particle:before { -webkit-transform: translateX(-50%); transform: translateX(-50%);}.hearts > .particle:after { -webkit-transform: translateY(-50%); transform: translateY(-50%);}@-webkit-keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); }}@keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); }}</style><script>function hearts() { $.each($(".particletext.hearts"), function(){ var heartcount = ($(this).width()/50)*5; for(var i = 0; i <= heartcount; i++) { var size = ($.rnd(60,120)/10); $(this).append('<span class="particle" style="top:' + $.rnd(20,80) + '%; left:' + $.rnd(0,95) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0,30)/10) + 's;"></span>'); } }); } </script><style>.bubbles > .particle { opacity: 0; position: absolute; background-color: rgba(33, 150, 243, 0.5); -webkit-animation: bubbles 3s ease-in infinite; animation: bubbles 3s ease-in infinite; border-radius: 100%;}@-webkit-keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); }}@keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); }}</style><script>function bubbles() { $.each($(".particletext.bubbles"), function(){ var bubblecount = ($(this).width()/50)*10; for(var i = 0; i <= bubblecount; i++) { var size = ($.rnd(40,80)/10); $(this).append('<span class="particle" style="top:' + $.rnd(20,80) + '%; left:' + $.rnd(0,95) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0,30)/10) + 's;"></span>'); } }); } </script><style>.confetti > .particle { opacity: 0; position: absolute; -webkit-animation: confetti 3s ease-in infinite; animation: confetti 3s ease-in infinite;}.confetti > .particle.c1 { background-color: rgba(76, 175, 80, 0.5);}.confetti > .particle.c2 { background-color: rgba(156, 39, 176, 0.5);}@-webkit-keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); }}@keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); }}</style><script>function confetti() { $.each($(".particletext.confetti"), function(){ var confetticount = ($(this).width()/50)*10; for(var i = 0; i <= confetticount; i++) { $(this).append('<span class="particle c' + $.rnd(1,2) + '" style="top:' + $.rnd(10,50) + '%; left:' + $.rnd(0,100) + '%;width:' + $.rnd(6,8) + 'px; height:' + $.rnd(3,4) + 'px;animation-delay: ' + ($.rnd(0,30)/10) + 's;"></span>'); } }); } </script><style>.sunbeams > .particle { position: absolute; background-color: rgba(253, 216, 53, 0.5); -webkit-animation: sunbeams 3s linear infinite; animation: sunbeams 3s linear infinite;}@-webkit-keyframes sunbeams { 0% { -webkit-transform: translateY(40%) rotate(0deg); transform: translateY(40%) rotate(0deg); } 50% { -webkit-transform: translateY(-40%) rotate(180deg); transform: translateY(-40%) rotate(180deg); } 100% { -webkit-transform: translateY(40%) rotate(360deg); transform: translateY(40%) rotate(360deg); } 0%,14%,17%,43%,53%,71%,80%,94%,100% { opacity: 0; } 6%,15%,24%,28%,48%,55%,78%,82%,99% { opacity: 1; }}@keyframes sunbeams { 0% { -webkit-transform: translateY(40%) rotate(0deg); transform: translateY(40%) rotate(0deg); } 50% { -webkit-transform: translateY(-40%) rotate(180deg); transform: translateY(-40%) rotate(180deg); } 100% { -webkit-transform: translateY(40%) rotate(360deg); transform: translateY(40%) rotate(360deg); } 0%,14%,17%,43%,53%,71%,80%,94%,100% { opacity: 0; } 6%,15%,24%,28%,48%,55%,78%,82%,99% { opacity: 1; }}</style><script>function sunbeams() { $.each($(".particletext.sunbeams"), function(){ var linecount = ($(this).width()/50)*10; for(var i = 0; i <= linecount; i++) { $(this).append('<span class="particle" style="top:' + $.rnd(-50,00) + '%; left:' + $.rnd(0,100) + '%;width:' + $.rnd(1,3) + 'px; height:' + $.rnd(80,160) + '%;animation-delay: -' + ($.rnd(0,30)/10) + 's;"></span>'); } }); } </script><script type="text/javascript"> function initparticles() { bubbles(); hearts(); lines(); confetti(); fire(); sunbeams(); } jQuery.rnd = function(m,n) { m = parseInt(m); n = parseInt(n); return Math.floor( Math.random() * (n - m + 1) ) + m; } initparticles();</script><h3 id="0x002-Fires-特效"><a href="#0x002-Fires-特效" class="headerlink" title="0x002 Fires 特效"></a>0x002 Fires 特效</h3><h4 id="1-JS-代码"><a href="#1-JS-代码" class="headerlink" title="1. JS 代码"></a>1. JS 代码</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script<span class="token operator">></span><span class="token keyword">function</span> <span class="token function">fire</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".particletext.fire"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">var</span> firecount <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">20</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> firecount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> size <span class="token operator">=</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">,</span><span class="token number">12</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'<span class="particle" style="top:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">40</span><span class="token punctuation">,</span><span class="token number">70</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%; left:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;width:'</span> <span class="token operator">+</span> size <span class="token operator">+</span> <span class="token string">'px; height:'</span> <span class="token operator">+</span> size <span class="token operator">+</span> <span class="token string">'px;animation-delay: '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">20</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'s;"></span>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> jQuery<span class="token punctuation">.</span><span class="token function-variable function">rnd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> m <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span> n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> m <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">fire</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-CSS-代码"><a href="#2-CSS-代码" class="headerlink" title="2. CSS 代码"></a>2. CSS 代码</h4><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector"><style>.fire > .particle</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 193<span class="token punctuation">,</span> 7<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token property">border-top-right-radius</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> fires 0.8s linear infinite<span class="token punctuation">;</span> <span class="token property">animation</span><span class="token punctuation">:</span> fires 0.8s linear infinite<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> fires</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">25%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-5%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-5%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">50%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-10%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-10%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">75%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-20%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-20%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@keyframes</span> fires</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">25%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-5%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-5%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">50%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-10%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-10%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">75%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-20%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-20%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-70deg<span class="token punctuation">)</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="3-HTML-代码"><a href="#3-HTML-代码" class="headerlink" title="3. HTML 代码"></a>3. HTML 代码</h4><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>particletext fire<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is fires<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="0x003-Lines-特效"><a href="#0x003-Lines-特效" class="headerlink" title="0x003 Lines 特效"></a>0x003 Lines 特效</h3><h4 id="1-JS-代码-1"><a href="#1-JS-代码-1" class="headerlink" title="1. JS 代码"></a>1. JS 代码</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script<span class="token operator">></span><span class="token keyword">function</span> <span class="token function">lines</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".particletext.lines"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">var</span> linecount <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> linecount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'<span class="particle" style="top:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">30</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%; left:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token number">110</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;width:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px; height:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">,</span><span class="token number">80</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;animation-delay: -'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'s;"></span>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> jQuery<span class="token punctuation">.</span><span class="token function-variable function">rnd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> m <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span> n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> m <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">lines</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-CSS-代码-1"><a href="#2-CSS-代码-1" class="headerlink" title="2. CSS 代码"></a>2. CSS 代码</h4><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector"><style>.lines > .particle</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>244<span class="token punctuation">,</span> 67<span class="token punctuation">,</span> 54<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> lines 3s linear infinite<span class="token punctuation">;</span> <span class="token property">animation</span><span class="token punctuation">:</span> lines 3s linear infinite<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> lines</span> <span class="token punctuation">{</span> <span class="token selector">0%, 50%, 100%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">25%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">75%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@keyframes</span> lines</span> <span class="token punctuation">{</span> <span class="token selector">0%, 50%, 100%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">25%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">75%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="3-HTML-代码-1"><a href="#3-HTML-代码-1" class="headerlink" title="3. HTML 代码"></a>3. HTML 代码</h4><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>particletext lines<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is lines<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="0x004-Hearts-特效"><a href="#0x004-Hearts-特效" class="headerlink" title="0x004 Hearts 特效"></a>0x004 Hearts 特效</h3><h4 id="1-JS-代码-2"><a href="#1-JS-代码-2" class="headerlink" title="1. JS 代码"></a>1. JS 代码</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script<span class="token operator">></span><span class="token keyword">function</span> <span class="token function">hearts</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".particletext.hearts"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">var</span> heartcount <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">5</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> heartcount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> size <span class="token operator">=</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">60</span><span class="token punctuation">,</span><span class="token number">120</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'<span class="particle" style="top:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">,</span><span class="token number">80</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%; left:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">95</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;width:'</span> <span class="token operator">+</span> size <span class="token operator">+</span> <span class="token string">'px; height:'</span> <span class="token operator">+</span> size <span class="token operator">+</span> <span class="token string">'px;animation-delay: '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'s;"></span>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> jQuery<span class="token punctuation">.</span><span class="token function-variable function">rnd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> m <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span> n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> m <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">hearts</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-CSS-代码-2"><a href="#2-CSS-代码-2" class="headerlink" title="2. CSS 代码"></a>2. CSS 代码</h4><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector"><style>.hearts > .particle</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #cc2a5d<span class="token punctuation">;</span> <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> hearts 3s ease-in infinite<span class="token punctuation">;</span> <span class="token property">animation</span><span class="token punctuation">:</span> hearts 3s ease-in infinite<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">.hearts > .particle:before, .hearts > .particle:after</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #cc2a5d<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">.hearts > .particle:before</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">.hearts > .particle:after</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> hearts</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">20%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0.8<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@keyframes</span> hearts</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">20%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0.8<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="3-HTML-代码-2"><a href="#3-HTML-代码-2" class="headerlink" title="3. HTML 代码"></a>3. HTML 代码</h4><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>particletext hearts<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is hearts<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="0x005-Bubbles-特效"><a href="#0x005-Bubbles-特效" class="headerlink" title="0x005 Bubbles 特效"></a>0x005 Bubbles 特效</h3><h4 id="1-JS-代码-3"><a href="#1-JS-代码-3" class="headerlink" title="1. JS 代码"></a>1. JS 代码</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script<span class="token operator">></span><span class="token keyword">function</span> <span class="token function">bubbles</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".particletext.bubbles"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">var</span> bubblecount <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> bubblecount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> size <span class="token operator">=</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">40</span><span class="token punctuation">,</span><span class="token number">80</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'<span class="particle" style="top:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">20</span><span class="token punctuation">,</span><span class="token number">80</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%; left:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">95</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;width:'</span> <span class="token operator">+</span> size <span class="token operator">+</span> <span class="token string">'px; height:'</span> <span class="token operator">+</span> size <span class="token operator">+</span> <span class="token string">'px;animation-delay: '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'s;"></span>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> jQuery<span class="token punctuation">.</span><span class="token function-variable function">rnd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> m <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span> n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> m <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">bubbles</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-CSS-代码-3"><a href="#2-CSS-代码-3" class="headerlink" title="2. CSS 代码"></a>2. CSS 代码</h4><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector"><style><style>.bubbles > .particle</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>33<span class="token punctuation">,</span> 150<span class="token punctuation">,</span> 243<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> bubbles 3s ease-in infinite<span class="token punctuation">;</span> <span class="token property">animation</span><span class="token punctuation">:</span> bubbles 3s ease-in infinite<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> bubbles</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">20%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@keyframes</span> bubbles</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">20%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -20%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> -1000%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="3-HTML-代码-3"><a href="#3-HTML-代码-3" class="headerlink" title="3. HTML 代码"></a>3. HTML 代码</h4><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>particletext bubbles<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is bubbles<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="0x006-Confetti-特效"><a href="#0x006-Confetti-特效" class="headerlink" title="0x006 Confetti 特效"></a>0x006 Confetti 特效</h3><h4 id="1-JS-代码-4"><a href="#1-JS-代码-4" class="headerlink" title="1. JS 代码"></a>1. JS 代码</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script<span class="token operator">></span><span class="token keyword">function</span> <span class="token function">confetti</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".particletext.confetti"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">var</span> confetticount <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> confetticount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'<span class="particle c'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'" style="top:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token number">50</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%; left:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;width:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">,</span><span class="token number">8</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px; height:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px;animation-delay: '</span> <span class="token operator">+</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'s;"></span>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> jQuery<span class="token punctuation">.</span><span class="token function-variable function">rnd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> m <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span> n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> m <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">confetti</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-CSS-代码-4"><a href="#2-CSS-代码-4" class="headerlink" title="2. CSS 代码"></a>2. CSS 代码</h4><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector"><style>.confetti > .particle</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> confetti 3s ease-in infinite<span class="token punctuation">;</span> <span class="token property">animation</span><span class="token punctuation">:</span> confetti 3s ease-in infinite<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">.confetti > .particle.c1</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>76<span class="token punctuation">,</span> 175<span class="token punctuation">,</span> 80<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">.confetti > .particle.c2</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>156<span class="token punctuation">,</span> 39<span class="token punctuation">,</span> 176<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> confetti</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">10%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">35%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-800%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>270deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-800%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>270deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">80%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>2000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>1440deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>2000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>1440deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@keyframes</span> confetti</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>0%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">10%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">35%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-800%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>270deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-800%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>270deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">80%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>2000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>1440deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>2000%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>1440deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="3-HTML-代码-4"><a href="#3-HTML-代码-4" class="headerlink" title="3. HTML 代码"></a>3. HTML 代码</h4><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>particletext confetti<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is confetti<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="0x007-Sunbeams-特效"><a href="#0x007-Sunbeams-特效" class="headerlink" title="0x007 Sunbeams 特效"></a>0x007 Sunbeams 特效</h3><h4 id="1-JS-代码-5"><a href="#1-JS-代码-5" class="headerlink" title="1. JS 代码"></a>1. JS 代码</h4><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script<span class="token operator">></span><span class="token keyword">function</span> <span class="token function">sunbeams</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> $<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".particletext.sunbeams"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword">var</span> linecount <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">width</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">50</span><span class="token punctuation">)</span><span class="token operator">*</span><span class="token number">10</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> linecount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'<span class="particle" style="top:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">50</span><span class="token punctuation">,</span><span class="token number">00</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%; left:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;width:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px; height:'</span> <span class="token operator">+</span> $<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">80</span><span class="token punctuation">,</span><span class="token number">160</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%;animation-delay: -'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rnd</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">30</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'s;"></span>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> jQuery<span class="token punctuation">.</span><span class="token function-variable function">rnd</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">m<span class="token punctuation">,</span>n</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> m <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">;</span> n <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>n <span class="token operator">-</span> m <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">sunbeams</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-CSS-代码-5"><a href="#2-CSS-代码-5" class="headerlink" title="2. CSS 代码"></a>2. CSS 代码</h4><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector"><style>.sunbeams > .particle</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>253<span class="token punctuation">,</span> 216<span class="token punctuation">,</span> 53<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> sunbeams 3s linear infinite<span class="token punctuation">;</span> <span class="token property">animation</span><span class="token punctuation">:</span> sunbeams 3s linear infinite<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> sunbeams</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">50%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">0%,14%,17%,43%,53%,71%,80%,94%,100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">6%,15%,24%,28%,48%,55%,78%,82%,99%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@keyframes</span> sunbeams</span> <span class="token punctuation">{</span> <span class="token selector">0%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">50%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">100%</span> <span class="token punctuation">{</span> <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>40%<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">0%,14%,17%,43%,53%,71%,80%,94%,100%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">6%,15%,24%,28%,48%,55%,78%,82%,99%</span> <span class="token punctuation">{</span> <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="3-HTML-代码-5"><a href="#3-HTML-代码-5" class="headerlink" title="3. HTML 代码"></a>3. HTML 代码</h4><pre class="line-numbers language-html" data-language="html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 120px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>particletext sunbeams<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">font-size</span><span class="token punctuation">:</span>48px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is sunbeams<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>]]></content>
<categories>
<category> 前端篇 </category>
</categories>
<tags>
<tag> jQuery+CSS3 </tag>
<tag> 粒子特效 </tag>
</tags>
</entry>
<entry>
<title>PicGo+GitHub 图床搭建</title>
<link href="posts/7a46f93c.html"/>
<url>posts/7a46f93c.html</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>用GitHub搭建图床，在很久之前我就有了解，但由于市面上有挺多免费的图床，比如我之前一直在用的 路过图床，所以一直懒得动手搭建GitHub图床。一直到前两天我在完善博客的相册时，发现 路过图床 免费版的有这么多限制，比如：每小时限制上传50张图片，每天限制上传100张图片，而且免费版用户的存储容量貌似不过300M，这才意识到有一个自己的GitHub图床是多么重要。</p><h3 id="0x001-PicGO-介绍"><a href="#0x001-PicGO-介绍" class="headerlink" title="0x001 PicGO 介绍"></a>0x001 PicGO 介绍</h3><p>PicGo是一款图片上传工具，目前支持 SM.MS图床、腾讯云COS、GitHub图床、七牛图床、Imgur图床、阿里云OSS、又拍云图床，未来将支持更多图床。</p><p>在支持的这些图床中，SM.MS和Imgur有免费版和收费版，免费版的肯定有很多的使用限制，比如每小时限制上传次数，限制用户的上传容量等等；腾讯云COS、阿里云、有拍云都是要收费使用的；七牛云貌似前期使用免费，后期又要收费才能使用，就剩下的GitHub才是免费且最可靠的。</p><p>PicGo源项目GitHub地址已给出，但是去GitHub下载速度非常慢，这里额外提供一个蓝奏云的快速下载地址。</p><ul><li>GitHub地址：<a href="https://github.com/Molunerfinn/PicGo">https://github.com/Molunerfinn/PicGo</a></li><li>蓝奏云地址：<a href="https://luckyzmj.lanzous.com/id3e0id">https://luckyzmj.lanzous.com/id3e0id</a></li></ul><h3 id="0x002-GitHub-图床"><a href="#0x002-GitHub-图床" class="headerlink" title="0x002 GitHub 图床"></a>0x002 GitHub 图床</h3><h4 id="1-创建GitHub图床仓库"><a href="#1-创建GitHub图床仓库" class="headerlink" title="1. 创建GitHub图床仓库"></a>1. 创建GitHub图床仓库</h4><p>首先需要有一个登录GitHub的账号，没有的话去<a href="https://github.com/">GitHub官网</a>注册一个</p><p>创建一个新的图床仓库，点击右上角的New repository</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20200529155833.png"></p><p>填写如下配置信息，然后Create创建仓库</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20200529160010.png"></p><h4 id="2-获取GitHub-token值"><a href="#2-获取GitHub-token值" class="headerlink" title="2. 获取GitHub token值"></a>2. 获取GitHub token值</h4><p>点击右上的头像，选择设置Setting</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20200529160727.png"></p><p>点击选择Developer settings </p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20200529160939.png"></p><p>点击 Generate New token</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20200529161241.png"></p><p>填写如下配置信息，只要勾选repo选项即可，然后页面拉到底部点击Generate token 即可</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20200529161716.png"></p><p>此时会跳转到带有token的页面，将token值复制记录下来，之后用PicGo绑定GitHub图床时会利用到</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20200529162127.png"></p><h3 id="0x003-PicGo-配置"><a href="#0x003-PicGo-配置" class="headerlink" title="0x003 PicGo 配置"></a>0x003 PicGo 配置</h3><h4 id="1-绑定GitHub图床"><a href="#1-绑定GitHub图床" class="headerlink" title="1. 绑定GitHub图床"></a>1. 绑定GitHub图床</h4><p>首先下载安装好PicGo软件，然后在右列表找到GitHub图床配置</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20200529163130.png"></p><p><strong>1. 设定仓库名(必填)：</strong> </p><p>按照“GitHub账户名/仓库名的格式填写”，比如我的是：Luckyzmj/imgbed</p><p><strong>2. 设定分支名(必填)：</strong> </p><p>仓库分支名填写”master”或者”main”，视情况而定。因为GitHub 官方表示,从2020年10月1日起,在该平台上创建的所有新的源代码仓库将默认被命名为”main”,而不是原先的”master”。</p><p><strong>3. 设定Token(必填)：</strong> </p><p>将之前步骤的Token值复制粘贴到这里</p><p><strong>4. 指定存储路径：</strong> </p><p>这个选项可以为空，如果想将图片上传到仓库的指定目录下，可以填写目录名加/，比如我的imgbed仓库下有个posts文件夹，需设置为 posts/</p><p><strong>5. 设定自定义域名：</strong> </p><p>这里统一用jsdelivr的CDN加速域名，在上传图片后成功后，PicGo会将“自定义域名+上传的图片名”生成的访问链接</p><pre class="line-numbers language-none"><code class="language-none">自定义域名格式：https://cdn.jsdelivr.net/gh/GitHub账户名/仓库名以我的格式为例：https://cdn.jsdelivr.net/gh/Luckyzmj/imgbed<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>配置完全部信息后，点击 设为默认图床，最后点击确定即可</p><h4 id="2-上传图片到图床"><a href="#2-上传图片到图床" class="headerlink" title="2. 上传图片到图床"></a>2. 上传图片到图床</h4><p>在上传区上传图片，可支持本地图片上传(可多选图片)、剪贴板上传、URL上传等三种方式。上传图片成功后，选择你想要生成的图片链接格式</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20200529170555.png"></p><p>在图片区，可以看到成功上传的图片，选择相应的图片进行操作即可</p><p><img src="https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/posts/20200529170831.png"></p><h4 id="3-PicGo-注意事项"><a href="#3-PicGo-注意事项" class="headerlink" title="3. PicGo 注意事项"></a>3. PicGo 注意事项</h4><p>如果配置完PicGo后却上传图片失败，可以参考以下方法：</p><ol><li>检查自定义域名是否正确</li><li>仓库名不要有空格</li><li>图片名字不要带有特殊符号，如：%、+、*、空格等</li><li>建议开启时间戳重命名，防止图片名字重复</li><li>上传图片间歇太短，需在PicGo设置中关闭Server选项</li><li>PicGo应用不稳定因素，需重启应用</li></ol><h3 id="参考文章"><a href="#参考文章" class="headerlink" title="参考文章"></a>参考文章</h3><ul><li><a href="https://blog.csdn.net/sunhwee/article/details/100109956">https://blog.csdn.net/sunhwee/article/details/100109956</a></li></ul>]]></content>
<categories>
<category> 博客篇 </category>
</categories>
<tags>
<tag> PicGo </tag>
<tag> GitHub图床 </tag>
</tags>
</entry>
<entry>
<title>阿里云服务器部署Hexo博客</title>
<link href="posts/19d2a4e6.html"/>
<url>posts/19d2a4e6.html</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><hr><p> 相信大部分人使用Hexo搭建个人博客都会部署到一些免费的代码托管平台上，但这些免费的平台总是差强人意，比如国外的GitHub平台虽然完全免费，但在国内访问加载速度非常慢，又或者是国内的码云平台免费版有许多功能被阉割掉了，比如不能自定义域名，不能每次自动刷新提交的代码，需要到码云平台上手动刷新，如此一来非常繁琐。</p><p> 为了有效解决上诉的一些问题，有条件的话，不妨在自己的云服务器上搭建Hexo博客。</p><h2 id="效果演示"><a href="#效果演示" class="headerlink" title="效果演示"></a>效果演示</h2><hr><p>这是Hexo博客部署到GitHub上的网站测速效果</p><p><img src="https://s1.ax1x.com/2020/03/12/8mhkv9.png" alt="演示demo1"></p><p>这是Hexo博客部署到阿里云服务器后的网站测速效果</p><p><img src="https://s1.ax1x.com/2020/03/12/8mWYQA.png" alt="演示demo2"></p><h2 id="环境准备"><a href="#环境准备" class="headerlink" title="环境准备"></a>环境准备</h2><hr><ul><li>本地环境：Windows 10 </li><li>云服务器环境：阿里云ECS（CentOS7.x）</li></ul><h2 id="开始部署"><a href="#开始部署" class="headerlink" title="开始部署"></a>开始部署</h2><hr><h3 id="本地环境搭建"><a href="#本地环境搭建" class="headerlink" title="本地环境搭建"></a>本地环境搭建</h3><p><strong>1.安装Git</strong></p><p>到git官网上下载.exe文件,Download git,安装选项还是全部默认，最后一步添加路径时选择<code>Use Git from the Windows Command Prompt</code>。</p><ul><li>Git<a href="https://git-scm.com/download">下载地址</a></li><li>Git<a href="https://www.liaoxuefeng.com/wiki/896043488029600">教程</a></li></ul><p><strong>2.安装Nodejs</strong></p><p>到<a href="http://nodejs.cn/download/">Node.js官网</a>下载<code>.exe</code>文件，安装选项全部默认。安装好之后，按<code>Win+R</code>打开cmd命令提示符，输入<code>node -v</code>和<code>npm -v</code>，若出现版本号，则说明安装成功。</p><p>使用npm阿里的国内镜像进行加速下载</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> config <span class="token builtin class-name">set</span> registry https://registry.npm.taobao.org<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p><strong>4.安装Hexo</strong></p><p>先创建一个文件夹<code>MyBlog</code>，用来存放自己的博客文件，然后<code>cd</code>到这个文件夹下（或者在这个文件夹下直接右键<code>git bash here</code>打开）。</p><p>定位到该目录下，输入<code>npm install -g hexo-cli</code>安装<code>Hexo</code>。可能会有几个报错，不用理会。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> -g hexo-cli<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>安装完后输入<code>hexo -v</code>,若出现版本号则，说明安装成功。</p><p>接下来初始化一下<code>hexo</code>,即初始化我们的博客，输入<code>hexo init</code>初始化文件夹</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo init MyBlog<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>新建完成后，指定文件夹<code>MyBlog</code>目录下有：</p><ul><li><code>node_modules</code>: 依赖包</li><li><code>public</code>：存放生成的页面</li><li><code>scaffolds</code>：生成文章的一些模板</li><li><code>source</code>：用来存放你的文章</li><li><code>themes</code>：主题**</li><li><code>_config.yml</code>: 博客的配置文件**</li></ul><p>输入<code>hexo g</code>生成静态网页，然后输入<code>hexo s</code>打开本地服务器预览</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo ghexo s<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p><img src="https://s1.ax1x.com/2020/03/12/8VdlGD.png" alt="Hexo"></p><h3 id="生成ssh公钥"><a href="#生成ssh公钥" class="headerlink" title="生成ssh公钥"></a>生成ssh公钥</h3><p>在本地桌面点击右键<code>Git Bash Here</code>打开Git终端，执行如下命令`,一路回车</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">ssh-keygen -t rsa<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>这个时候它会告诉你已经生成了<code>.ssh</code>的文件夹。在<code>git bash</code>中输入</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">cat</span> ~/.ssh/id_rsa.pub<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>输出的内容就是公钥信息了</p><h3 id="阿里云服务器环境搭建"><a href="#阿里云服务器环境搭建" class="headerlink" title="阿里云服务器环境搭建"></a>阿里云服务器环境搭建</h3><p>安装<code>Git</code></p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">yum <span class="token function">install</span> <span class="token function">git</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>创建<code>Git</code>账户</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">adduser <span class="token function">git</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>添加账户权限</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">chmod</span> <span class="token number">740</span> /etc/sudoers<span class="token function">vim</span> /etc/sudoers<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>找到</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment">## Allow root to run any commands anywhere</span>root <span class="token assign-left variable">ALL</span><span class="token operator">=</span><span class="token punctuation">(</span>ALL<span class="token punctuation">)</span> ALL<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>添加以下内容</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> <span class="token assign-left variable">ALL</span><span class="token operator">=</span><span class="token punctuation">(</span>ALL<span class="token punctuation">)</span> ALL<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>保存退出并改回权限</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">chmod</span> <span class="token number">400</span> /etc/sudoers<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>设置<code>git</code>账户密码</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">sudo</span> <span class="token function">passwd</span> <span class="token function">git</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>切换至<code>git</code>用户，创建 <code>~/.ssh</code> 文件夹和 <code>~/.ssh/authorized_keys</code> 文件，并赋予相应的权限</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">su</span> <span class="token function">git</span><span class="token function">mkdir</span> ~/.ssh<span class="token function">vim</span> ~/.ssh/authorized_keys<span class="token comment"># 然后将win10中生成的id_rsa.pub文件中的公钥复制到authorized_keys</span><span class="token function">chmod</span> <span class="token number">600</span> /home/git/.ssh/authorized_keys<span class="token function">chmod</span> <span class="token number">700</span> /home/git/.ssh<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>在本地<code>Git</code>终端中测试是否能免密登录<code>git</code>，其中<code>SERVER</code>为填写自己的云主机<code>IP</code>，执行输入<code>yes</code>后不用密码就说明好了</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">ssh</span> -v git@SERVER<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>创建目录</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment">#repo作为为Git仓库目录</span><span class="token function">mkdir</span> /var/repo<span class="token function">chown</span> -R git:git /var/repo<span class="token function">chmod</span> -R <span class="token number">755</span> /var/repo<span class="token comment">#hexo作为网站根目录</span><span class="token function">mkdir</span> /var/www/hexo<span class="token function">chown</span> -R git:git /var/www/hexo<span class="token function">chmod</span> -R <span class="token number">755</span> /var/www/hexo<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>然后创建一个裸的 <code>Git</code> 仓库</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token builtin class-name">cd</span> var/repo<span class="token function">git</span> init --bare hexoBlog.git<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>创建一个新的 <code>Git</code> 钩子，用于自动部署 在 <code>/var/repo/hexoBlog.git</code> 下，有一个自动生成的 <code>hooks</code> 文件夹。我们需要在里边新建一个新的钩子文件 <code>post-receive</code>。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">vim</span> /var/repo/hexoBlog.git/hooks/post-receive<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>按 <code>i</code> 键进入文件的编辑模式，在该文件中添加两行代码（将下边的代码粘贴进去)，指定 <code>Git</code> 的工作树（源代码）和 <code>Git</code> 目录（配置文件等）</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token shebang important">#!/bin/bash</span><span class="token function">git</span> --work-tree<span class="token operator">=</span>/var/www/hexo --git-dir<span class="token operator">=</span>/var/repo/hexoBlog.git checkout -f<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>然后，按 <code>Esc</code> 键退出编辑模式，输入”<code>:wq</code>” 保存退出。</p><p>修改文件权限，使得其可执行</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">chown</span> -R git:git /var/repo/hexoBlog.git/hooks/post-receive<span class="token function">chmod</span> +x /var/repo/hexoBlog.git/hooks/post-receive<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>到此为止 <code>Git</code> 仓库就搭建完成了。</p><h3 id="阿里云服务器配置Nginx"><a href="#阿里云服务器配置Nginx" class="headerlink" title="阿里云服务器配置Nginx"></a>阿里云服务器配置Nginx</h3><p>用宝塔面板来一键部署Nginx <code>Linux</code>面板6.0安装命令(暂时仅兼容<code>Centos7.x</code>，其它系统版本请安装5.9稳定版)：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">yum <span class="token function">install</span> -y <span class="token function">wget</span> <span class="token operator">&&</span> <span class="token function">wget</span> -O install.sh http://download.bt.cn/install/install_6.0.sh <span class="token operator">&&</span> <span class="token function">bash</span> install.sh<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p><code>Linux</code>面板6.0升级专业版</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">curl</span> http://download.bt.cn/install/update6.sh<span class="token operator">|</span><span class="token function">bash</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>安装完成后会显示面板后台地址·账号·密码。打开面板后台地址登陆面板，选择<code>Nginx</code>的部署方案，静静等待部署。</p><p>部署完成，点击网站-添加站点-输入域名(没有域名的输入自己的<code>IP</code>地址)-底部的<code>PHP</code>版本选择”纯静态”-提交。 </p><p>网站创建完成后点击设置-配置文件</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">server<span class="token punctuation">{</span> listen <span class="token number">80</span><span class="token punctuation">;</span> <span class="token comment"># server_name 填写自己的域名</span> server_name luckyzmj.cn blog.luckyzmj.cn<span class="token punctuation">;</span> index index.php index.html index.htm default.php default.htm default.html<span class="token punctuation">;</span> <span class="token comment"># 这里root填写自己的网站根目录，修改为/var/www/hexo</span> root /var/www/hexo<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>-保存</p><p>点击设置-网站目录，修改为<code>/var/www/hexo</code> ，保存</p><p>重启宝塔面板服务</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">service</span> bt restart<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h3 id="本地Hexo部署到阿里云服务器"><a href="#本地Hexo部署到阿里云服务器" class="headerlink" title="本地Hexo部署到阿里云服务器"></a>本地Hexo部署到阿里云服务器</h3><p>进入到本地<code>Hexo</code>博客的文件夹<code>MyBlog</code>,右键点击<code>Git Bash Here</code>，输入命令</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment">#定义邮箱(更换为你的邮箱地址就行)</span><span class="token function">git</span> config --global user.email <span class="token string">"[email protected]"</span><span class="token comment">#定义名称(更换自定义一个名称就行)</span><span class="token function">git</span> config --global user.name <span class="token string">"Your Name"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>配置<code>_config.yml</code>,完成自动化部署 </p><p>打开本地<code>Hexo</code>博客的文件夹<code>MyBlog</code>文件夹下的<code>_config.yml</code>, 找到<code>deploy</code></p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">deploy: type: <span class="token function">git</span> <span class="token comment">#server改为你的服务IP地址或解析后的域名</span> <span class="token comment">#例如我改为repo: [email protected]:/var/repo/blog.git</span> repo: git@server:/var/repo/blog.git branch: master<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>保存后，即可测试部署</p><p>再进入到本地<code>Hexo</code>博客的文件夹<code>MyBlog</code>,右键点击<code>Git Bash Here</code>，输入命令</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo clean hexo g -d<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>不报错说明完成，打开浏览器输入你的域名或<code>ip</code>地址就可以看到你部署的<code>Hexo</code>博客了。 </p><p>到此为止，我们已经成功部完成，并且访问自己的服务器端比访问Github快多了。</p><blockquote><h3 id="小贴士"><a href="#小贴士" class="headerlink" title="小贴士"></a>小贴士</h3></blockquote><p>在部署过程中，执行 hexo d发现部署老是出错，什么权限不允许之类的，这里我们需要检查我们在上述的<code>git</code>操作部署是否使用了<code>git</code>用户操作，若是没有，需要给相应的目录更改用户组 使用</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">chown</span> -R git:git /var/repo/<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>这条命令递归的将<code>repo</code>目录及其子目录用户组设置为<code>git</code>。 同时使用</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">chown</span> -R git:git /var/www/hexo<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>这样即可解决此类问题。</p><p>还有一个问题就是绑定域名后不能访问。原因是在国内任何域名只要绑定到国内的服务器主机上都必须去工信部和公安部备案完后才能正常使用。如果是港澳台的服务器或者是国外的服务器则可以不需要备案。</p><h2 id="参考文章"><a href="#参考文章" class="headerlink" title="参考文章"></a>参考文章</h2><ul><li><a href="https://blog.csdn.net/weixin_33907511/article/details/91398208?utm_source=distribute.pc_relevant.none-task">https://blog.csdn.net/weixin_33907511/article/details/91398208?utm_source=distribute.pc_relevant.none-task</a></li></ul>]]></content>
<categories>
<category> 博客篇 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 博客 </tag>
<tag> 阿里云 </tag>
</tags>
</entry>
<entry>
<title>个人博客搭建</title>
<link href="posts/e3e08109.html"/>
<url>posts/e3e08109.html</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="0x001-效果演示"><a href="#0x001-效果演示" class="headerlink" title="0x001 效果演示"></a>0x001 效果演示</h2><hr><p><img src="https://s2.ax1x.com/2020/03/11/8E3bBF.png" alt="演示Demo"></p><h2 id="0x002-简单介绍"><a href="#0x002-简单介绍" class="headerlink" title="0x002 简单介绍"></a>0x002 简单介绍</h2><hr><p> 前前后后大概花了一周多的时间，目前个人博客已经完善的差不多了，现在写个文章做个阶段总结，后续如果有更新的地方，会及时补充。本博客基于Hexo框架，采用<a href="https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md">hexo-theme-matery</a>主题，在这里非常感谢作者<code>洪卫</code>的<a href="https://github.com/shw2018/hexo-blog-fly.git">hexo-blog-fly</a>博客开源，极大简化了构建博客的工作量和复杂度。在此开源博客的基础上做了改进，修复了一些bug，顺利搭建完成了我的个人博客。大家对此主题有兴趣的可以<a href="https://github.com/shw2018/hexo-blog-fly">下载源代码</a>，搭建属于自己的个性化博客。</p><ul><li>个人博客 演示：<a href="http://luckyzmj.cn/">http://luckyzmj.cn</a></li></ul><hr><h2 id="0x003-Hexo-初级搭建"><a href="#0x003-Hexo-初级搭建" class="headerlink" title="0x003 Hexo 初级搭建"></a>0x003 Hexo 初级搭建</h2><hr><h3 id="1-安装Git"><a href="#1-安装Git" class="headerlink" title="1. 安装Git"></a>1. 安装Git</h3><p><code>Git</code>是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。<code>Git</code>的作用是将本地的网页文件传到<code>github</code>上。</p><ul><li>Git<a href="https://git-scm.com/download">下载地址</a></li><li>Git<a href="https://www.liaoxuefeng.com/wiki/896043488029600">教程</a></li></ul><p><strong>windows：</strong> 到git官网上下载.exe文件,Download git,安装选项还是全部默认，最后一步添加路径时选择<code>Use Git from the Windows Command Prompt</code>。</p><h3 id="2-安装node-js"><a href="#2-安装node-js" class="headerlink" title="2. 安装node.js"></a>2. 安装node.js</h3><p><code>Hexo</code>是基于<code>node.js</code>编写的，所以需要安装一下<code>node.js</code>和里面的<code>npm</code>工具。</p><p><strong>windows：</strong> 到<a href="http://nodejs.cn/download/">Node.js官网</a>下载<code>.exe</code>文件，安装选项全部默认。安装好之后，按<code>Win+R</code>打开cmd命令提示符，输入<code>node -v</code>和<code>npm -v</code>，若出现版本号，则说明安装成功。</p><h3 id="3-添加npm国内源"><a href="#3-添加npm国内源" class="headerlink" title="3. 添加npm国内源"></a>3. 添加npm国内源</h3><p>使用阿里的国内镜像进行加速下载</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> config <span class="token builtin class-name">set</span> registry https://registry.npm.taobao.org<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h3 id="4-安装Hexo"><a href="#4-安装Hexo" class="headerlink" title="4. 安装Hexo"></a>4. 安装Hexo</h3><p>前面<code>git</code>和<code>nodejs</code>安装好后，就可以安装<code>hexo</code>了，你可以先创建一个文件夹<code>MyBlog</code>，用来存放自己的博客文件，然后<code>cd</code>到这个文件夹下（或者在这个文件夹下直接右键<code>git bash</code>打开）。</p><p>比如我的博客文件都存放在<code>E:\MyBlog</code>目录下。</p><p>在该目录下右键点击<code>Git Bash Here</code>，打开<code>git</code>的控制台窗口，以后我们所有的操作都在<code>git</code>控制台进行，就不用<code>Windows</code>自带的<code>cmd</code>了。</p><p>定位到该目录下，输入<code>npm install -g hexo-cli</code>安装<code>Hexo</code>。可能会有几个报错，不用理会。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> -g hexo-cli<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>安装完后输入<code>hexo -v</code>验证是否安装成功。</p><p>到此为止<code>hexo</code>就安装完了。</p><p>接下来初始化一下<code>hexo</code>,即初始化我们的网站，输入<code>hexo init</code>初始化文件夹</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo init MyBlog<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>新建完成后，指定文件夹<code>MyBlog</code>目录下有：</p><ul><li><code>node_modules</code>: 依赖包</li><li><code>public</code>：存放生成的页面</li><li><code>scaffolds</code>：生成文章的一些模板</li><li><code>source</code>：用来存放你的文章</li><li><code>themes</code>：主题**</li><li><code>_config.yml</code>: 博客的配置文件**</li></ul><p>到此为止，本地的网站配置完成了。</p><p>输入<code>hexo g</code>生成静态网页，然后输入<code>hexo s</code>打开本地服务器</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo ghexo s<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p><img src="https://s1.ax1x.com/2020/03/12/8VdlGD.png"></p><h3 id="5-注册Github账号创建个人仓库"><a href="#5-注册Github账号创建个人仓库" class="headerlink" title="5. 注册Github账号创建个人仓库"></a>5. 注册Github账号创建个人仓库</h3><p>接下来就去注册一个<code>github</code>账号，用来存放我们的网站。</p><p>打开<a href="https://github.com/">https://github.com/</a>，新建一个项目仓库<code>New repository</code>，如下所示：</p><p><img src="https://s1.ax1x.com/2020/03/12/8VwrtK.png"></p><p>然后如下图所示，输入自己的项目名字，后面一定要加<code>.github.io</code>后缀，README初始化也要勾上</p><p><img src="https://s1.ax1x.com/2020/03/12/8VdoQJ.png"></p><blockquote><p>要创建一个和你用户名相同的仓库，后面加<code>.github.io</code>，只有这样，将来要部署到<code>GitHub page</code>的时候，才会被识别，也就是<code>http://xxxx.github.io</code>，其中xxx就是你注册<code>GitHub</code>的用户名。例如我的：<code>http://LuckyZmj.github.io</code></p></blockquote><h3 id="6-生成SSH添加到GitHub"><a href="#6-生成SSH添加到GitHub" class="headerlink" title="6. 生成SSH添加到GitHub"></a>6. 生成SSH添加到GitHub</h3><p>生成<code>SSH</code>添加到<code>GitHub</code>，连接<code>Github</code>与本地。<br>右键打开<code>git bash here</code>，然后输入下面命令：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> config --global user.name <span class="token string">"注册GitHub用户名"</span><span class="token function">git</span> config --global user.email <span class="token string">"注册GitHub的邮箱"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>用以下两条，检查一下你有没有输对</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> config user.name<span class="token function">git</span> config user.email<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>然后创建<code>SSH</code>,一路回车</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">ssh-keygen -t rsa -C <span class="token string">"注册GitHub的邮箱"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>这个时候它会告诉你已经生成了<code>.ssh</code>的文件夹。在<code>git bash</code>中输入</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">cat</span> ~/.ssh/id_rsa.pub<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>将输出的内容复制到框中，点击确定保存。</p><p>打开<code>github</code>，在头像下面点击<code>settings</code>，再点击<code>SSH and GPG keys</code>，新建一个<code>SSH</code>，名字随便取一个都可以，把你的<code>id_rsa.pub</code>里面的信息复制进去。如图：</p><p><img src="https://s1.ax1x.com/2020/03/12/8Vwnyj.png"></p><p>在<code>git bash</code>输入<code>ssh -T [email protected]</code>，如果如下图所示，出现你的用户名，那就成功了。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">ssh</span> -T [email protected]<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h3 id="7-将hexo部署到GitHub"><a href="#7-将hexo部署到GitHub" class="headerlink" title="7. 将hexo部署到GitHub"></a>7. 将hexo部署到GitHub</h3><p>将<code>hexo</code>生成的文章部署到<code>GitHub</code>上，打开博客根目录下的<code>_config.yml</code>文件，这是博客的配置文件，在这里你可以修改与博客配置相关的各种信息。<br>找到如下配置进行修改：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">deploy: type: <span class="token function">git</span> repository: https://github.com/LuckyZmj/LuckyZmj.github.io branch: master<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p><code>repository</code>修改为你自己的<code>github</code>项目地址即可，就是部署时，告诉工具，将生成网页通过<code>git</code>方式上传到你对应的链接仓库中。</p><p>这个时候需要先安装<code>deploy-git</code> ，也就是部署的命令,这样你才能用命令部署到<code>GitHub</code>。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> hexo-deployer-git --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>然后就可以部署提交到<code>github</code>，过一会儿就可以在<code>http://yourname.github.io</code> 这个网站看到你的博客了</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo cleanhexo generatehexo deploy<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>其中 <code>hexo clean</code>清除了你之前生成的东西。 <code>hexo generate</code>，生成静态文章，可以用 <code>hexo g</code>缩写 ，<code>hexo deploy</code>部署文章，可以用<code>hexo d</code>缩写</p><blockquote><p>注意<code>deploy</code>时可能要你输入<code>username</code>和<code>password</code>。</p></blockquote><h3 id="8-写文章和发布文章"><a href="#8-写文章和发布文章" class="headerlink" title="8. 写文章和发布文章"></a>8. 写文章和发布文章</h3><p>首先在博客根目录下右键打开<code>git bash here</code>，安装一个扩展<code>npm i hexo-deployer-git</code>。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> i hexo-deployer-git<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>然后输入<code>hexo new post "article title"</code>，新建一篇文章。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo new post <span class="token string">"article title"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>然后打开<code>E:\MyBlog\source\_posts</code>的目录，可以发现下面多了一个文件夹和一个<code>.md</code>文件，一个用来存放你的图片等数据，另一个就是你的文章文件。</p><p>另外推荐直接使用<code>有道云</code>编写<code>markdown</code>文章，不仅可以实时预览，还可以快捷的生成<code>markdown</code>语法格式，具体效果如下图所示。</p><p><img src="https://s1.ax1x.com/2020/03/12/8VwItf.png" alt="有道云"></p><p>编写完<code>markdown</code>文件后，根目录下输入<code>hexo g</code>生成静态网页，然后输入<code>hexo s</code>可以本地预览效果，最后输入<code>hexo d</code>上传到<code>github</code>上。这时打开你的<code>github.io</code>主页就能看到发布的文章了。</p><p>到此为止，<code>Hexo</code>初级搭建就已经完成了。</p><h2 id="0x004-Hexo-优化定制"><a href="#0x004-Hexo-优化定制" class="headerlink" title="0x004 Hexo 优化定制"></a>0x004 Hexo 优化定制</h2><hr><h3 id="1-Hexo相关目录文件"><a href="#1-Hexo相关目录文件" class="headerlink" title="1. Hexo相关目录文件"></a>1. Hexo相关目录文件</h3><h4 id="1-1-博客目录构成介绍"><a href="#1-1-博客目录构成介绍" class="headerlink" title="1.1 博客目录构成介绍"></a>1.1 博客目录构成介绍</h4><p><code>node_modules</code>是<code>node.js</code>各种库的目录，<code>public</code>是生成的网页文件目录，<code>scaffolds</code>里面就三个文件，存储着新文章和新页面的初始设置，<code>source</code>是我们最常用到的一个目录，里面存放着文章、各类页面、图像等文件，<code>themes</code>存放着主题文件，一般也用不到。</p><p>我们平时写文章只需要关注<code>source/_posts</code>这个文件夹就行了。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">- node_modules- public- scaffolds- <span class="token builtin class-name">source</span> - _data - _posts - about - archives - categories - friends - tags- themes<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="1-2-hexo基本配置"><a href="#1-2-hexo基本配置" class="headerlink" title="1.2 hexo基本配置"></a>1.2 hexo基本配置</h4><p>在文件根目录下的<code>_config.yml</code>，就是整<code>个hexo</code>框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的<a href="https://hexo.io/zh-cn/docs/configuration">配置描述</a>。</p><h5 id="1-2-1-网站"><a href="#1-2-1-网站" class="headerlink" title="1.2.1 网站"></a>1.2.1 网站</h5><p>参数描述<code>title</code>网站标题<code>subtitle</code>网站副标题<code>description</code>网站描述<code>author</code>您的名字<code>language</code>网站使用的语言<code>timezone</code>网站时区。<code>Hexo</code> 默认使用您电脑的时区。时区列表。比如说：<code>America/New_York</code>, <code>Japan</code>, 和 <code>UTC</code> 。</p><p>其中，<code>description</code>主要用于<code>SEO</code>，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。<code>author</code>参数用于主题显示文章的作者。</p><h5 id="1-2-2-网址"><a href="#1-2-2-网址" class="headerlink" title="1.2.2 网址"></a>1.2.2 网址</h5><p>参数描述<code>url</code>网址<code>root</code>网站根目录 <code>permalink</code>文章的<a href="https://hexo.io/zh-cn/docs/permalinks">永久链接</a>格式<code>permalink_defaults</code>永久链接中各部分的默认值</p><p>在这里，你需要把<code>url</code>改成你的网站域名。</p><p><code>permalink</code>，也就是你生成某个文章时的那个链接格式。</p><p>比如我新建一个文章叫<code>temp.md</code>，那么这个时候他自动生成的地址就是<code>http://yoursite.com/2018/09/05/temp</code>。</p><p>以下是官方给出的示例，关于链接的变量还有很多，需要的可以去官网上查找<a href="https://hexo.io/zh-cn/docs/permalinks">永久链接</a> 。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">参数结果:year/:month/:day/:title /2019/08/10/hello-world :year-:month-:day-:title.html <span class="token number">2019</span>-08-10-hello-world.html :category/:titlefoo /bar/hello-world<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><h3 id="2-定制主题"><a href="#2-定制主题" class="headerlink" title="2. 定制主题"></a>2. 定制主题</h3><p>这里推荐作者<code>洪卫</code>的<a href="https://github.com/shw2018/hexo-blog-fly.git">hexo-blog-fly</a>博客主题，该主题是基于<a href="https://github.com/blinkfox/hexo-theme-matery">hexo-theme-matery</a>优化的，需要把博客相关信息换成您自己的就可以部署了，极大简化了构建博客的工作量和复杂度。</p><h4 id="2-1-简单使用方法"><a href="#2-1-简单使用方法" class="headerlink" title="2.1 简单使用方法"></a>2.1 简单使用方法</h4><ol><li>安装<code>Git</code>, 安装<code>nodeJS</code>，安装<code>Hexo</code></li><li>你可以直接<code>fork</code>一份源码到你的仓库，<code>clone</code>到本地博客文件夹内</li><li>在本地博客仓库运行<code>npm i</code>命令安装依赖包</li><li>直接修改配置信息，改成自己的信息</li><li>运行命令<code>hexo clean</code>（清除生成文件），<code>hexo g</code>（生成网页）， <code>hexo s</code>（本地预览），<code>hexo d</code>（部署）</li></ol><h4 id="2-2-原主题特性"><a href="#2-2-原主题特性" class="headerlink" title="2.2 原主题特性:"></a>2.2 原主题特性:</h4><ul><li>简单漂亮，文章内容美观易读</li><li><a href="https://material.io/">Material Design</a> 设计</li><li>响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现</li><li>首页轮播文章及每天动态切换 <code>Banner</code> 图片</li><li>瀑布流式的博客文章列表（文章无特色图片时会有 <code>24</code> 张漂亮的图片代替）</li><li>时间轴式的归档页</li><li><strong>词云</strong>的标签页和<strong>雷达图</strong>的分类页</li><li>丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）</li><li>可自定义的数据的友情链接页面</li><li>支持文章置顶和文章打赏</li><li>支持 <code>MathJax</code></li><li><code>TOC</code> 目录</li><li>可设置复制文章内容时追加版权信息</li><li>可设置阅读文章时做密码验证</li><li><a href="https://gitalk.github.io/">Gitalk</a>、<a href="https://imsun.github.io/gitment/">Gitment</a>、<a href="https://valine.js.org/">Valine</a> 和 <a href="https://disqus.com/">Disqus</a> 评论模块（推荐使用 <code>Gitalk</code>）</li><li>集成了<a href="http://busuanzi.ibruce.info/">不蒜子统计</a>、谷歌分析（<code>Google Analytics</code>）和文章字数统计等功能</li><li>支持在首页的音乐播放和视频播放功能</li></ul><h4 id="2-3-新增加特性"><a href="#2-3-新增加特性" class="headerlink" title="2.3 新增加特性:"></a>2.3 新增加特性:</h4><ul><li>修改了原主题的一些很多bug</li><li>加入图片懒加载功能，在根目录配置文件开启和关闭</li><li>增加留言板功能</li><li>在关于板块,加入简历功能页</li><li>增加视听[视觉听觉影音]板块 </li><li>支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。</li><li>增加网站运行时间显示 </li><li>增加动漫模型 </li><li>整体替换Banner图片和文章特色图片</li><li>增加分类相册功能</li><li>修改了一些控件的参数</li><li>修改部分样式,比如: 文章卡片,固定高度,使其不至于因为文章摘要的长短不同导致卡片大小不一使页面布局很不美观,类似的还有友链卡片,优化了页面内容布局,视觉更整齐美观</li><li>解决首页文章列表卡片上方 border-radius圆角失效的bug</li><li>添加页面樱花飘落动效</li><li>添加鼠标点击烟花爆炸动效</li><li>加入天气接口控件</li><li>加入鼠标点击文字特效</li><li>添加页面雪花飘落动效</li><li>添加在线聊天插件</li><li>调整线聊天插件参数，使之能够随着鼠标滑动位置自适应调整</li><li>持续更新…</li></ul><hr><h4 id="2-4-切换主题"><a href="#2-4-切换主题" class="headerlink" title="2.4 切换主题"></a>2.4 切换主题</h4><p>如果想自己动手对<a href="https://github.com/blinkfox/hexo-theme-matery">hexo-theme-matery</a>优化的话，可以修改Hexo根目录下的<code> _config.yml</code>的 <code>theme</code> 的值</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">theme: hexo-theme-matery<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p><code>_config.yml</code> 文件的其它修改建议:</p><ul><li>请修改 <code>_config.yml</code> 的 <code>url</code> 的值为你的网站主 <code>URL</code>（如：<code>http://xxx.github.io</code>）。</li><li>建议修改两个 <code>per_page</code> 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示。</li><li>如果你是中文用户，则建议修改 <code>language</code> 的值为 <code>zh-CN</code>。</li></ul><h4 id="2-5-新建分类-categories-页"><a href="#2-5-新建分类-categories-页" class="headerlink" title="2.5 新建分类 categories 页"></a>2.5 新建分类 categories 页</h4><p><code>categories</code> 页是用来展示所有分类的页面，如果在你的博客 <code>source</code> 目录下还没有 <code>categories/index.md</code> 文件，那么你就需要新建一个，命令如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo new page <span class="token string">"categories"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>编辑你刚刚新建的页面文件 <code>/source/categories/index.md</code>，至少需要以下内容：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">---title: categoriesdate: <span class="token number">2018</span>-09-30 <span class="token number">17</span>:25:30type: <span class="token string">"categories"</span>layout: <span class="token string">"categories"</span>---<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-6-新建标签-tags-页"><a href="#2-6-新建标签-tags-页" class="headerlink" title="2.6 新建标签 tags 页"></a>2.6 新建标签 tags 页</h4><p><code>tags</code> 页是用来展示所有标签的页面，如果在你的博客 <code>source</code> 目录下还没有 <code>tags/index.md</code> 文件，那么你就需要新建一个，命令如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo new page <span class="token string">"tags"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>编辑你刚刚新建的页面文件 <code>/source/tags/index.md</code>，至少需要以下内容：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">---title: tagsdate: <span class="token number">2018</span>-09-30 <span class="token number">18</span>:23:38type: <span class="token string">"tags"</span>layout: <span class="token string">"tags"</span>---<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-7-新建关于我-about-页"><a href="#2-7-新建关于我-about-页" class="headerlink" title="2.7 新建关于我 about 页"></a>2.7 新建关于我 about 页</h4><p><code>about</code> 页是用来展示关于我和我的博客信息的页面，如果在你的博客 <code>source</code> 目录下还没有 <code>about/index.md</code> 文件，那么你就需要新建一个，命令如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo new page <span class="token string">"about"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>编辑你刚刚新建的页面文件 <code>/source/about/index.md</code>，至少需要以下内容：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">---title: aboutdate: <span class="token number">2018</span>-09-30 <span class="token number">17</span>:25:30type: <span class="token string">"about"</span>layout: <span class="token string">"about"</span>---<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-8-新建留言板-contact-页（可选的）"><a href="#2-8-新建留言板-contact-页（可选的）" class="headerlink" title="2.8 新建留言板 contact 页（可选的）"></a>2.8 新建留言板 contact 页（可选的）</h4><p><code>contact</code> 页是用来展示留言板信息的页面，前提是已经开启了第三方评论系统才能显示。如果在你的博客 <code>source</code> 目录下还没有 <code>contact/index.md</code> 文件，那么你就需要新建一个，命令如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo new page <span class="token string">"contact"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>编辑你刚刚新建的页面文件 <code>/source/contact/index.md</code>，至少需要以下内容：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">---title: contactdate: <span class="token number">2018</span>-09-30 <span class="token number">17</span>:25:30type: <span class="token string">"contact"</span>layout: <span class="token string">"contact"</span>---<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-9-新建友情链接-friends-页（可选的）"><a href="#2-9-新建友情链接-friends-页（可选的）" class="headerlink" title="2.9 新建友情链接 friends 页（可选的）"></a>2.9 新建友情链接 friends 页（可选的）</h4><p><code>friends</code> 页是用来展示友情链接信息的页面，如果在你的博客 <code>source</code> 目录下还没有 <code>friends/index.md</code> 文件，那么你就需要新建一个，命令如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo new page <span class="token string">"friends"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>编辑你刚刚新建的页面文件 <code>/source/friends/index.md</code>，至少需要以下内容：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">---title: friendsdate: <span class="token number">2018</span>-12-12 <span class="token number">21</span>:25:30type: <span class="token string">"friends"</span>layout: <span class="token string">"friends"</span>---<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>同时，在你的博客 <code>source</code> 目录下新建 <code>_data</code> 目录，在 <code>_data</code> 目录中新建 <code>friends.json</code> 文件，文件内容如下所示：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token string">"avatar"</span><span class="token builtin class-name">:</span> <span class="token string">"http://image.luokangyuan.com/1_qq_27922023.jpg"</span>, <span class="token string">"name"</span><span class="token builtin class-name">:</span> <span class="token string">"码酱"</span>, <span class="token string">"introduction"</span><span class="token builtin class-name">:</span> <span class="token string">"我不是大佬，只是在追寻大佬的脚步"</span>, <span class="token string">"url"</span><span class="token builtin class-name">:</span> <span class="token string">"http://luokangyuan.com/"</span>, <span class="token string">"title"</span><span class="token builtin class-name">:</span> <span class="token string">"前去学习"</span><span class="token punctuation">}</span>, <span class="token punctuation">{</span> <span class="token string">"avatar"</span><span class="token builtin class-name">:</span> <span class="token string">"http://image.luokangyuan.com/4027734.jpeg"</span>, <span class="token string">"name"</span><span class="token builtin class-name">:</span> <span class="token string">"闪烁之狐"</span>, <span class="token string">"introduction"</span><span class="token builtin class-name">:</span> <span class="token string">"编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬"</span>, <span class="token string">"url"</span><span class="token builtin class-name">:</span> <span class="token string">"https://blinkfox.github.io/"</span>, <span class="token string">"title"</span><span class="token builtin class-name">:</span> <span class="token string">"前去学习"</span><span class="token punctuation">}</span>, <span class="token punctuation">{</span> <span class="token string">"avatar"</span><span class="token builtin class-name">:</span> <span class="token string">"http://image.luokangyuan.com/avatar.jpg"</span>, <span class="token string">"name"</span><span class="token builtin class-name">:</span> <span class="token string">"ja_rome"</span>, <span class="token string">"introduction"</span><span class="token builtin class-name">:</span> <span class="token string">"平凡的脚步也可以走出伟大的行程"</span>, <span class="token string">"url"</span><span class="token builtin class-name">:</span> <span class="token string">"https://me.csdn.net/jlh912008548"</span>, <span class="token string">"title"</span><span class="token builtin class-name">:</span> <span class="token string">"前去学习"</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-10-一级菜单导航配置"><a href="#2-10-一级菜单导航配置" class="headerlink" title="2.10 一级菜单导航配置"></a>2.10 一级菜单导航配置</h4><p>配置基本菜单导航的名称、路径<code>url</code>和图标<code>icon</code></p><ul><li>菜单导航名称可以是中文也可以是英文(如：<code>Index</code>或主页) </li><li>图标<code>icon</code> 可以在<code>Font Awesome</code> 中查找</li></ul><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">menu: Index: url: / icon: fas fa-home Tags: url: /tags icon: fas fa-tags Categories: url: /categories icon: fas fa-bookmark Archives: url: /archives icon: fas fa-archive About: url: /about icon: fas fa-user-circle Friends: url: /friends icon: fas fa-address-book<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-11-二级菜单配置方法"><a href="#2-11-二级菜单配置方法" class="headerlink" title="2.11 二级菜单配置方法"></a>2.11 二级菜单配置方法</h4><p>如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作</p><ul><li>在需要添加二级菜单的一级菜单下添加<code>children</code>关键字(如:<code>About</code>菜单下添加<code>children</code>)</li><li>在<code>children</code>下创建二级菜单的 名称<code>name</code>,路径<code>url</code>和图标<code>icon</code>.</li><li>注意每个二级菜单模块前要加 -.</li><li>注意缩进格式</li></ul><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">menu: Index: url: / icon: fas fa-home Tags: url: /tags icon: fas fa-tags Categories: url: /categories icon: fas fa-bookmark Archives: url: /archives icon: fas fa-archive About: url: /about icon: fas fa-user-circle-o Friends: url: /friends icon: fas fa-address-book Medias: icon: fas fa-list children: - name: Musics url: /musics icon: fas fa-music - name: Movies url: /movies icon: fas fa-film - name: Books url: /books icon: fas fa-book - name: Galleries url: /galleries icon: fas fa-image<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>执行 <code>hexo clean</code> && <code>hexo g</code> 重新生成博客文件。</p><h4 id="2-12-代码高亮"><a href="#2-12-代码高亮" class="headerlink" title="2.12 代码高亮"></a>2.12 代码高亮</h4><p>由于 <code>Hexo</code> 自带的代码高亮主题显示不好看，所以主题中使用到了 <code>hexo-prism-plugin</code> 的 <code>Hexo</code> 插件来做代码高亮，安装命令如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> i -S hexo-prism-plugin<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>然后，修改 <code>Hexo</code> 根目录下 <code>_config.yml</code> 文件中 <code>highlight.enable</code> 的值为 <code>false</code>，并新增 <code>prism</code> 插件相关的配置，主要配置如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">highlight: enable: <span class="token boolean">false</span>prism_plugin: mode: <span class="token string">'preprocess'</span> <span class="token comment"># realtime/preprocess</span> theme: <span class="token string">'tomorrow'</span> line_number: <span class="token boolean">false</span> <span class="token comment"># default false</span> custom_css:<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><blockquote><p>更多代码块优化详细内容请访问：<a href="http://luckyzmj.cn/posts/1b9a9e28.html">http://luckyzmj.cn/posts/1b9a9e28.html</a></p></blockquote><h4 id="2-13-搜索"><a href="#2-13-搜索" class="headerlink" title="2.13 搜索"></a>2.13 搜索</h4><p>本主题中还使用到了 <code>hexo-generator-search</code> 的 <code>Hexo</code> 插件来做内容搜索，安装命令如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> hexo-generator-search --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>在 <code>Hexo</code> 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">search: path: search.xml field: post<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h4 id="2-14-文章字数统计插件（建议安装）"><a href="#2-14-文章字数统计插件（建议安装）" class="headerlink" title="2.14 文章字数统计插件（建议安装）"></a>2.14 文章字数统计插件（建议安装）</h4><p>如果你想要在文章中显示文章字数、阅读时长信息，可以安装 <code>hexo-wordcount</code> 插件。</p><p>安装命令如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> i --save hexo-wordcount<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>然后只需在本主题下的 <code>_config.yml</code> 文件中，将各个文章字数相关的配置激活即可：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">postInfo: date: <span class="token boolean">true</span> update: <span class="token boolean">false</span> wordCount: <span class="token boolean">false</span> <span class="token comment"># 设置文章字数统计为 true.</span> totalCount: <span class="token boolean">false</span> <span class="token comment"># 设置站点文章总字数统计为 true.</span> min2read: <span class="token boolean">false</span> <span class="token comment"># 阅读时长.</span> readCount: <span class="token boolean">false</span> <span class="token comment"># 阅读次数.</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-15-添加emoji表情支持（可选的）"><a href="#2-15-添加emoji表情支持（可选的）" class="headerlink" title="2.15 添加emoji表情支持（可选的）"></a>2.15 添加emoji表情支持（可选的）</h4><p>本主题新增了对<code>emoji</code>表情的支持，使用到了 <code>hexo-filter-github-emojis</code> 的 <code>Hexo</code> 插件来支持 <code>emoji</code>表情的生成，把对应的<code>markdown</code> <code>emoji</code>语法（::,例如：<code>:smile:</code>）转变成会跳跃的<code>emoji</code>表情，安装命令如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> hexo-filter-github-emojis --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>在 <code>Hexo</code> 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">githubEmojis: enable: <span class="token boolean">true</span> className: github-emoji inject: <span class="token boolean">true</span> styles: customEmojis:<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-16-添加-RSS-订阅支持（可选的）"><a href="#2-16-添加-RSS-订阅支持（可选的）" class="headerlink" title="2.16 添加 RSS 订阅支持（可选的）"></a>2.16 添加 RSS 订阅支持（可选的）</h4><p>本主题中还使用到了<code>hexo-generator-feed</code> 的 <code>Hexo</code> 插件来做 <code>RSS</code>，安装命令如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> hexo-generator-feed --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>在 <code>Hexo</code> 根目录下的<code> _config.yml</code> 文件中，新增以下的配置项：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">feed: type: atom path: atom.xml limit: <span class="token number">20</span> hub: content: content_limit: <span class="token number">140</span> content_limit_delim: <span class="token string">' '</span> order_by: -date<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>执行 <code>hexo clean</code> && <code>hexo g</code> 重新生成博客文件，然后在 <code>public</code> 文件夹中即可看到 <code>atom.xml</code> 文件，说明你已经安装成功了。</p><h4 id="2-17-添加-DaoVoice-在线聊天功能（可选的）"><a href="#2-17-添加-DaoVoice-在线聊天功能（可选的）" class="headerlink" title="2.17 添加 DaoVoice 在线聊天功能（可选的）"></a>2.17 添加 DaoVoice 在线聊天功能（可选的）</h4><p>前往 <code>DaoVoice</code> 官网注册并且获取 <code>app_id</code>，并将 <code>app_id</code> 填入主题的 <code>_config.yml</code> 文件中。</p><h4 id="2-18-添加-Tidio-在线聊天功能（可选的）"><a href="#2-18-添加-Tidio-在线聊天功能（可选的）" class="headerlink" title="2.18 添加 Tidio 在线聊天功能（可选的）"></a>2.18 添加 Tidio 在线聊天功能（可选的）</h4><p>前往 <code>Tidio</code> 官网注册并且获取 <code>Public Key</code>，并将 <code>Public Key</code> 填入主题的 <code>_config.yml</code> 文件中。</p><h4 id="2-19-修改页脚"><a href="#2-19-修改页脚" class="headerlink" title="2.19 修改页脚"></a>2.19 修改页脚</h4><p>页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 <code>/layout/_partial/footer.ejs</code> 文件中，包括站点、使用的主题、访问量等。</p><h4 id="2-20-修改社交链接"><a href="#2-20-修改社交链接" class="headerlink" title="2.20 修改社交链接"></a>2.20 修改社交链接</h4><p>在主题的 <code>_config.yml</code> 文件中，默认支持 <code>QQ</code>、<code>GitHub</code> 和邮箱等的配置，你可以在主题文件的 <code>/layout/_partial/social-link.ejs</code> 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：</p><pre class="line-numbers language-html" data-language="html"><code class="language-html"><% if (theme.socialLink.github) { %> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= theme.socialLink.github %><span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltipped<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token attr-name">data-tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>访问我的GitHub<span class="token punctuation">"</span></span> <span class="token attr-name">data-position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">data-delay</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fab fa-github<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><% } %><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>其中，社交图标（如：<code>fa-github</code>）你可以在 <code>Font Awesome</code> 中搜索找到。以下是常用社交图标的标识，供你参考：</p><ul><li>Facebook: fab fa-facebook</li><li>Twitter: fab fa-twitter</li><li>Google-plus: fab fa-google-plus</li><li>Linkedin: fab fa-linkedin</li><li>Tumblr: fab fa-tumblr</li><li>Medium: fab fa-medium</li><li>Slack: fab fa-slack</li><li>Sina Weibo: fab fa-weibo</li><li>Wechat: fab fa-weixin</li><li>QQ: fab fa-qq</li><li>Zhihu: fab fa-zhihu</li></ul><p>注意: 本主题中使用的 <code>Font Awesome</code> 版本为 5.11.0。</p><h4 id="2-21-修改打赏的二维码图片"><a href="#2-21-修改打赏的二维码图片" class="headerlink" title="2.21 修改打赏的二维码图片"></a>2.21 修改打赏的二维码图片</h4><p>在主题文件的 <code>source/medias/reward</code> 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。</p><h4 id="2-22-配置音乐播放器（可选的）"><a href="#2-22-配置音乐播放器（可选的）" class="headerlink" title="2.22 配置音乐播放器（可选的）"></a>2.22 配置音乐播放器（可选的）</h4><p>要支持音乐播放，在主题的 <code>_config.yml</code> 配置文件中激活<code>music</code>配置即可</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 是否在首页显示音乐</span>music: enable: <span class="token boolean">true</span> title: <span class="token comment">#非吸底模式有效</span> enable: <span class="token boolean">true</span> show: 听听音乐 server: netease <span class="token comment">#require music platform: netease, tencent, kugou, xiami, baidu</span> type: playlist <span class="token comment">#require song, playlist, album, search, artist</span> id: <span class="token number">503838841</span> <span class="token comment">#require song id / playlist id / album id / search keyword</span> fixed: <span class="token boolean">false</span> <span class="token comment"># 开启吸底模式</span> autoplay: <span class="token boolean">false</span> <span class="token comment"># 是否自动播放</span> theme: <span class="token string">'#42b983'</span> loop: <span class="token string">'all'</span> <span class="token comment"># 音频循环播放, 可选值: 'all', 'one', 'none'</span> order: <span class="token string">'random'</span> <span class="token comment"># 音频循环顺序, 可选值: 'list', 'random'</span> preload: <span class="token string">'auto'</span> <span class="token comment"># 预加载，可选值: 'none', 'metadata', 'auto'</span> volume: <span class="token number">0.7</span> <span class="token comment"># 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效</span> listFolded: <span class="token boolean">true</span> <span class="token comment"># 列表默认折叠</span>提示： server可选netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）。 type可选song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手） id获取示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，地址栏有一串数字，playlist的id即为这串数字。<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-23文章-Front-matter-介绍"><a href="#2-23文章-Front-matter-介绍" class="headerlink" title="2.23文章 Front-matter 介绍"></a>2.23文章 Front-matter 介绍</h4><p><code>Front-matter</code> 选项中的所有内容均为非必填的。但我仍然建议至少填写 <code>title</code> 和 <code>date</code> 的值。</p><table><thead><tr><th>配置选项</th><th>默认值</th><th>描述</th></tr></thead><tbody><tr><td>title</td><td>Markdown 的文件标题</td><td>文章标题，强烈建议填写此选项</td></tr><tr><td>date</td><td>文件创建时的日期时间</td><td>发布时间，强烈建议填写此选项，且最好保证全局唯一</td></tr><tr><td>author</td><td>根 _config.yml 中的 author</td><td>文章作者</td></tr><tr><td>img</td><td>featureImages 中的某个值</td><td>文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: <a href="http://xxx.com/xxx.jpg">http://xxx.com/xxx.jpg</a></td></tr><tr><td>top</td><td>true</td><td>推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章</td></tr><tr><td>cover</td><td>false</td><td>v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中</td></tr><tr><td>coverImg</td><td>无</td><td>v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片</td></tr><tr><td>password</td><td>无</td><td>文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项</td></tr><tr><td>toc</td><td>true</td><td>是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项</td></tr><tr><td>mathjax</td><td>false</td><td>是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行</td></tr><tr><td>summary</td><td>无</td><td>文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要</td></tr><tr><td>categories</td><td>无</td><td>文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类</td></tr><tr><td>tags</td><td>无</td><td>文章标签，一篇文章可以多个标签</td></tr><tr><td>keywords</td><td>文章标题</td><td>文章关键字，SEO 时需要</td></tr><tr><td>reprintPolicy</td><td>cc_by</td><td>文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个</td></tr></tbody></table><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">注意: 如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。 <span class="token function">date</span> 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 <span class="token function">id</span> 是通过 <span class="token function">date</span> 的值来作为唯一标识的。 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>以下为文章的 <code>Front-matter</code> 示例。<br>最简示例</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">---title: typora-vue-theme主题介绍date: <span class="token number">2018</span>-09-07 09:25:00---<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>最全示例</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">---title: theme主题介绍date: <span class="token number">2018</span>-09-07 09:25:00author: 赵奇img: /source/images/xxx.jpgtop: <span class="token boolean">true</span>cover: <span class="token boolean">true</span>coverImg: /images/1.jpgpassword: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92toc: <span class="token boolean">false</span>mathjax: <span class="token boolean">false</span>summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要categories: Markdowntags: - Typora - Markdown---<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-24-自定制修改"><a href="#2-24-自定制修改" class="headerlink" title="2.24 自定制修改"></a>2.24 自定制修改</h4><p>在本主题的 <code>_config.yml</code> 中可以修改部分自定义信息，有以下几个部分：</p><ul><li>菜单</li><li>我的梦想</li><li>首页的音乐播放器和视频播放器配置</li><li>是否显示推荐文章名称和按钮配置</li><li>favicon 和 Logo</li><li>个人信息</li><li>TOC 目录</li><li>文章打赏信息</li><li>复制文章内容时追加版权信息</li><li>MathJax</li><li>文章字数统计、阅读时长</li><li>点击页面的’爱心’效果</li><li>我的项目</li><li>我的技能</li><li>我的相册</li><li>Gitalk、Gitment、Valine 和 disqus 评论配置</li><li>不蒜子统计和谷歌分析（Google Analytics）</li><li>默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图</li></ul><p>我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：<br>修改主题颜色</p><p>在主题文件的 <code>/source/css/matery.css</code> 文件中，搜索 <code>.bg-color</code> 来修改背景颜色：</p><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */</span><span class="token selector">.bg-color</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right<span class="token punctuation">,</span> #4cbf30 0%<span class="token punctuation">,</span> #0f9d58 100%<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@-webkit-keyframes</span> rainbow</span> <span class="token punctuation">{</span> <span class="token comment">/* 动态切换背景颜色. */</span><span class="token punctuation">}</span><span class="token atrule"><span class="token rule">@keyframes</span> rainbow</span> <span class="token punctuation">{</span> <span class="token comment">/* 动态切换背景颜色. */</span><span class="token punctuation">}</span><span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token comment">/* background-color: #eaeaea; */</span> <span class="token comment">/* 增加背景壁纸*/</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png"</span><span class="token punctuation">)</span></span><span class="token punctuation">,</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"http://luckyzmj.cn/img/yun.jpg"</span><span class="token punctuation">)</span></span> 0px 0px<span class="token punctuation">;</span> <span class="token property">background-attachment</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #34495e<span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h4 id="2-25-修改-banner-图和文章特色图"><a href="#2-25-修改-banner-图和文章特色图" class="headerlink" title="2.25 修改 banner 图和文章特色图"></a>2.25 修改 banner 图和文章特色图</h4><p>你可以直接在 <code>/source/medias/banner</code> 文件夹中更换你喜欢的 <code>banner</code> 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 <code>JavaScript</code> 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 <code>/layout/_partial/bg-cover-content.ejs</code> 文件的 <code><script></script></code> 代码中：</p><pre class="line-numbers language-css" data-language="css"><code class="language-css">$<span class="token punctuation">(</span><span class="token string">'.bg-cover'</span><span class="token punctuation">)</span>.<span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background-image'</span><span class="token punctuation">,</span> <span class="token string">'url(/medias/banner/'</span> + new <span class="token function">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span>.<span class="token function">getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> + <span class="token string">'.jpg)'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>在 <code>/source/medias/featureimages</code> 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 <code>_config.yml</code> 做同步修改。</p><h4 id="2-26-优化目录栏"><a href="#2-26-优化目录栏" class="headerlink" title="2.26 优化目录栏"></a>2.26 优化目录栏</h4><p>在 <code>themes\Matery\layout\_partial\post-detail-toc.ejs</code>，修改内容如下：</p><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.toc-widget</span> <span class="token punctuation">{</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 345px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span>0.7<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 10px 35px 2px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> .15<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 5px 15px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> .07<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 2px 5px -5px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> .1<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">#toc-content</span> <span class="token punctuation">{</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="0x005-更多详细教程"><a href="#0x005-更多详细教程" class="headerlink" title="0x005 更多详细教程"></a>0x005 更多详细教程</h2><p>以下几篇文章都是基于<code>Hexo</code>框架和<code>hexo-theme-matery</code>主题优化的教程，大家如果遇到问题，可以参考其中的方法。</p><ul><li><a href="https://sunhwee.com/posts/6e8839eb.html">Hexo+Github博客搭建完全教程</a></li><li><a href="https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md">hexo-theme-matery作者教程</a></li><li><a href="https://yafine-blog.cn/posts/4ab2.html">Hexo+github搭建博客(超级详细版，精细入微)</a></li><li><a href="https://blog.csdn.net/cungudafa/article/details/106278206">hexo（matery）背景、滚动条优化+增加点击跳评论</a></li></ul>]]></content>
<categories>
<category> 博客篇 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> Github </tag>
<tag> 博客 </tag>
</tags>
</entry>
</search>