代码拉取完成，页面将自动刷新
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>SpringBoot三大开发工具，你都用过么？</title>
<link href="/posts/28049a40.html"/>
<url>/posts/28049a40.html</url>
<content type="html"><![CDATA[<h2 id="一、SpringBoot-Dedevtools"><a href="#一、SpringBoot-Dedevtools" class="headerlink" title="一、SpringBoot Dedevtools"></a>一、SpringBoot Dedevtools</h2><p>他是一个让SpringBoot支持热部署的工具，下面是引用的方法</p><p>要么在创建项目的时候直接勾选下面的配置：</p><p><img src="https://img-blog.csdnimg.cn/20200826115753154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01vYXN0QWxs,size_16,color_FFFFFF,t_70#pic_center"></p><p>要么给springBoot项目添加下面的依赖：</p><pre class="line-numbers language-xml" data-language="xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dependency</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>groupId</span><span class="token punctuation">></span></span>org.springframework.boot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>groupId</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>artifactId</span><span class="token punctuation">></span></span>spring-boot-devtools<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>artifactId</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optional</span><span class="token punctuation">></span></span>true<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optional</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dependency</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>idea修改完代码后再按下 ctrl + f9 使其重新编译一下，即完成了热部署功能<br>eclipse是按ctrl + s保存 即可自动编译<br>如果你想一修改代码就自动重新编译，无需按ctrl+f9。只需要下面的操作：</p><h3 id="一、在idea的setting中把下面的勾都打上"><a href="#一、在idea的setting中把下面的勾都打上" class="headerlink" title="一、在idea的setting中把下面的勾都打上"></a><strong>一、在idea的setting中把下面的勾都打上</strong></h3><p><img src="https://img-blog.csdnimg.cn/20210207163505151.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01vYXN0QWxs,size_16,color_FFFFFF,t_70#pic_center"></p><h3 id="二、进入pom-xml-在build的反标签后给个光标，然后按Alt-Shift-ctrl"><a href="#二、进入pom-xml-在build的反标签后给个光标，然后按Alt-Shift-ctrl" class="headerlink" title="二、进入pom.xml,在build的反标签后给个光标，然后按Alt+Shift+ctrl+/"></a><strong>二、进入pom.xml,在build的反标签后给个光标，然后按<code>Alt+Shift+ctrl+/</code></strong></h3><p><img src="https://img-blog.csdnimg.cn/20210207163825254.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01vYXN0QWxs,size_16,color_FFFFFF,t_70#pic_center"></p><h3 id="三、然后勾选下面的东西，接着重启idea即可"><a href="#三、然后勾选下面的东西，接着重启idea即可" class="headerlink" title="三、然后勾选下面的东西，接着重启idea即可"></a><strong>三、然后勾选下面的东西，接着重启idea即可</strong></h3><p><img src="https://img-blog.csdnimg.cn/20210207163906408.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01vYXN0QWxs,size_16,color_FFFFFF,t_70#pic_center"></p><h2 id="二、Lombok"><a href="#二、Lombok" class="headerlink" title="二、Lombok"></a>二、Lombok</h2><p>Lombok是简化JavaBean开发的工具，让开发者省去构造器，getter,setter的书写。<br>在项目初始化时勾选下面的配置，即可使用Lombok</p><p><img src="https://img-blog.csdnimg.cn/20210125170751114.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01vYXN0QWxs,size_16,color_FFFFFF,t_70"></p><p>或者在项目中导入下面的依赖：</p><pre class="line-numbers language-xml" data-language="xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dependency</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>groupId</span><span class="token punctuation">></span></span>org.projectlombok<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>groupId</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>artifactId</span><span class="token punctuation">></span></span>lombok<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>artifactId</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optional</span><span class="token punctuation">></span></span>true<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optional</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dependency</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>使用时，idea还需要下载下面的插件：</p><p><img src="https://img-blog.csdnimg.cn/20210125171749693.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01vYXN0QWxs,size_16,color_FFFFFF,t_70#pic_center"></p><p>下面的使用的例子</p><pre class="line-numbers language-jAVA" data-language="jAVA"><code class="language-jAVA">import com.baomidou.mybatisplus.annotation.TableField;import com.baomidou.mybatisplus.annotation.TableName;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;@AllArgsConstructor//全参构造器@NoArgsConstructor//无参构造器@Data//getter + setterpublic class User { private Long id; private String name; private Integer age; private String email;}<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><h2 id="三、Spring-Configuration-Processor"><a href="#三、Spring-Configuration-Processor" class="headerlink" title="三、Spring Configuration Processor"></a>三、Spring Configuration Processor</h2><p>该工具是给实体类的属性注入开启提示，自我感觉该工具意义不是特别大！<br>因为SpringBoot存在属性注入，比如下面的实体类：</p><pre class="line-numbers language-java" data-language="java"><code class="language-java"><span class="token keyword">package</span> <span class="token namespace">org<span class="token punctuation">.</span>lzl<span class="token punctuation">.</span></span><span class="token class-name">HelloWorld</span><span class="token punctuation">.</span>entity<span class="token punctuation">;</span><span class="token keyword">import</span> <span class="token namespace">org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>boot<span class="token punctuation">.</span>context<span class="token punctuation">.</span>properties<span class="token punctuation">.</span></span><span class="token class-name">ConfigurationProperties</span><span class="token punctuation">;</span><span class="token keyword">import</span> <span class="token namespace">org<span class="token punctuation">.</span>springframework<span class="token punctuation">.</span>stereotype<span class="token punctuation">.</span></span><span class="token class-name">Component</span><span class="token punctuation">;</span><span class="token comment">/** * @author Lenovo * */</span><span class="token annotation punctuation">@Component</span><span class="token annotation punctuation">@ConfigurationProperties</span><span class="token punctuation">(</span>prefix <span class="token operator">=</span> <span class="token string">"mypet"</span><span class="token punctuation">)</span><span class="token keyword">public</span> <span class="token keyword">class</span> <span class="token class-name">Pet</span> <span class="token punctuation">{</span> <span class="token keyword">private</span> <span class="token class-name">String</span> nickName<span class="token punctuation">;</span> <span class="token keyword">private</span> <span class="token class-name">String</span> strain<span class="token punctuation">;</span><span class="token keyword">public</span> <span class="token class-name">String</span> <span class="token function">getNickName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> nickName<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setNickName</span><span class="token punctuation">(</span><span class="token class-name">String</span> nickName<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>nickName <span class="token operator">=</span> nickName<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">public</span> <span class="token class-name">String</span> <span class="token function">getStrain</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> strain<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token keyword">public</span> <span class="token keyword">void</span> <span class="token function">setStrain</span><span class="token punctuation">(</span><span class="token class-name">String</span> strain<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>strain <span class="token operator">=</span> strain<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token annotation punctuation">@Override</span><span class="token keyword">public</span> <span class="token class-name">String</span> <span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> <span class="token string">"Pet [nickName="</span> <span class="token operator">+</span> nickName <span class="token operator">+</span> <span class="token string">", strain="</span> <span class="token operator">+</span> strain <span class="token operator">+</span> <span class="token string">"]"</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></code></pre><p>想要在application.properties和application.yml中给mypet注入属性，却没有任何的提示，为了解决这一问题，我们在创建SpringBoot的时候勾选下面的场景：</p><p><img src="https://img-blog.csdnimg.cn/20210125172020154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01vYXN0QWxs,size_16,color_FFFFFF,t_70#pic_center"></p><p>或者直接在项目中添加下面的依赖:</p><pre class="line-numbers language-xml" data-language="xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dependency</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>groupId</span><span class="token punctuation">></span></span>org.springframework.boot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>groupId</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>artifactId</span><span class="token punctuation">></span></span>spring-boot-configuration-processor<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>artifactId</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>optional</span><span class="token punctuation">></span></span>true<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>optional</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dependency</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>并在build的标签中排除对该工具的打包：（减少打成jar包的大小）</p><pre class="line-numbers language-xml" data-language="xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>build</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>plugins</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>plugin</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>groupId</span><span class="token punctuation">></span></span>org.springframework.boot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>groupId</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>artifactId</span><span class="token punctuation">></span></span>spring-boot-maven-plugin<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>artifactId</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>configuration</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>excludes</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>exclude</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>groupId</span><span class="token punctuation">></span></span>org.springframework.boot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>groupId</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>artifactId</span><span class="token punctuation">></span></span>spring-boot-configuration-processor<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>artifactId</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>exclude</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>excludes</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>configuration</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>plugin</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>plugins</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>build</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></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>]]></content>
<categories>
<category> SpringBoot </category>
</categories>
<tags>
<tag> SpringBoot </tag>
<tag> Maven </tag>
</tags>
</entry>
<entry>
<title>JSP笔记、语法</title>
<link href="/posts/15956173.html"/>
<url>/posts/15956173.html</url>
<content type="html"><![CDATA[<h2 id="一、什么是JSP"><a href="#一、什么是JSP" class="headerlink" title="一、什么是JSP?"></a>一、什么是JSP?</h2><p>JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以<%开头以%>结束。 </p><p>JSP是一种Java servlet，主要用于实现Java web应用程序的用户界面部分。网页开发者们通过结合HTML代码、XHTML代码、XML元素以及嵌入JSP操作和命令来编写JSP。<br>JSP通过网页表单获取用户输入数据、访问数据库及其他数据源，然后动态地创建网页。 </p><p>JSP标签有多种功能，比如访问数据库、记录用户选择信息、访问JavaBeans组件等，还可以在不同的网页中传递控制信息和共享信息。</p><h2 id="二、什么是HTML"><a href="#二、什么是HTML" class="headerlink" title="二、什么是HTML?"></a>二、什么是HTML?</h2><p>HTML（Hyper Text Mark-up Language ）即超文本标记语言，是 WWW 的描述语言。最通俗的说法就是一种超链接，比如收藏一个网页就是保存它的链接。 </p><p><strong>简单说：</strong></p><ul><li>HTML 是用来描述网页的一种语言。 </li><li>HTML 指的是超文本标记语言 (Hyper Text Markup Language) </li><li>HTML 不是一种编程语言，而是一种标记语言 (markup language) </li><li>标记语言是一套标记标签 (markup tag) </li><li>HTML 使用标记标签来描述网页 </li></ul><h2 id="三、JSP和HTML的区别"><a href="#三、JSP和HTML的区别" class="headerlink" title="三、JSP和HTML的区别"></a>三、JSP和HTML的区别</h2><p>HTML页面是静态页面，也就是事先由用户写好放在服务器上，固定内容，不会变，由web服务器向客户端发送，平时上网看的网页都是大部分都是基于html语言的。 </p><p>JSP页面是有JSP容器执行该页面的Java代码部分然后实时生成动态页面，可动态更新页面上的内容。<br><img src="https://img-blog.csdn.net/20180828203824436?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdkYW4xMDI1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70"> </p><p>动态网页，是指跟静态网页相对的一种网页编程技术。动态页面的内容一般都是依靠服务器端的程序来生成的，不同人、不同时候访问页面，显示的内容都可能不同。网页设计者在写好服务器端的页面程序后，不需要手工控制，页面内容会按照页面程序的安排自动更改变换。</p><p>静态网页，随着html代码的生成，页面的内容和显示效果就基本上不会发生变化了，不管是谁在任何时候看到的页面内容都是一样的，一成不变，除非你修改页面代码。静态html页面文件，可以直接用本地的浏览器打开。 </p><p><strong>总而言之：</strong></p><p>定义上HTML页面是静态页面可以直接运行，JSP页面是动态页它运行时需要转换成servlet</p><ul><li><p>HTML能直接打开，jsp只能发布到Tomact等服务器上才能打开<br>html是w3c规范的一种网页书写格式，是一种统一协议语言，静态网页。我们上网看的网页都是大部分都是基于html语言的。jsp是一种基于动态语言，jsp可以实现html的所有任务。<br>HTML（Hypertext Markup Language）文本标记语言，它是静态页面，和JavaScript一样解释性语言，只要你有一个浏览器那么它就可以正常显示出来，而不需要指定的编译工具，只需在TXT文档中写上HTML标记就可以正常显示。</p></li><li><p>JSP（Java Server Page）是Java服务端的页面，所以它是动态的，它是需要经过JDK编译后把内容发给客户端去显示，我们都知道，Java文件编译后会产生一个class文件，最终执行的就是这个class文件。</p></li><li><p>html和jsp的表头不一样，这个是JSP的头“ <%@ page language=”java” import=”java.util.*” pageEncoding=”gbk”%>”在表头中有编码格式和倒入包等。也是很好区分的，在jsp中用<%%>就可以写Java代码了，而html没有<%%>。</p></li><li><p>简单说，jsp在后台通过服务器解析为相应的html，然后在供浏览器识别显示。</p></li></ul><h2 id="JSP指令"><a href="#JSP指令" class="headerlink" title="JSP指令"></a>JSP指令</h2><h3 id="JSP指令-1"><a href="#JSP指令-1" class="headerlink" title="JSP指令"></a>JSP指令</h3><p>JSP指令控制JSP编译器如何去生成servlet，以下是可用的指令： </p><ul><li>包含指令include –包含指令通知JSP编译器把另外一个文件完全包含入当前文件中。效果就好像被包含文件的内容直接被粘贴到当前文件中一样。这个功能和C预处理器所提供的很类似。被包含文件的扩展名一般都是”jspf”（即JSPFragment，JSP片段）:<br><%@ include file=”somefile.jsp” %></li><li>页面指令page –页面指令有以下几个选项：</li></ul><pre class="line-numbers language-none"><code class="language-none">| import | 使一个JAVA导入声明被插入到最终页面文件。 || contentType | 规定了生成内容的类型。当生成非HTML内容或者当前字符集并非默认字符集时使用。 || errorPage | 处理HTTP请求时，如果出现异常则显示该错误提示信息页面。 || isErrorPage | 如果设置为TRUE，则表示当前文件是一个错误提示页面。 || isThreadSafe | 表示最终生成的servlet是否具有线程安全性。 |<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><%@ page import=”java.util.*” %> //example import导入样例<br><%@ page contentType=”text/html” %> //example contentType页面类型样例<br><%@ page isErrorPage=false %> //example for non error page无错页面样例<br><%@ page isThreadSafe=true %> //example for a thread safe JSP执行绪安全JSP样例<br><strong>注意：</strong> </p><ul><li>在同一个JSP文件中只有“import”导入页面指令可以被多次使用。<br>标签库指令taglib –标签库指令描述了要使用的JSP标签库。该指令需要指定一个前缀prefix（和C++的名字空间很类似）和标签库的描述URI:<br><%@ taglib prefix=”myprefix” uri=”taglib/mytag.tld” %> </li></ul><h3 id="JSP脚本元素和变量"><a href="#JSP脚本元素和变量" class="headerlink" title="JSP脚本元素和变量"></a>JSP脚本元素和变量</h3><p>标准脚本变量<br>以下是永远可用的脚本变量：</p><ul><li>out：JSPWriter，用来写入响应流的数据</li><li>page：servlet自身</li><li>pageContext：一个PageContext实例包括和整个页面相联系的数据，一个给定的HTML页面可以在多个JSP之间传递。</li><li>request：HTTP request（请求）对象</li><li>response：HTTP response（响应）对象</li><li>session：HTTP session（服务端会话）对象 </li></ul><p>脚本元素 </p><p>有三个基本的脚本元素，作用是使JAVA代码可以直接插入servlet. </p><ul><li>一种是声明标签，在JAVA SERVLET的类体中放入一个变量的定义。静态的数据成员也可以如此定义。<br><%! int serverInstanceVariable = 1; %></li><li>一种是脚本标签，在JAVA SERVLET的类的_jspService()方法中放入所包含的语句。<br><% int localStackBasedVariable = 1; out.println(localStackBasedVariable); %></li><li>一种是表达式标签，在JAVA SERVLET的类中放入待赋值的表达式，表达式注意不能以分号结尾。<br><%= “expanded inline data “ + 1 %></li></ul>]]></content>
<categories>
<category> Html </category>
</categories>
<tags>
<tag> Html </tag>
<tag> JSP </tag>
</tags>
</entry>
<entry>
<title>Hexo中添加懒加载动画 loading</title>
<link href="/posts/ea605907.html"/>
<url>/posts/ea605907.html</url>
<content type="html"><![CDATA[<h2 id="引言"><a href="#引言" class="headerlink" title="引言"></a>引言</h2><p>影响网页打开速度的原因有许多种，本文主要对文章封面加载进行优化，最后给出几点相关的优化建议。</p><h2 id="懒加载"><a href="#懒加载" class="headerlink" title="懒加载"></a>懒加载</h2><p><strong>懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式*。</strong>用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。</p><h3 id="为什么要用懒加载"><a href="#为什么要用懒加载" class="headerlink" title="为什么要用懒加载"></a>为什么要用懒加载</h3><ul><li>能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。 </li><li>减少无效资源的加载，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。 </li><li>防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。</li></ul><h2 id="预加载"><a href="#预加载" class="headerlink" title="预加载"></a>预加载</h2><p><strong>预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。</strong></p><h3 id="为什么要用预加载"><a href="#为什么要用预加载" class="headerlink" title="为什么要用预加载"></a>为什么要用预加载</h3><p>在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。 </p><h2 id="Hexo中添加文章封面懒加载gif"><a href="#Hexo中添加文章封面懒加载gif" class="headerlink" title="Hexo中添加文章封面懒加载gif"></a>Hexo中添加文章封面懒加载gif</h2><h3 id="引入js"><a href="#引入js" class="headerlink" title="引入js"></a>引入js</h3><ul><li><p>在<code>themes\hexo-theme-matery-master\source\js</code>中新建<code>lazysizes.min.js</code>文件，打开这个网址<a href="https://cdn.jsdelivr.net/gh/LIlGG/halo-theme-sakura@1.3.1/source/lib/lazysizes/lazysizes.min.js">传送门</a>，将内容复制粘贴到<code>lazysizes.min.js</code>即可。 </p></li><li><p>打开文件<code>\layout\_partial\head.ejs</code>head标签里面引入路径</p></li></ul><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>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/source/js/lazysizes.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><ul><li>在<code>themes/matery/layout/index.ejs</code>文件内修改两个内容，在<code>post.img</code>下面的<code>src</code>改为<code>data-src</code>,然后旁边写<code>src="/medias/loading.gif"</code>，路径就是你放图片的位置。</li></ul><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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <% if (post.img) { %> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">data-src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%- url_for(post.img) %><span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/medias/loading2.gif<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>responsive-img lazyload<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= post.title %><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <% } else { %> <% var featureimg = '/medias/featureimages/0.jpg'; var featureImages = theme.featureImages; if (!featureImages || featureImages.length == 0) { return featureimg; } featureimg = featureImages[Math.abs(hashCode(post.title) % featureImages.length)] %> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%- theme.jsDelivr.url %><%- url_for(featureimg) %><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>responsive-img<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><%= post.title %><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>card-title<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><%= post.title %><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></span><span></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><ul><li>最后在<code>themes\hexo-theme-matery-master\source\medias</code>文件中添加一张gif图片。 </li></ul><p>最总效果：<br><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/WdfkmYJFhf.png" alt="img"></p><h2 id="优化建议"><a href="#优化建议" class="headerlink" title="优化建议"></a>优化建议</h2><ul><li>使用多线部署，因为国内访问github比较慢，建议博客可以放在国内的站点。</li><li>使用cdn，对于字体，js，css等静态资源，如果有cdn加速，建议使用cdn。比如我的博客，用的是jsDeliver。</li><li>尽量使用简洁的主题，比如Next等。</li><li>js脚本尽量后置，如果不影响功能，建议放在</body>之前，并且能异步加载的，尽量异步加载。比如nova主题，许多脚本都是后置并且异步的。</li></ul>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 博客优化 </tag>
</tags>
</entry>
<entry>
<title>博客主题个性化(目录，搜索框，代码雨)</title>
<link href="/posts/72fc1fe7.html"/>
<url>/posts/72fc1fe7.html</url>
<content type="html"><![CDATA[<p><strong>请注意：</strong>不同主题可能方法有些不同，相同主题不同版本，配置方法也有所差异！</p><p><strong>博客美化前提条件：</strong>有一定的前端基础，了解 HTML、CSS、JS，了解 CSS 预处理语言 Sass、Less、Stylus，搞懂 hexo 的目录结构。</p><p><strong>博客美化通用步骤：</strong>选定主题，认真阅读主题文档，分析主题目录结构，了解每个文件是对应网页哪个部分的，认真阅读美化教程，美化教程本质上只为你提供核心代码和思路，具体代码要添加到哪个地方，需要你自己搞懂主题结构，添加到需要的、合适的位置！<br><strong>不同主题</strong>要是没有对应的文件夹，可以新建一个</p><h2 id="修改目录"><a href="#修改目录" class="headerlink" title="修改目录"></a>修改目录</h2><p>themes\hexo-theme-matery-master\source\libs\tocbot\tocbot.css<br>中添加</p><pre class="line-numbers language-none"><code class="language-none">#toc-content ol li { line-height: 2rem;}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>themes\hexo-theme-matery-master\source\css\matery.css 中添加下列代码</p><pre class="line-numbers language-none"><code class="language-none">/* 美化ol标签 */ol{ list-style: none; /* 隐藏原来的 1. 2. 等序号样式 */ counter-reset: ol-li; } ol li:before { display: block; float: left; width: 19px; /* 宽度和高度需要根据自己的字体大小进行修正 */ height: 19px; line-height: 19px; margin: 4px 12px 0 0; color: #fff; font-size: 16px; font-weight: 300; font-style: normal; background-color: #49b1f5; border-radius: 50%; text-align: center; content: counter(ol-li); counter-increment: ol-li; transition: all 1s; }ol li:hover::before{ transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg);}<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></code></pre><p>最终效果： </p><p><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/zYk56Kc6ke.png" alt="img"></p><h2 id="优化搜索框"><a href="#优化搜索框" class="headerlink" title="优化搜索框"></a>优化搜索框</h2><p>themes\hexo-theme-matery-master\source\css\matery.css 找到对应代码 替换下列</p><pre class="line-numbers language-none"><code class="language-none">/*搜索层样式*/#searchIcon { font-size: 1.2rem;}@media screen and (min-width: 1202px) { #searchModal { top: 13%!important; width: 56%!important; }}#searchModal { min-height: 100px; width: 80%; background-color: rgba(0,0,0,0.4); border-radius: 10px;}body.dark #searchModal { background-color: rgba(255, 255, 255, 0.1);}#searchModal .search-header .title { font-size: 1.1rem; color: #42b983;}.search-result { color: #fff;}#searchResult { margin: -15px 0 10px 10px;}#searchResult .search-result-list { margin-left: -8px; padding-left: 0; color: #666;}.search-result-list .search-result-title { font-size: 1.2rem; color: #42b983;}.search-result-list li { /* border-bottom: 1px solid #e5e5e5; */ padding: 15px 0 5px 0;}.search-result-list .search-keyword { margin: 0 2px; padding: 1px 5px 1px 4px; border-radius: 2px; background-color: #f2f2f2; color: #e96900; font-style: normal; white-space: pre-wrap;}<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><p>最终效果：<br><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/4D4cdRTQFy.png" alt="img"></p><h2 id="添加樱花飘落效果"><a href="#添加樱花飘落效果" class="headerlink" title="添加樱花飘落效果"></a>添加樱花飘落效果</h2><p>在<code>themes/matery/source/js</code>目录下新建<code>sakura.js</code>文件，打开这个网址<a href="https://cdn.jsdelivr.net/gh/baifeng66/cdn@1.1/source/js/sakura.js">传送门</a>，将内容复制粘贴到sakura.js即可。</p><p>然后再<code>themes/matery/layout/layout.ejs</code>文件内添加下面的内容：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span><span class="token comment">//只在桌面版网页启用特效</span><span class="token keyword">var</span> windowWidth <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>window<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 punctuation">;</span><span class="token keyword">if</span> <span class="token punctuation">(</span>windowWidth <span class="token operator">></span> <span class="token number">768</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'<script type="text/javascript" src="/js/sakura.js"><\/script>'</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></code></pre><p>最终效果：<br><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/P5bhniYFsb.png" alt="img"></p><h2 id="添加背景代码雨特效"><a href="#添加背景代码雨特效" class="headerlink" title="添加背景代码雨特效"></a>添加背景代码雨特效</h2><p>在<code>themes/matery/source/js</code>目录下新建<code>DigitalRain.js</code>文件，打开这个网址<a href="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@3.0.8/js/DigitalRain.js">传送门</a>，将内容复制粘贴到DigitalRain.js即可。 </p><p>然后在主题的 layout.ejs 文件中引入即可：</p><pre class="line-numbers language-none"><code class="language-none"><!-- 数字雨 --><canvas id="canvas" width="1440" height="900" ></canvas><script type="text/javascript" src="/js/DigitalRain.js"></script><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>在<code>themes\hexo-theme-matery-master\source\css\matery.css</code>文件中添加 </p><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* 背景数字雨 */</span><span class="token selector">canvas</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span>fixed<span class="token punctuation">;</span> <span class="token property">right</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span> <span class="token property">bottom</span><span class="token punctuation">:</span>0px<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token property">min-height</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span>-5<span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token selector">.cateee</span><span class="token punctuation">{</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 15px<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><p>最终效果：<br><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/RYjfkj837A.png" alt="img"></p>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 博客优化 </tag>
</tags>
</entry>
<entry>
<title>教程：hexo-calendar 活动日历插件</title>
<link href="/posts/cdfd9e84.html"/>
<url>/posts/cdfd9e84.html</url>
<content type="html"><![CDATA[<p>在博客中插入类似 Github contributions 的活动日历。</p><p>注意：此插件会和 <code>hexo g</code>命令冲突，请使用 <code>hexo ge</code>或 <code>hexo generate</code>替代 <code>hexo g</code>命令！</p><h2 id="前提条件"><a href="#前提条件" class="headerlink" title="前提条件"></a>前提条件</h2><p>注意：不满足前提条件的无法使用此插件，在不满足前提条件的情况下安装此插件出现的问题不予以处理，如何实现以下前提条件的问题不予以处理！</p><ol><li>Node.js >= 12.0</li><li>使用 <a href="https://git-scm.com/">Git</a>对博客**源码（不是使用 git 部署）**进行管理；</li><li>在博客根目录使用 <code>git log -1 --date=iso --pretty=format:"%ad"</code>命令能够输出一个日期；</li><li>如何确定第一项是否符合：<ol><li>博客根目录含有 <code>.git</code>文件夹，这是一个隐藏文件夹；</li><li>符合上面的第三项。</li></ol></li></ol><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><pre class="line-numbers language-bashi" data-language="bashi"><code class="language-bashi">npm i hexo-calendar -S<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>or </p><pre class="line-numbers language-none"><code class="language-none">cnpm i hexo-calendar -S<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><h3 id="作为辅助函数在主题模板中使用"><a href="#作为辅助函数在主题模板中使用" class="headerlink" title="作为辅助函数在主题模板中使用"></a>作为辅助函数在主题模板中使用</h3><pre class="line-numbers language-bashi" data-language="bashi"><code class="language-bashi"><%- calendar({monthLang: 'cn', dayLang: 'cn', title: '活动日历'}) %><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h3 id="作为标签在-md-文件中使用"><a href="#作为标签在-md-文件中使用" class="headerlink" title="作为标签在 md 文件中使用"></a><a href="#%E4%BD%9C%E4%B8%BA%E6%A0%87%E7%AD%BE%E5%9C%A8-md-%E6%96%87%E4%BB%B6%E4%B8%AD%E4%BD%BF%E7%94%A8"></a>作为标签在 md 文件中使用</h3><p>注意：这种方法请使用严格的 JSON 格式！</p><pre class="line-numbers language-bashi" data-language="bashi"><code class="language-bashi">{% calendar %} {"monthLang": "cn", "dayLang": "cn", "title": "活动日历"} {% endcalendar %}<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h3 id="如果你使用了自动部署"><a href="#如果你使用了自动部署" class="headerlink" title="如果你使用了自动部署"></a>如果你使用了自动部署</h3><p>如果你使用了 <code>Travis CI</code>, <code>Github Action</code>之类的自动部署，那么你需要在推送源码之前使用 <code>hexo gc \-w=40</code>命令生成一个 <code>calendar.json</code>文件。 <code>-w=40</code>代表显示 40 周之前至今的活动记录。</p><h2 id="选项"><a href="#选项" class="headerlink" title="选项"></a>选项</h2><table><thead><tr><th align="center">名称</th><th align="center">类型</th><th align="center">默认值</th><th align="center">描述</th></tr></thead><tbody><tr><td align="center">width</td><td align="center"><code>String</code></td><td align="center"><code>"600"</code></td><td align="center">日历宽度，单位： <code>px</code></td></tr><tr><td align="center">height</td><td align="center"><code>String</code></td><td align="center"><code>"165"</code></td><td align="center">日历高度，单位： <code>px</code></td></tr><tr><td align="center">id</td><td align="center"><code>String</code></td><td align="center"><code>"calendar"</code></td><td align="center">日历元素 id</td></tr><tr><td align="center">monthLang</td><td align="center"><code>String</code>or <code>Array</code></td><td align="center"><code>"en"</code></td><td align="center">月份语言，可选： <code>en</code>, <code>cn</code>或 <a href="https://echarts.apache.org/zh/option.html#calendar.monthLabel.nameMap">自定义</a></td></tr><tr><td align="center">dayLang</td><td align="center"><code>String</code>or <code>Array</code></td><td align="center"><code>"en"</code></td><td align="center">一周中每一天的语言，可选： <code>en</code>, <code>cn</code>或 <a href="https://echarts.apache.org/zh/option.html#calendar.dayLabel.nameMap">自定义</a></td></tr><tr><td align="center">weeks</td><td align="center"><code>Number</code></td><td align="center"><code>40</code></td><td align="center">显示多少周之前至今的活动记录</td></tr><tr><td align="center">title</td><td align="center"><code>String</code></td><td align="center"><code>"calendar"</code></td><td align="center">日历标题</td></tr><tr><td align="center">insertScript</td><td align="center"><code>Boolean</code></td><td align="center"><code>true</code></td><td align="center">是否自动插入 <code>echarts</code>库。如果你已全局引入 <code>echarts</code>库，请将此项设为 <code>false</code>；如果你的站点启用了 <code>pjax</code>，请将此项设为 <code>false</code>，并全局引用 <code>echarts</code>库。</td></tr></tbody></table><h2 id="示例"><a href="#示例" class="headerlink" title="示例"></a>示例</h2><p><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/1121121815.png" alt="示例"></p>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 插件 </tag>
</tags>
</entry>
<entry>
<title>Hexo博客添加分类相册功能（实现瀑布流相册，实现加密相册）</title>
<link href="/posts/37bce90.html"/>
<url>/posts/37bce90.html</url>
<content type="html"><![CDATA[<p>搞了半天，终于把理想的相册弄出来了</p><h2 id="效果如下："><a href="#效果如下：" class="headerlink" title="效果如下："></a>效果如下：</h2><p><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/2JC7WdYAiE.png" alt="img"> </p><p><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/7mxiEZX4n3.png" alt="img"> </p><p>我实践已经成功，不知道小伙伴们能不能成功？如果遇到错误，请联系我，我会及时回答！ </p><p>参考文献: <br><a href="https://liyangzone.com/2019/07/22/hexo%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0%E4%B8%80%E7%BA%A7%E5%88%86%E7%B1%BB%E7%9B%B8%E5%86%8C/">星空无线</a> <br><a href="https://yafine-blog.cn/posts/3b98.html">Yafine</a> <br><a href="https://nekodeng.gitee.io/posts/waterfall-flow-photo-album.html">NekoDeng</a></p>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 相册 </tag>
</tags>
</entry>
<entry>
<title>使用Picgo+Github+jsdelivr 搭建一个免费图床</title>
<link href="/posts/28603b98.html"/>
<url>/posts/28603b98.html</url>
<content type="html"><![CDATA[<p>jsDelivr提供GitHub，npm，WordPress等项目的镜像，且有国内节点，访问速度很不错，这也是我们选择它的原因。jsDelivr 的优点在于其专注于性能，可靠性和安全性，并且每个人均可免费使用，没有带宽限制。</p><p>偶然的一次机会，我接触到了 <strong><code>Markdown</code></strong> 语法，随后便喜欢上了这种标记语言。</p><p>目前，我使用 <strong><code>Typora</code></strong> 编辑器。</p><p><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/picgo1.png"></p><p><strong>Typora</strong> 里面有个非常好用的功能，就是通过 <strong>Picgo</strong> 将图片上传到图床。</p><p>下面就讲一下如何搭建一个免费的图床。</p><h1 id="Picgo-介绍"><a href="#Picgo-介绍" class="headerlink" title="Picgo 介绍"></a><a href="#Picgo-%E4%BB%8B%E7%BB%8D" title="Picgo 介绍"></a>Picgo 介绍</h1><p>Picgo 是一款开源的图片上传工具，项目地址:<a href="https://github.com/Molunerfinn/PicGo">Picgo</a></p><p>Picgo 支持<code>七牛图床</code>,<code>腾讯云</code>, <code>又拍云</code>,<code>Github</code> 等。</p><p>在众多的图床中我选择<code>Github</code> , 因为他免费.</p><h1 id="搭建图床"><a href="#搭建图床" class="headerlink" title="搭建图床"></a><a href="#%E6%90%AD%E5%BB%BA%E5%9B%BE%E5%BA%8A" title="搭建图床"></a>搭建图床</h1><h2 id="1-注册-登录-Github"><a href="#1-注册-登录-Github" class="headerlink" title="1. 注册 / 登录 Github"></a><a href="#1-%E6%B3%A8%E5%86%8C-%E7%99%BB%E5%BD%95-Github" title="1. 注册 / 登录 Github"></a>1. 注册 / 登录 Github</h2><p>这个就不演示了</p><h2 id="2-创建-Repo"><a href="#2-创建-Repo" class="headerlink" title="2. 创建 Repo"></a><a href="#2-%E5%88%9B%E5%BB%BA-Repo" title="2. 创建 Repo"></a>2. 创建 Repo</h2><p><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/picgo2.png" alt="img"></p><p><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/picgo3.png" alt="img"></p><p>然后点击 <strong><code>Create Repository</code></strong> 就可以了</p><h2 id="3-生成-Taken"><a href="#3-生成-Taken" class="headerlink" title="3.生成 Taken"></a><a href="#3-%E7%94%9F%E6%88%90-Taken" title="3.生成 Taken"></a>3.生成 Taken</h2><p><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/picgo4.png" alt="img"></p><p><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/picgo5.png" alt="img"></p><p><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/picgo6.png" alt="img"></p><p><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/picgo7.png" alt="img"></p><p>创建之后，会生成一串 token</p><h2 id="4-配置-Picgo"><a href="#4-配置-Picgo" class="headerlink" title="4.配置 Picgo"></a><a href="#4-%E9%85%8D%E7%BD%AE-Picgo" title="4.配置 Picgo"></a>4.配置 Picgo</h2><p><code>Picgo</code> 请到 <a href="https://github.com/Molunerfinn/PicGo">Picgo</a> 下载</p><p><img src="https://cdn.jsdelivr.net/gh/kaiboshi/pic/img/picgo8.png" alt="img"></p><ul><li>设定仓库名的时候，是按照 “账户名 / 仓库名的格式填写”</li><li>分支名统一填写 “master”</li><li>将之前的 Token 黏贴在这里</li><li>存储的路径可以按照我这样子写，就会在 repository 下创建一个 “img” 文件夹</li><li>自定义域名的作用是，在上传图片后成功后，PicGo 会将 “自定义域名 + 上传的图片名” 生成的访问链接，放到剪切板上</li><li><code>https://raw.githubusercontent.com/用户名/RepositoryName/分支名</code>，自定义域名需要按照这样去填写</li><li>但是由于 Github 在国内的访问速度太慢，所以我们使用 <a href="https://www.jsdelivr.com/">jsdelivr</a> 加速，只需要把自定义域名修改一下就可以了:<code>https://cdn.jsdelivr.net/gh/</code>用户名/RepositoryName</li></ul><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a><a href="#%E6%80%BB%E7%BB%93" title="总结"></a>总结</h2><p>将上面的步骤设置好之后，就可以愉快地写 Markdown 了。上传图片有快捷键，默认的是 <code>Ctrl+Shift+P</code>, 可以将剪切板上的图片快捷上传。</p><p><strong>来源：<a href="https://howiehye.top/">https://howiehye.top/</a></strong></p>]]></content>
<tags>
<tag> Hexo </tag>
<tag> Github </tag>
<tag> 图床 </tag>
</tags>
</entry>
<entry>
<title>Spring Boot 接入支付宝完整流程实战</title>
<link href="/posts/990d5589.html"/>
<url>/posts/990d5589.html</url>
<content type="html"><![CDATA[<p>作者 | 李秀才</p><p>来源 | blog.csdn.net/qq_33556185/article/details/110445827</p><p>支付宝今年推出了新的转账接口alipay.fund.trans.uni.transfer(升级后安全性更高，功能更加强大) ，老转账接口alipay.fund.trans.toaccount.transfer将不再维护，新老接口的一个区别就是新接口采用的证书验签方式。使用新接口要将sdk版本升级到最新版本，博主升级时最新版本是4.10.97。接下来看集成步骤</p><p>1.将支付宝开放平台里下载的3个证书放在resources下面</p><p><img src="https://img-blog.csdnimg.cn/20201202002716995.png"></p><p>2.写支付宝支付的配置文件</p><p>alipay.properties</p><pre class="line-numbers language-none"><code class="language-none">alipay.appId=你的应用idalipay.serverUrl=https://openapi.alipay.com/gateway.doalipay.privateKey=你的应用私钥alipay.format=jsonalipay.charset=UTF-8alipay.signType=RSA2alipay.appCertPath=/cert/appCertPublicKey_2021001164652941.crtalipay.alipayCertPath=/cert/alipayCertPublicKey_RSA2.crtalipay.alipayRootCertPath=/cert/alipayRootCert.crt<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>3.引入pom依赖</p><pre class="line-numbers language-none"><code class="language-none"><dependency> <groupId>com.alipay.sdk</groupId> <artifactId>alipay-sdk-java</artifactId> <version>4.10.97.ALL</version> </dependency><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>4.将配置信息注入AliPayBean</p><pre class="line-numbers language-none"><code class="language-none">import lombok.Data;import org.springframework.boot.context.properties.ConfigurationProperties;import org.springframework.context.annotation.PropertySource;import org.springframework.stereotype.Component;@Component@PropertySource("classpath:/production/alipay.properties")@ConfigurationProperties(prefix = "alipay")@Datapublic class AliPayBean { private String appId; private String privateKey; private String publicKey; private String serverUrl; private String domain; private String format; private String charset; private String signType; private String appCertPath; private String alipayCertPath; private String alipayRootCertPath;}<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></code></pre><p>5.写配置类</p><pre class="line-numbers language-none"><code class="language-none">import com.alipay.api.AlipayClient;import com.alipay.api.CertAlipayRequest;import com.alipay.api.DefaultAlipayClient;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.beans.factory.annotation.Value;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.util.FileCopyUtils;import java.io.InputStream;@Configurationpublic class AliConfig { @Value("${custom.http.proxyHost}") private String proxyHost; @Value("${custom.http.proxyPort}") private int proxyPort; @Value("${spring.profiles.active}") private String activeEnv; @Autowired private AliPayBean aliPayBean; @Bean(name = {"alipayClient"}) public AlipayClient alipayClientService() throws Exception{ CertAlipayRequest certAlipayRequest = new CertAlipayRequest(); //设置网关地址 certAlipayRequest.setServerUrl(aliPayBean.getServerUrl()); //设置应用Id certAlipayRequest.setAppId(aliPayBean.getAppId()); //设置应用私钥 certAlipayRequest.setPrivateKey(aliPayBean.getPrivateKey()); //设置请求格式，固定值json certAlipayRequest.setFormat(aliPayBean.getFormat()); //设置字符集 certAlipayRequest.setCharset(aliPayBean.getCharset()); //设置签名类型 certAlipayRequest.setSignType(aliPayBean.getSignType()); //如果是生产环境或者预演环境，则使用代理模式 if ("prod".equals(activeEnv) || "stage".equals(activeEnv) || "test".equals(activeEnv)) { //设置应用公钥证书路径 certAlipayRequest.setCertContent(getCertContentByPath(aliPayBean.getAppCertPath())); //设置支付宝公钥证书路径 certAlipayRequest.setAlipayPublicCertContent(getCertContentByPath(aliPayBean.getAlipayCertPath())); //设置支付宝根证书路径 certAlipayRequest.setRootCertContent(getCertContentByPath(aliPayBean.getAlipayRootCertPath())); certAlipayRequest.setProxyHost(proxyHost); certAlipayRequest.setProxyPort(proxyPort); }else { //local String serverPath = this.getClass().getResource("/").getPath(); //设置应用公钥证书路径 certAlipayRequest.setCertPath(serverPath+aliPayBean.getAppCertPath()); //设置支付宝公钥证书路径 certAlipayRequest.setAlipayPublicCertPath(serverPath+aliPayBean.getAlipayCertPath()); //设置支付宝根证书路径 certAlipayRequest.setRootCertPath(serverPath+aliPayBean.getAlipayRootCertPath()); } return new DefaultAlipayClient(certAlipayRequest); } public String getCertContentByPath(String name){ InputStream inputStream = null; String content = null; try{ inputStream = this.getClass().getClassLoader().getResourceAsStream(name); content = new String(FileCopyUtils.copyToByteArray(inputStream)); }catch (Exception e){ e.printStackTrace(); } return content; }}<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></span><span></span><span></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>6.写支付工具类</p><pre class="line-numbers language-none"><code class="language-none">import com.alipay.api.AlipayApiException;import com.alipay.api.AlipayClient;import com.alipay.api.domain.AlipayTradeAppPayModel;import com.alipay.api.domain.AlipayTradeQueryModel;import com.alipay.api.request.AlipayTradeAppPayRequest;import com.alipay.api.request.AlipayTradeQueryRequest;import com.alipay.api.response.AlipayTradeAppPayResponse;import com.alipay.api.response.AlipayTradeQueryResponse;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.beans.factory.annotation.Qualifier;import org.springframework.stereotype.Service;/** * @description:支付宝工具类 * @Date:2020-08-26 */@Slf4j@Servicepublic class AliPayUtils { @Autowired @Qualifier("alipayClient") private AlipayClient alipayClient; /** * 交易查询接口 * @param request * @return * @throws Exception */ public boolean isTradeQuery(AlipayTradeQueryModel model) throws AlipayApiException { AlipayTradeQueryRequest request = new AlipayTradeQueryRequest(); request.setBizModel(model); AlipayTradeQueryResponse alipayTradeQueryResponse = alipayClient.certificateExecute(request); if(alipayTradeQueryResponse.isSuccess()){ return true; } else { return false; } } /** * app支付 * @param model * @param notifyUrl * @return * @throws AlipayApiException */ public String startAppPay(AlipayTradeAppPayModel model, String notifyUrl) throws AlipayApiException { AlipayTradeAppPayRequest aliPayRequest = new AlipayTradeAppPayRequest(); model.setProductCode("QUICK_MSECURITY_PAY"); aliPayRequest.setNotifyUrl(notifyUrl); aliPayRequest.setBizModel(model); // 这里和普通的接口调用不同，使用的是sdkExecute AlipayTradeAppPayResponse aliResponse = alipayClient.sdkExecute(aliPayRequest); return aliResponse.getBody(); } /** * 转账接口 * * @param transferParams * @return AlipayFundTransToaccountTransferResponse */ public AlipayFundTransUniTransferResponse doTransferNew(TransferParams transferParams) throws Exception { String title = (StringUtils.isNotBlank(transferParams.getRemark()) ? transferParams .getRemark() : "转账"); //转账请求入参 AlipayFundTransUniTransferRequest request = new AlipayFundTransUniTransferRequest(); //转账参数 BizContentForUniTransfer bizContent = new BizContentForUniTransfer(); bizContent.setOut_biz_no(transferParams.getOutBizNo()); bizContent.setTrans_amount(MathUtil.changeF2Y(Math.abs(Integer.parseInt(transferParams.getAmount())))); bizContent.setProduct_code("TRANS_ACCOUNT_NO_PWD"); bizContent.setBiz_scene("DIRECT_TRANSFER"); bizContent.setOrder_title(title); Participant participant = new Participant(); participant.setIdentity(transferParams.getPayeeAccount()); participant.setIdentity_type(transferParams.getPayeeType()); participant.setName((StringUtils.isNotBlank(transferParams.getPayeeRealName()) ? transferParams .getPayeeRealName() : StringUtils.EMPTY)); bizContent.setPayee_info(participant); bizContent.setRemark(title); request.setBizContent(JSON.toJSONString(bizContent)); //转账请求返回 AlipayFundTransUniTransferResponse response = null; try { response = alipayClient.certificateExecute(request); } catch (Exception e) { log.info("doTransfer exception，异常信息：{}", e.toString()); log.info("doTransfer exception，支付宝返回信息：{}", JSONObject.toJSONString(response)); } log.info("doTransfer,AlipayFundTransUniTransferResponse:{}", JSONObject.toJSONString(response)); return response; }}<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></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></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>Tips：转账用到的类</p><pre class="line-numbers language-none"><code class="language-none">@Datapublic class TransferParams { /** * 应用编号 */ private Long appId; /** * 创建人id */ private Long createdBy; /** * 转账业务订单号 */ private String outBizNo; /** * 收款方识别方式 */ private String payeeType; /** * 收款方账号，可以是支付宝userId或者支付宝loginId */ private String payeeAccount; /** * 转账金额，单位分 */ private String amount; /** * 付款方名称 */ private String payerShowName; /** * 收款方名称 */ private String payeeRealName; /** * 备注 */ private String remark; /** * 支付宝转账流水号 */ private String orderId;}<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></code></pre><pre class="line-numbers language-none"><code class="language-none">import lombok.Data;import java.math.BigDecimal;/** * 支付宝转账参数 */@Datapublic class BizContentForUniTransfer { /** * 业务订单号 */ private String out_biz_no; /** * 订单总金额，单位为元，精确到小数点后两位， */ private BigDecimal trans_amount; /** * 业务产品码， * 单笔无密转账到支付宝账户固定为:TRANS_ACCOUNT_NO_PWD； * 单笔无密转账到银行卡固定为:TRANS_BANKCARD_NO_PWD; * 收发现金红包固定为:STD_RED_PACKET； */ private String product_code; /** * 描述特定的业务场景，可传的参数如下： * DIRECT_TRANSFER：单笔无密转账到支付宝/银行卡, B2C现金红包; * PERSONAL_COLLECTION：C2C现金红包-领红包 */ private String biz_scene; /** * 转账业务的标题，用于在支付宝用户的账单里显示 */ private String order_title; /** * 原支付宝业务单号。C2C现金红包-红包领取时，传红包支付时返回的支付宝单号； * B2C现金红包、单笔无密转账到支付宝/银行卡不需要该参数。 */ private String original_order_id; /** * 业务备注 */ private String remark; /** * 转账业务请求的扩展参数，支持传入的扩展参数如下： * 1、sub_biz_scene 子业务场景，红包业务必传，取值REDPACKET，C2C现金红包、B2C现金红包均需传入； * 2、withdraw_timeliness为转账到银行卡的预期到账时间，可选（不传入则默认为T1）， * 取值T0表示预期T+0到账，取值T1表示预期T+1到账，因到账时效受银行机构处理影响，支付宝无法保证一定是T0或者T1到账； */ private String business_params; /** * 支付收款对象 */ private Participant payee_info;}<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></span></span></code></pre><pre class="line-numbers language-none"><code class="language-none">@Datapublic class Participant { /** * 参与方的唯一标识 */ private String identity; /** * 参与方的标识类型，目前支持如下类型： * 1、ALIPAY_USER_ID 支付宝的会员ID * 2、ALIPAY_LOGON_ID：支付宝登录号，支持邮箱和手机号格式 */ private String identity_type; /** * 参与方真实姓名，如果非空，将校验收款支付宝账号姓名一致性。 * 当identity_type=ALIPAY_LOGON_ID时，本字段必填。 */ private String name;}<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></code></pre>]]></content>
<categories>
<category> SpringBoot </category>
</categories>
<tags>
<tag> SpringBoot </tag>
</tags>
</entry>
<entry>
<title>SpringBoot注解最全详解(整合超详细版本)</title>
<link href="/posts/83c3cfb1.html"/>
<url>/posts/83c3cfb1.html</url>
<content type="html"><![CDATA[<p>_作者_：VV-酱<br>来源：<a href="https://blog.csdn.net/weixin/_40753536/">https://blog.csdn.net/weixin\_40753536/</a></p><p>使用注解的优势：</p><ol><li> 采用纯java代码，不在需要配置繁杂的xml文件</li><li> 在配置中也可享受面向对象带来的好处</li><li> 类型安全对重构可以提供良好的支持</li><li> 减少复杂配置文件的同时亦能享受到springIoC容器提供的功能</li></ol><h2 id="一、注解详解（配备了完善的释义）"><a href="#一、注解详解（配备了完善的释义）" class="headerlink" title="一、注解详解（配备了完善的释义）"></a>一、注解详解（配备了完善的释义）</h2><p>可采用ctrl+F 来进行搜索哦~~~~</p><p>@SpringBootApplication：申明让spring boot自动给程序进行必要的配置，这个配置等同于：@Configuration ，@EnableAutoConfiguration 和 @ComponentScan 三个配置。</p><p>@ResponseBody：表示该方法的返回结果直接写入HTTP response body中，一般在异步获取数据时使用，用于构建RESTful的api。在使用@RequestMapping后，返回值通常解析为跳转路径，加上@esponsebody后返回结果不会被解析为跳转路径，而是直接写入HTTP response body中。比如异步获取json数据，加上@Responsebody后，会直接返回json数据。该注解一般会配合@RequestMapping一起使用。</p><p>@Controller：用于定义控制器类，在spring项目中由控制器负责将用户发来的URL请求转发到对应的服务接口（service层），一般这个注解在类中，通常方法需要配合注解@RequestMapping。</p><p>@RestController：用于标注控制层组件(如struts中的action)，@ResponseBody和@Controller的合集。</p><p>@RequestMapping：提供路由信息，负责URL到Controller中的具体函数的映射。</p><p>@EnableAutoConfiguration：SpringBoot自动配置（auto-configuration）：尝试根据你添加的jar依赖自动配置你的Spring应用。例如，如果你的classpath下存在HSQLDB，并且你没有手动配置任何数据库连接beans，那么我们将自动配置一个内存型（in-memory）数据库”。你可以将@EnableAutoConfiguration或者@SpringBootApplication注解添加到一个@Configuration类上来选择自动配置。如果发现应用了你不想要的特定自动配置类，你可以使用@EnableAutoConfiguration注解的排除属性来禁用它们。</p><p>@ComponentScan：表示将该类自动发现扫描组件。个人理解相当于，如果扫描到有@Component、@Controller、@Service等这些注解的类，并注册为Bean，可以自动收集所有的Spring组件，包括@Configuration类。我们经常使用@ComponentScan注解搜索beans，并结合@Autowired注解导入。可以自动收集所有的Spring组件，包括@Configuration类。我们经常使用@ComponentScan注解搜索beans，并结合@Autowired注解导入。如果没有配置的话，Spring Boot会扫描启动类所在包下以及子包下的使用了@Service,@Repository等注解的类。</p><p>@Configuration：相当于传统的xml配置文件，如果有些第三方库需要用到xml文件，建议仍然通过<br>@Configuration类作为项目的配置主类——可以使用<br>@ImportResource注解加载xml配置文件。@Import：用来导入其他配置类。</p><p>@ImportResource：用来加载xml配置文件。</p><p>@Autowired：自动导入依赖的bean@Service：一般用于修饰service层的组件</p><p>@Repository：使用@Repository注解可以确保DAO或者repositories提供异常转译，这个注解修饰的DAO或者repositories类会被ComponetScan发现并配置，同时也不需要为它们提供XML配置项。</p><p>@Bean：用@Bean标注方法等价于XML中配置的bean。</p><p>@Value：注入Spring boot application.properties配置的属性的值。示例代码：</p><p>@Inject：等价于默认的@Autowired，只是没有required属性；</p><p>@Component：泛指组件，当组件不好归类的时候，我们可以使用这个注解进行标注。</p><p>@Bean:相当于XML中的,放在方法的上面，而不是类，意思是产生一个bean,并交给spring管理。</p><p>@AutoWired：自动导入依赖的bean。byType方式。把配置好的Bean拿来用，完成属性、方法的组装，它可以对类成员变量、方法及构造函数进行标注，完成自动装配的工作。当加上（required=false）时，就算找不到bean也不报错。@Qualifier：当有多个同一类型的Bean时，可以用@Qualifier(“name”)来指定。与@Autowired配合使用。</p><p>@Qualifier限定描述符除了能根据名字进行注入，但能进行更细粒度的控制如何选择候选者，具体使用方式如下：</p><p>@Resource(name=”name”,type=”type”)：没有括号内内容的话，默认byName。与@Autowired干类似的事。</p><h2 id="二、注解列表如下"><a href="#二、注解列表如下" class="headerlink" title="二、注解列表如下"></a>二、注解列表如下</h2><p>@SpringBootApplication：包含了@ComponentScan、@Configuration和@EnableAutoConfiguration注解。其中@ComponentScan：让spring Boot扫描到Configuration类并把它加入到程序上下文。</p><p>@Configuration ：等同于spring的XML配置文件；使用Java代码可以检查类型安全。</p><p>@EnableAutoConfiguration ：自动配置。</p><p>@ComponentScan ：组件扫描，可自动发现和装配一些Bean。</p><p>@Component可配合CommandLineRunner使用，在程序启动后执行一些基础任务。</p><p>@RestController：注解是@Controller和@ResponseBody的合集,表示这是个控制器bean,并且是将函数的返回值直 接填入HTTP响应体中,是REST风格的控制器。</p><p>@Autowired：自动导入。</p><p>@PathVariable：获取参数。@JsonBackReference：解决嵌套外链问题。</p><p>@RepositoryRestResourcepublic：配合spring-boot-starter-data-rest使用。</p><h2 id="三、JPA注解"><a href="#三、JPA注解" class="headerlink" title="三、JPA注解"></a>三、JPA注解</h2><p>@Entity：@Table(name=”“)：表明这是一个实体类。一般用于jpa这两个注解一般一块使用，但是如果表名和实体类名相同的话，@Table可以省略</p><p>@MappedSuperClass:用在确定是父类的entity上。父类的属性子类可以继承。@NoRepositoryBean:一般用作父类的repository，有这个注解，spring不会去实例化该repository。</p><p>@Column：如果字段名与列名相同，则可以省略。</p><p>@Id：表示该属性为主键。</p><p>@GeneratedValue(strategy = GenerationType.SEQUENCE,generator = “repair_seq”)：表示主键生成策略是sequence（可以为Auto、IDENTITY、native等，Auto表示可在多个数据库间切换），指定sequence的名字是repair_seq。</p><p>@SequenceGeneretor(name = “repair_seq”, sequenceName = “seq_repair”, allocationSize = 1)：name为sequence的名称，以便使用，sequenceName为数据库的sequence名称，两个名称可以一致。</p><p>@Transient：表示该属性并非一个到数据库表的字段的映射,ORM框架将忽略该属性。如果一个属性并非数据库表的字段映射,就务必将其标示为@Transient,否则,ORM框架默认其注解为@Basic。</p><p>@Basic(fetch=FetchType.LAZY)：标记可以指定实体属性的加载方式</p><p>@JsonIgnore：作用是json序列化时将Java bean中的一些属性忽略掉,序列化和反序列化都受影响。</p><p>@JoinColumn（name=”loginId”）:一对一：本表中指向另一个表的外键。一对多：另一个表指向本表的外键。@OneToOne、@OneToMany、@ManyToOne：对应hibernate配置文件中的一对一，一对多，多对一。</p><h2 id="四、springMVC相关注解"><a href="#四、springMVC相关注解" class="headerlink" title="四、springMVC相关注解"></a>四、springMVC相关注解</h2><p>@RequestMapping：@RequestMapping(“/path”)表示该控制器处理所有“/path”的UR L请求。RequestMapping是一个用来处理请求地址映射的注解，可用于类或方法上。用于类上，表示类中的所有响应请求的方法都是以该地址作为父路径。该注解有六个属性：</p><ul><li>params:指定request中必须包含某些参数值是，才让该方法处理。</li><li>headers:指定request中必须包含某些指定的header值，才能让该方法处理请求。</li><li>value:指定请求的实际地址，指定的地址可以是URI Template 模式</li><li>method:指定请求的method类型， GET、POST、PUT、DELETE等</li><li>consumes:指定处理请求的提交内容类型（Content-Type），如application/json,text/html;</li><li>produces:指定返回的内容类型，仅当request请求头中的(Accept)类型中包含该指定类型才返回</li></ul><p>@RequestParam：用在方法的参数前面。</p><p><code>@RequestParam String a =request.getParameter(“a”)。 </code></p><p>@PathVariable:路径变量。参数与大括号里的名字一样要相同。</p><h2 id="五、全局异常处理"><a href="#五、全局异常处理" class="headerlink" title="五、全局异常处理"></a>五、全局异常处理</h2><p>@ControllerAdvice：包含@Component。可以被扫描到。统一处理异常。</p><p>@ExceptionHandler（Exception.class）：用在方法上面表示遇到这个异常就执行以下方法。</p><h2 id="六、项目中具体配置解析和使用环境"><a href="#六、项目中具体配置解析和使用环境" class="headerlink" title="六、项目中具体配置解析和使用环境"></a>六、项目中具体配置解析和使用环境</h2><h4 id="MappedSuperclass："><a href="#MappedSuperclass：" class="headerlink" title="@MappedSuperclass："></a>@MappedSuperclass：</h4><ol><li> @MappedSuperclass 注解使用在父类上面，是用来标识父类的</li><li> @MappedSuperclass 标识的类表示其不能映射到数据库表，因为其不是一个完整的实体类，但是它所拥有的属性能够映射在其子类对用的数据库表中</li><li> @MappedSuperclass 标识的类不能再有@Entity或@Table注解</li></ol><h4 id="Column："><a href="#Column：" class="headerlink" title="@Column："></a>@Column：</h4><p>1.当实体的属性与其映射的数据库表的列不同名时需要使用@Column标注说明，该属性通常置于实体的属性声明语句之前，还可与 @Id 标注一起使用。</p><p>2.@Column 标注的常用属性是name，用于设置映射数据库表的列名。此外，该标注还包含其它多个属性，如：unique、nullable、length、precision等。具体如下：</p><ul><li>name属性：name属性定义了被标注字段在数据库表中所对应字段的名称</li><li>unique属性：unique属性表示该字段是否为唯一标识，默认为false，如果表中有一个字段需要唯一标识，则既可以使用该标记，也可以使用@Table注解中的@UniqueConstraint</li><li>nullable属性：nullable属性表示该字段是否可以为null值，默认为true</li><li>insertable属性：insertable属性表示在使用”INSERT”语句插入数据时，是否需要插入该字段的值</li><li>updateable属性：updateable属性表示在使用”UPDATE”语句插入数据时，是否需要更新该字段的值</li><li>insertable和updateable属性：一般多用于只读的属性，例如主键和外键等，这些字段通常是自动生成的</li><li>columnDefinition属性：columnDefinition属性表示创建表时，该字段创建的SQL语句，一般用于通过Entity生成表定义时使用，如果数据库中表已经建好，该属性没有必要使用</li><li>table属性：table属性定义了包含当前字段的表名</li><li>length属性：length属性表示字段的长度，当字段的类型为varchar时，该属性才有效，默认为255个字符</li><li>precision属性和scale属性：precision属性和scale属性一起表示精度，当字段类型为double时，precision表示数值的总长度，scale表示小数点所占的位数</li></ul><p>具体如下：</p><ol><li> double类型将在数据库中映射为double类型，precision和scale属性无效</li><li> double类型若在columnDefinition属性中指定数字类型为decimal并指定精度，则最终以columnDefinition为准</li><li> BigDecimal类型在数据库中映射为decimal类型，precision和scale属性有效</li><li> precision和scale属性只在BigDecimal类型中有效</li></ol><p>3.@Column 标注的columnDefinition属性: 表示该字段在数据库中的实际类型.通常 ORM 框架可以根据属性类型自动判断数据库中字段的类型,但是对于Date类型仍无法确定数据库中字段类型究竟是DATE,TIME还是TIMESTAMP.此外,String的默认映射类型为VARCHAR,如果要将 String 类型映射到特定数据库的 BLOB 或TEXT字段类型.</p><p>4.@Column标注也可置于属性的getter方法之前@Getter和@Setter（Lombok）@Setter：注解在属性上；为属性提供 setting 方法 @Getter：注解在属性上；为属性提供 getting 方法</p><ul><li>@Data：注解在类上；提供类所有属性的 getting 和 setting 方法，此外还提供了equals、canEqual、hashCode、toString 方法</li><li>@Setter：注解在属性上；为属性提供 setting 方法</li><li>@Getter：注解在属性上；为属性提供 getting 方法</li><li>@Log4j2 ：注解在类上；为类提供一个 属性名为log 的 log4j 日志对象，和@Log4j注解类似</li><li>@NoArgsConstructor：注解在类上；为类提供一个无参的构造方法</li><li>@AllArgsConstructor：注解在类上；为类提供一个全参的构造方法</li><li>@EqualsAndHashCode:默认情况下，会使用所有非瞬态(non-transient)和非静态(non-static)字段来生成equals和hascode方法，也可以指定具体使用哪些属性。</li><li>@toString:生成toString方法，默认情况下，会输出类名、所有属性，属性会按照顺序输出，以逗号分割。</li><li>@NoArgsConstructor, @RequiredArgsConstructor and @AllArgsConstructor无参构造器、部分参数构造器、全参构造器，当我们需要重载多个构造器的时候，只能自己手写了</li><li>@NonNull：注解在属性上，如果注解了，就必须不能为Null</li><li>@val:注解在属性上，如果注解了，就是设置为final类型，可查看源码的注释知道</li></ul><p>当你在执行各种持久化方法的时候，实体的状态会随之改变，状态的改变会引发不同的生命周期事件。这些事件可以使用不同的注释符来指示发生时的回调函数。</p><p>@javax.persistence.PostLoad：加载后。<br>@javax.persistence.PrePersist：持久化前。<br>@javax.persistence.PostPersist：持久化后。<br>@javax.persistence.PreUpdate：更新前。<br>@javax.persistence.PostUpdate：更新后。<br>@javax.persistence.PreRemove：删除前。<br>@javax.persistence.PostRemove：删除后。</p><h4 id="1）数据库查询"><a href="#1）数据库查询" class="headerlink" title="1）数据库查询"></a>1）数据库查询</h4><p>@PostLoad事件在下列情况下触发：执行EntityManager.find()或getreference()方法载入一个实体后。执行JPQL查询后。EntityManager.refresh()方法被调用后。</p><h4 id="2）数据库插入"><a href="#2）数据库插入" class="headerlink" title="2）数据库插入"></a>2）数据库插入</h4><p>@PrePersist和@PostPersist事件在实体对象插入到数据库的过程中发生：@PrePersist事件在调用persist()方法后立刻发生，此时的数据还没有真正插入进数据库。<br>@PostPersist事件在数据已经插入进数据库后发生。</p><h4 id="3）数据库更新"><a href="#3）数据库更新" class="headerlink" title="3）数据库更新"></a>3）数据库更新</h4><p>@PreUpdate和@PostUpdate事件的触发由更新实体引起：@PreUpdate事件在实体的状态同步到数据库之前触发，此时的数据还没有真正更新到数据库。@PostUpdate事件在实体的状态同步到数据库之后触发，同步在事务提交时发生。</p><h4 id="4）数据库删除"><a href="#4）数据库删除" class="headerlink" title="4）数据库删除"></a>4）数据库删除</h4><p>@PreRemove和@PostRemove事件的触发由删除实体引起：@PreRemove事件在实体从数据库删除之前触发，即在调用remove()方法删除时发生，此时的数据还没有真正从数据库中删除。@PostRemove事件在实体从数据库中删除后触发。 </p>]]></content>
<categories>
<category> SpringBoot </category>
</categories>
<tags>
<tag> SpringBoot </tag>
</tags>
</entry>
<entry>
<title>从输入URL到页面展示，这中间发生了什么</title>
<link href="/posts/ab879cc5.html"/>
<url>/posts/ab879cc5.html</url>
<content type="html"><![CDATA[<p>“从浏览器地址栏输入 url 到请求返回发生了什么？”，呃，这道面试题我都不知道被问了多少遍，作为必考题，我们有必要总结一下。</p><p>总的来说，分为以下几个过程：</p><ul><li>1、DNS 解析</li><li>2、TCP 连接</li><li>3、发送 HTTP 请求</li><li>4、服务器处理请求并返回 HTTP 报文</li><li>5、浏览器解析渲染页面</li></ul><p>下面让我们了解下这 5 个过程。</p><h2 id="一、DNS-解析"><a href="#一、DNS-解析" class="headerlink" title="一、DNS 解析"></a>一、DNS 解析</h2><p>DNS( Domain Name System)是”域名系统”的英文缩写。DNS 解析的过程就是寻找哪台机器上有你需要资源的过程。</p><p>当你在浏览器中输入一个地址时，例如<code>www.shanzhonglei.com</code>，其实不是网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的 IP 地址，但是 IP 地址并不方便记忆，所以就用网址代替 IP 地址。</p><h3 id="1-1-DNS-域名解析过程"><a href="#1-1-DNS-域名解析过程" class="headerlink" title="1.1 DNS 域名解析过程"></a>1.1 DNS 域名解析过程</h3><ul><li>1、浏览器缓存。首先会检查浏览器缓存中有没有域名对应的 ip 地址，这个缓存是有过期时长的，一般是几分钟到几小时不等。</li><li>2、本地 hosts 文件。检查自己本地的 hosts 文件是否有这个网址映射关系。windows 就是 C:\Windows\System32\drivers\etc\hosts 文件，linux 在/etc/hosts 文件中配置。</li><li>3、路由器缓存。可能还存在路由器缓存这一层。</li><li>3、本地 DNS 服务器。如果要查询的域名，包含在本地配置区域资源中，则返回解析结果给客户机。此解析具有权威性。</li><li>4、根 DNS 服务器。如果未用转发模式，本地 DNS 就把请求发至 13 台根 DNS 进行解析。如果是转发模式，DNS 服务器就会把请求转发至上一级 DNS 服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根 DNS 或把转请求转至上上级，以此循环。</li><li>5、此外还会去查询顶级域名服务器和主域名服务器</li></ul><p>所以解析过程大概为：<code>浏览器缓存->本地hosts文件->路由器缓存->本地DNS服务器->根DNS服务器->顶级域名服务器->主域名服务器</code></p><h3 id="1-2-前端-DNS-优化"><a href="#1-2-前端-DNS-优化" class="headerlink" title="1.2 前端 DNS 优化"></a>1.2 前端 DNS 优化</h3><p>可以在 html 页面头部写入 dns 缓存地址。</p><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>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>x-dns-prefetch-control<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>on<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>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dns-prefetch<span class="token punctuation">"</span></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>http://www.shanzhonglei.com/<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h3 id="1-3-DNS-负载均衡"><a href="#1-3-DNS-负载均衡" class="headerlink" title="1.3 DNS 负载均衡"></a>1.3 DNS 负载均衡</h3><p>如果 DNS 返回的 IP 地址每次都一样，那么这台机器需要多高的性能和储存才能满足亿万请求呢？</p><p>其实 DNS 可以返回一个合适的机器的 IP 给用户，例如可以根据每台机器的负载量，该机器离用户地理位置的距离等等，这种过程就是 DNS 负载均衡，又叫做 DNS 重定向。</p><p>大家耳熟能详的 CDN(Content Delivery Network)就是利用 DNS 的重定向技术，DNS 服务器会返回一个跟用户最接近的点的 IP 地址给用户，CDN 节点的服务器负责响应用户的请求，提供所需的内容。</p><h2 id="二、TCP-连接"><a href="#二、TCP-连接" class="headerlink" title="二、TCP 连接"></a>二、TCP 连接</h2><p>用户数据包协议（User Datagram Protocol），简称 UDP，是基于 IP 之上开发能和应用打交道的协议。</p><p>UDP 中一个最重要的信息是端口号，端口号其实就是一个数字，每个想访问网络的程序都需要绑定一个端口号。</p><p>通过端口号 UDP 就能把指定的数据包发送给指定的程序了，所以通过 IP 地址信息把数据包发送给指定的电脑，而 UDP 通过端口号把数据包分发给正确的程序。</p><p>TCP（Transmission Control Protocol，传输控制协议）是一种面向连接的、可靠的、基于字节流的传输层通信协议。TCP 相对于 UDP 有两个特点：</p><ul><li>对于数据包的丢失，建立重传机制</li><li>TCP 引入数据包排序机制，用来保证把乱序的数据包组合成一个完整的文件</li></ul><p>三次握手，就是指在建立一个 TCP 连接时，客户端和服务器总共要发送 3 个数据包来确认连接的建立。三次握手主要作用：</p><ul><li>1、确认双方的接收能力和发送能力</li><li>2、指定自己的初始化序列号，为后面的可靠性做准备</li></ul><h3 id="2-1-三次握手过程"><a href="#2-1-三次握手过程" class="headerlink" title="2.1 三次握手过程"></a>2.1 三次握手过程</h3><p>刚开始客户端处于 Closed 的状态，服务器处于 Listen 状态。</p><ol><li><strong>客户端发送到服务器</strong>。客户端发送 <code>SYN</code> 报文给服务器，并且指明客户端初始化序列号为 <code>ISN(c)</code>，即以 <code>SYN=1, seq=x</code> 的形式发送过去。此时客户端处于 <code>SYN_SEND</code> 状态。</li><li><strong>服务器发送给客户端</strong>。服务器收到客户端的 <code>SYN</code> 和 <code>ISN(c)</code>，也发送一个 <code>SYN</code> 回去，同时设置 <code>ACK = ISN(c) + 1</code> 以及指明服务器初始化序列号为 <code>ISN(s)</code>，即以 <code>SYN=1, ACK=x+1， seq=y</code> 的形式发送给客户端。</li><li><strong>客户端发送到服务器</strong>。客户端收到服务器发送的消息后，设置 <code>ACK = ISN(s) + 1</code>，将自身的 <code>ISN(c) + 1</code>，即以 <code>ACK=y+1, seq=x+1</code> 的形式发送给服务器。此时客户端处于 <code>ESTABLISHED</code> 阶段，服务器收到报文，也处于 <code>ESTABLISHED</code> 阶段，双方建立了连接。<br><img src="https://segmentfault.com/img/bVcUYtV"></li></ol><h3 id="2-2两次握手不行吗？"><a href="#2-2两次握手不行吗？" class="headerlink" title="2.2两次握手不行吗？"></a>2.2两次握手不行吗？</h3><p>三次握手的目的：</p><ol><li>客户端发送数据给服务器，服务器确认自己可以接受客户端的请求。</li><li>服务器发送数据给客户端，客户端确认自己可以发送数据给服务器，也可以接受到服务器的请求。</li><li>客户端发送数据给服务器，服务器确认自己可以发送数据给客户端。</li></ol><p>如果采用两次握手，客户端发送数据给服务器，服务器确认后就当连接开始：</p><ol><li>客户端发送一次请求给服务器，指定时间后没响应再发了一个</li><li>服务器先接收到后一个建立连接的请求，然后前一个建立连接的请求，因为网络延迟等问题，在第二个之后达到了</li><li>服务器认为第二个请求是最新发的，于是向客户端发送确认报文段，同意建立连接，于是连接建立了（两次握手）</li><li>这时候客户端还在等待最新的请求连接（第二次请求），自动忽略服务器发送的关于第一个请求连接的响应，也不发送数据</li><li>服务器一直等待客户端发送数据，服务器资源被占用</li></ol><h3 id="2-3-三次握手过程中可以携带数据吗？"><a href="#2-3-三次握手过程中可以携带数据吗？" class="headerlink" title="2.3 三次握手过程中可以携带数据吗？"></a>2.3 三次握手过程中可以携带数据吗？</h3><p>第三次握手的时候可以携带，第一第二次不可以携带。</p><p>第三次握手的时候，客户端处于 ESTABLISHED 状态了，它可以建立连接并且知道服务器的接收、发送能力是正常的，所以可以携带数据了。</p><h3 id="2-4、四次挥手过程"><a href="#2-4、四次挥手过程" class="headerlink" title="2.4、四次挥手过程"></a>2.4、四次挥手过程</h3><ul><li>客户端发送给服务器。客户端以 FIN=1, seq=u 的形式发送给服务器，表示需要关闭客户端和服务器的数据传输。此时客户端处于 FIN_WAIT 状态。</li><li>服务器发送给客户端。服务器收到信息，先返回 ACK 给客户端，即以 ACK=1, seq=v, ack=u+1 的形式返回给客户端，表示收到客户端报文了。此时服务器处于 CLOST_WAIT 状态。</li><li>服务器发送给客户端。服务器等待一会，看客户端还有没有数据没发过来，等处理完这些数据之后，也想断开连接了，于是发送 FIN 给客户端，即以 FIN=1, ACK=1, seq=w, ack=u+1 的形式发送给客户端。此时服务器处于 LAST_ACK 状态。</li><li>客户端发送给服务器。客户端收到 FIN 之后，返回 ACK 报文作为应答，即以 ACK=1, seq=w+1 的形式发送给服务器。此时客户端处于 TIME_WAIT 状态。<br><img src="https://segmentfault.com/img/bVcUYtU"></li></ul><h3 id="2-5、为什么需要四次挥手"><a href="#2-5、为什么需要四次挥手" class="headerlink" title="2.5、为什么需要四次挥手"></a>2.5、为什么需要四次挥手</h3><p>因为服务器接收到客户端的关闭请求之后。</p><p>如果有一些数据因为网络延迟等问题没有发送到，那么它直接关闭会导致这些数据没有接收到；亦或者服务器也有一些数据要发送给客户端，要确保这些数据发送完。</p><p>我们知道 <code>TCP</code> 是个可靠的棒小伙，所以它才会第一次回复客户端收到关闭连接的请求了，第二次回复客户端你发送的数据应该没延迟了，我也发送完我要发送的数据了，可以关闭了。</p><p>最后客户端接收到了，回复告诉服务器它也可以关闭了，然后过一阵子确保服务器接收到它发的 <code>ACK</code> 报文之后，也处于 <code>CLOSED</code> 状态了。这样就确保了连接的正常关闭。</p><h2 id="三、发送-HTTP-请求"><a href="#三、发送-HTTP-请求" class="headerlink" title="三、发送 HTTP 请求"></a>三、发送 HTTP 请求</h2><p>发送 HTTP 请求的过程就是构建 HTTP 请求报文，并通过 TCP 协议发送到服务器指定端口（HTTP 协议默认端口 80/8080，HTTPS 协议默认端口 443）。</p><p>HTTP 请求报文由 3 部分组成：请求行、请求报文 和 请求正文。</p><ul><li>请求行：常用方法有：GET、POST、PUT、DELETE、OPTIONS、HEAD。</li><li>请求报头：允许客户端向服务器传递请求的附加信息和客户端自身的信息。</li><li>请求正文：通过 POST、PUT 等方法时，通常需要客户端向服务器传递数据，这些数据就储存在请求正文中。</li></ul><p>注意，如果本地缓存是否缓存了该资源，就会直接渲染页面。</p><h3 id="GET-和-POST-方法到底有什么区别？"><a href="#GET-和-POST-方法到底有什么区别？" class="headerlink" title="GET 和 POST 方法到底有什么区别？"></a>GET 和 POST 方法到底有什么区别？</h3><p>如果没有前提，也就是不用任何规范限制的话，我们只考虑语法来说，GET 请求和 POST 请求都能拉取数据。这两个方式是没有任何区别的，只有名字不一样。</p><p>RFC 是一种网络规范，如果基于 RFC 规范，那就不一样：</p><ul><li>1、GET 的数据在 URL 中对所有人都是可见的。POST 的数据不会显示在 URL 中。</li><li>2、GET 对数据长度有限制，当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。POST 无限制。</li><li>3、GET 可收藏为书签，POST 不可收藏为书签。</li><li>4、GET 后退按钮/刷新无影响，POST 数据会被重新提交。</li><li>5、GET 编码类型 application/x-www-form-url，POST 编码类型 encodedapplication/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。</li><li>6、GET 历史参数会保留在浏览器历史中。POST 参数不会保存在浏览器历史中。</li><li>7、GET 只允许 ASCII 字符。POST 没有限制。也允许二进制数据。</li><li>8、与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。</li><li>9、比如 GET 请求只会有一次 TCP 连接，而 POST 请求会有两次 TCP 连接。对于 GET 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200（返回数据）;而对于 POST，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服务器响应 200 ok（返回数据）。</li></ul><p>四种常见的 POST 提交数据方式：</p><ul><li>1.application/x-www-form-urlencoded（表单默认方式）</li><li>2.multipart/form-data（表单上传文件）</li><li>3.application/json</li><li>4.text/xml</li></ul><h2 id="四、服务器处理请求并返回-HTTP-报文"><a href="#四、服务器处理请求并返回-HTTP-报文" class="headerlink" title="四、服务器处理请求并返回 HTTP 报文"></a>四、服务器处理请求并返回 HTTP 报文</h2><p>这一步，会检查状态码，如果是 301/302，则需要重定向，从 Location 自动中读取地址，重新发起请求。如果是 200 状态码，检查响应类型 Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该导航流程结束，不再进行后续的渲染。</p><p>如果是 html 则通知浏览器进程准备渲染进程准备进行渲染。</p><p>HTTP 响应报文也是由 3 部分组成：状态码、响应报头 和 响应报文。</p><ul><li>状态码：<br>1xx：指示信息–表示请求已接收，继续处理。<br>2xx：成功–表示请求已被成功接收、理解、接受。<br>3xx：重定向–要完成请求必须进行更进一步的操作。<br>4xx：客户端错误–请求有语法错误或请求无法实现。<br>5xx：服务器端错误–服务器未能实现合法的请求。</li></ul><p>平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500(分别表示什么请自行查找)。</p><ul><li>响应报头：常见的响应报头字段 Server、Connection 等。</li><li>响应报文：服务器返回给浏览器的文本信息，通常 HTML、CSS、JS、图片等文件就放在这一部分。</li></ul><h3 id="状态码-301-和-302-的区别？"><a href="#状态码-301-和-302-的区别？" class="headerlink" title="状态码 301 和 302 的区别？"></a>状态码 301 和 302 的区别？</h3><p>301 重定向是一种永久重定向，而 302 跳转是暂时的跳转。</p><h2 id="五、浏览器解析渲染页面"><a href="#五、浏览器解析渲染页面" class="headerlink" title="五、浏览器解析渲染页面"></a>五、浏览器解析渲染页面</h2><p><img src="https://segmentfault.com/img/bVcUYtT"></p><p>浏览器的渲染过程为：</p><ol><li>解析 HTML，生成 <code>DOM</code> 树</li><li>解析 CSS，生成 <code>CSS 规则树（CSS Rule Tree）</code></li><li>将 <code>DOM Tree</code> 和 <code>CSS Rule Tree</code> 相结合，生成 <strong>渲染树</strong>（<code>Render Tree</code>）</li><li>从根节点开始，计算每一个元素的大小、位置，给出每个节点所应该出现的屏幕精确坐标，从而得到基于渲染树的 <strong>布局渲染树</strong>（<code>Layout of the render tree</code>）。</li><li>遍历渲染树，将每个节点用 <code>UI</code> 渲染引擎来绘制，从而将整棵树绘制到页面上，这个步骤叫 <strong>绘制渲染树</strong>（<code>Painting the render tree</code>）</li></ol><p>浏览器在解析过程中，如果遇到请求外部资源时，如图像，JS 等，还会重新执行网络请求。这个请求过程是异步的，并不会影响 HTML 文档进行加载，但是当文档加载过程中遇到 JS 文件，HTML 文档会挂起渲染过程，不仅要等到文档中 JS 文件加载完毕还要等待解析执行完毕，才会继续 HTML 的渲染过程。原因是因为 JS 有可能修改 DOM 结构，这就是 JS 阻塞后续资源下载的根本原因。</p><p>CSS 文件的加载不影响 JS 文件的加载，但是却影响 JS 文件的执行。JS 代码执行前浏览器必须保证 CSS 文件已经下载并加载完毕。</p><p>建议将 script 标签放到 body 标签底部，或者给 script 标签添加 defer/async 属性。</p><h3 id="页面渲染层优化"><a href="#页面渲染层优化" class="headerlink" title="页面渲染层优化"></a>页面渲染层优化</h3><ul><li>1、HTML 文档结构层次尽量少，最好不深于六层</li><li>2、脚本尽量后放</li><li>3、少量首屏样式内联放在标签内</li><li>4、样式结构层次尽量简单</li><li>5、在脚本中尽量减少 DOM 操作，尽量缓存访问 DOM 的样式信息，避免过度触发回流</li><li>6、减少通过 JavaScript 代码修改元素样式，尽量使用修改 class 名方式操作样式或动画</li><li>7、动画尽量使用在绝对定位或固定定位的元素上</li></ul><h4 id="扩展"><a href="#扩展" class="headerlink" title="扩展"></a>扩展</h4><h1 id="DNS-域名称和组织类型"><a href="#DNS-域名称和组织类型" class="headerlink" title="DNS 域名称和组织类型"></a>DNS 域名称和组织类型</h1><table><thead><tr><th>DNS 域名称</th><th>组织类型</th></tr></thead><tbody><tr><td>com</td><td>商业公司</td></tr><tr><td>edu</td><td>教育机构</td></tr><tr><td>net</td><td>网络公司</td></tr><tr><td>gov</td><td>非军事政府机构</td></tr><tr><td>Mil</td><td>军事政府机构</td></tr></tbody></table><h2 id="TCP-和-UDP-的区别"><a href="#TCP-和-UDP-的区别" class="headerlink" title="TCP 和 UDP 的区别"></a>TCP 和 UDP 的区别</h2><ul><li><code>TCP</code> 是面向连接的，<code>UDP</code> 是无连接的即发送数据前不需要先建立链接。</li><li><code>TCP</code> 提供可靠的服务。通过 <code>TCP</code> 连接传送的数据，无差错，不丢失，不重复，且按序到达；UDP 尽最大努力交付，即不保证可靠交付。并且因为 <code>TCP</code> 可靠，面向连接，不会丢失数据因此适合大数据量的交换。</li><li><code>TCP</code> 只能是 1 对 1 的，<code>UDP</code> 支持 1 对 1，1 对多。</li><li><code>TCP</code> 是面向连接的可靠性传输，而 <code>UDP</code> 是不可靠的。</li></ul><p><em>来源：<a href="https://segmentfault.com/a/1190000040709186">https://segmentfault.com/a/1190000040709186</a></em></p>]]></content>
<tags>
<tag> 计网 </tag>
</tags>
</entry>
<entry>
<title>项目中Dao，Service，Controller，Util，Model是什么意思，为什么划分？</title>
<link href="/posts/8b4d1897.html"/>
<url>/posts/8b4d1897.html</url>
<content type="html"><![CDATA[<p><strong>适合受众</strong>：2年以下的初级程序员和0基础的门外汉</p><p><strong>内容大纲：</strong><br>1.为什么需要一个好的代码结构<br>2.什么样才是一个好的结构<br>3.每一个分类代表什么含义<br>4.是否适用于WEB，Android和IOS？<br>5.进一步的学习的话，是要学习系统架构么？</p><h2 id="一、为什么需要一个好的代码结构"><a href="#一、为什么需要一个好的代码结构" class="headerlink" title="一、为什么需要一个好的代码结构"></a>一、为什么需要一个好的代码结构</h2><ol><li>好的代码结构并不仅仅是为了看上去清晰，它更像是我们对一个系统的拆解和组装。</li><li>好的代码结构可以让你在遇到代码交接这种天理不容的情况时，减少提刀砍人的可能性。</li><li>好的代码结构可以让多人协作开发更容易，而不会缠缠绵绵到天涯，再相爱相杀。</li></ol><p>我们经常形容一个坏的代码结构，像屎一样。</p><p><img src="https://pic2.zhimg.com/80/v2-2db2e69006bbe7aa5b6cfe5cb1822087_720w.jpg?source=1940ef5c"></p><p>我们称它为一坨，说真的，接手过烂代码之后，真的找不到比屎更能描述自己感受的词了。“屎”代表着混乱，一坨，各种杂质。接手一堆烂代码的难度就像是用一坨屎来做沙画。有时候我们还会用一团毛线来形容代码，大概是这样的。</p><p><img src="https://pic1.zhimg.com/80/v2-5c64243256c1301561325ca8b438af9b_720w.jpg?source=1940ef5c"></p><p>对的，这种感受是绝对不会错的。而我们要做的就是把这团毛线，变成像瑞士军刀一样的清晰。</p><p><img src="https://pic1.zhimg.com/80/v2-d7dd97355fcb44e234610e40010a242b_720w.jpg?source=1940ef5c"></p><p>你们觉得哪个更有成就感？</p><h2 id="二、什么样才是一个好的结构"><a href="#二、什么样才是一个好的结构" class="headerlink" title="二、什么样才是一个好的结构"></a>二、什么样才是一个好的结构</h2><ol><li>好的结构应该保持单一职责。</li><li>好的结构应该是通用的。</li><li> 好的结构应该是有明确定义的。</li></ol><p>这其实就是所谓的脚手架提供的最大的价值，一般而言，Java，Android，IOS都有一套明确的框架体系，JS本来没有，后来有了，然后。。他们就打起来了。就像。。。他们一样。</p><p><img src="https://pic1.zhimg.com/80/v2-d4842c313bbecd1a472a231c2eee21d3_720w.jpg?source=1940ef5c"></p><p>该喷火的喷火，该喷水的喷水，每个人分工都很明确。</p><h2 id="三、每一个分类代表什么含义"><a href="#三、每一个分类代表什么含义" class="headerlink" title="三、每一个分类代表什么含义"></a>三、每一个分类代表什么含义</h2><h3 id="1-Model"><a href="#1-Model" class="headerlink" title="1.Model"></a>1.Model</h3><p>Model是模型，一般而言，会有人分的更细，VO，DTO等等。我并不推荐分的更细，这个Model常常和持久化的数据一一对应，如Mysql和MongoDB。Model承载的作用就是数据的抽象，描述了一个数据的定义，Model的实例就是一组组的数据。整个系统都可以看成是数据的 流动，既然要流动，就一定是有流动的载体。</p><p><img src="https://pic1.zhimg.com/80/v2-89ab9c25963b94650d5d5c6d62e005b8_720w.jpg?source=1940ef5c"></p><p>这个红圈标的就是Model。它就应该是一个纯数据的集合，就是被各种东西传来传去，被各种加工处理的数据团。通常会有很多Model，一条业务流就是对应一条或者多条数据流，拿知乎为例子。文章是一个Model，一般叫Article，包括Title，Summary，Author，Content等等。评论也是一个Model，一般叫Comment，包括Content，userID等等。对于初学者而言，第一个要学会，就是建模，把业务逻辑映射成数据模型。 </p><h3 id="2-Util"><a href="#2-Util" class="headerlink" title="2.Util"></a>2.Util</h3><p>Util是工具的意思，一般来说，常常用来描述和业务逻辑没有关系的数据处理。Util一般要和私有方法对比：私有方法一般来说是只是在特地场景下使用的，私有方法越多，代码结构越乱。常见的重构策略就是首先从一个越长行数的代码里抽象出若干个私有方法，然后再抽出公用的Util。如果有可能，尽可能的少用私有方法，而是把他换成一个公用的Util，代表他和业务逻辑是不相关的。通常命名也是ArticleUtil，CommentUtil之类的。</p><p><img src="https://pic2.zhimg.com/80/v2-e9521e914880b2cf06487baa9be4180e_720w.jpg?source=1940ef5c"></p><p>像这种打包，不管是充气娃娃还是别的什么东西，都打包。你可以理解为图中的黑衣人就是一个Util。某中程度上也会跟Service有点接近。但是Service一般而言，都是包含有业务逻辑的，很少能做单元测试。Util一般来说，就是一个明确的输入和一个明确的输出结果。单元测试中，多数也是来测试Util。积累好自己的Util是一件很重要的事儿。 </p><h3 id="3-Service"><a href="#3-Service" class="headerlink" title="3 Service"></a>3 Service</h3><p>Service比Util的概念大很多，它的重点是在于提供一个服务。这个服务可能包括一系列的数据处理，也有可能会调用多个Util，或者是调用别的服务。总归一句话，就是，有什么事情，你来找我。</p><p><img src="https://pic3.zhimg.com/80/v2-1e2fb3fdf5fe29b86cb19874d017e75d_720w.jpg?source=1940ef5c"></p><p>就像这个图上的妹妹一样，她就是一个Service，她能提供什么样的服务？这个是必须定义好的。如果是洗脚，她要帮你脱鞋，要端盆子烫你的脚。这里面，你的脚就是一个Model，盆子里的水相当于Util，不管里面放进去啥都能烫一烫。帮你脱鞋可以是一个Service，也可以是一个私有函数，也可以是一个Util。看你的是让这个小妹妹帮你脱，还是别的小妹妹脱，还是自动脱鞋机。如果是你自动脱。。。说明你在Model里面加上了功能，你的脚就不是一个纯粹的数据模型了，而是一个包含业务功能在里面的充血模型。这样不好。老老实实让小妹妹帮你拖鞋不好么。 </p><h3 id="4、Dao"><a href="#4、Dao" class="headerlink" title="4、Dao"></a>4、Dao</h3><p>Dao一般而言，都是用来和底层数据库通信，负责对数据库的增删改查。</p><p><img src="https://pica.zhimg.com/80/v2-c0b9e21137c7d16632fb04bd0bb97dbf_720w.jpg?source=1940ef5c"></p><p>是的。他就是一个Dao。他从来不关心这些货物要去哪里，他只关心。入库，出库，查询和更换。所谓的CRUD就是创建，读取，更新，删除。Dao最好都是要独立出来。到现在为止，最佳实践就是一个Service只对应一个Dao。Service会做一些额外的检查，如货物是否损坏，入库单是否完整，等等等等。我并不推荐在Service里调用多个Dao，也推荐在Service里调用多个Service，大多数情况下我都不推荐这么干。具体原因以后再说，这也是一个开放性的话题。现在我们分清楚了Model，Util，Service和Dao，可是谁来做总的调度呢？ </p><h3 id="5-Controller"><a href="#5-Controller" class="headerlink" title="5.Controller"></a>5.Controller</h3><p><img src="https://pic1.zhimg.com/80/v2-07ccb05c75fe6979f5a8bbccaf1cdedc_720w.jpg?source=1940ef5c"></p><p>控制中心，所有的指令，调度都从这里发出去。哪一个Service做什么事儿，谁的数据提供给谁，一般而言，都是在Controller里实现的。Controller也是最常见的容易产生脏代码地方，通常他们会把一些不该放到Controller里东西也放进来。大概的感觉就是这样的。</p><p><img src="https://pica.zhimg.com/80/v2-bda62e124f65751db6c75c14814d21d8_720w.jpg?source=1940ef5c"></p><p>干嘛的都有。想想如果打小针，抽血，查尿也混杂到门诊大厅的感觉？可是大部分人写代码就是这样的。 </p><h2 id="四-是否适用于WEB，Android和IOS？"><a href="#四-是否适用于WEB，Android和IOS？" class="headerlink" title="四.是否适用于WEB，Android和IOS？"></a>四.是否适用于WEB，Android和IOS？</h2><p>Java后台是有很清楚的结构的，毕竟在JSP里写Sql语句的蛮荒时代已经过去了。Android本身就是一个良好的框架体系，基本上问题也不大，最多就是MVP和MVC的差别之类。IOS虽然没有官方提供这种框架体系，特别是很多人喜欢直接在Dict里用key取数据，这本身就破坏了代码的层次性。但是毕竟是有李明杰提供的Json解析Util,只是各家要求的力度而已。最难以理解的是WEB，也就是JS。我不是在黑JS，我是在黑JS程序员。分层结构一直都不是JS社区里最注重的，在JQuery时代更是如此，不管是Html还是JS还是CSS混在一起是正常的。那个时候叫插件，现在改名了，叫组件。你很难在JQuery里找到一套清晰的分层结构，就跟十几年前所有的人都在Jsp里写逻辑语句的道理差不多。直到google的大神偶尔遛达过来一看，咦？你们怎么还在刀耕火种？我来给你们加点现代感的东西吧。于是Angular横穿出世，一次性的构建了一个清晰的框架结构。每次看到Angular的时候都忍不住 惊叹，原来前端代码也可以这样！</p><p><img src="https://pic4.zhimg.com/80/v2-3af5e2eb815ea72a57cf1480e2474ea8_720w.jpg?source=1940ef5c"></p><p>而原来的感觉就是这样。。。</p><p><img src="https://pic3.zhimg.com/80/v2-cc02f0db8ff0c0cfa81efbaedefe1167_720w.jpg?source=1940ef5c"></p><p>现在基本上可以分成两大阵营，一个是React和Vue，一个是Angular。React和Vue本身更偏得于插件化，哦，不，组件化。所以他们需要便宜桶，来拼接整个前端的架构体系。Angular却是有典型的Java架构风格，妥妥的硬汉子。所以，实际上说，这套体系也是可以应用在WEB上的，就像Android和IOS一样的，但是你喜欢，或者不喜欢，自己选啦。 </p><h2 id="五、进一步的学习的话，是要学习系统架构么？"><a href="#五、进一步的学习的话，是要学习系统架构么？" class="headerlink" title="五、进一步的学习的话，是要学习系统架构么？"></a>五、进一步的学习的话，是要学习系统架构么？</h2><p>是的。进一步要学习，并不仅仅是学习系统架构。这里还没有讲到Service的设计，互相之间的调用，解耦，服务之间的通信和管理。消息队列这个神器还没有登场，MongoDB这种战略要塞也没出场。所以以上内容，仅适用于2年以内的各种工程师。</p><p><em>来源：zhihu.com/question/58410621/answer/156868800</em></p>]]></content>
<tags>
<tag> 项目 </tag>
</tags>
</entry>
<entry>
<title>Markdown写作语法</title>
<link href="/posts/9fae5294.html"/>
<url>/posts/9fae5294.html</url>
<content type="html"><![CDATA[<h1 id="一、标题"><a href="#一、标题" class="headerlink" title="一、标题"></a><a href="#%E4%B8%80%E3%80%81%E6%A0%87%E9%A2%98" title="一、标题"></a>一、标题</h1><p>一段句子前面加个#号为一级标题，两个为二级标题，以此类推（注意每个#号后面打空格）。</p><pre class="line-numbers language-none"><code class="language-none"># 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六级标题<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><hr><h1 id="二、段落"><a href="#二、段落" class="headerlink" title="二、段落"></a><a href="#%E4%BA%8C%E3%80%81%E6%AE%B5%E8%90%BD" title="二、段落"></a>二、段落</h1><ul><li>斜体 ：在加粗的文字两边分别加一个*号</li><li>粗体： 在加斜的文字两边分别加两个*号</li><li>斜粗体：文字两边分别加三个*号</li><li>分割线： 三个或者三个以上的 - 或者 * 都可以。</li><li>删除线：文字两边分别加两个~~</li><li>下划线： 文字两边分别加两个 <code><u></code></li><li>脚注： 语法<code>[^要注明的文本]: 内容</code></li></ul><hr><h1 id="三、列表"><a href="#三、列表" class="headerlink" title="三、列表"></a><a href="#%E4%B8%89%E3%80%81%E5%88%97%E8%A1%A8" title="三、列表"></a>三、列表</h1><p>无序列表使用*<strong>**、</strong>+<strong>或</strong>-**作为列表标记，这些标记后面要添加一个空格，然后再填写内容：</p><pre class="line-numbers language-none"><code class="language-none">* 第一项* 第二项* 第三项+ 第一项+ 第二项+ 第三项- 第一项- 第二项- 第三项<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><p>有序列表使用数字并加上 <strong>.</strong> 号来表示，如：</p><pre class="line-numbers language-none"><code class="language-none">1. 第一项2. 第二项3. 第三项<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h2 id="列表嵌套"><a href="#列表嵌套" class="headerlink" title="列表嵌套"></a><a href="#%E5%88%97%E8%A1%A8%E5%B5%8C%E5%A5%97" title="列表嵌套"></a>列表嵌套</h2><p>列表嵌套只需在子列表中的选项前面添加四个空格即可：</p><pre class="line-numbers language-none"><code class="language-none">1. 第一项： - 第一项嵌套的第一个元素 - 第一项嵌套的第二个元素2. 第二项： - 第二项嵌套的第一个元素 - 第二项嵌套的第二个元素<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><hr><h1 id="四、区块"><a href="#四、区块" class="headerlink" title="四、区块"></a><a href="#%E5%9B%9B%E3%80%81%E5%8C%BA%E5%9D%97" title="四、区块"></a>四、区块</h1><p>Markdown 区块引用是在段落开头使用 <strong>></strong> 符号 ，然后后面紧跟一个<strong>空格</strong>符号：。</p><p>另外区块是可以嵌套的，一个 <strong>></strong> 符号是最外层，两个 <strong>></strong> 符号是第一层嵌套，以此类推：</p><h2 id="1-区块中使用列表"><a href="#1-区块中使用列表" class="headerlink" title="1. 区块中使用列表"></a><a href="#1-%E5%8C%BA%E5%9D%97%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%88%97%E8%A1%A8" title="1. 区块中使用列表"></a>1. 区块中使用列表</h2><pre class="line-numbers language-none"><code class="language-none">> 区块中使用列表> 1. 第一项> 2. 第二项> + 第一项> + 第二项> + 第三项<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="2-列表中使用区块"><a href="#2-列表中使用区块" class="headerlink" title="2. 列表中使用区块"></a><a href="#2-%E5%88%97%E8%A1%A8%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%8C%BA%E5%9D%97" title="2. 列表中使用区块"></a>2. 列表中使用区块</h2><pre class="line-numbers language-none"><code class="language-none">* 第一项 > 菜鸟教程 > 学的不仅是技术更是梦想* 第二项<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><hr><h1 id="五、代码"><a href="#五、代码" class="headerlink" title="五、代码"></a><a href="#%E4%BA%94%E3%80%81%E4%BB%A3%E7%A0%81" title="五、代码"></a>五、代码</h1><ol><li><p>如果是段落上的一个函数或片段的代码可以用反引号把它包起来（**`**），例如：</p><p> <code>printf()</code>函数</p></li><li><p> 代码区块：段落前加三个```。</p></li></ol><hr><h1 id="六、链接"><a href="#六、链接" class="headerlink" title="六、链接"></a><a href="#%E5%85%AD%E3%80%81%E9%93%BE%E6%8E%A5" title="六、链接"></a>六、链接</h1><p>语法：<code>[链接名称](链接地址)</code>或<code><链接地址></code></p><hr><h1 id="七、图片"><a href="#七、图片" class="headerlink" title="七、图片"></a><a href="#%E4%B8%83%E3%80%81%E5%9B%BE%E7%89%87" title="七、图片"></a>七、图片</h1><p>语法：<code></code></p><p>图片alt就是显示在图片下面的文字，相当于对图片内容的解释。<br>图片title是图片的标题，当鼠标移到图片上时显示的内容。title可加可不加</p><hr><h1 id="八、表格"><a href="#八、表格" class="headerlink" title="八、表格"></a><a href="#%E5%85%AB%E3%80%81%E8%A1%A8%E6%A0%BC" title="八、表格"></a>八、表格</h1><p>语法：<code>用|来分隔单元格，用---来分隔表头和其他行</code>，如下：</p><pre class="line-numbers language-none"><code class="language-none">| 表头 | 表头 || --- | --- || 单元格 | 单元格 || 单元格 | 单元格 |<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>对齐方式：</p><ul><li><code>--:</code>:右对齐</li><li><code>:--</code>:左对齐</li><li><code>:-:</code>:中对齐</li></ul><hr><p><a href="https://www.runoob.com/markdown/md-advance.html">markdown更多高级技巧</a></p><hr>]]></content>
<tags>
<tag> Markdown </tag>
</tags>
</entry>
<entry>
<title>hexo-electric-clock电子时钟插件</title>
<link href="/posts/d2f5cb8d.html"/>
<url>/posts/d2f5cb8d.html</url>
<content type="html"><![CDATA[<h1 id="前言："><a href="#前言：" class="headerlink" title="前言："></a>前言：</h1><p>效果如下:<br>看我的博客[<a href="https://kaiboshi.gitee.io/blog]">https://kaiboshi.gitee.io/blog]</a></p><h2 id="NPM-插件安装的部署方法："><a href="#NPM-插件安装的部署方法：" class="headerlink" title="NPM 插件安装的部署方法："></a>NPM 插件安装的部署方法：</h2><pre class="line-numbers language-none"><code class="language-none">npm i hexo-electric-clock --save# 或者cnpm i hexo-electric-clock --save <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>注意，一定要加<code>--save</code>，不然本地预览的时候可能不会显示！！！</p><h2 id="新增网站根目录-config-配置项-不是主题的"><a href="#新增网站根目录-config-配置项-不是主题的" class="headerlink" title="新增网站根目录_config 配置项(不是主题的)"></a>新增网站根目录_config 配置项(不是主题的)</h2><pre class="line-numbers language-none"><code class="language-none">#钟表electric_clock: priority: 5 enable: true enable_page: all layout: type: class name: col l3 hide-on-med-and-down expanded index: 0 temple_html: '<div class="card-widget card-clock"> <div class="card-glass"> <div class="card-background"><div class="card-content"> <div id="hexo_electric_clock"> <img id="card-clock-loading" src="https://cdn.jsdelivr.net/gh/Zfour/Butterfly-clock/clock/images/weather/loading.gif" style="height: 120px; width: 100%;" data-ll-status="loading" class="entered loading"></div></div></div></div></div>'<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></code></pre><h3 id="enable"><a href="#enable" class="headerlink" title="enable"></a>enable</h3><p><strong>参数：</strong>true/false<br><strong>含义：</strong>是否开启插件</p><h3 id="enable-page"><a href="#enable-page" class="headerlink" title="enable_page"></a>enable_page</h3><p><strong>参数：</strong>all<br><strong>含义：</strong>路由地址，all 代表全局开启。如 / 代表主页。</p><h3 id="priority"><a href="#priority" class="headerlink" title="priority"></a>priority</h3><p><strong>参数：</strong>1<br><strong>含义：</strong>插件的叠放顺序，数字越大，叠放约靠前。</p><pre class="line-numbers language-none"><code class="language-none">history_calendar: enable: true priority: 5 # 这里是参数 <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="layout"><a href="#layout" class="headerlink" title="layout"></a>layout</h3><p><strong>参数：</strong>type; （class&id）<br><strong>参数：</strong>name;<br><strong>参数：</strong>index；（数字）<br><strong>含义：</strong>如果说 history_calendar 是一幅画，那么这个 layout 就是指定了哪面墙来挂画<br>而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。<br>其中在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个。<br>最后墙的名字即是 name;</p><h3 id="temple-html"><a href="#temple-html" class="headerlink" title="temple_html"></a>temple_html</h3><p><strong>参数：</strong>html 模板字段<br><strong>含义：</strong>包含挂载容器</p><h2 id="hexo-三连"><a href="#hexo-三连" class="headerlink" title="hexo 三连"></a>hexo 三连</h2><p>执行 hexo 三连</p><pre class="line-numbers language-none"><code class="language-none">hexo clean \&\& hexo g \&\& hexo s <span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>即可发现已经成功部署。</p>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 插件 </tag>
</tags>
</entry>
<entry>
<title>hexo-history-calendar历史上的今天插件</title>
<link href="/posts/f67672e.html"/>
<url>/posts/f67672e.html</url>
<content type="html"><![CDATA[<h1 id="前言："><a href="#前言：" class="headerlink" title="前言："></a><a href="#%E5%89%8D%E8%A8%80%EF%BC%9A" title="前言："></a>前言：</h1><p>效果如下:<br>看我的博客[<a href="https://kaiboshi.gitee.io/blog]">https://kaiboshi.gitee.io/blog]</a></p><h2 id="NPM-插件安装的部署方法："><a href="#NPM-插件安装的部署方法：" class="headerlink" title="[]NPM 插件安装的部署方法："></a>[]NPM 插件安装的部署方法：</h2><pre class="line-numbers language-none"><code class="language-none">npm i hexo\-history\-calendar -\-save # 或者 cnpm i hexo\-history\-calendar -\-save <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>注意，一定要加<code>--save</code>，不然本地预览的时候可能不会显示！！！</p><h2 id="新增网站根目录-config-配置项-不是主题的"><a href="#新增网站根目录-config-配置项-不是主题的" class="headerlink" title="[]新增网站根目录_config 配置项(不是主题的)"></a>[]新增网站根目录_config 配置项(不是主题的)</h2><pre class="line-numbers language-none"><code class="language-none">history_calendar: priority: 4 enable: true enable_page: all layout: type: class name: sticky_layout index: 0 temple_html: '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>'<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><h3 id="enable"><a href="#enable" class="headerlink" title="enable"></a><a href="#enable" title="enable"></a>enable</h3><p><strong>参数：</strong>true/false<br><strong>含义：</strong>是否开启插件</p><h3 id="enable-page"><a href="#enable-page" class="headerlink" title="enable_page"></a><a href="#enable-page" title="enable_page"></a>enable_page</h3><p><strong>参数：</strong>all<br><strong>含义：</strong>路由地址，all 代表全局开启。如 / 代表主页。</p><h3 id="priority"><a href="#priority" class="headerlink" title="priority"></a><a href="#priority" title="priority"></a>priority</h3><p><strong>参数：</strong>1<br><strong>含义：</strong>插件的叠放顺序，数字越大，叠放约靠前。</p><pre class="line-numbers language-none"><code class="language-none">history\_calendar: enable: true priority: 4 \# 这里是参数 <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="layout"><a href="#layout" class="headerlink" title="layout"></a><a href="#layout" title="layout"></a>layout</h3><p><strong>参数：</strong>type; （class&id）<br><strong>参数：</strong>name;<br><strong>参数：</strong>index；（数字）<br><strong>含义：</strong>如果说 history_calendar 是一幅画，那么这个 layout 就是指定了哪面墙来挂画<br>而在 HTML 的是世界里有两种墙分别 type 为 id 和 class。<br>其中在定义 class 的时候会出现多个 class 的情况，这时就需要使用 index，确定是哪一个。<br>最后墙的名字即是 name;</p><h3 id="temple-html"><a href="#temple-html" class="headerlink" title="temple_html"></a><a href="#temple-html" title="temple_html"></a>temple_html</h3><p><strong>参数：</strong>html 模板字段<br><strong>含义：</strong>包含挂载容器</p><h2 id="hexo-三连"><a href="#hexo-三连" class="headerlink" title="hexo 三连"></a><a href="#hexo-%E4%B8%89%E8%BF%9E" title="hexo 三连"></a>hexo 三连</h2><p>执行 hexo 三连</p><pre class="line-numbers language-none"><code class="language-none">hexo clean \&\& hexo g \&\& hexo s <span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>即可发现已经成功部署。</p>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 插件 </tag>
</tags>
</entry>
<entry>
<title>《MySQL必知必会》第6-7章 过滤数据与数据过滤</title>
<link href="/posts/db594d6e.html"/>
<url>/posts/db594d6e.html</url>
<content type="html"><![CDATA[<h1 id="《MySQL必知必会》第4-5章-SELECT检索与排序"><a href="#《MySQL必知必会》第4-5章-SELECT检索与排序" class="headerlink" title="《MySQL必知必会》第4-5章 SELECT检索与排序"></a>《MySQL必知必会》第4-5章 SELECT检索与排序</h1><h1 id="1-SELECT-语句"><a href="#1-SELECT-语句" class="headerlink" title="1. SELECT 语句"></a><a href="#1-SELECT-%E8%AF%AD%E5%8F%A5" title="1. SELECT 语句"></a>1. SELECT 语句</h1><h2 id="1-1-检索单个列"><a href="#1-1-检索单个列" class="headerlink" title="1.1 检索单个列"></a><a href="#1-1-%E6%A3%80%E7%B4%A2%E5%8D%95%E4%B8%AA%E5%88%97" title="1.1 检索单个列"></a>1.1 检索单个列</h2><p>关键字SELECT后写需要查询的列名</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> prod\_name <span class="token keyword">from</span> products<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token operator">|</span> prod\_name \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token operator">|</span> Fuses \<span class="token operator">|</span> <span class="token operator">|</span> JetPack <span class="token number">1000</span> \<span class="token operator">|</span> <span class="token operator">|</span> TNT \<span class="token punctuation">(</span><span class="token number">5</span> sticks\<span class="token punctuation">)</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token number">14</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><blockquote><ol><li> 多条SQL语句必须使用分号(;)分隔,推荐做法.</li><li> SQL语句不区分大小写</li></ol></blockquote><h2 id="1-2-检索多个列"><a href="#1-2-检索多个列" class="headerlink" title="1.2 检索多个列"></a><a href="#1-2-%E6%A3%80%E7%B4%A2%E5%A4%9A%E4%B8%AA%E5%88%97" title="1.2 检索多个列"></a>1.2 检索多个列</h2><p>和检索单列类似,关键字SELECT后写需要查询的列名,逗号分隔</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> prod\_id<span class="token punctuation">,</span>prod\_name<span class="token punctuation">,</span>prod\_price <span class="token keyword">from</span> products<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+----------------+------------+ </span><span class="token operator">|</span> prod\_id <span class="token operator">|</span> prod\_name <span class="token operator">|</span> prod\_price \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+----------------+------------+ </span><span class="token operator">|</span> ANV01 <span class="token operator">|</span> <span class="token number">.5</span> ton anvil <span class="token operator">|</span> <span class="token number">5.99</span> \<span class="token operator">|</span> <span class="token operator">|</span> ANV02 <span class="token operator">|</span> <span class="token number">1</span> ton anvil <span class="token operator">|</span> <span class="token number">9.99</span> \<span class="token operator">|</span> <span class="token operator">|</span> ANV03 <span class="token operator">|</span> <span class="token number">2</span> ton anvil <span class="token operator">|</span> <span class="token number">14.99</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+----------------+------------+ </span><span class="token number">14</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><h2 id="1-3-检索所有列"><a href="#1-3-检索所有列" class="headerlink" title="1.3 检索所有列"></a><a href="#1-3-%E6%A3%80%E7%B4%A2%E6%89%80%E6%9C%89%E5%88%97" title="1.3 检索所有列"></a>1.3 检索所有列</h2><p>使用通配符(*)即可</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql"><span class="token keyword">select</span> \<span class="token operator">*</span> <span class="token keyword">from</span> products<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><blockquote><p>最好别使用*通配符,虽然此种写法方便,但是索引不需要的列通常会降低检索和应用程序的性能</p></blockquote><h2 id="1-4-检索不同行并去重"><a href="#1-4-检索不同行并去重" class="headerlink" title="1.4 检索不同行并去重"></a><a href="#1-4-%E6%A3%80%E7%B4%A2%E4%B8%8D%E5%90%8C%E8%A1%8C%E5%B9%B6%E5%8E%BB%E9%87%8D" title="1.4 检索不同行并去重"></a>1.4 检索不同行并去重</h2><p>使用关键字DISTINCT,指示MySQL只返回不同值,从而达到去重目的.</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> vend\_id <span class="token keyword">from</span> products<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+ </span><span class="token operator">|</span> vend\_id \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+ </span><span class="token operator">|</span> <span class="token number">1001</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1002</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1003</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1003</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1005</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+ </span><span class="token number">14</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<span class="token punctuation">)</span> mysql<span class="token operator">></span> <span class="token keyword">select</span> <span class="token keyword">distinct</span> vend\_id <span class="token keyword">from</span> products<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+ </span><span class="token operator">|</span> vend\_id \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+ </span><span class="token operator">|</span> <span class="token number">1001</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1002</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1003</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1005</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+ </span><span class="token number">4</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.01</span> sec\<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></code></pre><blockquote><ol><li> DISTINCT关键字必须直接放在列名的前面</li><li> 不能不分使用DISTINCT,即DISTINCT关键字应用于所有列而不仅是前置它的列</li></ol></blockquote><h2 id="1-5-限制结果-Limit使用"><a href="#1-5-限制结果-Limit使用" class="headerlink" title="1.5 限制结果 Limit使用"></a><a href="#1-5-%E9%99%90%E5%88%B6%E7%BB%93%E6%9E%9C-Limit%E4%BD%BF%E7%94%A8" title="1.5 限制结果 Limit使用"></a>1.5 限制结果 Limit使用</h2><p>只返回指定个数的结果,在语句后使用关键字 limit,关键字后加行数即可</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> prod\_name <span class="token keyword">from</span> products <span class="token keyword">limit</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------+ </span><span class="token operator">|</span> prod\_name \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------+ </span><span class="token operator">|</span> <span class="token number">.5</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1</span> ton anvil \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------+ </span><span class="token number">2</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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>指定检索的开始行和行数 <code>limit m,n</code></p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> prod\_name <span class="token keyword">from</span> products <span class="token keyword">limit</span> <span class="token number">0</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 operator">-</span><span class="token comment">-------------+ </span><span class="token operator">|</span> prod\_name \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------+ </span><span class="token operator">|</span> <span class="token number">.5</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1</span> ton anvil \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------+ </span><span class="token number">2</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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><pre class="line-numbers language-none"><code class="language-none">第一个数为开始位置,第二个数为要检索出来的行数.上面语句的意思 : 从第0行开始,检索出2行的数据.<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><blockquote><p>在LIMIT中指定要检索的行数为检索的最大行数,如果没有足够的行,MySQL将只返回它能返回的那么多行.</p></blockquote><h2 id="1-6-使用完全限定的表名"><a href="#1-6-使用完全限定的表名" class="headerlink" title="1.6 使用完全限定的表名"></a><a href="#1-6-%E4%BD%BF%E7%94%A8%E5%AE%8C%E5%85%A8%E9%99%90%E5%AE%9A%E7%9A%84%E8%A1%A8%E5%90%8D" title="1.6 使用完全限定的表名"></a>1.6 使用完全限定的表名</h2><p>完全限定的表名可以默认不添加,但是在某些场景下(后续介绍)完全限定的表名还是非常有必须要的.</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> products<span class="token punctuation">.</span>prod\_name <span class="token keyword">from</span> products<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token operator">|</span> prod\_name \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token operator">|</span> <span class="token number">.5</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">2</span> ton anvil \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token number">14</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><h1 id="2-排序检索数据"><a href="#2-排序检索数据" class="headerlink" title="2. 排序检索数据"></a><a href="#2-%E6%8E%92%E5%BA%8F%E6%A3%80%E7%B4%A2%E6%95%B0%E6%8D%AE" title="2. 排序检索数据"></a>2. 排序检索数据</h1><h2 id="2-1-按单个列排序"><a href="#2-1-按单个列排序" class="headerlink" title="2.1 按单个列排序"></a><a href="#2-1-%E6%8C%89%E5%8D%95%E4%B8%AA%E5%88%97%E6%8E%92%E5%BA%8F" title="2.1 按单个列排序"></a>2.1 按单个列排序</h2><p>数据默认检索出来的顺序是按照数据最初在表中被添加的顺序,我们可以使用<code>ORDER BY</code>子句来显示的指定排序字段.</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> prod\_name <span class="token keyword">from</span> products <span class="token keyword">order</span> <span class="token keyword">by</span> prod\_name<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token operator">|</span> prod\_name \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token operator">|</span> <span class="token number">.5</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">2</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> Bird seed \<span class="token operator">|</span> <span class="token operator">|</span> Carrots \<span class="token operator">|</span> <span class="token operator">|</span> Detonator \<span class="token operator">|</span> <span class="token operator">|</span> Fuses \<span class="token operator">|</span> <span class="token operator">|</span> JetPack <span class="token number">1000</span> \<span class="token operator">|</span> <span class="token operator">|</span> JetPack <span class="token number">2000</span> \<span class="token operator">|</span> <span class="token operator">|</span> Oil can \<span class="token operator">|</span> <span class="token operator">|</span> Safe \<span class="token operator">|</span> <span class="token operator">|</span> Sling \<span class="token operator">|</span> <span class="token operator">|</span> TNT \<span class="token punctuation">(</span><span class="token number">1</span> stick\<span class="token punctuation">)</span> \<span class="token operator">|</span> <span class="token operator">|</span> TNT \<span class="token punctuation">(</span><span class="token number">5</span> sticks\<span class="token punctuation">)</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token number">14</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><blockquote><p>此处是按照字典书序排序</p></blockquote><h2 id="2-2-按多个列排序"><a href="#2-2-按多个列排序" class="headerlink" title="2.2 按多个列排序"></a><a href="#2-2-%E6%8C%89%E5%A4%9A%E4%B8%AA%E5%88%97%E6%8E%92%E5%BA%8F" title="2.2 按多个列排序"></a>2.2 按多个列排序</h2><p>多个列排序,只要指定列名,列名之间用逗号分隔即可.<br>检索三个列,首先按价格排序,然后再按名称排序:</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> prod\_id<span class="token punctuation">,</span>prod\_price<span class="token punctuation">,</span>prod\_name <span class="token keyword">from</span> products <span class="token keyword">order</span> <span class="token keyword">by</span> prod\_price<span class="token punctuation">,</span>prod\_name<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+------------+----------------+ </span><span class="token operator">|</span> prod\_id <span class="token operator">|</span> prod\_price <span class="token operator">|</span> prod\_name \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+------------+----------------+ </span><span class="token operator">|</span> FC <span class="token operator">|</span> <span class="token number">2.50</span> <span class="token operator">|</span> Carrots \<span class="token operator">|</span> <span class="token operator">|</span> TNT1 <span class="token operator">|</span> <span class="token number">2.50</span> <span class="token operator">|</span> TNT \<span class="token punctuation">(</span><span class="token number">1</span> stick\<span class="token punctuation">)</span> \<span class="token operator">|</span> <span class="token operator">|</span> FU1 <span class="token operator">|</span> <span class="token number">3.42</span> <span class="token operator">|</span> Fuses \<span class="token operator">|</span> <span class="token operator">|</span> SLING <span class="token operator">|</span> <span class="token number">4.49</span> <span class="token operator">|</span> Sling \<span class="token operator">|</span> <span class="token operator">|</span> ANV01 <span class="token operator">|</span> <span class="token number">5.99</span> <span class="token operator">|</span> <span class="token number">.5</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> OL1 <span class="token operator">|</span> <span class="token number">8.99</span> <span class="token operator">|</span> Oil can \<span class="token operator">|</span> <span class="token operator">|</span> ANV02 <span class="token operator">|</span> <span class="token number">9.99</span> <span class="token operator">|</span> <span class="token number">1</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> FB <span class="token operator">|</span> <span class="token number">10.00</span> <span class="token operator">|</span> Bird seed \<span class="token operator">|</span> <span class="token operator">|</span> TNT2 <span class="token operator">|</span> <span class="token number">10.00</span> <span class="token operator">|</span> TNT \<span class="token punctuation">(</span><span class="token number">5</span> sticks\<span class="token punctuation">)</span> \<span class="token operator">|</span> <span class="token operator">|</span> DTNTR <span class="token operator">|</span> <span class="token number">13.00</span> <span class="token operator">|</span> Detonator \<span class="token operator">|</span> <span class="token operator">|</span> ANV03 <span class="token operator">|</span> <span class="token number">14.99</span> <span class="token operator">|</span> <span class="token number">2</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> JP1000 <span class="token operator">|</span> <span class="token number">35.00</span> <span class="token operator">|</span> JetPack <span class="token number">1000</span> \<span class="token operator">|</span> <span class="token operator">|</span> SAFE <span class="token operator">|</span> <span class="token number">50.00</span> <span class="token operator">|</span> Safe \<span class="token operator">|</span> <span class="token operator">|</span> JP2000 <span class="token operator">|</span> <span class="token number">55.00</span> <span class="token operator">|</span> JetPack <span class="token number">2000</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+------------+----------------+ </span><span class="token number">14</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><blockquote><p>此例中,仅在多个行具有相同的prod_price值时才对产品按prod_name进行排序.<br>如果prod_price列中所有的值都是唯一的,则不会按prod_name排序.</p></blockquote><h2 id="2-3-指定排序方向"><a href="#2-3-指定排序方向" class="headerlink" title="2.3 指定排序方向"></a><a href="#2-3-%E6%8C%87%E5%AE%9A%E6%8E%92%E5%BA%8F%E6%96%B9%E5%90%91" title="2.3 指定排序方向"></a>2.3 指定排序方向</h2><p>数据排序分为两种 : 升序(ASC)和降序(DESC). 默认的排序方式是升序.</p><p>DESC关键字只应用到直接位于其前面的列名,如果想在多个列上进行降序排序,就必须对每个列指定DESC关键字</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> prod\_id<span class="token punctuation">,</span>prod\_price<span class="token punctuation">,</span>prod\_name <span class="token keyword">from</span> products <span class="token keyword">order</span> <span class="token keyword">by</span> prod\_price <span class="token keyword">desc</span><span class="token punctuation">,</span>prod\_name <span class="token keyword">desc</span><span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+------------+----------------+ </span><span class="token operator">|</span> prod\_id <span class="token operator">|</span> prod\_price <span class="token operator">|</span> prod\_name \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+------------+----------------+ </span><span class="token operator">|</span> JP2000 <span class="token operator">|</span> <span class="token number">55.00</span> <span class="token operator">|</span> JetPack <span class="token number">2000</span> \<span class="token operator">|</span> <span class="token operator">|</span> SAFE <span class="token operator">|</span> <span class="token number">50.00</span> <span class="token operator">|</span> Safe \<span class="token operator">|</span> <span class="token operator">|</span> JP1000 <span class="token operator">|</span> <span class="token number">35.00</span> <span class="token operator">|</span> JetPack <span class="token number">1000</span> \<span class="token operator">|</span> <span class="token operator">|</span> ANV03 <span class="token operator">|</span> <span class="token number">14.99</span> <span class="token operator">|</span> <span class="token number">2</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> DTNTR <span class="token operator">|</span> <span class="token number">13.00</span> <span class="token operator">|</span> Detonator \<span class="token operator">|</span> <span class="token operator">|</span> TNT2 <span class="token operator">|</span> <span class="token number">10.00</span> <span class="token operator">|</span> TNT \<span class="token punctuation">(</span><span class="token number">5</span> sticks\<span class="token punctuation">)</span> \<span class="token operator">|</span> <span class="token operator">|</span> FB <span class="token operator">|</span> <span class="token number">10.00</span> <span class="token operator">|</span> Bird seed \<span class="token operator">|</span> <span class="token operator">|</span> ANV02 <span class="token operator">|</span> <span class="token number">9.99</span> <span class="token operator">|</span> <span class="token number">1</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> OL1 <span class="token operator">|</span> <span class="token number">8.99</span> <span class="token operator">|</span> Oil can \<span class="token operator">|</span> <span class="token operator">|</span> ANV01 <span class="token operator">|</span> <span class="token number">5.99</span> <span class="token operator">|</span> <span class="token number">.5</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> SLING <span class="token operator">|</span> <span class="token number">4.49</span> <span class="token operator">|</span> Sling \<span class="token operator">|</span> <span class="token operator">|</span> FU1 <span class="token operator">|</span> <span class="token number">3.42</span> <span class="token operator">|</span> Fuses \<span class="token operator">|</span> <span class="token operator">|</span> TNT1 <span class="token operator">|</span> <span class="token number">2.50</span> <span class="token operator">|</span> TNT \<span class="token punctuation">(</span><span class="token number">1</span> stick\<span class="token punctuation">)</span> \<span class="token operator">|</span> <span class="token operator">|</span> FC <span class="token operator">|</span> <span class="token number">2.50</span> <span class="token operator">|</span> Carrots \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+------------+----------------+ </span><span class="token number">14</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><blockquote><p>在字典排序中,A被视为与a相同,这是MySQL等大多数数据库管理系统默认行为,<br>如果想要更改需要DBA的帮助</p></blockquote><h2 id="2-4-ORDER-BY与LIMIT组合"><a href="#2-4-ORDER-BY与LIMIT组合" class="headerlink" title="2.4 ORDER BY与LIMIT组合"></a><a href="#2-4-ORDER-BY%E4%B8%8ELIMIT%E7%BB%84%E5%90%88" title="2.4 ORDER BY与LIMIT组合"></a>2.4 ORDER BY与LIMIT组合</h2><p>ORDER BY与LIMIT组合,可以找出一列中最高或最低的值</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> prod\_price <span class="token keyword">from</span> products <span class="token keyword">order</span> <span class="token keyword">by</span> prod\_price <span class="token keyword">desc</span> <span class="token keyword">limit</span> <span class="token number">1</span><span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-----------+ </span><span class="token operator">|</span> prod\_price \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-----------+ </span><span class="token operator">|</span> <span class="token number">55.00</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-----------+ </span><span class="token number">1</span> <span class="token keyword">row</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><blockquote><p>ORDER BY子句必须在FROM子句之后,LIMIT子句必须在ORDER BY子句之后<br>但是这两个关键字联合使用会有问题,后面会单独讲解.</p></blockquote><h2 id="Tips"><a href="#Tips" class="headerlink" title="Tips"></a><a href="#Tips" title="Tips"></a>Tips</h2><p>欢迎收藏和转发，感谢你的支持！(๑•̀ㅂ•́)و✧</p>]]></content>
<categories>
<category> 数据库系列 </category>
</categories>
<tags>
<tag> MySQL </tag>
<tag> 数据库 </tag>
</tags>
</entry>
<entry>
<title>《MySQL必知必会》第4-5章 SELECT检索与排序</title>
<link href="/posts/1ebe294a.html"/>
<url>/posts/1ebe294a.html</url>
<content type="html"><![CDATA[<h1 id="《MySQL必知必会》第4-5章-SELECT检索与排序"><a href="#《MySQL必知必会》第4-5章-SELECT检索与排序" class="headerlink" title="《MySQL必知必会》第4-5章 SELECT检索与排序"></a>《MySQL必知必会》第4-5章 SELECT检索与排序</h1><h1 id="1-SELECT-语句"><a href="#1-SELECT-语句" class="headerlink" title="1. SELECT 语句"></a><a href="#1-SELECT-%E8%AF%AD%E5%8F%A5" title="1. SELECT 语句"></a>1. SELECT 语句</h1><h2 id="1-1-检索单个列"><a href="#1-1-检索单个列" class="headerlink" title="1.1 检索单个列"></a><a href="#1-1-%E6%A3%80%E7%B4%A2%E5%8D%95%E4%B8%AA%E5%88%97" title="1.1 检索单个列"></a>1.1 检索单个列</h2><p>关键字SELECT后写需要查询的列名</p><pre class="line-numbers language-none"><code class="language-none">mysql> select prod\_name from products; +\----------------+ | prod\_name \| +\----------------+ | Fuses \| | JetPack 1000 \| | TNT \(5 sticks\) \| +\----------------+ 14 rows in set \(0.00 sec\<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><blockquote><ol><li>多条SQL语句必须使用分号(;)分隔,推荐做法.</li><li>SQL语句不区分大小写</li></ol></blockquote><h2 id="1-2-检索多个列"><a href="#1-2-检索多个列" class="headerlink" title="1.2 检索多个列"></a><a href="#1-2-%E6%A3%80%E7%B4%A2%E5%A4%9A%E4%B8%AA%E5%88%97" title="1.2 检索多个列"></a>1.2 检索多个列</h2><p>和检索单列类似,关键字SELECT后写需要查询的列名,逗号分隔</p><pre class="line-numbers language-none"><code class="language-none">mysql> select prod\_id,prod\_name,prod\_price from products; +\---------+----------------+------------+ | prod\_id | prod\_name | prod\_price \| +\---------+----------------+------------+ | ANV01 | .5 ton anvil | 5.99 \| | ANV02 | 1 ton anvil | 9.99 \| | ANV03 | 2 ton anvil | 14.99 \| +\---------+----------------+------------+ 14 rows in set \(0.00 sec\)<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><h2 id="1-3-检索所有列"><a href="#1-3-检索所有列" class="headerlink" title="1.3 检索所有列"></a><a href="#1-3-%E6%A3%80%E7%B4%A2%E6%89%80%E6%9C%89%E5%88%97" title="1.3 检索所有列"></a>1.3 检索所有列</h2><p>使用通配符(*)即可</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql"><span class="token keyword">select</span> \<span class="token operator">*</span> <span class="token keyword">from</span> products<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><blockquote><p>最好别使用*通配符,虽然此种写法方便,但是索引不需要的列通常会降低检索和应用程序的性能</p></blockquote><h2 id="1-4-检索不同行并去重"><a href="#1-4-检索不同行并去重" class="headerlink" title="1.4 检索不同行并去重"></a><a href="#1-4-%E6%A3%80%E7%B4%A2%E4%B8%8D%E5%90%8C%E8%A1%8C%E5%B9%B6%E5%8E%BB%E9%87%8D" title="1.4 检索不同行并去重"></a>1.4 检索不同行并去重</h2><p>使用关键字DISTINCT,指示MySQL只返回不同值,从而达到去重目的.</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> vend\_id <span class="token keyword">from</span> products<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+ </span><span class="token operator">|</span> vend\_id \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+ </span><span class="token operator">|</span> <span class="token number">1001</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1002</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1003</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1003</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1005</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+ </span><span class="token number">14</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<span class="token punctuation">)</span> mysql<span class="token operator">></span> <span class="token keyword">select</span> <span class="token keyword">distinct</span> vend\_id <span class="token keyword">from</span> products<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+ </span><span class="token operator">|</span> vend\_id \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+ </span><span class="token operator">|</span> <span class="token number">1001</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1002</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1003</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1005</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+ </span><span class="token number">4</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.01</span> sec\<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></code></pre><blockquote><ol><li> DISTINCT关键字必须直接放在列名的前面</li><li> 不能不分使用DISTINCT,即DISTINCT关键字应用于所有列而不仅是前置它的列</li></ol></blockquote><h2 id="1-5-限制结果-Limit使用"><a href="#1-5-限制结果-Limit使用" class="headerlink" title="1.5 限制结果 Limit使用"></a><a href="#1-5-%E9%99%90%E5%88%B6%E7%BB%93%E6%9E%9C-Limit%E4%BD%BF%E7%94%A8" title="1.5 限制结果 Limit使用"></a>1.5 限制结果 Limit使用</h2><p>只返回指定个数的结果,在语句后使用关键字 limit,关键字后加行数即可 </p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> prod\_name <span class="token keyword">from</span> products <span class="token keyword">limit</span> <span class="token number">2</span><span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------+ </span><span class="token operator">|</span> prod\_name \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------+ </span><span class="token operator">|</span> <span class="token number">.5</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1</span> ton anvil \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------+ </span><span class="token number">2</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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>指定检索的开始行和行数 <code>limit m,n</code></p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> prod\_name <span class="token keyword">from</span> products <span class="token keyword">limit</span> <span class="token number">0</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 operator">-</span><span class="token comment">-------------+ </span><span class="token operator">|</span> prod\_name \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------+ </span><span class="token operator">|</span> <span class="token number">.5</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1</span> ton anvil \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------+ </span><span class="token number">2</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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><pre class="line-numbers language-none"><code class="language-none">第一个数为开始位置,第二个数为要检索出来的行数.上面语句的意思 : 从第0行开始,检索出2行的数据.<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><blockquote><p>在LIMIT中指定要检索的行数为检索的最大行数,如果没有足够的行,MySQL将只返回它能返回的那么多行.</p></blockquote><h2 id="1-6-使用完全限定的表名"><a href="#1-6-使用完全限定的表名" class="headerlink" title="1.6 使用完全限定的表名"></a><a href="#1-6-%E4%BD%BF%E7%94%A8%E5%AE%8C%E5%85%A8%E9%99%90%E5%AE%9A%E7%9A%84%E8%A1%A8%E5%90%8D" title="1.6 使用完全限定的表名"></a>1.6 使用完全限定的表名</h2><p>完全限定的表名可以默认不添加,但是在某些场景下(后续介绍)完全限定的表名还是非常有必须要的.</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> products<span class="token punctuation">.</span>prod\_name <span class="token keyword">from</span> products<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token operator">|</span> prod\_name \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token operator">|</span> <span class="token number">.5</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">2</span> ton anvil \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token number">14</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><h1 id="2-排序检索数据"><a href="#2-排序检索数据" class="headerlink" title="2. 排序检索数据"></a><a href="#2-%E6%8E%92%E5%BA%8F%E6%A3%80%E7%B4%A2%E6%95%B0%E6%8D%AE" title="2. 排序检索数据"></a>2. 排序检索数据</h1><h2 id="2-1-按单个列排序"><a href="#2-1-按单个列排序" class="headerlink" title="2.1 按单个列排序"></a><a href="#2-1-%E6%8C%89%E5%8D%95%E4%B8%AA%E5%88%97%E6%8E%92%E5%BA%8F" title="2.1 按单个列排序"></a>2.1 按单个列排序</h2><p>数据默认检索出来的顺序是按照数据最初在表中被添加的顺序,我们可以使用<code>ORDER BY</code>子句来显示的指定排序字段.</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> prod\_name <span class="token keyword">from</span> products <span class="token keyword">order</span> <span class="token keyword">by</span> prod\_name<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token operator">|</span> prod\_name \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token operator">|</span> <span class="token number">.5</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">2</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> Bird seed \<span class="token operator">|</span> <span class="token operator">|</span> Carrots \<span class="token operator">|</span> <span class="token operator">|</span> Detonator \<span class="token operator">|</span> <span class="token operator">|</span> Fuses \<span class="token operator">|</span> <span class="token operator">|</span> JetPack <span class="token number">1000</span> \<span class="token operator">|</span> <span class="token operator">|</span> JetPack <span class="token number">2000</span> \<span class="token operator">|</span> <span class="token operator">|</span> Oil can \<span class="token operator">|</span> <span class="token operator">|</span> Safe \<span class="token operator">|</span> <span class="token operator">|</span> Sling \<span class="token operator">|</span> <span class="token operator">|</span> TNT \<span class="token punctuation">(</span><span class="token number">1</span> stick\<span class="token punctuation">)</span> \<span class="token operator">|</span> <span class="token operator">|</span> TNT \<span class="token punctuation">(</span><span class="token number">5</span> sticks\<span class="token punctuation">)</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">---------------+ </span><span class="token number">14</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><blockquote><p>此处是按照字典书序排序</p></blockquote><h2 id="2-2-按多个列排序"><a href="#2-2-按多个列排序" class="headerlink" title="2.2 按多个列排序"></a><a href="#2-2-%E6%8C%89%E5%A4%9A%E4%B8%AA%E5%88%97%E6%8E%92%E5%BA%8F" title="2.2 按多个列排序"></a>2.2 按多个列排序</h2><p>多个列排序,只要指定列名,列名之间用逗号分隔即可.<br>检索三个列,首先按价格排序,然后再按名称排序:</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">select</span> prod\_id<span class="token punctuation">,</span>prod\_price<span class="token punctuation">,</span>prod\_name <span class="token keyword">from</span> products <span class="token keyword">order</span> <span class="token keyword">by</span> prod\_price<span class="token punctuation">,</span>prod\_name<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+------------+----------------+ </span><span class="token operator">|</span> prod\_id <span class="token operator">|</span> prod\_price <span class="token operator">|</span> prod\_name \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+------------+----------------+ </span><span class="token operator">|</span> FC <span class="token operator">|</span> <span class="token number">2.50</span> <span class="token operator">|</span> Carrots \<span class="token operator">|</span> <span class="token operator">|</span> TNT1 <span class="token operator">|</span> <span class="token number">2.50</span> <span class="token operator">|</span> TNT \<span class="token punctuation">(</span><span class="token number">1</span> stick\<span class="token punctuation">)</span> \<span class="token operator">|</span> <span class="token operator">|</span> FU1 <span class="token operator">|</span> <span class="token number">3.42</span> <span class="token operator">|</span> Fuses \<span class="token operator">|</span> <span class="token operator">|</span> SLING <span class="token operator">|</span> <span class="token number">4.49</span> <span class="token operator">|</span> Sling \<span class="token operator">|</span> <span class="token operator">|</span> ANV01 <span class="token operator">|</span> <span class="token number">5.99</span> <span class="token operator">|</span> <span class="token number">.5</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> OL1 <span class="token operator">|</span> <span class="token number">8.99</span> <span class="token operator">|</span> Oil can \<span class="token operator">|</span> <span class="token operator">|</span> ANV02 <span class="token operator">|</span> <span class="token number">9.99</span> <span class="token operator">|</span> <span class="token number">1</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> FB <span class="token operator">|</span> <span class="token number">10.00</span> <span class="token operator">|</span> Bird seed \<span class="token operator">|</span> <span class="token operator">|</span> TNT2 <span class="token operator">|</span> <span class="token number">10.00</span> <span class="token operator">|</span> TNT \<span class="token punctuation">(</span><span class="token number">5</span> sticks\<span class="token punctuation">)</span> \<span class="token operator">|</span> <span class="token operator">|</span> DTNTR <span class="token operator">|</span> <span class="token number">13.00</span> <span class="token operator">|</span> Detonator \<span class="token operator">|</span> <span class="token operator">|</span> ANV03 <span class="token operator">|</span> <span class="token number">14.99</span> <span class="token operator">|</span> <span class="token number">2</span> ton anvil \<span class="token operator">|</span> <span class="token operator">|</span> JP1000 <span class="token operator">|</span> <span class="token number">35.00</span> <span class="token operator">|</span> JetPack <span class="token number">1000</span> \<span class="token operator">|</span> <span class="token operator">|</span> SAFE <span class="token operator">|</span> <span class="token number">50.00</span> <span class="token operator">|</span> Safe \<span class="token operator">|</span> <span class="token operator">|</span> JP2000 <span class="token operator">|</span> <span class="token number">55.00</span> <span class="token operator">|</span> JetPack <span class="token number">2000</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">--------+------------+----------------+ </span><span class="token number">14</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><blockquote><p>此例中,仅在多个行具有相同的prod_price值时才对产品按prod_name进行排序.<br>如果prod_price列中所有的值都是唯一的,则不会按prod_name排序.</p></blockquote><h2 id="2-3-指定排序方向"><a href="#2-3-指定排序方向" class="headerlink" title="2.3 指定排序方向"></a><a href="#2-3-%E6%8C%87%E5%AE%9A%E6%8E%92%E5%BA%8F%E6%96%B9%E5%90%91" title="2.3 指定排序方向"></a>2.3 指定排序方向</h2><p>数据排序分为两种 : 升序(ASC)和降序(DESC). 默认的排序方式是升序.</p><p>DESC关键字只应用到直接位于其前面的列名,如果想在多个列上进行降序排序,就必须对每个列指定DESC关键字</p><pre class="line-numbers language-none"><code class="language-none">mysql> select prod\_id,prod\_price,prod\_name from products order by prod\_price desc,prod\_name desc; +\---------+------------+----------------+ | prod\_id | prod\_price | prod\_name \| +\---------+------------+----------------+ | JP2000 | 55.00 | JetPack 2000 \| | SAFE | 50.00 | Safe \| | JP1000 | 35.00 | JetPack 1000 \| | ANV03 | 14.99 | 2 ton anvil \| | DTNTR | 13.00 | Detonator \| | TNT2 | 10.00 | TNT \(5 sticks\) \| | FB | 10.00 | Bird seed \| | ANV02 | 9.99 | 1 ton anvil \| | OL1 | 8.99 | Oil can \| | ANV01 | 5.99 | .5 ton anvil \| | SLING | 4.49 | Sling \| | FU1 | 3.42 | Fuses \| | TNT1 | 2.50 | TNT \(1 stick\) \| | FC | 2.50 | Carrots \| +\---------+------------+----------------+ 14 rows in set \(0.00 sec\)<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></code></pre><blockquote><p>在字典排序中,A被视为与a相同,这是MySQL等大多数数据库管理系统默认行为,<br>如果想要更改需要DBA的帮助</p></blockquote><h2 id="2-4-ORDER-BY与LIMIT组合"><a href="#2-4-ORDER-BY与LIMIT组合" class="headerlink" title="2.4 ORDER BY与LIMIT组合"></a><a href="#2-4-ORDER-BY%E4%B8%8ELIMIT%E7%BB%84%E5%90%88" title="2.4 ORDER BY与LIMIT组合"></a>2.4 ORDER BY与LIMIT组合</h2><p>ORDER BY与LIMIT组合,可以找出一列中最高或最低的值</p><pre class="line-numbers language-none"><code class="language-none">mysql> select prod\_price from products order by prod\_price desc limit 1; +\------------+ | prod\_price \| +\------------+ | 55.00 \| +\------------+ 1 row in set \(0.00 sec\)<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><blockquote><p>ORDER BY子句必须在FROM子句之后,LIMIT子句必须在ORDER BY子句之后<br>但是这两个关键字联合使用会有问题,后面会单独讲解.</p></blockquote><h2 id="Tips"><a href="#Tips" class="headerlink" title="Tips"></a><a href="#Tips" title="Tips"></a>Tips</h2><p>欢迎收藏和转发，感谢你的支持！(๑•̀ㅂ•́)و✧</p>]]></content>
<categories>
<category> 数据库系列 </category>
</categories>
<tags>
<tag> MySQL </tag>
<tag> 数据库 </tag>
</tags>
</entry>
<entry>
<title>《MySQL必知必会》第1-3章 MySQL介绍</title>
<link href="/posts/8b4d1597.html"/>
<url>/posts/8b4d1597.html</url>
<content type="html"><![CDATA[<h1 id="1-术语介绍"><a href="#1-术语介绍" class="headerlink" title="1. 术语介绍"></a><a href="#1-%E6%9C%AF%E8%AF%AD%E4%BB%8B%E7%BB%8D" title="1. 术语介绍"></a>1. 术语介绍</h1><ul><li>数据库(database) : 保存有组织的数据的容器(通常是一个文件或一组文件)</li><li>表(table) : 某种特定类型数据的结构化清单(具有唯一性,同一数据库中表名不能相同,不同数据库可以相同)</li><li>模式(schema) : 关于数据库和表的布局及特性的信息</li><li>列(column) : 表中的一个字段,所有表都是由一个或多个列组成</li><li>数据类型(datatype) : 所容许的数据的类型.每个表列都有相应的数据类型,它限制该列中存储的数据</li><li>行(row) : 表中的一个记录</li><li>主键(primary key) : 一列(或一组列),其值能够唯一区分表中的每行,主键列不允许NULL值</li><li>关键字(key word) : MySQL语言保留字,不可用关键字命名表或列</li></ul><h1 id="2-SQL-DBMS-MySQL"><a href="#2-SQL-DBMS-MySQL" class="headerlink" title="2. SQL / DBMS / MySQL"></a><a href="#2-SQL-DBMS-MySQL" title="2. SQL / DBMS / MySQL"></a>2. SQL / DBMS / MySQL</h1><h2 id="2-1-SQL优点"><a href="#2-1-SQL优点" class="headerlink" title="2.1 SQL优点:"></a><a href="#2-1-SQL%E4%BC%98%E7%82%B9" title="2.1 SQL优点:"></a>2.1 SQL优点:</h2><ul><li>SQL不是某个特定数据库供应商的专有语言,几乎所有重要的DBMS都支持SQL</li><li>SQL简单易学</li><li>SQL简单灵活,可以进行分厂复杂和高级的数据库操作</li></ul><h2 id="2-2-数据库管理系统DBMS"><a href="#2-2-数据库管理系统DBMS" class="headerlink" title="2.2 数据库管理系统DBMS"></a><a href="#2-2-%E6%95%B0%E6%8D%AE%E5%BA%93%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9FDBMS" title="2.2 数据库管理系统DBMS"></a>2.2 数据库管理系统DBMS</h2><ul><li>基于共享文件系统<ul><li>Microsoft Access / FileMarker</li></ul></li><li>基于客户机-服务器<ul><li>MySQL / Oracle / Microsoft SQL Server</li></ul></li></ul><h2 id="2-3-MySQL优点"><a href="#2-3-MySQL优点" class="headerlink" title="2.3 MySQL优点"></a><a href="#2-3-MySQL%E4%BC%98%E7%82%B9" title="2.3 MySQL优点"></a>2.3 MySQL优点</h2><ul><li>低成本</li><li>高性能</li><li>可信赖</li><li>简单易用</li></ul><h1 id="3-MySQL工具"><a href="#3-MySQL工具" class="headerlink" title="3. MySQL工具"></a><a href="#3-MySQL%E5%B7%A5%E5%85%B7" title="3. MySQL工具"></a>3. MySQL工具</h1><h2 id="3-1-命令行"><a href="#3-1-命令行" class="headerlink" title="3.1 命令行"></a><a href="#3-1-%E5%91%BD%E4%BB%A4%E8%A1%8C" title="3.1 命令行"></a>3.1 命令行</h2><p>登录命令:</p><pre class="line-numbers language-none"><code class="language-none">mysql -h localhost -P 3306 -uroot -p1234<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><blockquote><p>注意 :<br>最后这个<code>-p</code>和密码之间不能有空格<br>其他的<code>-h</code>或者<code>-u</code>和参数间的空格是可有可无的</p></blockquote><p>登录后提示:</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">root\<span class="token variable">@c67b08791485</span>:<span class="token operator">/</span><span class="token comment"># mysql -h localhost -P 3306 -u root -p1234 </span>mysql: \<span class="token punctuation">[</span>Warning\<span class="token punctuation">]</span> <span class="token keyword">Using</span> a password <span class="token keyword">on</span> the command line interface can be insecure<span class="token punctuation">.</span> Welcome <span class="token keyword">to</span> the MySQL monitor<span class="token punctuation">.</span> Commands <span class="token keyword">end</span> <span class="token keyword">with</span> <span class="token punctuation">;</span> <span class="token operator">or</span> \\g<span class="token punctuation">.</span> Your MySQL connection id <span class="token operator">is</span> <span class="token number">5</span> Server version: <span class="token number">5.7</span><span class="token number">.6</span><span class="token operator">-</span>m16 MySQL Community Server \<span class="token punctuation">(</span>GPL\<span class="token punctuation">)</span> Copyright \<span class="token punctuation">(</span>c\<span class="token punctuation">)</span> <span class="token number">2000</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">,</span> Oracle <span class="token operator">and</span><span class="token operator">/</span><span class="token operator">or</span> its affiliates<span class="token punctuation">.</span> <span class="token keyword">All</span> rights reserved<span class="token punctuation">.</span> Oracle <span class="token operator">is</span> a registered trademark <span class="token keyword">of</span> Oracle Corporation <span class="token operator">and</span><span class="token operator">/</span><span class="token operator">or</span> its affiliates<span class="token punctuation">.</span> Other names may be trademarks <span class="token keyword">of</span> their respective owners<span class="token punctuation">.</span> <span class="token keyword">Type</span> <span class="token string">'help;'</span> <span class="token operator">or</span> <span class="token string">'\\h'</span> <span class="token keyword">for</span> help<span class="token punctuation">.</span> <span class="token keyword">Type</span> <span class="token string">'\\c'</span> <span class="token keyword">to</span> clear the <span class="token keyword">current</span> input statement<span class="token punctuation">.</span> mysql<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></code></pre><h2 id="3-2-Navicat"><a href="#3-2-Navicat" class="headerlink" title="3.2 Navicat"></a><a href="#3-2-Navicat" title="3.2 Navicat"></a>3.2 Navicat</h2><blockquote><p>其他工具,请自行Google </p></blockquote><h1 id="4-简单SQL语句"><a href="#4-简单SQL语句" class="headerlink" title="4. 简单SQL语句"></a><a href="#4-%E7%AE%80%E5%8D%95SQL%E8%AF%AD%E5%8F%A5" title="4. 简单SQL语句"></a>4. 简单SQL语句</h1><h2 id="4-1-显示所有数据库"><a href="#4-1-显示所有数据库" class="headerlink" title="4.1 显示所有数据库"></a><a href="#4-1-%E6%98%BE%E7%A4%BA%E6%89%80%E6%9C%89%E6%95%B0%E6%8D%AE%E5%BA%93" title="4.1 显示所有数据库"></a>4.1 显示所有数据库</h2><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">show</span> <span class="token keyword">databases</span><span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------------+ </span><span class="token operator">|</span> <span class="token keyword">Database</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------------+ </span><span class="token operator">|</span> information\_schema \<span class="token operator">|</span> <span class="token operator">|</span> eladmin \<span class="token operator">|</span> <span class="token operator">|</span> example \<span class="token operator">|</span> <span class="token operator">|</span> lfstudio \<span class="token operator">|</span> <span class="token operator">|</span> mysql \<span class="token operator">|</span> <span class="token operator">|</span> performance\_schema \<span class="token operator">|</span> <span class="token operator">|</span> shiro \<span class="token operator">|</span> <span class="token operator">|</span> shiro2 \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">-------------------+ </span><span class="token number">18</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.01</span> sec\<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></code></pre><blockquote><p>我这里有一些自己测试的数据库</p></blockquote><h2 id="4-2-切换到指定数据库"><a href="#4-2-切换到指定数据库" class="headerlink" title="4.2 切换到指定数据库"></a><a href="#4-2-%E5%88%87%E6%8D%A2%E5%88%B0%E6%8C%87%E5%AE%9A%E6%95%B0%E6%8D%AE%E5%BA%93" title="4.2 切换到指定数据库"></a>4.2 切换到指定数据库</h2><pre class="line-numbers language-none"><code class="language-none">mysql> use shiro2; Reading table information for completion of table and column names You can turn off this feature to get a quicker startup with -A Database changed<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="4-3-显示当前数据库中所有表"><a href="#4-3-显示当前数据库中所有表" class="headerlink" title="4.3 显示当前数据库中所有表"></a><a href="#4-3-%E6%98%BE%E7%A4%BA%E5%BD%93%E5%89%8D%E6%95%B0%E6%8D%AE%E5%BA%93%E4%B8%AD%E6%89%80%E6%9C%89%E8%A1%A8" title="4.3 显示当前数据库中所有表"></a>4.3 显示当前数据库中所有表</h2><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">show</span> <span class="token keyword">tables</span><span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">----------------------+ </span><span class="token operator">|</span> <span class="token keyword">Tables</span>\_in\_shiro2 \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">----------------------+ </span><span class="token operator">|</span> base\_admin\_permission \<span class="token operator">|</span> <span class="token operator">|</span> base\_admin\_role \<span class="token operator">|</span> <span class="token operator">|</span> base\_admin\_user \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">----------------------+ </span><span class="token number">3</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><h2 id="4-4-显示指定表中所有列"><a href="#4-4-显示指定表中所有列" class="headerlink" title="4.4 显示指定表中所有列"></a><a href="#4-4-%E6%98%BE%E7%A4%BA%E6%8C%87%E5%AE%9A%E8%A1%A8%E4%B8%AD%E6%89%80%E6%9C%89%E5%88%97" title="4.4 显示指定表中所有列"></a>4.4 显示指定表中所有列</h2><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">show</span> <span class="token keyword">columns</span> <span class="token keyword">from</span> base\_admin\_role<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">------------+--------------+------+-----+---------+----------------+ </span><span class="token operator">|</span> Field <span class="token operator">|</span> <span class="token keyword">Type</span> <span class="token operator">|</span> <span class="token boolean">Null</span> <span class="token operator">|</span> <span class="token keyword">Key</span> <span class="token operator">|</span> <span class="token keyword">Default</span> <span class="token operator">|</span> Extra \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">------------+--------------+------+-----+---------+----------------+ </span><span class="token operator">|</span> id <span class="token operator">|</span> <span class="token keyword">int</span>\<span class="token punctuation">(</span><span class="token number">11</span>\<span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token keyword">NO</span> <span class="token operator">|</span> PRI <span class="token operator">|</span> <span class="token boolean">NULL</span> <span class="token operator">|</span> auto\_increment \<span class="token operator">|</span> <span class="token operator">|</span> role\_name <span class="token operator">|</span> <span class="token keyword">varchar</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 keyword">NO</span> <span class="token operator">|</span> <span class="token operator">|</span> <span class="token boolean">NULL</span> <span class="token operator">|</span> \<span class="token operator">|</span> <span class="token operator">|</span> role\_desc <span class="token operator">|</span> <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">100</span>\<span class="token punctuation">)</span> <span class="token operator">|</span> YES <span class="token operator">|</span> <span class="token operator">|</span> <span class="token boolean">NULL</span> <span class="token operator">|</span> \<span class="token operator">|</span> <span class="token operator">|</span> permissions <span class="token operator">|</span> <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span> <span class="token operator">|</span> YES <span class="token operator">|</span> <span class="token operator">|</span> <span class="token boolean">NULL</span> <span class="token operator">|</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token keyword">create</span>\_time <span class="token operator">|</span> <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">64</span>\<span class="token punctuation">)</span> <span class="token operator">|</span> YES <span class="token operator">|</span> <span class="token operator">|</span> <span class="token boolean">NULL</span> <span class="token operator">|</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token keyword">update</span>\_time <span class="token operator">|</span> <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">64</span>\<span class="token punctuation">)</span> <span class="token operator">|</span> YES <span class="token operator">|</span> <span class="token operator">|</span> <span class="token boolean">NULL</span> <span class="token operator">|</span> \<span class="token operator">|</span> <span class="token operator">|</span> role\_status <span class="token operator">|</span> <span class="token keyword">int</span>\<span class="token punctuation">(</span><span class="token number">1</span>\<span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token keyword">NO</span> <span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1</span> <span class="token operator">|</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">------------+--------------+------+-----+---------+----------------+ </span><span class="token number">7</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><blockquote><p>它对每个字段返回一行，行中包含字段名、数据 类型、是否允许NULL、键信息、默认值以及其他信息</p></blockquote><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">mysql<span class="token operator">></span> <span class="token keyword">describe</span> base\_admin\_role<span class="token punctuation">;</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">------------+--------------+------+-----+---------+----------------+ </span><span class="token operator">|</span> Field <span class="token operator">|</span> <span class="token keyword">Type</span> <span class="token operator">|</span> <span class="token boolean">Null</span> <span class="token operator">|</span> <span class="token keyword">Key</span> <span class="token operator">|</span> <span class="token keyword">Default</span> <span class="token operator">|</span> Extra \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">------------+--------------+------+-----+---------+----------------+ </span><span class="token operator">|</span> id <span class="token operator">|</span> <span class="token keyword">int</span>\<span class="token punctuation">(</span><span class="token number">11</span>\<span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token keyword">NO</span> <span class="token operator">|</span> PRI <span class="token operator">|</span> <span class="token boolean">NULL</span> <span class="token operator">|</span> auto\_increment \<span class="token operator">|</span> <span class="token operator">|</span> role\_name <span class="token operator">|</span> <span class="token keyword">varchar</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 keyword">NO</span> <span class="token operator">|</span> <span class="token operator">|</span> <span class="token boolean">NULL</span> <span class="token operator">|</span> \<span class="token operator">|</span> <span class="token operator">|</span> role\_desc <span class="token operator">|</span> <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">100</span>\<span class="token punctuation">)</span> <span class="token operator">|</span> YES <span class="token operator">|</span> <span class="token operator">|</span> <span class="token boolean">NULL</span> <span class="token operator">|</span> \<span class="token operator">|</span> <span class="token operator">|</span> permissions <span class="token operator">|</span> <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span> <span class="token operator">|</span> YES <span class="token operator">|</span> <span class="token operator">|</span> <span class="token boolean">NULL</span> <span class="token operator">|</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token keyword">create</span>\_time <span class="token operator">|</span> <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">64</span>\<span class="token punctuation">)</span> <span class="token operator">|</span> YES <span class="token operator">|</span> <span class="token operator">|</span> <span class="token boolean">NULL</span> <span class="token operator">|</span> \<span class="token operator">|</span> <span class="token operator">|</span> <span class="token keyword">update</span>\_time <span class="token operator">|</span> <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">64</span>\<span class="token punctuation">)</span> <span class="token operator">|</span> YES <span class="token operator">|</span> <span class="token operator">|</span> <span class="token boolean">NULL</span> <span class="token operator">|</span> \<span class="token operator">|</span> <span class="token operator">|</span> role\_status <span class="token operator">|</span> <span class="token keyword">int</span>\<span class="token punctuation">(</span><span class="token number">1</span>\<span class="token punctuation">)</span> <span class="token operator">|</span> <span class="token keyword">NO</span> <span class="token operator">|</span> <span class="token operator">|</span> <span class="token number">1</span> <span class="token operator">|</span> \<span class="token operator">|</span> <span class="token operator">+</span>\<span class="token operator">-</span><span class="token comment">------------+--------------+------+-----+---------+----------------+ </span><span class="token number">7</span> <span class="token keyword">rows</span> <span class="token operator">in</span> <span class="token keyword">set</span> \<span class="token punctuation">(</span><span class="token number">0.00</span> sec\<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></code></pre><blockquote><p>DESCRIBE语句 MySQL支持用DESCRIBE作为SHOW COLUMNS FROM的一种快捷方式。<br>换句话说,DESCRIBE base_admin_role;是 SHOW COLUMNS FROM base_admin_role;的一种快捷方式。</p></blockquote><h2 id="4-5-其他show语句"><a href="#4-5-其他show语句" class="headerlink" title="4.5 其他show语句"></a><a href="#4-5-%E5%85%B6%E4%BB%96show%E8%AF%AD%E5%8F%A5" title="4.5 其他show语句"></a>4.5 其他show语句</h2><ul><li>SHOW STATUS，用于显示广泛的服务器状态信息</li><li>SHOW CREATE DATABASE和SHOW CREATE TABLE，分别用来显示创建特定数据库或表的MySQL语句</li><li>SHOW GRANTS，用来显示授予用户(所有用户或特定用户)的安全权限</li><li>SHOW ERRORS和SHOW WARNINGS，用来显示服务器错误或警告消息</li></ul><h2 id="Tips"><a href="#Tips" class="headerlink" title="Tips"></a><a href="#Tips" title="Tips"></a>Tips</h2><p>欢迎收藏和转发，感谢你的支持！(๑•̀ㅂ•́)و✧</p>]]></content>
<categories>
<category> 数据库系列 </category>
</categories>
<tags>
<tag> MySQL </tag>
<tag> 数据库 </tag>
</tags>
</entry>
<entry>
<title>创建数据库，创建数据库表MySQL语句</title>
<link href="/posts/bd3ea19a.html"/>
<url>/posts/bd3ea19a.html</url>
<content type="html"><![CDATA[<h3 id="常用语句"><a href="#常用语句" class="headerlink" title="常用语句"></a>常用语句</h3><p> 1.创建数据库： 创建的代码：create 数据库的代码：database 数据库表名：随便起，只要自己记住就行。test</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql"><span class="token keyword">create</span> <span class="token keyword">database</span> test<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>2.删除数据库： 删除的代码：drop 数据库代码：database 要删除哪一个数据库：数据库名:test</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql"><span class="token keyword">drop</span> <span class="token keyword">database</span> test<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>3.创建表: 数据库建好后该往里创建表了；例下 创建： create 表的代码: table 表名：随便取 ceshi </p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql"><span class="token keyword">create</span> <span class="token keyword">table</span> class<span class="token punctuation">(</span> code <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span> <span class="token keyword">primary</span> <span class="token keyword">key</span><span class="token punctuation">,</span> name <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span> <span class="token operator">not</span> <span class="token boolean">null</span> \<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">create</span> <span class="token keyword">table</span> ceshi<span class="token punctuation">(</span> ids <span class="token keyword">int</span> auto\_increment <span class="token keyword">primary</span> <span class="token keyword">key</span><span class="token punctuation">,</span> uid <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span><span class="token punctuation">,</span> name <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span><span class="token punctuation">,</span> class <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">foreign</span> <span class="token keyword">key</span> \<span class="token punctuation">(</span>class\<span class="token punctuation">)</span> <span class="token keyword">references</span> class\<span class="token punctuation">(</span>code\<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></code></pre><p>注：自增长代码代表：auto_increment</p><p> 主建的代码代表：primary key</p><p> 外键的代码代表公式：foreign key (列名) references 主表名 (列名)</p><p> fornign key+(列名) 代表给哪一个加外键 references 要引用哪个表里的列</p><p> 是否为空: 不为空的代码：not null</p><p>4.删除: 删除代码的代表：drop 删除的是表： table 要删的那个表名：ceshi </p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql"><span class="token keyword">drop</span> <span class="token keyword">table</span> ceshi<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>代码写创建数据库是注意：</p><p>1.类型包含长度的，在类型后面加(括号)，括号里面写长度</p><p>2.上一列写完加逗号</p><p>3.最后一列不要写逗号</p><p>4.在每一条SQL语句写完之后要加分号;</p><p>5.如果有外键关系，先创建主表</p><p>例子：</p><pre class="line-numbers language-sql" data-language="sql"><code class="language-sql">创建表： <span class="token keyword">create</span> <span class="token keyword">table</span> class<span class="token punctuation">(</span> code <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span> <span class="token keyword">primary</span> <span class="token keyword">key</span><span class="token punctuation">,</span> name <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">create</span> <span class="token keyword">table</span> student<span class="token punctuation">(</span> code <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span> <span class="token keyword">primary</span> <span class="token keyword">key</span><span class="token punctuation">,</span> name <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span><span class="token punctuation">,</span> sex <span class="token keyword">bit</span><span class="token punctuation">,</span> age <span class="token keyword">int</span><span class="token punctuation">,</span> class <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">foreign</span> <span class="token keyword">key</span> <span class="token punctuation">(</span>class\<span class="token punctuation">)</span> <span class="token keyword">references</span> class\<span class="token punctuation">(</span>code\<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">create</span> <span class="token keyword">table</span> kecheng<span class="token punctuation">(</span> code <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span> <span class="token keyword">primary</span> <span class="token keyword">key</span><span class="token punctuation">,</span> name <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">create</span> <span class="token keyword">table</span> teacher <span class="token punctuation">(</span> code <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span> <span class="token keyword">primary</span> <span class="token keyword">key</span><span class="token punctuation">,</span> name <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">create</span> <span class="token keyword">table</span> chengji<span class="token punctuation">(</span> ids <span class="token keyword">int</span> auto\_increment <span class="token keyword">primary</span> <span class="token keyword">key</span><span class="token punctuation">,</span> scode <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span><span class="token punctuation">,</span> kcode <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span><span class="token punctuation">,</span> degree <span class="token keyword">float</span><span class="token punctuation">,</span> <span class="token keyword">foreign</span> <span class="token keyword">key</span> \<span class="token punctuation">(</span>scode\<span class="token punctuation">)</span> <span class="token keyword">references</span> student\<span class="token punctuation">(</span>code\<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">foreign</span> <span class="token keyword">key</span> <span class="token punctuation">(</span>kcode\<span class="token punctuation">)</span> <span class="token keyword">references</span> kecheng\<span class="token punctuation">(</span>code\<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">create</span> <span class="token keyword">table</span> tkecheng<span class="token punctuation">(</span> ids <span class="token keyword">int</span> auto\_increment <span class="token keyword">primary</span> <span class="token keyword">key</span><span class="token punctuation">,</span> tcode <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span><span class="token punctuation">,</span> kcode <span class="token keyword">varchar</span>\<span class="token punctuation">(</span><span class="token number">20</span>\<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">foreign</span> <span class="token keyword">key</span> \<span class="token punctuation">(</span>kcode\<span class="token punctuation">)</span> <span class="token keyword">references</span> kecheng\<span class="token punctuation">(</span>code\<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">foreign</span> <span class="token keyword">key</span> \<span class="token punctuation">(</span>tcode\<span class="token punctuation">)</span> <span class="token keyword">references</span> teacher<span class="token punctuation">(</span>code\<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></code></pre><p><img src="https://pic.yupoo.com/kalbim/df19059b/c309cc8a.png"></p><p> <img src="https://pic.yupoo.com/kalbim/ed83d663/3e78fffc.png"></p><p> <img src="https://pic.yupoo.com/kalbim/15e7b6b7/b4f9963d.png"></p>]]></content>
<categories>
<category> 数据库系列 </category>
</categories>
<tags>
<tag> MySQL </tag>
<tag> 数据库 </tag>
</tags>
</entry>
<entry>
<title>Layui 基本使用</title>
<link href="/posts/60045b55.html"/>
<url>/posts/60045b55.html</url>
<content type="html"><![CDATA[<h3 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h3><p>由国人开发，16年出厂的框架，其主要提供了很多好看、方便的样式，并且基本拿来即用，和Bootstrap有些相似，但个人认为该框架有个极大的好处就是定义了很多前后端交互的样式接口，如分页表格，只需在前端配置好接口，后端则按照定义好的接口规则返回数据，即可完成页面的展示，极大减少了后端人员的开发成本。</p><p>说白了，该框架就是为了方便后端人员开发前端而使用的。<br>官方文档：<a href="https://links.jianshu.com/go?to=https://www.layui.com/doc/">https://www.layui.com/doc/</a></p><h3 id="Layui、Easyui和Bootstrap对比"><a href="#Layui、Easyui和Bootstrap对比" class="headerlink" title="Layui、Easyui和Bootstrap对比"></a>Layui、Easyui和Bootstrap对比</h3><p><a href="https://links.jianshu.com/go?to=https://www.cnblogs.com/helingjuan/p/9352191.html">https://www.cnblogs.com/helingjuan/p/9352191.html</a><br>个人总结（三个框架依次顺序）：美且轻、强但丑、简且稳</p><h3 id="环境导入"><a href="#环境导入" class="headerlink" title="环境导入"></a>环境导入</h3><pre class="line-numbers language-none"><code class="language-none">// 本地导入：<link rel="stylesheet" href="./layui/css/layui.css" media="all">// 导入CSS文件<script src="./layui/layui.js"></script>// 导入JS文件// CDN导入：<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.4/css/layui.css" media="all"><script src="https://www.layuicdn.com/layui-v2.5.4/layui.js"></script><!-- 该CDN引入字体会出现跨域情况，因此一些空间的样式显示会出现异常 --><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></code></pre><p><strong>注：</strong><br>若将Layui下载到本地进行导入时，记得在将<code>layui.css</code>和<code>layui.js</code>导入的同时，将其中的字体等也一同导入，以免显示的结果有异常<br>使用CDN导入时，提供的CDN链接由于配置文件，在导入字体文件等时会出现跨域请求的问题，所以字体等可能无法正常显示，因此不推荐，不过这里还是附上CDN链接：<a href="https://links.jianshu.com/go?to=https://www.layuicdn.com/">CDN链接</a></p><h3 id="好看的字体图标"><a href="#好看的字体图标" class="headerlink" title="好看的字体图标"></a>好看的字体图标</h3><p>参考文档：<a href="https://links.jianshu.com/go?to=https://www.layui.com/doc/element/icon.html%23table">https://www.layui.com/doc/element/icon.html#table</a></p><h2 id="好用的内置模块"><a href="#好用的内置模块" class="headerlink" title="好用的内置模块"></a>好用的内置模块</h2><h3 id="layer弹层"><a href="#layer弹层" class="headerlink" title="layer弹层"></a>layer弹层</h3><p>这个是该框架的代表作，常用于一些公告、提示框、轮播相册等场景，举例：</p><pre class="line-numbers language-none"><code class="language-none"><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>弹层使用</title> <link rel="stylesheet" href="./layui/css/layui.css" media="all"></head><body><div class="layui-btn layui-btn-primary layer-demolist" id="test1">我下面会出现一个弹层</div></body><script src="./layui/layui.js"></script><script> layui.use('layer', function () { var layer = layui.layer; layer.tips('上', '#test1', { // 表示在id=test1的地方显示弹层 tips: 3, // 1/2/3/4分别表示从：上/右/下/左显示弹层 time: 0, // 设置为0表示不消失 }); });</script></html><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></code></pre><h6 id="结果图："><a href="#结果图：" class="headerlink" title="结果图："></a>结果图：</h6><p><img src="https://upload-images.jianshu.io/upload_images/13183513-7642064bc869f819.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/180/format/webp"></p><p>弹层示例图</p><h5 id="多个弹层示例"><a href="#多个弹层示例" class="headerlink" title="多个弹层示例"></a>多个弹层示例</h5><pre class="line-numbers language-none"><code class="language-none"><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>弹层使用</title> <link rel="stylesheet" href="./layui/css/layui.css" media="all"></head><body><button id="show" class="layui-btn layui-btn-primary">显示弹层</button><button class="layui-btn del">删除弹层1</button><button class="layui-btn layui-btn-normal del">删除弹层2</button><button class="layui-btn layui-btn-warm del">删除弹层3</button><button class="layui-btn layui-btn-danger del">删除弹层4</button><br><br><br><center> <div class="layui-btn layui-btn-primary layer-demolist" id="test1">我上面会出现一个弹层</div> <div class="layui-btn layui-btn-primary layer-demolist" id="test2">我右面会出现一个弹层</div> <br> <div class="layui-btn layui-btn-primary layer-demolist" id="test3">我下面会出现一个弹层</div> <div class="layui-btn layui-btn-primary layer-demolist" id="test4">我左面会出现一个弹层</div></center></body><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script src="./layui/layui.js"></script><script> layui.use('layer', function () { $('#show').click(function () { for (i = 1; i <= 4; i++) { layui.layer.tips(i, '#test' + i, { // 表示在id=test1的地方显示弹层 tips: i, // 1/2/3/4分别表示从：上/右/下/左显示弹层 // area: ['200px', '20px'], // 设置长高 time: 0, // 设置为0表示不消失 tipsMore: true, //支持多个弹层 success: function (layero, index) { // console.log(layero, index); layero.addClass(i + "-error"); // 添加一个class layero.children().eq(0).removeAttr("style"); layero.children().eq(0).css("line-height", "20px"); // 设置行高 // 给当前的标签设置id及样式 } }); } }); $('.del').click(function () { current = $(this).index(); $("." + current + '-error').remove(); // 删除按钮对应弹层，这里没有使用官方提供的close方法 // 因为close方法是根据弹层的索引来进行删除 // 但是每点击依次显示弹层，就会多4个弹层，那么其将无法把你希望的弹层都删除 }) });</script></html><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></code></pre><h6 id="结果图：-1"><a href="#结果图：-1" class="headerlink" title="结果图："></a>结果图：</h6><p><img src="https://upload-images.jianshu.io/upload_images/13183513-645554b96e176163.png"><br>多个弹层示例</p><p>样式参考文档：<a href="https://links.jianshu.com/go?to=https://www.layui.com/demo/layer.html">https://www.layui.com/demo/layer.html</a><br>更多使用示例：<a href="https://links.jianshu.com/go?to=http://layer.layui.com/">http://layer.layui.com/</a></p><h3 id="日历控件示例"><a href="#日历控件示例" class="headerlink" title="日历控件示例"></a>日历控件示例</h3><pre class="line-numbers language-none"><code class="language-none"><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>layDate快速使用</title> <link rel="stylesheet" href="./layui/css/layui.css" media="all"></head><body><div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 --> <input type="text" class="layui-input" id="test1"></div><script src="./layui/layui.js"></script><script> layui.use('laydate', function () { var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#test1', //指定元素 type: 'datetime' }); });</script></body></html><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></code></pre><h6 id="结果图：-2"><a href="#结果图：-2" class="headerlink" title="结果图："></a>结果图：</h6><p><img src="https://upload-images.jianshu.io/upload_images/13183513-13fd3482d5a59ce7.png"><br>日历示例</p><h3 id="前后端结合完整示例-Flask-Layui实现分页表格"><a href="#前后端结合完整示例-Flask-Layui实现分页表格" class="headerlink" title="前后端结合完整示例-Flask+Layui实现分页表格"></a>前后端结合完整示例-Flask+Layui实现分页表格</h3><h5 id="后端代码"><a href="#后端代码" class="headerlink" title="后端代码"></a>后端代码</h5><pre class="line-numbers language-none"><code class="language-none"># -*- coding: utf-8 -*-from flask import Flask, make_response, requestapp = Flask(__name__)@app.route("/aaaaa")def xxx(): page = int(request.args["page"]) limit = int(request.args["limit"]) aaa = {"code":0,"msg":"","data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0", "sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75},{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"签名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"诗人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"签名-11","experience":492,"logins":107,"wealth":8062783,"classify":"诗人","score":6},{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"签名-12","experience":106,"logins":176,"wealth":42622704,"classify":"词人","score":54},{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"签名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"诗人","score":63},{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"签名-14","experience":873,"logins":116,"wealth":72549912,"classify":"词人","score":8},{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"签名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28},{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"签名-16","experience":862,"logins":168,"wealth":37069775,"classify":"酱油","score":86},{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"签名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69},{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"签名-18","experience":866,"logins":88,"wealth":81722326,"classify":"词人","score":74},{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"签名-19","experience":682,"logins":106,"wealth":68647362,"classify":"词人","score":51},{"id":10020,"username":"user-20","sex":"男","city":"城市-20","sign":"签名-20","experience":770,"logins":24,"wealth":92420248,"classify":"诗人","score":87},{"id":10021,"username":"user-21","sex":"男","city":"城市-21","sign":"签名-21","experience":184,"logins":131,"wealth":71566045,"classify":"词人","score":99},{"id":10022,"username":"user-22","sex":"男","city":"城市-22","sign":"签名-22","experience":739,"logins":152,"wealth":60907929,"classify":"作家","score":18},{"id":10023,"username":"user-23","sex":"女","city":"城市-23","sign":"签名-23","experience":127,"logins":82,"wealth":14765943,"classify":"作家","score":30},{"id":10024,"username":"user-24","sex":"女","city":"城市-24","sign":"签名-24","experience":212,"logins":133,"wealth":59011052,"classify":"词人","score":76},{"id":10025,"username":"user-25","sex":"女","city":"城市-25","sign":"签名-25","experience":938,"logins":182,"wealth":91183097,"classify":"作家","score":69},{"id":10026,"username":"user-26","sex":"男","city":"城市-26","sign":"签名-26","experience":978,"logins":7,"wealth":48008413,"classify":"作家","score":65},{"id":10027,"username":"user-27","sex":"女","city":"城市-27","sign":"签名-27","experience":371,"logins":44,"wealth":64419691,"classify":"诗人","score":60},{"id":10028,"username":"user-28","sex":"女","city":"城市-28","sign":"签名-28","experience":977,"logins":21,"wealth":75935022,"classify":"作家","score":37},{"id":10029,"username":"user-29","sex":"男","city":"城市-29","sign":"签名-29","experience":647,"logins":107,"wealth":97450636,"classify":"酱油","score":27}]} aaa["count"] = len(aaa["data"]) aaa["data"] = aaa["data"][(page-1)*10: (page-1)*10 + limit] import json rst = make_response(json.dumps(aaa)) rst.headers['Access-Control-Allow-Origin'] = '*' return rstif __name__ == '__main__': app.run()<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></code></pre><h5 id="前端代码"><a href="#前端代码" class="headerlink" title="前端代码"></a>前端代码</h5><pre class="line-numbers language-none"><code class="language-none"><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>layPage快速使用</title> <link rel="stylesheet" href="./layui/css/layui.css" media="all"></head><body><table id="demo" lay-filter="test"></table><div id="test1"></div><script src="./layui/layui.js"></script><script> layui.use('table', function () { var table = layui.table; //第一个实例 table.render({ elem: '#demo' , height: 500 , url: 'http://127.0.0.1:5000/aaaaa' //数据接口 , page: true //开启分页 , limit: 10 //数据总数，从服务端得到 , loading: false , LAY_CHECKED: true , cols: [[ //表头 {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'} , {field: 'username', title: '用户名', width: 80} , {field: 'sex', title: '性别', width: 80, sort: true} , {field: 'city', title: '城市', width: 80} , {field: 'sign', title: '签名', width: 177} , {field: 'experience', title: '积分', width: 80, sort: true} , {field: 'score', title: '评分', width: 80, sort: true} , {field: 'classify', title: '职业', width: 80} , {field: 'wealth', title: '财富', width: 135, sort: true} ]] }); });</script></body></html><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><h6 id="结果图：-3"><a href="#结果图：-3" class="headerlink" title="结果图："></a>结果图：</h6><p><img src="https://upload-images.jianshu.io/upload_images/13183513-b95e4c6cabef7bd9.png"><br>分页表格示例</p><h3 id="文件上传"><a href="#文件上传" class="headerlink" title="文件上传"></a>文件上传</h3><p>支持异步上传，无需与其他表单共存<br>参考：<a href="https://links.jianshu.com/go?to=https://www.layui.com/doc/modules/upload.html">https://www.layui.com/doc/modules/upload.html</a></p><h3 id="树形图"><a href="#树形图" class="headerlink" title="树形图"></a>树形图</h3><h5 id="图片示例："><a href="#图片示例：" class="headerlink" title="图片示例："></a>图片示例：</h5><p><img src="https://upload-images.jianshu.io/upload_images/13183513-6fdb0e3640c228a4.png"><br>树形图示例</p><p>参考：<a href="https://links.jianshu.com/go?to=https://www.layui.com/doc/modules/tree.html">https://www.layui.com/doc/modules/tree.html</a></p><h3 id="颜色选择器"><a href="#颜色选择器" class="headerlink" title="颜色选择器"></a>颜色选择器</h3><h5 id="图片示例：-1"><a href="#图片示例：-1" class="headerlink" title="图片示例："></a>图片示例：</h5><p><img src="https://upload-images.jianshu.io/upload_images/13183513-8b97841c2ad477a9.png"><br>颜色选择器示例</p><p>参考：<a href="https://links.jianshu.com/go?to=https://www.layui.com/doc/modules/colorpicker.html">https://www.layui.com/doc/modules/colorpicker.html</a></p><h3 id="分页导航栏"><a href="#分页导航栏" class="headerlink" title="分页导航栏"></a>分页导航栏</h3><h5 id="图片示例：-2"><a href="#图片示例：-2" class="headerlink" title="图片示例："></a>图片示例：</h5><p><img src="https://upload-images.jianshu.io/upload_images/13183513-2cfd7d882ed304d3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/297/format/webp"><br>分页导航栏示例</p><p>参考：<a href="https://links.jianshu.com/go?to=https://www.layui.com/doc/modules/element.html">https://www.layui.com/doc/modules/element.html</a></p><h3 id="评分组件"><a href="#评分组件" class="headerlink" title="评分组件"></a>评分组件</h3><p>举例：</p><pre class="line-numbers language-none"><code class="language-none"><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>评分使用</title> <link rel="stylesheet" href="./layui/css/layui.css" media="all"></head><body><div id="test1"></div></body><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script src="./layui/layui.js"></script><script> layui.use('rate', function () { var rate = layui.rate; var ins1 = rate.render({ elem: '#test1', //绑定元素 value: 3, // 默认三颗星 choose: function (value) { console.log(value); // 点击输出评分 } }); });</script></html><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></code></pre><h6 id="结果图：-4"><a href="#结果图：-4" class="headerlink" title="结果图："></a>结果图：</h6><p><img src="https://upload-images.jianshu.io/upload_images/13183513-bf5180ced23466b3.png"><br>评分组件示例</p><p>参考：<a href="https://links.jianshu.com/go?to=https://www.layui.com/doc/modules/rate.html">https://www.layui.com/doc/modules/rate.html</a></p><h3 id="工具集"><a href="#工具集" class="headerlink" title="工具集"></a>工具集</h3><h5 id="固定块"><a href="#固定块" class="headerlink" title="固定块"></a>固定块</h5><p>可以固定一个图框在网页的某个位置（有点像IPhone里固定在屏幕的灰色圈圈），点击后实现某个功能，举例：</p><pre class="line-numbers language-none"><code class="language-none"><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>固定块使用</title> <link rel="stylesheet" href="./layui/css/layui.css" media="all"></head><body></body><script src="./layui/layui.js"></script><script> layui.use('util', function () { var util = layui.util; util.fixbar({ bar1: true , css: {left: 0, top: 300} , click: function (type) { console.log(type); if (type === 'bar1') { alert('点击了bar1') } } }); });</script></html><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></code></pre><h6 id="结果图：-5"><a href="#结果图：-5" class="headerlink" title="结果图："></a>结果图：</h6><p><img src="https://upload-images.jianshu.io/upload_images/13183513-541e00312439135c.png"><br>固定块示例</p><h5 id="更多参考文档：https-www-layui-com-doc-modules-util-html"><a href="#更多参考文档：https-www-layui-com-doc-modules-util-html" class="headerlink" title="更多参考文档：https://www.layui.com/doc/modules/util.html"></a>更多参考文档：<a href="https://links.jianshu.com/go?to=https://www.layui.com/doc/modules/util.html">https://www.layui.com/doc/modules/util.html</a></h5><h3 id="代码块"><a href="#代码块" class="headerlink" title="代码块"></a>代码块</h3><p>即让代码显示出来，举例：</p><pre class="line-numbers language-none"><code class="language-none"><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>代码块使用</title> <link rel="stylesheet" href="./layui/css/layui.css" media="all"></head><body><div id="test1" class="layui-code">print("hello world!")<br> exit()</div></body><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script src="./layui/layui.js"></script><script> layui.use('code', function () { //加载code模块 layui.code(); //引用code方法 });</script></html><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></code></pre><h5 id="结果图：-6"><a href="#结果图：-6" class="headerlink" title="结果图："></a>结果图：</h5><p><img src="https://upload-images.jianshu.io/upload_images/13183513-87fad6f14689c8ee.png"><br>代码块示例</p><h3 id="轮播图"><a href="#轮播图" class="headerlink" title="轮播图"></a>轮播图</h3><p>举例：</p><pre class="line-numbers language-none"><code class="language-none"><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>轮播图使用</title> <link rel="stylesheet" href="./layui/css/layui.css" media="all"></head><body><div class="layui-carousel" id="test1"> <div carousel-item> <div style="background: red;">条目1</div> <div style="background: green;">条目2</div> <div style="background: blue;">条目3</div> <div style="background: yellow;">条目4</div> <div style="background: purple;">条目5</div> </div></div></body><script src="./layui/layui.js"></script><script> layui.use('carousel', function () { var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#test1' , width: '100%' //设置容器宽度 , arrow: 'always' //始终显示箭头 }); });</script></html><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></code></pre><h5 id="结果图：-7"><a href="#结果图：-7" class="headerlink" title="结果图："></a>结果图：</h5><p><img src="https://upload-images.jianshu.io/upload_images/13183513-13d380d7755fce40.png"><br>轮播图示例</p><h3 id="Layui踩坑记录"><a href="#Layui踩坑记录" class="headerlink" title="Layui踩坑记录"></a>Layui踩坑记录</h3><h5 id="使用弹层时第一次的效果不对，之后又没问题"><a href="#使用弹层时第一次的效果不对，之后又没问题" class="headerlink" title="使用弹层时第一次的效果不对，之后又没问题"></a>使用弹层时第一次的效果不对，之后又没问题</h5><p>原因：第一次执行时资源没有加载完毕<br>解决办法：把弹层功能放在<code>layer.ready</code>中执行，举例：</p><pre class="line-numbers language-none"><code class="language-none">layui.use('layer', function () { let layer = layui.layer; layer.ready(function () { // 将内容放在ready方法里 layer.msg("测试", { time: 0, area: ['300px', '150px'], shade: [0.6, '#000', true], icon: 7, shadeClose: true, btn: ['关闭'] }); })});<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></code></pre><p>原链接：<br><a href="https://www.jianshu.com/p/4444e701c587">https://www.jianshu.com/p/4444e701c587</a></p>]]></content>
<categories>
<category> Layui </category>
</categories>
<tags>
<tag> Layui </tag>
</tags>
</entry>
<entry>
<title>使用:before伪类实现自定义li标签前面的图标</title>
<link href="/posts/e4ac4193.html"/>
<url>/posts/e4ac4193.html</url>
<content type="html"><![CDATA[<p>HTML提供了两种类型的列表，顺序列表(ol)和无序列表(ul)。这两种标签默认情况下都会在列表项开头显示数字或者图标，用于使得列表项看起来更有序。但是默认提供的图标过于单调平淡，有时候并不能满足我们的需求，我们需要美化或者替换原始的图标。如何实现呢，本文使用CSS伪类实现了定制化列表项图标，示例如下：</p><p>CSS代码如下：</p><pre class="line-numbers language-none"><code class="language-none"> body { font-size: 0.8em; font-family: "Helvetica Neue", Helvetica, sans-serif; margin: 50px;}.custom-list { margin: 0; padding: 0; list-style-type: none;}.custom-list li { counter-increment: step-counter; margin-bottom: 10px;}.custom-list li::before { content: counter(step-counter); margin-right: 5px; font-size: 80%; font-weight:bolder; background-color: #5cb85c; color: white; font-weight: bold; padding: 3px 8px; border-radius: 3px;}.image-list li::before{ font-size: 70%; color:#000; background-color:transparent; background-size:cover; background-image:url(https://axxys.wpengine.com/wp-content/uploads/2016/03/Cloud.png); padding-top: 7px; padding-left: 13px;}<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></code></pre><p>HTML代码</p><pre class="line-numbers language-none"><code class="language-none"><h3>背景色图标示例</h3><ol class="custom-list"> <li>人活着真累...</li> <li>当你决定孤军奋战对抗世界的时候...</li> <li>你得到了你要的那个结果也不代表你赢了...</li> <li>你能证明全世界都错了，但你对了,那就去吧...</li> <li>人生不设限...</li></ol><br/><h3>图片图标示例</h3><ul class="custom-list image-list"> <li>人活着真累...</li> <li>当你决定孤军奋战对抗世界的时候...</li> <li>你得到了你要的那个结果也不代表你赢了...</li> <li>你能证明全世界都错了，但你对了,那就去吧...</li> <li>人生不设限...</li></ul><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><p>效果截图如下：<br><img src="https://www.bootschool.net/upload/2019/07/0gurmugf0sg96qnktudb2iidk8.jpg" alt="before伪类实现自定义li标签图标"></p><p><em>转载</em>(<a href="https://www.bootschool.net/article/5d3a963bf60a310de45c913b/example-of-customize-li-tag-icon-using-:before-css-pseudo-classes">https://www.bootschool.net/article/5d3a963bf60a310de45c913b/example-of-customize-li-tag-icon-using-:before-css-pseudo-classes</a>)</p>]]></content>
<categories>
<category> Html </category>
</categories>
<tags>
<tag> Html </tag>
<tag> 伪类 </tag>
</tags>
</entry>
<entry>
<title>Hexo博客主题之hexo-theme-matery的介绍</title>
<link href="/posts/98795dfa.html"/>
<url>/posts/98795dfa.html</url>
<content type="html"><![CDATA[<p>这是一个采用<code>Material Design</code>和响应式设计的 Hexo 博客主题。</p><h2 id="特性"><a href="#特性" class="headerlink" title="特性"></a><a href="#%E7%89%B9%E6%80%A7" title="特性"></a>特性</h2><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><h2 id="下载"><a href="#下载" class="headerlink" title="下载"></a><a href="#%E4%B8%8B%E8%BD%BD" title="下载"></a>下载</h2><p>当你看到这里的时候，应该已经有一个自己的 <a href="https://hexo.io/zh-cn/">Hexo</a> 博客了。如果还没有的话，不妨使用 Hexo 和 <a href="https://www.appinn.com/markdown/">Markdown</a> 来写博客和文章。</p><p>点击 <a href="https://codeload.github.com/blinkfox/hexo-theme-matery/zip/master">这里</a> 下载 <code>master</code> 分支的最新稳定版的代码，解压缩后，将 <code>hexo-theme-matery</code> 的文件夹复制到你 Hexo 的 <code>themes</code> 文件夹中即可。</p><p>当然你也可以在你的 <code>themes</code> 文件夹下使用 <code>Git clone</code> 命令来下载:</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> clone https://github.com/blinkfox/hexo-theme-matery.git<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h2 id="配置"><a href="#配置" class="headerlink" title="配置"></a><a href="#%E9%85%8D%E7%BD%AE" title="配置"></a>配置</h2><h3 id="切换主题"><a href="#切换主题" class="headerlink" title="切换主题"></a><a href="#%E5%88%87%E6%8D%A2%E4%B8%BB%E9%A2%98" title="切换主题"></a>切换主题</h3><p>修改 Hexo 根目录下的 <code>_config.yml</code> 的 <code>theme</code> 的值：<code>theme: hexo-theme-matery</code></p><h4 id="config-yml-文件的其它修改建议"><a href="#config-yml-文件的其它修改建议" class="headerlink" title="_config.yml 文件的其它修改建议:"></a><a href="#config-yml-%E6%96%87%E4%BB%B6%E7%9A%84%E5%85%B6%E5%AE%83%E4%BF%AE%E6%94%B9%E5%BB%BA%E8%AE%AE" title="_config.yml 文件的其它修改建议:"></a><code>_config.yml</code> 文件的其它修改建议:</h4><ul><li>请修改 <code>_config.yml</code> 的 <code>url</code> 的值为你的网站主 <code>URL</code>（如：<code>http://xxx.github.io</code>）。</li><li>建议修改两个 <code>per_page</code> 的分页条数值为 <code>6</code> 的倍数，如：<code>12</code>、<code>18</code> 等，这样文章列表在各个屏幕下都能较好的显示。</li><li>如果你是中文用户，则建议修改 <code>language</code> 的值为 <code>zh-CN</code>。</li></ul><h3 id="新建分类-categories-页"><a href="#新建分类-categories-页" class="headerlink" title="新建分类 categories 页"></a><a href="#%E6%96%B0%E5%BB%BA%E5%88%86%E7%B1%BB-categories-%E9%A1%B5" title="新建分类 categories 页"></a>新建分类 categories 页</h3><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-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> categories<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-30 17:25:30</span><span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"categories"</span><span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"categories"</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></code></pre><h3 id="新建标签-tags-页"><a href="#新建标签-tags-页" class="headerlink" title="新建标签 tags 页"></a><a href="#%E6%96%B0%E5%BB%BA%E6%A0%87%E7%AD%BE-tags-%E9%A1%B5" title="新建标签 tags 页"></a>新建标签 tags 页</h3><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-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> tags<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-30 18:23:38</span><span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"tags"</span><span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"tags"</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></code></pre><h3 id="新建关于我-about-页"><a href="#新建关于我-about-页" class="headerlink" title="新建关于我 about 页"></a><a href="#%E6%96%B0%E5%BB%BA%E5%85%B3%E4%BA%8E%E6%88%91-about-%E9%A1%B5" title="新建关于我 about 页"></a>新建关于我 about 页</h3><p><code>about</code> 页是用来展示<strong>关于我和我的博客</strong>信息的页面，如果在你的博客 <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-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> about<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-30 17:25:30</span><span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"about"</span><span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"about"</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></code></pre><h3 id="新建友情连接-friends-页（可选的）"><a href="#新建友情连接-friends-页（可选的）" class="headerlink" title="新建友情连接 friends 页（可选的）"></a><a href="#%E6%96%B0%E5%BB%BA%E5%8F%8B%E6%83%85%E8%BF%9E%E6%8E%A5-friends-%E9%A1%B5%EF%BC%88%E5%8F%AF%E9%80%89%E7%9A%84%EF%BC%89" title="新建友情连接 friends 页（可选的）"></a>新建友情连接 friends 页（可选的）</h3><p><code>friends</code> 页是用来展示<strong>友情连接</strong>信息的页面，如果在你的博客 <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-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> friends<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-12-12 21:25:30</span><span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"friends"</span><span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"friends"</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></code></pre><p>同时，在你的博客 <code>source</code> 目录下新建 <code>_data</code> 目录，在 <code>_data</code> 目录中新建 <code>friends.json</code> 文件，文件内容如下所示：</p><pre class="line-numbers language-json" data-language="json"><code class="language-json"><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token property">"avatar"</span><span class="token operator">:</span> <span class="token string">"http://image.luokangyuan.com/1_qq_27922023.jpg"</span><span class="token punctuation">,</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"码酱"</span><span class="token punctuation">,</span> <span class="token property">"introduction"</span><span class="token operator">:</span> <span class="token string">"我不是大佬，只是在追寻大佬的脚步"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"http://luokangyuan.com/"</span><span class="token punctuation">,</span> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"前去学习"</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token property">"avatar"</span><span class="token operator">:</span> <span class="token string">"http://image.luokangyuan.com/4027734.jpeg"</span><span class="token punctuation">,</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"闪烁之狐"</span><span class="token punctuation">,</span> <span class="token property">"introduction"</span><span class="token operator">:</span> <span class="token string">"编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://blinkfox.github.io/"</span><span class="token punctuation">,</span> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"前去学习"</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token property">"avatar"</span><span class="token operator">:</span> <span class="token string">"http://image.luokangyuan.com/avatar.jpg"</span><span class="token punctuation">,</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"ja_rome"</span><span class="token punctuation">,</span> <span class="token property">"introduction"</span><span class="token operator">:</span> <span class="token string">"平凡的脚步也可以走出伟大的行程"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"ttps://me.csdn.net/jlh912008548"</span><span class="token punctuation">,</span> <span class="token property">"title"</span><span class="token operator">:</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><h3 id="代码高亮"><a href="#代码高亮" class="headerlink" title="代码高亮"></a><a href="#%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE" title="代码高亮"></a>代码高亮</h3><p>由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 <a href="https://github.com/ele828/hexo-prism-plugin">hexo-prism-plugin</a> 的 Hexo 插件来做代码高亮，安装命令如下：</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>然后，修改 Hexo 根目录下 <code>_config.yml</code> 文件中 <code>highlight.enable</code> 的值为 <code>false</code>，并新增 <code>prism</code> 插件相关的配置，主要配置如下：</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">highlight</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">false</span><span class="token key atrule">prism_plugin</span><span class="token punctuation">:</span> <span class="token key atrule">mode</span><span class="token punctuation">:</span> <span class="token string">'preprocess'</span> <span class="token comment"># realtime/preprocess</span> <span class="token key atrule">theme</span><span class="token punctuation">:</span> <span class="token string">'tomorrow'</span> <span class="token key atrule">line_number</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># default false</span> custom_css<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><h3 id="搜索"><a href="#搜索" class="headerlink" title="搜索"></a><a href="#%E6%90%9C%E7%B4%A2" title="搜索"></a>搜索</h3><p>本主题中还使用到了 <a href="https://github.com/wzpan/hexo-generator-search">hexo-generator-search</a> 的 Hexo 插件来做内容搜索，安装命令如下：</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>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">search</span><span class="token punctuation">:</span> <span class="token key atrule">path</span><span class="token punctuation">:</span> search.xml <span class="token key atrule">field</span><span class="token punctuation">:</span> post<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><h3 id="中文链接转拼音（可选的）"><a href="#中文链接转拼音（可选的）" class="headerlink" title="中文链接转拼音（可选的）"></a><a href="#%E4%B8%AD%E6%96%87%E9%93%BE%E6%8E%A5%E8%BD%AC%E6%8B%BC%E9%9F%B3%EF%BC%88%E5%8F%AF%E9%80%89%E7%9A%84%EF%BC%89" title="中文链接转拼音（可选的）"></a>中文链接转拼音（可选的）</h3><p>如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 <code>SEO</code>，且 <code>gitment</code> 评论对中文链接也不支持。我们可以用 <a href="https://github.com/viko16/hexo-permalink-pinyin">hexo-permalink-pinyin</a> Hexo 插件使在生成文章时生成中文拼音的永久链接。</p><p>安装命令如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> i hexo-permalink-pinyin --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">permalink_pinyin</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">separator</span><span class="token punctuation">:</span> <span class="token string">'-'</span> <span class="token comment"># default: '-'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><blockquote><p><strong>注</strong>：除了此插件外，<a href="https://github.com/rozbo/hexo-abbrlink">hexo-abbrlink</a> 插件也可以生成非中文的链接。</p></blockquote><h3 id="文章字数统计插件（可选的）"><a href="#文章字数统计插件（可选的）" class="headerlink" title="文章字数统计插件（可选的）"></a><a href="#%E6%96%87%E7%AB%A0%E5%AD%97%E6%95%B0%E7%BB%9F%E8%AE%A1%E6%8F%92%E4%BB%B6%EF%BC%88%E5%8F%AF%E9%80%89%E7%9A%84%EF%BC%89" title="文章字数统计插件（可选的）"></a>文章字数统计插件（可选的）</h3><p>如果你想要在文章中显示文章字数、阅读时长信息，可以安装 <a href="https://github.com/willin/hexo-wordcount">hexo-wordcount</a>插件。</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-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">wordCount</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># 将这个值设置为 true 即可.</span> <span class="token key atrule">postWordCount</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">min2read</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">totalCount</span><span class="token punctuation">:</span> <span class="token boolean important">true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="添加-RSS-订阅支持（可选的）"><a href="#添加-RSS-订阅支持（可选的）" class="headerlink" title="添加 RSS 订阅支持（可选的）"></a><a href="#%E6%B7%BB%E5%8A%A0-RSS-%E8%AE%A2%E9%98%85%E6%94%AF%E6%8C%81%EF%BC%88%E5%8F%AF%E9%80%89%E7%9A%84%EF%BC%89" title="添加 RSS 订阅支持（可选的）"></a>添加 RSS 订阅支持（可选的）</h3><p>本主题中还使用到了 <a href="https://github.com/hexojs/hexo-generator-feed">hexo-generator-feed</a> 的 Hexo 插件来做 <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>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">feed</span><span class="token punctuation">:</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> atom <span class="token key atrule">path</span><span class="token punctuation">:</span> atom.xml <span class="token key atrule">limit</span><span class="token punctuation">:</span> <span class="token number">20</span> <span class="token key atrule">hub</span><span class="token punctuation">:</span> <span class="token key atrule">content</span><span class="token punctuation">:</span> <span class="token key atrule">content_limit</span><span class="token punctuation">:</span> <span class="token number">140</span> <span class="token key atrule">content_limit_delim</span><span class="token punctuation">:</span> <span class="token string">' '</span> <span class="token key atrule">order_by</span><span class="token punctuation">:</span> <span class="token punctuation">-</span>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 && hexo g</code> 重新生成博客文件，然后在 <code>public</code> 文件夹中即可看到 <code>atom.xml</code> 文件，说明你已经安装成功了。</p><h3 id="修改页脚"><a href="#修改页脚" class="headerlink" title="修改页脚"></a><a href="#%E4%BF%AE%E6%94%B9%E9%A1%B5%E8%84%9A" title="修改页脚"></a>修改页脚</h3><p>页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 <code>/layout/_partial/footer.ejs</code> 文件中，包括站点、使用的主题、访问量等。</p><h3 id="修改社交链接"><a href="#修改社交链接" class="headerlink" title="修改社交链接"></a><a href="#%E4%BF%AE%E6%94%B9%E7%A4%BE%E4%BA%A4%E9%93%BE%E6%8E%A5" title="修改社交链接"></a>修改社交链接</h3><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"><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>https://github.com/blinkfox<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>fa 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></code></pre><p>其中，社交图标（如：<code>fa-github</code>）你可以在 <a href="https://fontawesome.com/icons">Font Awesome</a> 中搜索找到。以下是常用社交图标的标识，供你参考：</p><ul><li>Facebook: <code>fa-facebook</code></li><li>Twitter: <code>fa-twitter</code></li><li>Google-plus: <code>fa-google-plus</code></li><li>Linkedin: <code>fa-linkedin</code></li><li>Tumblr: <code>fa-tumblr</code></li><li>Medium: <code>fa-medium</code></li><li>Slack: <code>fa-slack</code></li><li>新浪微博: <code>fa-weibo</code></li><li>微信: <code>fa-wechat</code></li><li>QQ: <code>fa-qq</code></li></ul><blockquote><p><strong>注意</strong>: 本主题中使用的 <code>Font Awesome</code> 版本为 <code>4.7.0</code>。</p></blockquote><h3 id="修改打赏的二维码图片"><a href="#修改打赏的二维码图片" class="headerlink" title="修改打赏的二维码图片"></a><a href="#%E4%BF%AE%E6%94%B9%E6%89%93%E8%B5%8F%E7%9A%84%E4%BA%8C%E7%BB%B4%E7%A0%81%E5%9B%BE%E7%89%87" title="修改打赏的二维码图片"></a>修改打赏的二维码图片</h3><p>在主题文件的 <code>source/medias/reward</code> 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。</p><h3 id="配置音乐播放器（可选的）"><a href="#配置音乐播放器（可选的）" class="headerlink" title="配置音乐播放器（可选的）"></a><a href="#%E9%85%8D%E7%BD%AE%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8%EF%BC%88%E5%8F%AF%E9%80%89%E7%9A%84%EF%BC%89" title="配置音乐播放器（可选的）"></a>配置音乐播放器（可选的）</h3><p>要支持音乐播放，就必须开启音乐的播放配置和音乐数据的文件。</p><p>首先，在你的博客 <code>source</code> 目录下的 <code>_data</code> 目录（没有的话就新建一个）中新建 <code>musics.json</code> 文件，文件内容如下所示：</p><pre class="line-numbers language-json" data-language="json"><code class="language-json"><span class="token punctuation">[</span><span class="token punctuation">{</span><span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"五月雨变奏电音"</span><span class="token punctuation">,</span><span class="token property">"artist"</span><span class="token operator">:</span> <span class="token string">"AnimeVibe"</span><span class="token punctuation">,</span><span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"http://xxx.com/music1.mp3"</span><span class="token punctuation">,</span><span class="token property">"cover"</span><span class="token operator">:</span> <span class="token string">"http://xxx.com/music-cover1.png"</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Take me hand"</span><span class="token punctuation">,</span><span class="token property">"artist"</span><span class="token operator">:</span> <span class="token string">"DAISHI DANCE,Cecile Corbel"</span><span class="token punctuation">,</span><span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"/medias/music/music2.mp3"</span><span class="token punctuation">,</span><span class="token property">"cover"</span><span class="token operator">:</span> <span class="token string">"/medias/music/cover2.png"</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"Shape of You"</span><span class="token punctuation">,</span><span class="token property">"artist"</span><span class="token operator">:</span> <span class="token string">"J.Fla"</span><span class="token punctuation">,</span><span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"http://xxx.com/music3.mp3"</span><span class="token punctuation">,</span><span class="token property">"cover"</span><span class="token operator">:</span> <span class="token string">"http://xxx.com/music-cover3.png"</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></code></pre><blockquote><p><strong>注</strong>：以上 JSON 中的属性：<code>name</code>、<code>artist</code>、<code>url</code>、<code>cover</code> 分别表示音乐的名称、作者、音乐文件地址、音乐封面。<br>然后，在主题的 <code>_config.yml</code> 配置文件中激活配置即可：</p></blockquote><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token comment"># 是否在首页显示音乐.</span><span class="token key atrule">music</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">showTitle</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token key atrule">title</span><span class="token punctuation">:</span> 听听音乐 <span class="token key atrule">fixed</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># 是否开启吸底模式</span> <span class="token key atrule">autoplay</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># 是否自动播放</span> <span class="token key atrule">theme</span><span class="token punctuation">:</span> <span class="token string">'#42b983'</span> <span class="token key atrule">loop</span><span class="token punctuation">:</span> <span class="token string">'all'</span> <span class="token comment"># 音频循环播放, 可选值: 'all', 'one', 'none'</span> <span class="token key atrule">order</span><span class="token punctuation">:</span> <span class="token string">'list'</span> <span class="token comment"># 音频循环顺序, 可选值: 'list', 'random'</span> <span class="token key atrule">preload</span><span class="token punctuation">:</span> <span class="token string">'auto'</span> <span class="token comment"># 预加载，可选值: 'none', 'metadata', 'auto'</span> <span class="token key atrule">volume</span><span class="token punctuation">:</span> <span class="token number">0.7</span> <span class="token comment"># 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效</span> <span class="token key atrule">listFolded</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># 列表默认折叠</span> <span class="token key atrule">listMaxHeight</span><span class="token punctuation">:</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></code></pre><h2 id="文章-Front-matter-介绍"><a href="#文章-Front-matter-介绍" class="headerlink" title="文章 Front-matter 介绍"></a><a href="#%E6%96%87%E7%AB%A0-Front-matter-%E4%BB%8B%E7%BB%8D" title="文章 Front-matter 介绍"></a>文章 Front-matter 介绍</h2><h3 id="Front-matter-选项详解"><a href="#Front-matter-选项详解" class="headerlink" title="Front-matter 选项详解"></a><a href="#Front-matter-%E9%80%89%E9%A1%B9%E8%AF%A6%E8%A7%A3" title="Front-matter 选项详解"></a>Front-matter 选项详解</h3><p><code>Front-matter</code> 选项中的所有内容均为<strong>非必填</strong>的。但我仍然建议至少填写 <code>title</code> 和 <code>date</code> 的值。</p><table><thead><tr><th>配置选项</th><th>默认值</th><th>描述</th></tr></thead><tbody><tr><td>title</td><td><code>Markdown</code> 的文件标题</td><td>文章标题，强烈建议填写此选项</td></tr><tr><td>date</td><td>文件创建时的日期时间</td><td>发布时间，强烈建议填写此选项，且最好保证全局唯一</td></tr><tr><td>author</td><td>根 <code>_config.yml</code> 中的 <code>author</code></td><td>文章作者</td></tr><tr><td>img</td><td><code>featureImages</code> 中的某个值</td><td>文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: <code>http://xxx.com/xxx.jpg</code></td></tr><tr><td>top</td><td><code>true</code></td><td>推荐文章（文章是否置顶），如果 <code>top</code> 值为 <code>true</code>，则会作为首页推荐文章</td></tr><tr><td>cover</td><td><code>false</code></td><td><code>v1.0.2</code>版本新增，表示该文章是否需要加入到首页轮播封面中</td></tr><tr><td>coverImg</td><td>无</td><td><code>v1.0.2</code>版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片</td></tr><tr><td>password</td><td>无</td><td>文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 <code>password</code> 的值，该值必须是用 <code>SHA256</code> 加密后的密码，防止被他人识破。前提是在主题的 <code>config.yml</code> 中激活了 <code>verifyPassword</code> 选项</td></tr><tr><td>toc</td><td><code>true</code></td><td>是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 <code>config.yml</code> 中激活了 <code>toc</code> 选项</td></tr><tr><td>mathjax</td><td><code>false</code></td><td>是否开启数学公式支持 ，本文章是否开启 <code>mathjax</code>，且需要在主题的 <code>_config.yml</code> 文件中也需要开启才行</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></tbody></table><blockquote><p><strong>注意</strong>:</p><ol><li> 如果 <code>img</code> 属性不填写的话，文章特色图会根据文章标题的 <code>hashcode</code> 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图<strong>各有特色</strong>。</li><li> <code>date</code> 的值尽量保证每篇文章是唯一的，因为本主题中 <code>Gitalk</code> 和 <code>Gitment</code> 识别 <code>id</code> 是通过 <code>date</code> 的值来作为唯一标识的。</li><li> 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 <code>_config.yml</code> 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：<a href="http://tool.oschina.net/encrypt?type=2">开源中国在线工具</a>、<a href="http://encode.chahuo.com/">chahuo</a>、<a href="http://tool.chinaz.com/tools/hash.aspx">站长工具</a>。</li></ol></blockquote><p>以下为文章的 <code>Front-matter</code> 示例。</p><h3 id="最简示例"><a href="#最简示例" class="headerlink" title="最简示例"></a><a href="#%E6%9C%80%E7%AE%80%E7%A4%BA%E4%BE%8B" title="最简示例"></a>最简示例</h3><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> typora<span class="token punctuation">-</span>vue<span class="token punctuation">-</span>theme主题介绍<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-07 09:25:00</span><span class="token punctuation">---</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><h3 id="最全示例"><a href="#最全示例" class="headerlink" title="最全示例"></a><a href="#%E6%9C%80%E5%85%A8%E7%A4%BA%E4%BE%8B" title="最全示例"></a>最全示例</h3><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> typora<span class="token punctuation">-</span>vue<span class="token punctuation">-</span>theme主题介绍<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-07 09:25:00</span><span class="token key atrule">author</span><span class="token punctuation">:</span> 赵奇<span class="token key atrule">img</span><span class="token punctuation">:</span> /source/images/xxx.jpg<span class="token key atrule">top</span><span class="token punctuation">:</span> <span class="token boolean important">true</span><span class="token key atrule">cover</span><span class="token punctuation">:</span> <span class="token boolean important">true</span><span class="token key atrule">coverImg</span><span class="token punctuation">:</span> /images/1.jpg<span class="token key atrule">password</span><span class="token punctuation">:</span> 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92<span class="token key atrule">toc</span><span class="token punctuation">:</span> <span class="token boolean important">false</span><span class="token key atrule">mathjax</span><span class="token punctuation">:</span> <span class="token boolean important">false</span><span class="token key atrule">summary</span><span class="token punctuation">:</span> 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要<span class="token key atrule">categories</span><span class="token punctuation">:</span> Markdown<span class="token key atrule">tags</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> Typora <span class="token punctuation">-</span> Markdown<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></code></pre><h2 id="效果截图"><a href="#效果截图" class="headerlink" title="效果截图"></a><a href="#%E6%95%88%E6%9E%9C%E6%88%AA%E5%9B%BE" title="效果截图"></a>效果截图</h2><p><img src="https://statics.sh1a.qingstor.com/2018/12/02/matery-20181202-1.png" alt="首页"></p><p><img src="https://statics.sh1a.qingstor.com/2018/12/02/matery-20181202-2.png" alt="首页推荐文章"></p><p><img src="https://statics.sh1a.qingstor.com/2018/12/02/matery-20181202-3.png" alt="首页文章列表"></p><p><img src="https://statics.sh1a.qingstor.com/2018/12/02/matery-20181202-7.png" alt="首页文章列表"></p><p><img src="https://statics.sh1a.qingstor.com/2018/12/02/matery-20181202-8.png" alt="首页文章列表"></p><h2 id="自定制修改"><a href="#自定制修改" class="headerlink" title="自定制修改"></a><a href="#%E8%87%AA%E5%AE%9A%E5%88%B6%E4%BF%AE%E6%94%B9" title="自定制修改"></a>自定制修改</h2><p>在本主题的 <code>_config.yml</code> 中可以修改部分自定义信息，有以下几个部分：</p><ul><li>菜单</li><li>我的梦想</li><li>首页的音乐播放器和视频播放器配置</li><li>是否显示推荐文章名称和按钮配置</li><li><code>favicon</code> 和 <code>Logo</code></li><li>个人信息</li><li>TOC 目录</li><li>文章打赏信息</li><li>复制文章内容时追加版权信息</li><li>MathJax</li><li>文章字数统计、阅读时长</li><li>点击页面的’爱心’效果</li><li>我的项目</li><li>我的技能</li><li>我的相册</li></ul><p> <code>Gitalk</code>、<code>Gitment</code>、<code>Valine</code> 和 <code>disqus</code> 评论配置<br> <a href="http://busuanzi.ibruce.info/">不蒜子统计</a>和谷歌分析（<code>Google Analytics</code>）<br> 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 <code>hashcode</code> 值取余，来选择展示对应的特色图</p><p><strong>我认为个人博客应该都有自己的风格和特色</strong>。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 <code>_config.yml</code> 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：</p><h3 id="修改主题颜色"><a href="#修改主题颜色" class="headerlink" title="修改主题颜色"></a><a href="#%E4%BF%AE%E6%94%B9%E4%B8%BB%E9%A2%98%E9%A2%9C%E8%89%B2" title="修改主题颜色"></a>修改主题颜色</h3><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 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><h3 id="修改-banner-图和文章特色图"><a href="#修改-banner-图和文章特色图" class="headerlink" title="修改 banner 图和文章特色图"></a><a href="#%E4%BF%AE%E6%94%B9-banner-%E5%9B%BE%E5%92%8C%E6%96%87%E7%AB%A0%E7%89%B9%E8%89%B2%E5%9B%BE" title="修改 banner 图和文章特色图"></a>修改 banner 图和文章特色图</h3><p>你可以直接在 <code>/source/medias/banner</code> 文件夹中更换你喜欢的 <code>banner</code> 图片，主题代码中是每天动态切换一张，只需 <code>7</code> 张即可。如果你会 <code>JavaScript</code> 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，<code>banner</code> 切换的代码位置在 <code>/layout/_partial/bg-cover-content.ejs</code> 文件的 <code><script></script></code> 代码中：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.bg-cover'</span><span class="token punctuation">)</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> <span class="token operator">+</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</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 operator">+</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><h2 id="版本记录"><a href="#版本记录" class="headerlink" title="版本记录"></a><a href="#%E7%89%88%E6%9C%AC%E8%AE%B0%E5%BD%95" title="版本记录"></a>版本记录</h2><ul><li>v1.0.0<ul><li>新增了所有基础功能；</li></ul></li><li>v1.0.1<ul><li>调整 <code>css</code>、<code>js</code> 的文件请求路径在主题的<code>_config.yml</code>中配置，便于你更快捷的配置自己的 CDN；</li><li>新增代码是否折行为可配置，默认为折行；</li><li>默认激活 <code>TOC</code> 功能，并新增为某篇文章关闭 <code>TOC</code> 的 <code>Front-matter</code> 配置选项；</li><li>修复文章滚动时，高亮的目录选项不准确的问题；</li><li><code>IOS</code>下移除搜索框自动获得焦点属性，防止自动获得焦点后导致视图上移；</li></ul></li><li>v1.0.2<ul><li>升级了 <a href="https://materializecss.com/">Materialize</a> 框架版本为<code>1.0.0</code>，重构和修改了升级过程中的部分文件或问题；</li><li>新增了首页封面的全屏轮播特效，可以将更重要的文章设置到首页轮播中；</li><li>修复首页第一个按钮是中文的问题</li><li>修复了 iPhone 上点击搜索输入获取焦点的问题；</li><li>修复了 iPhone 上输入框获取焦点后页面放大的问题；</li><li>修复一些文章或 UI 显示问题；</li></ul></li></ul><p><em>文章链接来源:</em> <a href="https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/">https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/</a></p>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 博客优化 </tag>
<tag> hexo-theme-matery </tag>
</tags>
</entry>
<entry>
<title>关于给hexo博客增加音乐页面（使用Aplayer和MetingJS插件）</title>
<link href="/posts/377bce90.html"/>
<url>/posts/377bce90.html</url>
<content type="html"><![CDATA[<p>前言: 作为一个音乐发烧友，一直想在博客网站里弄一个音乐播放歌单页面，现在它来了。本文基于matery主题，利用hexo-tag-aplayer插件和MetingJS实现。</p><p>效果展示： <a href="https://kaiboshi.gitee.io/musics">kalbim 音乐台</a></p><h3 id="新建音乐页面"><a href="#新建音乐页面" class="headerlink" title="新建音乐页面"></a>新建音乐页面</h3><ol><li>在source文件下新建一个<code>musics</code>文件</li></ol><pre class="line-numbers language-none"><code class="language-none">hexo new page "musics"<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><ol><li>在该文件里新建一个<code>index.md</code>文件，其中文件内容为：</li></ol><pre class="line-numbers language-none"><code class="language-none">---title: musicstype: "musics"layout: "musics"abbrlink: musics---<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ol start="3"><li>在主题配置文件<code>_config.yml</code>下，增加音乐页面链接和标题</li></ol><pre class="line-numbers language-none"><code class="language-none">musics: url: /musics<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h3 id="新建musics-ejs文件"><a href="#新建musics-ejs文件" class="headerlink" title="新建musics.ejs文件"></a>新建musics.ejs文件</h3><p>在主题<code>layout</code>文件下新建<code>musics.ejs</code>文件， 这里在<code>musics.ejs</code>文件直接贴代码即可，根据自定义可修改歌单id等信息。源代码如下：</p><pre class="line-numbers language-none"><code class="language-none"><!-- 添加网易云我喜欢的歌曲模块 --><h4> 【欧美】过10W+评论的英文歌（珍藏版）</h4><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="6826437463" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js> <style> .aplayer{ margin: 1.5rem 0; } </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></code></pre><h3 id="在博客文章中引入播放器"><a href="#在博客文章中引入播放器" class="headerlink" title="在博客文章中引入播放器"></a>在博客文章中引入播放器</h3><p>在博客文章md文件中引入也是可以的，直接粘贴上述ejs文件代码即可。<br>效果展示: <img src="https://pic.yupoo.com/kalbim/3ee41313/f331c835.png"></p>]]></content>
<tags>
<tag> Hexo </tag>
<tag> 博客 </tag>
<tag> 博客优化 </tag>
</tags>
</entry>
<entry>
<title>音乐站</title>
<link href="/posts/tingge.html"/>
<url>/posts/tingge.html</url>
<content type="html"><![CDATA[<h2> 网易云云音乐特色榜</h2><h3 style="margin-top: 50px;"> 飙升榜</h3><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="19723756" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js> <style> .aplayer{ margin: 1.5rem 0; } </style><h3 style="margin-top: 50px;"> 新歌榜</h3><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="3779629" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js><h3 style="margin-top: 50px;"> 热歌榜</h3><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="6826437463" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js><h2> 全球媒体榜</h2><h3 style="margin-top: 50px;"> 网易云黑胶VIP爱听榜</h3><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="5453912201" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js><h3 style="margin-top: 50px;"> UK排行榜周榜</h3><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="180106" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js><h3 style="margin-top: 50px;"> 美国Billboard榜</h3><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="60198" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js> <h3 style="margin-top: 50px;"> 云音乐欧美热歌榜</h3><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="2809513713" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js><h3 style="margin-top: 50px;"> 云音乐欧美新歌榜</h3><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="2809577409" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js> <h2> 云音乐私人雷达</h2><h3 style="margin-top: 50px;"> 今天从《Unstoppable》听起|私人雷达</h3><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="3136952023" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js><h3 style="margin-top: 50px;"> 时光雷达｜回到过去 找寻曾经挚爱</h3><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="5320167908" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js><h3 style="margin-top: 50px;"> [华语私人订制] 最懂你的华语推荐</h3><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="2829883282" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js><h3 style="margin-top: 50px;"> [欧美私人订制] 最懂你的欧美推荐</h3><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayedist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayemin.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Metinmin.js"></script> <meting-js style="margin-top: 1.5rem;width: auto;height: auto" server="netease" type="playlist" id="2829816518" order= "random" theme="#ad7a86" loop="all" autoplay="false" storageName="aplayer-setting" hideLrc= "true" > </meting-js>]]></content>
</entry>
<entry>
<title>使用hexo+github搭建免费个人博客详细教程</title>
<link href="/posts/undefined.html"/>
<url>/posts/undefined.html</url>
<content type="html"><![CDATA[<h2 id="1-前言"><a href="#1-前言" class="headerlink" title="1.前言"></a>1.前言</h2><p>体验更加排版请访问原文链接：#</p><p>使用github pages服务搭建博客的好处有：</p><ol><li>全是静态文件，访问速度快；</li><li>免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；</li><li>可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；</li><li>数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；</li><li>博客内容可以轻松打包、转移、发布到其它平台；</li><li>等等；</li></ol><h3 id="1-1准备工作"><a href="#1-1准备工作" class="headerlink" title="1.1准备工作"></a>1.1准备工作</h3><p>在开始一切之前，你必须已经：</p><ul><li>有一个github账号，没有的话去注册一个；</li><li>安装了node.js、npm，并了解相关基础知识；</li><li>安装了git for windows（或者其它git客户端）</li></ul><p>本文所使用的环境：</p><ul><li>Windows8.1</li><li>node.js@5.5.0</li><li>git@1.9.2</li><li>hexo@3.2.2</li></ul><h2 id="2-搭建github博客"><a href="#2-搭建github博客" class="headerlink" title="2.搭建github博客"></a>2.搭建github博客</h2><h3 id="2-1创建仓库"><a href="#2-1创建仓库" class="headerlink" title="2.1创建仓库"></a>2.1创建仓库</h3><p>新建一个名为<code>你的用户名.github.io</code>的仓库，比如说，如果你的github用户名是test，那么你就新建<code>test.github.io</code>的仓库（必须是你的用户名，其它名称无效），将来你的网站访问地址就是 <a href="http://test.github.io/">http://test.github.io</a> 了，是不是很方便？</p><p>由此可见，每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。</p><p>几个注意的地方：</p><ol><li>注册的邮箱一定要验证，否则不会成功；</li><li>仓库名字必须是：<code>username.github.io</code>，其中<code>username</code>是你的用户名；</li><li>仓库创建成功不会立即生效，需要过一段时间，大概10-30分钟，或者更久，我的等了半个小时才生效；</li></ol><p>创建成功后，默认会在你这个仓库里生成一些示例页面，以后你的网站所有代码都是放在这个仓库里啦。</p><h3 id="2-2绑定域名"><a href="#2-2绑定域名" class="headerlink" title="2.2绑定域名"></a>2.2绑定域名</h3><p>当然，你不绑定域名肯定也是可以的，就用默认的 <code>xxx.github.io</code> 来访问，如果你想更个性一点，想拥有一个属于自己的域名，那也是OK的。</p><p>首先你要注册一个域名，域名注册以前总是推荐去<code>godaddy</code>，现在觉得其实国内的阿里云也挺不错的，价格也不贵，毕竟是大公司，放心！</p><p>绑定域名分2种情况：带www和不带www的。</p><p>域名配置最常见有2种方式，CNAME和A记录，CNAME填写域名，A记录填写IP，由于不带www方式只能采用A记录，所以必须先ping一下<code>你的用户名.github.io</code>的IP，然后到你的域名DNS设置页，将A记录指向你ping出来的IP，将CNAME指向<code>你的用户名.github.io</code>，这样可以保证无论是否添加www都可以访问，如下：</p><p><img src="http://image.liuxianan.com/201608/20160823_191336_238_8683.png"></p><p>然后到你的github项目根目录新建一个名为CNAME的文件（无后缀），里面填写你的域名，加不加www看你自己喜好，因为经测试：</p><ul><li>如果你填写的是没有www的，比如 kalbim.xyz，那么无论是访问 <a href="http://www.kalbim.xyz/">http://www.kalbim.xyz</a> 还是 <a href="http://kalbim.xyz/">http://kalbim.xyz</a> ，都会自动跳转到 <a href="http://kalbim.xyz/">http://kalbim.xyz</a></li><li>如果你填写的是带www的，比如 <a href="http://www.kalbim.xyz/">www.kalbim.xyz</a> ，那么无论是访问 <a href="http://www.kalbim.xyz/">http://www.kalbim.xyz</a> 还是 <a href="http://kalbim.xyz/">http://kalbim.xyz</a> ，都会自动跳转到 <a href="http://www.kalbim.xyz/">http://www.kalbim.xyz</a></li><li>如果你填写的是其它子域名，比如 abc.kalbim.xyz，那么访问 <a href="http://abc.kalbim.xyz/">http://abc.kalbim.xyz</a> 没问题，但是访问 <a href="http://kalbim.xyz/">http://kalbim.xyz</a> ，不会自动跳转到 <a href="http://abc.kalbim.xyz/">http://abc.kalbim.xyz</a></li></ul><p>另外说一句，在你绑定了新域名之后，原来的<code>你的用户名.github.io</code>并没有失效，而是会自动跳转到你的新域名。</p><h2 id="3-配置SSH-key"><a href="#3-配置SSH-key" class="headerlink" title="3.配置SSH key"></a>3.配置SSH key</h2><p>为什么要配置这个呢？因为你提交代码肯定要拥有你的github权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用ssh key来解决本地和服务器的连接问题。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token builtin class-name">cd</span> ~/. <span class="token function">ssh</span> <span class="token comment">#检查本机已存在的ssh密钥</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>如果提示：No such file or directory 说明你是第一次使用git。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">ssh-keygen -t rsa -C <span class="token string">"邮件地址"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录，找到<code>.ssh\id_rsa.pub</code>文件，记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key: </p><p><img src="http://image.liuxianan.com/201608/20160818_143914_495_9084.png"></p><p>将刚复制的内容粘贴到key那里，title随便填，保存。</p><h3 id="3-1测试是否成功"><a href="#3-1测试是否成功" class="headerlink" title="3.1测试是否成功"></a>3.1测试是否成功</h3><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">ssh</span> -T git@github.com <span class="token comment"># 注意邮箱地址不用改</span>``<span class="token variable"><span class="token variable">`</span> 如果提示<span class="token variable">`</span></span>Are you sure you want to <span class="token builtin class-name">continue</span> connecting <span class="token punctuation">(</span>yes/no<span class="token punctuation">)</span>?<span class="token variable"><span class="token variable">`</span>，输入yes，然后会看到：<span class="token operator">></span> Hi liuxianan<span class="token punctuation">\</span><span class="token operator">!</span> You've successfully authenticated, but GitHub does not provide shell access.看到这个信息说明SSH已配置成功！此时你还需要配置：<span class="token variable">`</span></span>``bash<span class="token function">git</span> config --global user.name <span class="token string">"liuxianan"</span>// 你的github用户名，非昵称<span class="token function">git</span> config --global user.email <span class="token string">"xxx@qq.com"</span>// 填写你的github注册邮箱<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></code></pre><p>具体这个配置是干嘛的我没仔细深究。 </p><h2 id="4-使用hexo写博客"><a href="#4-使用hexo写博客" class="headerlink" title="4.使用hexo写博客"></a>4.使用hexo写博客</h2><h3 id="4-1hexo简介"><a href="#4-1hexo简介" class="headerlink" title="4.1hexo简介"></a>4.1hexo简介</h3><p>Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具，支持Markdown格式，有众多优秀插件和主题。</p><p>官网： <a href="http://hexo.io/">http://hexo.io</a> github: <a href="https://github.com/hexojs/hexo">https://github.com/hexojs/hexo</a></p><h3 id="4-2原理"><a href="#4-2原理" class="headerlink" title="4.2原理"></a>4.2原理</h3><p>由于github pages存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，相信谁都会疯掉，所以hexo所做的就是将这些md文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到github。</p><h3 id="4-3注意事项"><a href="#4-3注意事项" class="headerlink" title="4.3注意事项"></a>4.3注意事项</h3><p>安装之前先来说几个注意事项：</p><ol><li>很多命令既可以用Windows的cmd来完成，也可以使用git bash来完成，但是部分命令会有一些问题，为避免不必要的问题，建议全部使用git bash来执行；</li><li>hexo不同版本差别比较大，网上很多文章的配置信息都是基于2.x的，所以注意不要被误导；</li><li>hexo有2种<code>_config.yml</code>文件，一个是根目录下的全局的<code>_config.yml</code>，一个是各个<code>theme</code>下的；</li></ol><h3 id="4-4安装"><a href="#4-4安装" class="headerlink" title="4.4安装"></a>4.4安装</h3><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<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h3 id="4-5初始化"><a href="#4-5初始化" class="headerlink" title="4.5初始化"></a>4.5初始化</h3><p>在电脑的某个地方新建一个名为hexo的文件夹（名字可以随便取），比如我的是<code>F:\Workspaces\hexo</code>，由于这个文件夹将来就作为你存放代码的地方，所以最好不要随便放。</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token builtin class-name">cd</span> /f/Workspaces/hexo/hexo init<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>hexo会自动下载一些文件到这个目录，包括node_modules，目录结构如下图：</p><p><img src="http://image.liuxianan.com/201608/20160818_115922_773_1148.png"></p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo g <span class="token comment"># 生成</span>hexo s <span class="token comment"># 启动服务</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>执行以上命令之后，hexo就会在public文件夹生成相关html文件，这些文件将来都是要提交到github去的：</p><p><img src="http://image.liuxianan.com/201608/20160818_120700_028_2426.png"></p><p><code>hexo s</code>是开启本地预览服务，打开浏览器访问 <a href="http://localhost:4000/">http://localhost:4000</a> 即可看到内容，很多人会碰到浏览器一直在转圈但是就是加载不出来的问题，一般情况下是因为端口占用的缘故，因为4000这个端口太常见了，解决端口冲突问题请参考这篇文章：</p><p><a href="http://blog.liuxianan.com/windows-port-bind.html">http://blog.liuxianan.com/windows-port-bind.html</a></p><p>第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章，默认的主题比较丑，打开时就是这个样子：</p><p><img src="http://image.liuxianan.com/201608/20160818_132443_202_6848.png"></p><h3 id="4-6修改主题"><a href="#4-6修改主题" class="headerlink" title="4.6修改主题"></a>4.6修改主题</h3><p>既然默认主题很丑，那我们别的不做，首先来替换一个好看点的主题。这是 <a href="https://hexo.io/themes/">官方主题</a>。</p><p>个人比较喜欢的2个主题：<a href="https://github.com/pinggod/hexo-theme-jekyll">hexo-theme-jekyll</a> 和 <a href="https://github.com/litten/hexo-theme-yilia">hexo-theme-yilia</a>。</p><p>首先下载这个主题：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token builtin class-name">cd</span> /f/Workspaces/hexo/<span class="token function">git</span> clone https://github.com/litten/hexo-theme-yilia.git themes/yilia<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p>下载后的主题都在这里：</p><p><img src="http://image.liuxianan.com/201608/20160818_134500_245_0912.png"></p><p>修改<code>_config.yml</code>中的<code>theme: landscape</code>改为<code>theme: yilia</code>，然后重新执行<code>hexo g</code>来重新生成。</p><p>如果出现一些莫名其妙的问题，可以先执行<code>hexo clean</code>来清理一下public的内容，然后再来重新生成和发布。</p><h3 id="4-7上传之前"><a href="#4-7上传之前" class="headerlink" title="4.7上传之前"></a>4.7上传之前</h3><p>在上传代码到github之前，一定要记得先把你以前所有代码下载下来（虽然github有版本管理，但备份一下总是好的），因为从hexo提交代码时会把你以前的所有代码都删掉。</p><h3 id="4-8上传到github"><a href="#4-8上传到github" class="headerlink" title="4.8上传到github"></a>4.8上传到github</h3><p>如果你一切都配置好了，发布上传很容易，一句<code>hexo d</code>就搞定，当然关键还是你要把所有东西配置好。</p><p>首先，<code>ssh key</code>肯定要配置好。</p><p>其次，配置<code>_config.yml</code>中有关deploy的部分：</p><p>正确写法：</p><pre class="line-numbers language-none"><code class="language-none">deploy: type: git repository: git@github.com:liuxianan/liuxianan.github.io.git branch: master<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-none"><code class="language-none">deploy: type: github repository: https://github.com/liuxianan/liuxianan.github.io.git branch: master<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>后面一种写法是hexo2.x的写法，现在已经不行了，无论是哪种写法，此时直接执行<code>hexo d</code>的话一般会报如下错误：</p><pre class="line-numbers language-none"><code class="language-none">Deployer not found: github 或者 Deployer not found: git<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>原因是还需要安装一个插件：</p><pre class="line-numbers language-none"><code class="language-none">npm install hexo-deployer-git --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>其它命令不确定，部署这个命令一定要用git bash，否则会提示<code>Permission denied (publickey).</code></p><p>打开你的git bash，输入<code>hexo d</code>就会将本次有改动的代码全部提交，没有改动的不会：</p><p><img src="http://image.liuxianan.com/201608/20160818_140441_769_5024.png"></p><h3 id="4-9保留CNAME、README-md等文件"><a href="#4-9保留CNAME、README-md等文件" class="headerlink" title="4.9保留CNAME、README.md等文件"></a>4.9保留CNAME、README.md等文件</h3><p>提交之后网页上一看，发现以前其它代码都没了，此时不要慌，一些非md文件可以把他们放到source文件夹下，这里的所有文件都会原样复制（除了md文件）到public目录的：</p><p><img src="http://image.liuxianan.com/201608/20160818_141037_580_8035.png"></p><p>由于hexo默认会把所有md文件都转换成html，包括README.md，所有需要每次生成之后、上传之前，手动将README.md复制到public目录，并删除README.html。</p><h3 id="4-10常用hexo命令"><a href="#4-10常用hexo命令" class="headerlink" title="4.10常用hexo命令"></a>4.10常用hexo命令</h3><p>常见命令</p><pre class="line-numbers language-none"><code class="language-none">hexo new "postName" #新建文章hexo new page "pageName" #新建页面hexo generate #生成静态页面至public目录hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）hexo deploy #部署到GitHubhexo help # 查看帮助hexo version #查看Hexo的版本<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><p>缩写：</p><pre class="line-numbers language-none"><code class="language-none">hexo n == hexo newhexo g == hexo generatehexo s == hexo serverhexo d == hexo deploy<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-none"><code class="language-none">hexo s -g #生成并本地预览hexo d -g #生成并上传<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><h3 id="4-11-config-yml"><a href="#4-11-config-yml" class="headerlink" title="4.11_config.yml"></a>4.11_config.yml</h3><p>这里面都是一些全局配置，每个参数的意思都比较简单明了，所以就不作详细介绍了。</p><p>需要特别注意的地方是，冒号后面必须有一个空格，否则可能会出问题。</p><h3 id="4-12写博客"><a href="#4-12写博客" class="headerlink" title="4.12写博客"></a>4.12写博客</h3><p>定位到我们的hexo根目录，执行命令：</p><pre class="line-numbers language-none"><code class="language-none">hexo new 'my-first-blog'<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>hexo会帮我们在<code>_posts</code>下生成相关md文件：</p><p><img src="http://image.liuxianan.com/201608/20160823_183047_352_1475.png"></p><p>我们只需要打开这个文件就可以开始写博客了，默认生成如下内容：</p><p><img src="http://image.liuxianan.com/201608/20160823_183325_470_9306.png"></p><p>当然你也可以直接自己新建md文件，用这个命令的好处是帮我们自动生成了时间。</p><p>一般完整格式如下：</p><pre class="line-numbers language-markdown" data-language="markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span><span class="token font-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> postName <span class="token comment">#文章页面上的显示名称，一般是中文</span><span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2013-12-02 15:30:16</span> <span class="token comment">#文章生成时间，一般不改，当然也可以任意修改</span><span class="token key atrule">categories</span><span class="token punctuation">:</span> 默认分类 <span class="token comment">#分类</span><span class="token key atrule">tags</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>tag1<span class="token punctuation">,</span>tag2<span class="token punctuation">,</span>tag3<span class="token punctuation">]</span> <span class="token comment">#文章标签，可空，多标签请用格式，注意:后面有个空格</span><span class="token key atrule">description</span><span class="token punctuation">:</span> 附加一段文章摘要，字数最好在140字以内，会出现在meta的description里面</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></span><span></span><span></span><span></span></span></code></pre><p>那么<code>hexo new page 'postName'</code>命令和<code>hexo new 'postName'</code>有什么区别呢？</p><pre class="line-numbers language-none"><code class="language-none">hexo new page "my-second-blog"<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>生成如下：</p><p><img src="http://image.liuxianan.com/201608/20160823_184852_854_6502.png"></p><p>最终部署时生成：<code>hexo\public\my-second-blog\index.html</code>，但是它不会作为文章出现在博文目录。</p><h4 id="4-12-1写博客工具"><a href="#4-12-1写博客工具" class="headerlink" title="4.12.1写博客工具"></a>4.12.1写博客工具</h4><p>那么用什么工具写博客呢？这个我还没去找，以前自己使用editor.md简单弄了个，大家有好用的hexo写博客工具可以推荐个。</p><h4 id="4-12-2如何让博文列表不显示全部内容"><a href="#4-12-2如何让博文列表不显示全部内容" class="headerlink" title="4.12.2如何让博文列表不显示全部内容"></a>4.12.2如何让博文列表不显示全部内容</h4><p>默认情况下，生成的博文目录会显示全部的文章内容，如何设置文章摘要的长度呢？</p><p>答案是在合适的位置加上<code><!--more--></code>即可，例如：</p><pre class="line-numbers language-markdown" data-language="markdown"><code class="language-markdown"><span class="token title important"><span class="token punctuation">#</span> 前言</span>使用github pages服务搭建博客的好处有：<span class="token list punctuation">1.</span> 全是静态文件，访问速度快；<span class="token list punctuation">2.</span> 免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；<span class="token list punctuation">3.</span> 可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；<span class="token comment"><!--more--></span><span class="token list punctuation">4.</span> 数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；<span class="token list punctuation">5.</span> 博客内容可以轻松打包、转移、发布到其它平台；<span class="token list punctuation">6.</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></code></pre><p>最终效果：</p><p><img src="http://image.liuxianan.com/201608/20160823_184633_653_1893.png"> </p><h2 id="5-最终效果"><a href="#5-最终效果" class="headerlink" title="5.最终效果"></a>5.最终效果</h2><p>可以访问我的git博客来查看效果： <a href="http://kalbim.xyz/">http://kalbim.xyz</a></p><p>不过呢，其实这个博客我只是拿来玩一玩的，没打算真的把它当博客，因为我已经有一个自己的博客了，哈哈！正因如此，本文仅限入门学习，关于hexo搭建个人博客的更高级玩法大家可以另找教程。</p><h2 id="6-参考"><a href="#6-参考" class="headerlink" title="6.参考"></a>6.参考</h2><p><a href="http://www.cnblogs.com/zhcncn/p/4097881.html">http://www.cnblogs.com/zhcncn/p/4097881.html</a></p><p><a href="http://www.jianshu.com/p/05289a4bc8b2">http://www.jianshu.com/p/05289a4bc8b2</a></p>]]></content>
<tags>
<tag> Hexo </tag>
<tag> 博客 </tag>
<tag> Github </tag>
</tags>
</entry>
<entry>
<title>Github文件下载慢的完美解决方案</title>
<link href="/posts/6d28dd00.html"/>
<url>/posts/6d28dd00.html</url>
<content type="html"><![CDATA[<p>暂时空</p>]]></content>
<categories>
<category> Github </category>
</categories>
<tags>
<tag> Github </tag>
</tags>
</entry>
<entry>
<title>Node.js 安装配置</title>
<link href="/posts/daebf257.html"/>
<url>/posts/daebf257.html</url>
<content type="html"><![CDATA[<h1 id="Node-js-安装配置"><a href="#Node-js-安装配置" class="headerlink" title="Node.js 安装配置"></a>Node.js 安装配置</h1><p>本章节我们将向大家介绍在 Windows 和 Linux 上安装 Node.js 的方法。</p><p>本安装教程以 Node.js v4.4.3 LTS(长期支持版本)版本为例。</p><p>Node.js 安装包及源码下载地址为：<a href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a>。</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/download-page.jpg" alt="nodejs_download"></p><p>你可以根据不同平台系统选择你需要的 Node.js 安装包。</p><p>Node.js 历史版本下载地址：<a href="https://nodejs.org/dist/">https://nodejs.org/dist/</a></p><p><strong>注意：</strong>Linux 上安装 Node.js 需要安装 Python 2.6 或 2.7 ，不建议安装 Python 3.0 以上版本。</p><hr><h2 id="Windows-上安装-Node-js"><a href="#Windows-上安装-Node-js" class="headerlink" title="Windows 上安装 Node.js"></a>Windows 上安装 Node.js</h2><p>你可以采用以下两种方式来安装。</p><h3 id="1、Windows-安装包-msi"><a href="#1、Windows-安装包-msi" class="headerlink" title="1、Windows 安装包(.msi)"></a>1、Windows 安装包(.msi)</h3><p><img src="https://www.runoob.com/wp-content/uploads/2014/03/4530AA77-2208-47FA-A900-91C93AEC95AF.jpg"></p><p>本文实例以 v0.10.26 版本为例，其他版本类似， 安装步骤：</p><p>步骤 1 : 双击下载后的安装包 <strong>v0.10.26</strong>，如下所示：</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/install-node-msi-version-on-windows-step1.png" alt="install-node-msi-version-on-windows-step1"></p><p>步骤 2 : 点击以上的Run(运行)，将出现如下界面：</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/install-node-msi-version-on-windows-step2.png" alt="install-node-msi-version-on-windows-step2"></p><p>步骤 3 : 勾选接受协议选项，点击 next（下一步） 按钮 :</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/install-node-msi-version-on-windows-step3.png" alt="install-node-msi-version-on-windows-step3"></p><p>步骤 4 : Node.js默认安装目录为 “C:\Program Files\nodejs\“ , 你可以修改目录，并点击 next（下一步）：</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/install-node-msi-version-on-windows-step4.png" alt="install-node-msi-version-on-windows-step4"></p><p>步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步）</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/install-node-msi-version-on-windows-step5.png" alt="install-node-msi-version-on-windows-step5"></p><p>步骤 6 :点击 Install（安装） 开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）：</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/install-node-msi-version-on-windows-step6.png" alt="install-node-msi-version-on-windows-step6"></p><p>安装过程：</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/install-node-msi-version-on-windows-step7.png" alt="install-node-msi-version-on-windows-step7"></p><p>点击 Finish（完成）按钮退出安装向导。</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/install-node-msi-version-on-windows-step8.png" alt="install-node-msi-version-on-windows-step8"></p><p>检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入”cmd” => 输入命令”path”，输出如下结果：</p><p>PATH=C:\oraclexe\app\oracle\product\10.2.0\server\bin;C:\Windows\system32;<br>C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;<br>c:\python32\python;C:\MinGW\bin;C:\Program Files\GTK2-Runtime\lib;<br>C:\Program Files\MySQL\MySQL Server 5.5\bin;C:\Program Files\nodejs\;<br>C:\Users\rg\AppData\Roaming\npm</p><p>我们可以看到环境变量中已经包含了C:\Program Files\nodejs\</p><p>检查Node.js版本</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/node-version-test.png" alt="node-version-test"></p><h3 id="2、Windows-二进制文件-exe-安装"><a href="#2、Windows-二进制文件-exe-安装" class="headerlink" title="2、Windows 二进制文件 (.exe)安装"></a>2、Windows 二进制文件 (.exe)安装</h3><p>32 位安装包下载地址 : <a href="http://nodejs.org/dist/v0.10.26/node.exe">http://nodejs.org/dist/v0.10.26/node.exe</a></p><p>64 位安装包下载地址 : <a href="http://nodejs.org/dist/v0.10.26/x64/node.exe">http://nodejs.org/dist/v0.10.26/x64/node.exe</a></p><p><strong>安装步骤</strong></p><p>步骤 1 : 双击下载的安装包 Node.exe ，将出现如下界面 :</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/install-node-exe-on-windows-step1.png" alt="install-node-exe-on-windows-step1"></p><p>点击 Run（运行）按钮将出现命令行窗口：</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/install-node-exe-on-windows-step21.png" alt="install-node-exe-on-windows-step21"></p><h3 id="版本测试"><a href="#版本测试" class="headerlink" title="版本测试"></a>版本测试</h3><p>进入 node.exe 所在的目录，如下所示：</p><p><img src="//www.runoob.com/wp-content/uploads/2014/03/node-version.png" alt="node-version"></p><p>如果你获得以上输出结果，说明你已经成功安装了Node.js。</p><hr><h2 id="Linux-上安装-Node-js"><a href="#Linux-上安装-Node-js" class="headerlink" title="Linux 上安装 Node.js"></a>Linux 上安装 Node.js</h2><h3 id="直接使用已编译好的包"><a href="#直接使用已编译好的包" class="headerlink" title="直接使用已编译好的包"></a>直接使用已编译好的包</h3><p>Node 官网已经把 linux 下载版本更改为已编译好的版本了，我们可以直接下载解压后使用：</p><p># wget <a href="https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz">https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz</a> // 下载<br> tar xf node-v10.9.0-linux-x64.tar.xz // 解压<br> cd node-v10.9.0-linux-x64/ // 进入解压目录<br> ./bin/node -v // 执行node命令 查看版本<br>v10.9.0</p><p>解压文件的 bin 目录底下包含了 node、npm 等命令，我们可以使用 ln 命令来设置软连接：</p><p>ln -s /usr/software/nodejs/bin/npm /usr/local/bin/<br>ln -s /usr/software/nodejs/bin/node /usr/local/bin/</p><h3 id="Ubuntu-源码安装-Node-js"><a href="#Ubuntu-源码安装-Node-js" class="headerlink" title="Ubuntu 源码安装 Node.js"></a>Ubuntu 源码安装 Node.js</h3><p>以下部分我们将介绍在 Ubuntu Linux 下使用源码安装 Node.js 。 其他的 Linux 系统，如 Centos 等类似如下安装步骤。</p><p>在 Github 上获取 Node.js 源码：</p><p>$ sudo git clone <a href="https://github.com/nodejs/node.git">https://github.com/nodejs/node.git</a><br>Cloning into ‘node’…</p><p>修改目录权限：</p><p>$ sudo chmod -R 755 node</p><p>使用 <strong>./configure</strong> 创建编译文件，并按照：</p><p>$ cd node<br>$ sudo ./configure<br>$ sudo make<br>$ sudo make install</p><p>查看 node 版本：</p><p>$ node –version<br>v0.10.25</p><h3 id="Ubuntu-apt-get命令安装"><a href="#Ubuntu-apt-get命令安装" class="headerlink" title="Ubuntu apt-get命令安装"></a>Ubuntu apt-get命令安装</h3><p>命令格式如下：</p><p>sudo apt-get install nodejs<br>sudo apt-get install npm</p><h3 id="CentOS-下源码安装-Node-js"><a href="#CentOS-下源码安装-Node-js" class="headerlink" title="CentOS 下源码安装 Node.js"></a>CentOS 下源码安装 Node.js</h3><p>1、下载源码，你需要在<a href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a>下载最新的Nodejs版本，本文以v0.10.24为例:</p><p>cd /usr/local/src/<br>wget <a href="http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz">http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz</a></p><p>2、解压源码</p><p>tar zxvf node-v0.10.24.tar.gz</p><p>3、 编译安装</p><p>cd node-v0.10.24<br>./configure –prefix=/usr/local/node/0.10.24<br>make<br>make install</p><p>4、 配置NODE_HOME，进入profile编辑环境变量</p><p>vim /etc/profile</p><p>设置 nodejs 环境变量，在 <em><strong>export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTCONTROL</strong></em> 一行的上面添加如下内容:</p><p>#set for nodejs<br>export NODE_HOME=/usr/local/node/0.10.24<br>export PATH=$NODE_HOME/bin:$PATH</p><p>:wq保存并退出，编译/etc/profile 使配置生效</p><p>source /etc/profile</p><p>验证是否安装配置成功</p><p>node -v</p><p>输出 v0.10.24 表示配置成功</p><p>npm模块安装路径</p><p>/usr/local/node/0.10.24/lib/node_modules/</p><p><strong>注：</strong>Nodejs 官网提供了编译好的 Linux 二进制包，你也可以下载下来直接应用。</p><hr><h2 id="Mac-OS-上安装"><a href="#Mac-OS-上安装" class="headerlink" title="Mac OS 上安装"></a>Mac OS 上安装</h2><p>你可以通过以下两种方式在 Mac OS 上来安装 node：</p><ul><li><p>1、在<a href="https://nodejs.org/en/download/">官方下载网站</a>下载 pkg 安装包，直接点击安装即可。</p></li><li><p>2、使用 brew 命令来安装：</p><p>brew install node</p></li></ul>]]></content>
<tags>
<tag> nodejs </tag>
</tags>
</entry>
<entry>
<title>Hexo+github如何搭建博客</title>
<link href="/posts/6f43ac77.html"/>
<url>/posts/6f43ac77.html</url>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>博客有第三方平台，也可以自建，比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、segmentFault、简书、掘金、知乎专栏、Github Page 等等。</p><p>这次我要说的就是 Github Page + Hexo 搭建个人博客的方式！Github Page 是 Github 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源，这次我们的主角就是 Hexo 了，具体的内容下面在文章内介绍。</p><h2 id="演示站：-—Kalbim—"><a href="#演示站：-—Kalbim—" class="headerlink" title="演示站： —Kalbim—"></a>演示站： —<a href="https://kaiboshi.gitee.io/">Kalbim</a>—</h2><p><img src="https://pic.yupoo.com/kalbim/aa10dbff/dacc3892.png"></p><p>博客文章链接 <a href="https://kaiboshi.gitee.io/musics/posts/ea543d5.html">备用链接</a></p><p>下面就开始吧~</p><h2 id="一、准备博客环境"><a href="#一、准备博客环境" class="headerlink" title="一、准备博客环境"></a>一、准备博客环境</h2><p>准备 node 和 git 环境，<br>首先，安装 <a href="https://nodejs.org/en/">NodeJS</a>，因为 <a href="https://hexo.io/zh-cn/">Hexo</a> 是基于 Node.js 驱动的一款博客框架,然后，安装 <a href="https://git-scm.com/">git</a>，一个分布式版本控制系统，用于项目的版本控制管理，作者是 Linux 之父。如果 Git 还不熟悉可以参考廖雪峰大神的 <a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">Git</a> 教程。</p><h3 id="1-1-Node-js的安装与配置"><a href="#1-1-Node-js的安装与配置" class="headerlink" title="1.1 Node.js的安装与配置"></a>1.1 Node.js的安装与配置</h3><blockquote><p>下载地址：<a href="https://nodejs.org/en/">https://nodejs.org/en/</a></p><p>根据你电脑系统的配置信息，下载对应的安装程序，然后开始进行下面的步骤。</p></blockquote><p>这里我推荐<a href="https://www.runoob.com/nodejs/nodejs-install-setup.html">菜鸟教程的Node.js 安装配置</a>这里面很详细！！</p><p>安装完成后呢，我们就要去验证有没有安装成功。</p><p>首先，win+R，再输入cmd，按Enter进入到我们的控制台，查看node和npm的版 本，看是否<strong>安装成功</strong>。</p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDIwMDIwOTE5MjIzNTIyMS5wbmc?x-oss-process=image/format,png"></p><p>按照上图这样输入命令后，如果结果和上图差不多的话（你们下载的版本有可能不一样），就说明已经安装成功了！</p><p>假如执行<code>node \-v</code>报错的话，那么手动将Node.js的安装路径添加到环境变量中，右击点击我的电脑 ->属性 -> 高级系统设置 -> 环境变量，在系统变量下找到名为path的变量名，如下图：</p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzE5MTEwNy5wbmc?x-oss-process=image/format"></p><p>选中path，或者双击，然后将你node.js的安装路径放在path变量值的最后面，如果添加之前path值最后有 英文的分号，则直接将路径添加进去即可，如果没有，先添加分号，然后点击保存，回到桌面，打开cmd（Win+R），执行<code>node \-v</code>，看是否成功。</p><p>接下来,由于国内镜像源速度比较慢，一般先安装<code>cnpm淘宝源</code>，选择复制下列一个命令粘到cmd执行</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 查看npm的配置</span><span class="token function">npm</span> config list<span class="token comment"># 默认源</span><span class="token function">npm</span> config <span class="token builtin class-name">set</span> registry https://registry.npmjs.org<span class="token comment"># 临时改变镜像源</span><span class="token function">npm</span> --registry<span class="token operator">=</span>https://registry.npm.taobao.org<span class="token comment"># 永久设置为淘宝镜像源</span><span class="token function">npm</span> config <span class="token builtin class-name">set</span> registry https://registry.npm.taobao.org<span class="token comment"># 另一种方式，编辑 ~/.npmrc 加入下面内容</span>registry <span class="token operator">=</span> https://registry.npm.taobao.org<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></code></pre><p>安装镜像后，输入下列指令，查看是否安装成功</p><blockquote><p>cnpm -v</p></blockquote><p> <img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDIwMDIwOTE5Mjg0NDc3MC5wbmc?x-oss-process=image/format,png"></p><h3 id="1-2-Git的安装与配置"><a href="#1-2-Git的安装与配置" class="headerlink" title="1.2 Git的安装与配置"></a>1.2 Git的安装与配置</h3><p>同样这里我还是推荐大家去<a href="https://www.runoob.com/git/git-install-setup.html">菜鸟教程Git的安装与配置</a>,下载安装后按照下面步骤进行</p><p>回到桌面，点击鼠标右键，会出现两个选项<code>Git GUI Here</code>和<code>Git Bash Here</code>，在打开Cmd(Win+R)，分别输入<code>git</code>和<code>git \--version</code>，如果出现如下图的情况，即安装成功！</p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy9naXQtMTIucG5n?x-oss-process=image/format,png"></p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy9naXQtMTMucG5n?x-oss-process=image/format,png"></p><h2 id="二、Github注册以及Github-Pages创建"><a href="#二、Github注册以及Github-Pages创建" class="headerlink" title="二、Github注册以及Github Pages创建"></a>二、Github注册以及Github Pages创建</h2><p>我推荐一个简书上面的博主写的文章<a href="https://##">Github注册以及Github Pages创建</a>,根据他的步骤完成Github的注册以及Github Pages后，让我们进入下一环节！！</p><h2 id="三、配置Git用户名和邮箱"><a href="#三、配置Git用户名和邮箱" class="headerlink" title="三、配置Git用户名和邮箱"></a>三、配置Git用户名和邮箱</h2><p>在桌面点击鼠标右键，点击<code>Git Bash Here</code>，会出现一个界面如下图所示：</p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIxNTExOC5wbmc?x-oss-process=image/format,png"></p><p>然后分别输入下面的两个命令，并回车：</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">"此处填写你注册时的用户名"</span><span class="token function">git</span> config --global user.email <span class="token string">"此处填写你注册时的邮箱"</span><span class="token comment"># 一般只要不报错，可以跳过下面寻找.gitconfig文件</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>然后找到<code>.gitconfig</code>文件，文件存放位置在<code>C:/Users/[username]/.gitconfig</code>（未找到的话，请开启显示隐藏文件的功能），用编辑器打开，看到如下图所示的内容，即配置成功！</p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMDAxNi5wbmc?x-oss-process=image/format,png"></p><h2 id="四、本地安装hexo静态博客框架以及发布到Github-Pages"><a href="#四、本地安装hexo静态博客框架以及发布到Github-Pages" class="headerlink" title="四、本地安装hexo静态博客框架以及发布到Github Pages"></a>四、本地安装hexo静态博客框架以及发布到Github Pages</h2><p>首先选择一个磁盘作为你博客文件的存放位置，然后新建一个文件夹，比如名为blogtest的文件夹，创建完后，先不要点进去，在此处点击鼠标右键，选择<code>Git Bash Here</code>，然后依次输入如下命令，：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># hexo框架的安装</span><span class="token function">npm</span> <span class="token function">install</span> -g hexo-cli<span class="token comment"># 等上一个命令完成后，在输入下面的命令</span>hexo init <span class="token operator"><</span>新建文件夹的名称<span class="token operator">></span> <span class="token comment">#初始化文件夹</span><span class="token builtin class-name">cd</span> <span class="token operator"><</span>新建文件夹的名称<span class="token operator">></span><span class="token function">npm</span> <span class="token function">install</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></code></pre><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMTEyOS5wbmc?x-oss-process=image/format,png"></p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMTE0NC5wbmc?x-oss-process=image/format,png"></p><p>等待运行完成，此时文件夹中多了许多文件。<br><strong>注意</strong>：<strong>后续的命令均需要在站点目录下（即文件夹内）使用Git Bash运行。</strong><br>此时Hexo框架的本地搭建已经完成了。我们来运行一下看看，命令行依次输入以下命令 :</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://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMTE1Ny5wbmc?x-oss-process=image/format,png"></p><p>浏览器中打开<a href="https://yafine-blog.cn/go.html?url=aHR0cDovL2xvY2FraG9zdDo0MDAw5oiW6ICFMTI3LjAuMC4xOjQwMDDvvIzlj6/ku6XnnIvliLDkuIDkuKrnvZHpobXvvIzor7TmmI5IZXhv5Y2a5a6i5bey57uP5oiQ5Yqf5Zyo5pys5Zyw6L+Q6KGM44CC">http://locakhost:4000或者127.0.0.1:4000，可以看到一个网页，说明Hexo博客已经成功在本地运行。</a></p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMTIwNi5wbmc?x-oss-process=image/format,png"></p><h3 id="1-本地博客发布到Github-Pages"><a href="#1-本地博客发布到Github-Pages" class="headerlink" title="1. 本地博客发布到Github Pages"></a>1. 本地博客发布到Github Pages</h3><p>之前的步骤中，我们已经完成了对Github账户的注册以及Github Pages的创建，接下来是将本地博客发布至Github Pages。</p><p>首先需要安装发布的插件，在站点目录下执行下面的命令，也就是创建的博客目录下：</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>紧接着，将本地目录与GitHub关联起来，输入下面的命令行：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">ssh-keygen -t rsa -C <span class="token string">"你的邮箱地址"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>输入后一直回车，然后在<code>C:/Users/[username]</code>目录下找到名为<code>.ssh</code>的文件夹， 文件夹内会有两个文件，一个<code>id_rsa.pub</code>一个<code>id_rsa</code>，用文本编辑器打开<code>id_rsa.pub</code>，复制里面的的内容。 然后打开Github，点击右上角的头像 <strong>Settings</strong> 选择<strong>SSH and GPG keys</strong></p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMjc0Ni5wbmc?x-oss-process=image/format,png"></p><p>点击<strong>New SSH key</strong> 将之前复制的内容粘帖到Key的框中。 上面的<strong>Title</strong>可以随意，点击<strong>Add SSH key</strong> 完成添加。</p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMzA0OS5wbmc?x-oss-process=image/format,png"></p><p>然后回到Git的命令行界面，测试一下是否与GitHub连接成功。输入下面的命令行：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">ssh</span> -T git@github.com<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>点击回车，然后会出现一个询问内容，输入<code>yes</code>，回车，会出现一段内容，<code>Hi ! You've successfully authenticated, but GitHub doesnot provide shell access.</code>。 说明连接成功。此处这个``应该是你Github的用户名。</p><p>进入博客站点目录，用文本编辑器打开<code>_config.yml</code>，这个<code>_config.yml</code>是博客的配置文件，在以后的博客修改，如个性化修改，博客SEO优化等都会使用到，修改如下图的几个地方：</p><pre class="line-numbers language-yml" data-language="yml"><code class="language-yml">title: 你的博客名subtitle: 博客的副标题，有些主题支持description: 博客描述keywords: 博客关键词author: 作者，在文章中显示language: 博客语言语种 timezone: 时区<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><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyNDEzOC5wbmc?x-oss-process=image/format,png"></p><p>滑到文件最底部，有一个deploy，在deploy下面添加一个repo项 ，一个branch项。填入如下代码，并如下图所示：</p><pre class="line-numbers language-yml" data-language="yml"><code class="language-yml">type: gitrepo: git@github.com:Github用户名/github用户名.github.io.git //也可使用https地址，如：https://github.com/Github用户名/Github用户名.github.io.git branch: master<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyNDE1MS5wbmc?x-oss-process=image/format,png"></p><p>最后就是生成页面，并发布至Github Pages，执行如下命令：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># Hexo会根据配置文件渲染出一套静态页面</span>hexo g<span class="token comment"># 将上一步渲染出的一系列文件上传至至Github Pages</span>hexo d<span class="token comment"># 也可以直接输入此命令，直接完成渲染和上传</span>hexo g -d<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>上传完成后，在浏览器中打开<strong>https://<用户名>.github.io</strong>，查看上传的网页。如果页面变成了之前本地调试时的样子，说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息，没有的话清除一下浏览器缓存试试。</p><p>到此，基本的个人博客搭建就完成啦，以为默认的主题不好看，所以后续我会将博客美化教程发出来。</p><p>最后，欢迎大家来我的个人博客踩踩哟！</p><p> —<a href="https://kaiboshi.gitee.io/">Kalbim</a>—</p><blockquote><p>少说些漂亮话，多做些日常平凡的事情。</p></blockquote>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> Github </tag>
</tags>
</entry>
<entry>
<title>Hexo 生成永久文章链接</title>
<link href="/posts/d6af1ab3.html"/>
<url>/posts/d6af1ab3.html</url>
<content type="html"><![CDATA[<p><img src="https://pic.yupoo.com/kalbim/593feb53/f20e2302.png"></p><p>Hexo 默认文章链接生成规则是按照年、月、日、标题来生成的。一旦文章标题或者发布时间被修改，URL 就会发生变化，之前文章地址也会变成 404，而且 URL 层级很深，不利于分享和搜索引擎收录。</p><blockquote><p>如果文章标题中有中文，URL 被转码后会很长，比如：<code> https://serverless-page-bucket-x0ly03je-1306800607.cos-website..myqcloud.com/2021/08/10/Hexo%E5%8D%9A%E5%AE%A2%E4%B8%BB%E9%A2%98%E5%AE%89%E8%A3%85%E5%92%8C%E4%BC%98%E5%8C%96%EF%BC%88%E4%BA%8C%EF%BC%89%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A6%96%E9%A1%B5/</code>。接下来介绍一个插件 <code>hexo-abbrlink</code>，该插件会为每篇生成一个唯一字符串，并不受文章标题和发布时间的影响，比如：<code>https://kaiboshi.gitee.io/p/df27ccfb.html</code>。</p></blockquote><h2 id="1-安装"><a href="#1-安装" class="headerlink" title="1.安装"></a>1.安装</h2><p>点击即可访问插件源码地址 <a href="https://github.com/rozbo/hexo-abbrlink">hexo-abbrlink</a> 。</p><pre class="line-numbers language-none"><code class="language-none">npm install hexo-abbrlink --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><blockquote><p>可能会出现依赖，依据提示安装即可。</p></blockquote><h2 id="2-配置"><a href="#2-配置" class="headerlink" title="2.配置"></a>2.配置</h2><p>修改博客根目录配置文件 <code>_config.yml</code> 的 <code>permalink</code>：</p><pre class="line-numbers language-none"><code class="language-none"># permalink: :year/:month/:day/:title/permalink: p/:abbrlink.html # p 是自定义的前缀abbrlink: alg: crc32 #算法： crc16(default) and crc32 rep: hex #进制： dec(default) and hex<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-none"><code class="language-none">crc16 & hexhttps://post.zz173.com/posts/66c8.htmlcrc16 & dechttps://post.zz173.com/posts/65535.htmlcrc32 & hexhttps://post.zz173.com/posts/8ddf18fb.htmlcrc32 & dechttps://post.zz173.com/posts/1690090958.html<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><strong>局限性</strong></p><p>[固定] crc16 的最大帖子数为 65535。（现在，如果一个 abbrlink 已经存在，它将更改另一个并一次又一次地尝试……）</p><h2 id="3-验证"><a href="#3-验证" class="headerlink" title="3.验证"></a>3.验证</h2><p>先清理下本地的文件 <code>hexo clean</code>，然后重新生成 <code>hexo g</code>，启动博客 <code>hexo s</code>。该插件会在每篇文章的开头增加内容：</p><pre class="line-numbers language-none"><code class="language-none">abbrlink: d6af1ab3<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>这个字符串就是这篇文章的唯一标识，无论修改标题还是发布文章都不会改变。浏览器打开 <code>http://localhost:4000/</code> 查看成果吧！</p><h2 id="4-出现错误"><a href="#4-出现错误" class="headerlink" title="4.出现错误"></a>4.出现错误</h2><p>要是出现undefined</p><pre class="line-numbers language-none"><code class="language-none">http://localhost:4000/posts/undefined.html<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>解决办法：<br>老文件手动添加：<br>abbrlink: d6af1ab3</p><p>新文件：</p><pre class="line-numbers language-none"><code class="language-none">hexo new "xxxx"hexo cleanhexo g<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>打开新建的xxxx.md文件front-matter会有abbrlink: d6af1ab3</p><p>更多内容欢迎访问我的博客：<a href="https://kaiboshi.gitee.io/">Kalbim</a></p>]]></content>
<tags>
<tag> Hexo </tag>
</tags>
</entry>
<entry>
<title>Hexo博客主题安装和优化（一）</title>
<link href="/posts/ccdb282f.html"/>
<url>/posts/ccdb282f.html</url>
<content type="html"><![CDATA[<p><img src="https://pic.yupoo.com/kalbim/593feb53/f20e2302.png"><br>当你看到这篇文章的时候，想必你已经搭建好了属于你的Hexo博客并且已经部署到了Coding或者GitHub上面，如果还没有的话呢，请移步去<a href="https://kaiboshi.gitee.io/">Hexo+Coding搭建博客</a>！</p><p>因为默认的Hexo主题实在太难看了，所以我们可以去<a href="https://hexo.io/themes/">Hexo主题</a>官网主题网去选择自己中意的主题，我用过_yilia_和_yeele_这2个主题，最后由于某些原因我换成了现在的主题_matery_，当然如果你对上面那2个主题感兴趣的话呢，先给2个主题的大佬链接在这里，你们可以进去看看效果，<a href="http://moxfive.xyz/">MOxFIVE</a>这个是yelee主题的，<a href="https://github.com/JoeyBling/hexo-theme-yilia-plus">Yilia-plus</a>这个是yilia-plus主题，我的博客主题应用的是_matery_的，<a href="https://kaiboshi.gitee.io/"><strong>Kalbim</strong></a>！欢迎大家去踩踩！话不多说了，开始我们今天的教程吧。<br><img src="https://pic.yupoo.com/kalbim/aa10dbff/dacc3892.png"></p><h1 id="一、Hexo博客主题安装以及优化"><a href="#一、Hexo博客主题安装以及优化" class="headerlink" title="一、Hexo博客主题安装以及优化"></a>一、Hexo博客主题安装以及优化</h1><h2 id="主题大佬博客"><a href="#主题大佬博客" class="headerlink" title="主题大佬博客"></a>主题大佬博客</h2><blockquote><p><a href="https://blinkfox.github.io/">闪烁之狐</a>(作者)</p><p><a href="https://yafine-blog.cn/">过客-砺</a></p><p><a href="https://sunhwee.com/">洪卫@博客</a></p></blockquote><h2 id="主题特性"><a href="#主题特性" class="headerlink" title="主题特性"></a>主题特性</h2><ul><li><p>简单漂亮，文章内容美观易读</p></li><li><p><a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9tYXRlcmlhbC5pby8=">Material Design</a> 设计</p></li><li><p>响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现</p></li><li><p>首页轮播文章及每天动态切换 <code>Banner</code> 图片</p></li><li><p>瀑布流式的博客文章列表（文章无特色图片时会有 <code>24</code> 张漂亮的图片代替）</p></li><li><p>时间轴式的归档页</p></li><li><p><strong>词云</strong>的标签页和<strong>雷达图</strong>的分类页</p></li><li><p>丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）</p></li><li><p>可自定义的数据的友情链接页面</p></li><li><p>支持文章置顶和文章打赏</p></li><li><p>支持 <code>MathJax</code></p></li><li><p><code>TOC</code> 目录</p></li><li><p>可设置复制文章内容时追加版权信息</p></li><li><p>可设置阅读文章时做密码验证</p></li><li><p><a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9naXRhbGsuZ2l0aHViLmlvLw==">Gitalk</a>、<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9pbXN1bi5naXRodWIuaW8vZ2l0bWVudC8=">Gitment</a>、<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly92YWxpbmUuanMub3JnLw==">Valine</a> 和 <a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9kaXNxdXMuY29tLw==">Disqus</a> 评论模块（推荐使用 <code>Gitalk</code>）</p></li><li><p>集成了<a href="https://yafine-blog.cn/go.html?url=aHR0cDovL2J1c3VhbnppLmlicnVjZS5pbmZvLw==">不蒜子统计</a>、谷歌分析（<code>Google Analytics</code>）和文章字数统计等功能</p></li><li><p>支持在首页的音乐播放和视频播放功能</p></li><li><p>支持<code>emoji</code>表情，用<code>markdown emoji</code>语法书写直接生成对应的能<strong>跳跃</strong>的表情。</p></li><li><p>支持 <a href="https://yafine-blog.cn/go.html?url=aHR0cDovL3d3dy5kYW92b2ljZS5pby8=">DaoVoice</a>、<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly93d3cudGlkaW8uY29tLw==">Tidio</a> 在线聊天功能</p><p>先给你们来几张我博客的预览图，看看效果…</p><p><img src="https://pic.yupoo.com/kalbim/aa10dbff/dacc3892.png"></p></li></ul><p> <img src="https://pic.yupoo.com/kalbim/c58fd342/a2a48350.png"></p><h2 id="1-主题下载与安装"><a href="#1-主题下载与安装" class="headerlink" title="1. 主题下载与安装"></a>1. 主题下载与安装</h2><p> 点击 <a href="https://github.com/blinkfox/hexo-theme-matery">传送门</a>下载 <code>master</code> 分支的最新版的代码，解压缩后，将 <code>hexo-theme-matery</code> 的文件夹复制到你 Hexo 的 <code>themes</code> 文件夹中即可。</p><p> 由于在GitHub里面下载文件很慢的，所以我推荐以为博主写的方法，我亲测可以实现的，前提你要去注册<a href="https://gitee.com/">码云</a>,这个博客后面优化的时候会用到，所以提前注册也好。教程在此：<a href="#">github文件下载慢的完美解决方案</a></p><p> 如果嫌麻烦的话可以直接点击<a href="https://codeload.github.com/blinkfox/hexo-theme-matery/zip/v1.0.1">下载链接</a>来下载主题！</p><h2 id="2-主题配置"><a href="#2-主题配置" class="headerlink" title="2. 主题配置"></a>2. 主题配置</h2><h3 id="2-1-切换主题"><a href="#2-1-切换主题" class="headerlink" title="2.1 切换主题"></a>2.1 切换主题</h3><blockquote><p>**注意：**首先需要明白什么是站点配置文件，什么是主题配置文件，站点配置文件就是根目录下的配置文件，比如我的博客文件在<code>F:\blog</code>下，那么站点配置文件就是<code>F:\blog\_config.yml</code>，主题配置文件就是<code>F:\blog\themes\matery\_config.yml</code>。另外注意，配置文件中的标点符号不要出现中文格式的标点符号，不然运行会出错。</p></blockquote><p> 主题下载完成后，将站点配置文件中的<code>theme</code>值修改为你们自己下载主题的文件名，我的文件名为<code>hexo-theme-matery-develop</code>，那么值就修改为<code>theme: hexo-theme-matery-develop</code>。</p><p> 一些站点配置文件的其他地方的修改：</p><ul><li>语言选择：如果为中文用户，则在<code>language:</code>后添加值<code>zh-CN</code>，如果不修改，默认为英语；</li><li>网址修改：<code>url:</code>的值为你的网址名，如<code>http://xxxx.github.io</code>，如果有域名，则修改为你的域名即可，至于有关域名的修改解析，后面我会说到，这里先不说了。</li><li>站点配置文件有个<code>per_page属性</code>，建议修改为6的倍数，这样网站在适应设备时，有较好的显示效果</li></ul><h3 id="2-2-新建标签-tags-页面"><a href="#2-2-新建标签-tags-页面" class="headerlink" title="2.2 新建标签 tags 页面"></a>2.2 新建标签 tags 页面</h3><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-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> tags<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-30 18:23:38</span><span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"tags"</span><span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"tags"</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></code></pre><h3 id="2-3-新建分类-categories-页面"><a href="#2-3-新建分类-categories-页面" class="headerlink" title="2.3 新建分类 categories 页面"></a>2.3 新建分类 categories 页面</h3><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-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> categories<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-30 17:25:30</span><span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"categories"</span><span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"categories"</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></code></pre><h3 id="2-4-新建关于我-about-页面"><a href="#2-4-新建关于我-about-页面" class="headerlink" title="2.4 新建关于我 about 页面"></a>2.4 新建关于我 about 页面</h3><p> <code>about</code> 页是用来展示<strong>关于我和我的博客</strong>信息的页面，如果在你的博客 <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-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> about<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-30 17:25:30</span><span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"about"</span><span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"about"</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></code></pre><h3 id="2-5-新建留言板-contact-页面-可选"><a href="#2-5-新建留言板-contact-页面-可选" class="headerlink" title="2.5 新建留言板 contact 页面 (可选)"></a>2.5 新建留言板 contact 页面 (可选)</h3><p> <code>contact</code> 页是用来展示<strong>留言板</strong>信息的页面，如果在你的博客 <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-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> contact<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-30 17:25:30</span><span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"contact"</span><span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"contact"</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></code></pre><blockquote><p><strong>注</strong>：本留言板功能依赖于第三方评论系统，请<strong>激活</strong>你的评论系统才有效果。并且在主题的 <code>_config.yml</code> 文件中，第 <code>19</code> 至 <code>21</code> 行的“<strong>菜单</strong>”配置，取消关于留言板的注释即可。</p></blockquote><h3 id="2-6-新建友情链接-friends-页面-可选"><a href="#2-6-新建友情链接-friends-页面-可选" class="headerlink" title="2.6 新建友情链接 friends 页面 (可选)"></a>2.6 新建友情链接 friends 页面 (可选)</h3><p><code>friends</code> 页是用来展示<strong>友情链接</strong>信息的页面，如果在你的博客 <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-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> friends<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-12-12 21:25:30</span><span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"friends"</span><span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"friends"</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></code></pre><p>同时，在你的博客 <code>source</code> 目录下新建 <code>_data</code> 目录，在 <code>_data</code> 目录中新建 <code>friends.json</code> 文件，文件内容如下所示：</p><pre class="line-numbers language-json" data-language="json"><code class="language-json"><span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token property">"avatar"</span><span class="token operator">:</span> <span class="token string">"http://image.luokangyuan.com/1_qq_27922023.jpg"</span><span class="token punctuation">,</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"码酱"</span><span class="token punctuation">,</span> <span class="token property">"introduction"</span><span class="token operator">:</span> <span class="token string">"我不是大佬，只是在追寻大佬的脚步"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"http://luokangyuan.com/"</span><span class="token punctuation">,</span> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"前去学习"</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token property">"avatar"</span><span class="token operator">:</span> <span class="token string">"http://image.luokangyuan.com/4027734.jpeg"</span><span class="token punctuation">,</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"闪烁之狐"</span><span class="token punctuation">,</span> <span class="token property">"introduction"</span><span class="token operator">:</span> <span class="token string">"编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://blinkfox.github.io/"</span><span class="token punctuation">,</span> <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"前去学习"</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token property">"avatar"</span><span class="token operator">:</span> <span class="token string">"http://image.luokangyuan.com/avatar.jpg"</span><span class="token punctuation">,</span> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"ja_rome"</span><span class="token punctuation">,</span> <span class="token property">"introduction"</span><span class="token operator">:</span> <span class="token string">"平凡的脚步也可以走出伟大的行程"</span><span class="token punctuation">,</span> <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://me.csdn.net/jlh912008548"</span><span class="token punctuation">,</span> <span class="token property">"title"</span><span class="token operator">:</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><h3 id="2-7-菜单导航配置"><a href="#2-7-菜单导航配置" class="headerlink" title="2.7 菜单导航配置"></a>2.7 菜单导航配置</h3><h4 id="2-7-1-配置基本菜单导航的名称、路径url和图标icon"><a href="#2-7-1-配置基本菜单导航的名称、路径url和图标icon" class="headerlink" title="2.7.1. 配置基本菜单导航的名称、路径url和图标icon."></a>2.7.1. 配置基本菜单导航的名称、路径url和图标icon.</h4><ol><li><pre><code>菜单导航名称可以是中文也可以是英文\(如：`Index`或`主页`\)</code></pre></li><li><pre><code>图标icon 可以在[Font Awesome](https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9mb250YXdlc29tZS5jb20vaWNvbnM=) 中查找</code></pre></li></ol><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">menu</span><span class="token punctuation">:</span> <span class="token key atrule">首页</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> / <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>home <span class="token key atrule">标签</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> /tags/hexo/ <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>tags <span class="token key atrule">档案</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> /archives <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>archive <span class="token key atrule">友情链接</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> /friends <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>address<span class="token punctuation">-</span>book <span class="token key atrule">关于</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> /about <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>user<span class="token punctuation">-</span>circle <span class="token key atrule">百宝箱</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> /box <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>tools fa<span class="token punctuation">-</span>fw <span class="token key atrule">娱乐</span><span class="token punctuation">:</span> <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>list <span class="token key atrule">children</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Musics <span class="token key atrule">url</span><span class="token punctuation">:</span> /musics <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>music <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Movies <span class="token key atrule">url</span><span class="token punctuation">:</span> /movies <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>film <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Books <span class="token key atrule">url</span><span class="token punctuation">:</span> /books <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>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></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>当然啦，这些图标呢一开始都是默认的，你可以不用修改，像我博客里面这样子</p><p><img src="https://pic.yupoo.com/kalbim/edd5e901/739ddec4.png"></p><h4 id="2-7-2-二级菜单配置方法"><a href="#2-7-2-二级菜单配置方法" class="headerlink" title="2.7.2. 二级菜单配置方法"></a>2.7.2. 二级菜单配置方法</h4><p>如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作</p><ol><li><pre><code>在需要添加二级菜单的一级菜单下添加`children`关键字\(如:`About`菜单下添加`children`\)</code></pre></li><li><pre><code>在`children`下创建二级菜单的 名称name,路径url和图标icon.</code></pre></li><li><pre><code>注意每个二级菜单模块前要加 `-`.</code></pre></li><li><pre><code>注意缩进格式</code></pre></li></ol><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">menu</span><span class="token punctuation">:</span> <span class="token key atrule">Index</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> / <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>home <span class="token key atrule">Tags</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> /tags <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>tags <span class="token key atrule">Categories</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> /categories <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>bookmark <span class="token key atrule">Archives</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> /archives <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>archive <span class="token key atrule">About</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> /about <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>user<span class="token punctuation">-</span>circle<span class="token punctuation">-</span>o <span class="token key atrule">Friends</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> /friends <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>address<span class="token punctuation">-</span>book <span class="token key atrule">Medias</span><span class="token punctuation">:</span> <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>list <span class="token key atrule">children</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Musics <span class="token key atrule">url</span><span class="token punctuation">:</span> /musics <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>music <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Movies <span class="token key atrule">url</span><span class="token punctuation">:</span> /movies <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>film <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Books <span class="token key atrule">url</span><span class="token punctuation">:</span> /books <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>book <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Galleries <span class="token key atrule">url</span><span class="token punctuation">:</span> /galleries <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>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><h3 id="2-8-添加emoji表情支持（可选的）"><a href="#2-8-添加emoji表情支持（可选的）" class="headerlink" title="2.8 添加emoji表情支持（可选的）"></a>2.8 添加emoji表情支持（可选的）</h3><p>本主题新增了对<code>emoji</code>表情的支持，使用到了 <a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9ucG0udGFvYmFvLm9yZy9wYWNrYWdlL2hleG8tZmlsdGVyLWdpdGh1Yi1lbW9qaXM=">hexo-filter-github-emojis</a> 的 Hexo 插件来支持 <code>emoji</code>表情的生成，把对应的<code>markdown emoji</code>语法（<code>::</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>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">githubEmojis</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">className</span><span class="token punctuation">:</span> github<span class="token punctuation">-</span>emoji <span class="token key atrule">inject</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">styles</span><span class="token punctuation">:</span> customEmojis<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></code></pre><p>执行 <code>hexo clean && hexo g</code> 重新生成博客文件，然后就可以在文章中对应位置看到你用<code>emoji</code>语法写的表情了。</p><h3 id="2-9-代码高亮"><a href="#2-9-代码高亮" class="headerlink" title="2.9 代码高亮"></a>2.9 代码高亮</h3><p>由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 <a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9naXRodWIuY29tL2VsZTgyOC9oZXhvLXByaXNtLXBsdWdpbg==">hexo-prism-plugin</a> 的 Hexo 插件来做代码高亮，安装命令如下</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>然后，修改 Hexo 根目录下 <code>_config.yml</code> 文件中 <code>highlight.enable</code> 的值为 <code>false</code>，并新增 <code>prism</code> 插件相关的配置，主要配置如下：</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">prism_plugin</span><span class="token punctuation">:</span> <span class="token key atrule">mode</span><span class="token punctuation">:</span> <span class="token string">'preprocess'</span> <span class="token comment"># realtime/preprocess</span> <span class="token key atrule">theme</span><span class="token punctuation">:</span> <span class="token string">'tomorrow'</span> <span class="token key atrule">line_number</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># default false</span> custom_css<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><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy9TbmlwYXN0ZV8yMDIwLTAyLTI4XzE3LTIzLTI4LnBuZw?x-oss-process=image/format,png"></p><p> <code>yml</code>就是语言名字。</p><h3 id="2-10-搜索"><a href="#2-10-搜索" class="headerlink" title="2.10 搜索"></a>2.10 搜索</h3><p>本主题中还使用到了 <a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9naXRodWIuY29tL3d6cGFuL2hleG8tZ2VuZXJhdG9yLXNlYXJjaA==">hexo-generator-search</a> 的 Hexo 插件来做内容搜索，安装命令如下：</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>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">search</span><span class="token punctuation">:</span> <span class="token key atrule">path</span><span class="token punctuation">:</span> search.xml <span class="token key atrule">field</span><span class="token punctuation">:</span> post <span class="token key atrule">format</span><span class="token punctuation">:</span> html <span class="token key atrule">limit</span><span class="token punctuation">:</span> <span class="token number">10000</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="2-11-中文链接转拼音（可选的）"><a href="#2-11-中文链接转拼音（可选的）" class="headerlink" title="2.11 中文链接转拼音（可选的）"></a>2.11 中文链接转拼音（可选的）</h3><p>如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 <code>SEO</code>，且 <code>gitment</code> 评论对中文链接也不支持。我们可以用 <a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9naXRodWIuY29tL3Zpa28xNi9oZXhvLXBlcm1hbGluay1waW55aW4=">hexo-permalink-pinyin</a> Hexo 插件使在生成文章时生成中文拼音的永久链接。</p><p>安装命令如下：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> i hexo-permalink-pinyin --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">permalink_pinyin</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">separator</span><span class="token punctuation">:</span> <span class="token string">'-'</span> <span class="token comment"># default: '-'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p><strong>注</strong>：除了此插件外，<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9naXRodWIuY29tL3JvemJvL2hleG8tYWJicmxpbms=">hexo-abbrlink</a> 插件也可以生成非中文的链接。</p><h3 id="2-12-文章字数统计插件（可选的）"><a href="#2-12-文章字数统计插件（可选的）" class="headerlink" title="2.12 文章字数统计插件（可选的）"></a>2.12 文章字数统计插件（可选的）</h3><p>如果你想要在文章中显示文章字数、阅读时长信息，可以安装 <a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9naXRodWIuY29tL3dpbGxpbi9oZXhvLXdvcmRjb3VudA==">hexo-wordcount</a>插件。</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-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">wordCount</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># 将这个值设置为 true 即可.</span> <span class="token key atrule">postWordCount</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">min2read</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">totalCount</span><span class="token punctuation">:</span> <span class="token boolean important">true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="2-13-添加-RSS-订阅支持（可选的）"><a href="#2-13-添加-RSS-订阅支持（可选的）" class="headerlink" title="2.13 添加 RSS 订阅支持（可选的）"></a>2.13 添加 RSS 订阅支持（可选的）</h3><p>本主题中还使用到了 <a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9naXRodWIuY29tL2hleG9qcy9oZXhvLWdlbmVyYXRvci1mZWVk">hexo-generator-feed</a> 的 Hexo 插件来做 <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>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">feed</span><span class="token punctuation">:</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> atom <span class="token key atrule">path</span><span class="token punctuation">:</span> atom.xml <span class="token key atrule">limit</span><span class="token punctuation">:</span> <span class="token number">20</span> <span class="token key atrule">hub</span><span class="token punctuation">:</span> <span class="token key atrule">content</span><span class="token punctuation">:</span> <span class="token key atrule">content_limit</span><span class="token punctuation">:</span> <span class="token number">140</span> <span class="token key atrule">content_limit_delim</span><span class="token punctuation">:</span> <span class="token string">' '</span> <span class="token key atrule">order_by</span><span class="token punctuation">:</span> <span class="token punctuation">-</span>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 && hexo g</code> 重新生成博客文件，然后在 <code>public</code> 文件夹中即可看到 <code>atom.xml</code> 文件，说明你已经安装成功了。</p><h3 id="2-14-添加-DaoVoice-在线聊天功能（可选的）"><a href="#2-14-添加-DaoVoice-在线聊天功能（可选的）" class="headerlink" title="2.14 添加 DaoVoice 在线聊天功能（可选的）"></a>2.14 添加 <a href="https://yafine-blog.cn/go.html?url=aHR0cDovL3d3dy5kYW92b2ljZS5pby8=">DaoVoice</a> 在线聊天功能（可选的）</h3><p>前往 <a href="https://yafine-blog.cn/go.html?url=aHR0cDovL3d3dy5kYW92b2ljZS5pby8=">DaoVoice</a> 官网注册并且获取 <code>app_id</code>，并将 <code>app_id</code> 填入主题的 <code>_config.yml</code> 文件中</p><h3 id="2-15-添加-Tidio-在线聊天功能（可选的）"><a href="#2-15-添加-Tidio-在线聊天功能（可选的）" class="headerlink" title="2.15 添加 Tidio 在线聊天功能（可选的）"></a>2.15 添加 <a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly93d3cudGlkaW8uY29tLw==">Tidio</a> 在线聊天功能（可选的）</h3><p>前往 <a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly93d3cudGlkaW8uY29tLw==">Tidio</a> 官网注册并且获取 <code>Public Key</code>，并将 <code>Public Key</code> 填入主题的 <code>_config.yml</code> 文件中。</p><h3 id="2-16-修改页脚"><a href="#2-16-修改页脚" class="headerlink" title="2.16 修改页脚"></a>2.16 修改页脚</h3><p>页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 <code>/layout/_partial/footer.ejs</code> 文件中，包括站点、使用的主题、访问量等。</p><h3 id="2-17-修改社交链接"><a href="#2-17-修改社交链接" class="headerlink" title="2.17 修改社交链接"></a>2.17 修改社交链接</h3><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>）你可以在 <a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9mb250YXdlc29tZS5jb20vaWNvbnM=">Font Awesome</a> 中搜索找到。以下是常用社交图标的标识，供你参考：</p><ul><li>Facebook: <code>fab fa-facebook</code></li><li>Twitter: <code>fab fa-twitter</code></li><li>Google-plus: <code>fab fa-google-plus</code></li><li>Linkedin: <code>fab fa-linkedin</code></li><li>Tumblr: <code>fab fa-tumblr</code></li><li>Medium: <code>fab fa-medium</code></li><li>Slack: <code>fab fa-slack</code></li><li>Sina Weibo: <code>fab fa-weibo</code></li><li>Wechat: <code>fab fa-weixin</code></li><li>QQ: <code>fab fa-qq</code></li><li>Zhihu: <code>fab fa-zhihu</code></li></ul><blockquote><p><strong>注意</strong>: 本主题中使用的 <code>Font Awesome</code> 版本为 <code>5.11.0</code>。</p></blockquote><h3 id="2-18-修改打赏的二维码图片"><a href="#2-18-修改打赏的二维码图片" class="headerlink" title="2.18 修改打赏的二维码图片"></a>2.18 修改打赏的二维码图片</h3><p>在主题文件的 <code>source/medias/reward</code> 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。</p><h3 id="2-19-配置音乐播放器（可选的）"><a href="#2-19-配置音乐播放器（可选的）" class="headerlink" title="2.19 配置音乐播放器（可选的）"></a>2.19 配置音乐播放器（可选的）</h3><blockquote><p>新版主题支持接入第三方音乐，如QQ音乐，网易云音乐，酷狗音乐等等</p></blockquote><p>要支持音乐播放，在主题的 <code>_config.yml</code> 配置文件中激活music配置即可：</p><pre class="line-numbers language-yml" data-language="yml"><code class="language-yml"><span class="token comment"># 是否在首页显示音乐</span><span class="token key atrule">music</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">title</span><span class="token punctuation">:</span> <span class="token comment">#非吸底模式有效</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">show</span><span class="token punctuation">:</span> 听听音乐 <span class="token key atrule">server</span><span class="token punctuation">:</span> netease <span class="token comment">#require music platform: netease, tencent, kugou, xiami, baidu</span> <span class="token key atrule">type</span><span class="token punctuation">:</span> playlist <span class="token comment">#require song, playlist, album, search, artist</span> <span class="token key atrule">id</span><span class="token punctuation">:</span> <span class="token number">503838841</span> <span class="token comment">#require song id / playlist id / album id / search keyword</span> <span class="token key atrule">fixed</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># 开启吸底模式</span> <span class="token key atrule">autoplay</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># 是否自动播放</span> <span class="token key atrule">theme</span><span class="token punctuation">:</span> <span class="token string">'#42b983'</span> <span class="token key atrule">loop</span><span class="token punctuation">:</span> <span class="token string">'all'</span> <span class="token comment"># 音频循环播放, 可选值: 'all', 'one', 'none'</span> <span class="token key atrule">order</span><span class="token punctuation">:</span> <span class="token string">'random'</span> <span class="token comment"># 音频循环顺序, 可选值: 'list', 'random'</span> <span class="token key atrule">preload</span><span class="token punctuation">:</span> <span class="token string">'auto'</span> <span class="token comment"># 预加载，可选值: 'none', 'metadata', 'auto'</span> <span class="token key atrule">volume</span><span class="token punctuation">:</span> <span class="token number">0.7</span> <span class="token comment"># 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效</span> <span class="token key atrule">listFolded</span><span class="token punctuation">:</span> <span class="token boolean important">true</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></code></pre><blockquote><p><code>server</code>可选<code>netease</code>（网易云音乐），<code>tencent</code>（QQ音乐），<code>kugou</code>（酷狗音乐），<code>xiami</code>（虾米音乐），</p><p><code>baidu</code>（百度音乐）。</p><p><code>type</code>可选<code>song</code>（歌曲），<code>playlist</code>（歌单），<code>album</code>（专辑），<code>search</code>（搜索关键字），<code>artist</code>（歌手）</p><p><code>id</code>获取示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，地址栏有一串数字，<code>playlist</code>的<code>id</code>即为这串数字。</p></blockquote><h2 id="3-文章-Front-matter-介绍"><a href="#3-文章-Front-matter-介绍" class="headerlink" title="3. 文章 Front-matter 介绍"></a>3. 文章 Front-matter 介绍</h2><h3 id="Front-matter-选项详解"><a href="#Front-matter-选项详解" class="headerlink" title="Front-matter 选项详解"></a>Front-matter 选项详解</h3><p><code>Front-matter</code> 选项中的所有内容均为<strong>非必填</strong>的。但我仍然建议至少填写 <code>title</code> 和 <code>date</code> 的值。</p><p><img src="https://pic.yupoo.com/kalbim/8fe1efcf/48cd56aa.png"></p><p><img src="https://pic.yupoo.com/kalbim/0032ef7d/f77bff9d.png"></p><p><strong>注意</strong>:</p><ol><li> 如果 <code>img</code> 属性不填写的话，文章特色图会根据文章标题的 <code>hashcode</code> 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图<strong>各有特色</strong>。</li><li> <code>date</code> 的值尽量保证每篇文章是唯一的，因为本主题中 <code>Gitalk</code> 和 <code>Gitment</code> 识别 <code>id</code> 是通过 <code>date</code> 的值来作为唯一标识的。</li><li> 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 <code>_config.yml</code> 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：<a href="https://yafine-blog.cn/go.html?url=aHR0cDovL3Rvb2wub3NjaGluYS5uZXQvZW5jcnlwdD90eXBlPTI=">开源中国在线工具</a>、<a href="https://yafine-blog.cn/go.html?url=aHR0cDovL2VuY29kZS5jaGFodW8uY29tLw==">chahuo</a>、<a href="https://yafine-blog.cn/go.html?url=aHR0cDovL3Rvb2wuY2hpbmF6LmNvbS90b29scy9oYXNoLmFzcHg=">站长工具</a>。</li><li> 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则</li></ol><p>以下为文章的 <code>Front-matter</code> 示例。</p><h3 id="最简示例"><a href="#最简示例" class="headerlink" title="最简示例"></a>最简示例</h3><pre class="line-numbers language-yml" data-language="yml"><code class="language-yml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> typora<span class="token punctuation">-</span>vue<span class="token punctuation">-</span>theme主题介绍<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-07 09:25:00</span><span class="token punctuation">---</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><h3 id="最全示例"><a href="#最全示例" class="headerlink" title="最全示例"></a>最全示例</h3><pre class="line-numbers language-yml" data-language="yml"><code class="language-yml"><span class="token punctuation">---</span><span class="token key atrule">title</span><span class="token punctuation">:</span> typora<span class="token punctuation">-</span>vue<span class="token punctuation">-</span>theme主题介绍<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-07 09:25:00</span><span class="token key atrule">author</span><span class="token punctuation">:</span> 张三<span class="token key atrule">img</span><span class="token punctuation">:</span> /source/images/xxx.jpg<span class="token key atrule">top</span><span class="token punctuation">:</span> <span class="token boolean important">true</span><span class="token key atrule">cover</span><span class="token punctuation">:</span> <span class="token boolean important">true</span><span class="token key atrule">coverImg</span><span class="token punctuation">:</span> /images/1.jpg<span class="token key atrule">password</span><span class="token punctuation">:</span> 8d969eef6ecad3c29a3a62928f3ca12020c923adc6c92<span class="token key atrule">toc</span><span class="token punctuation">:</span> <span class="token boolean important">false</span><span class="token key atrule">mathjax</span><span class="token punctuation">:</span> <span class="token boolean important">false</span><span class="token key atrule">summary</span><span class="token punctuation">:</span> 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要<span class="token key atrule">categories</span><span class="token punctuation">:</span> Markdown<span class="token key atrule">tags</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> Typora <span class="token punctuation">-</span> Markdown<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></code></pre><h2 id="4-自定制修改"><a href="#4-自定制修改" class="headerlink" title="4. 自定制修改"></a>4. 自定制修改</h2><p>在本主题的 <code>_config.yml</code> 中可以修改部分自定义信息，有以下几个部分：</p><ul><li>菜单</li><li>我的梦想</li><li>首页的音乐播放器和视频播放器配置</li><li>是否显示推荐文章名称和按钮配置</li><li><code>favicon</code> 和 <code>Logo</code></li><li>个人信息</li><li>TOC 目录</li><li>文章打赏信息</li><li>复制文章内容时追加版权信息</li><li>MathJax</li><li>文章字数统计、阅读时长</li><li>点击页面的’爱心’效果</li><li>我的项目</li><li>我的技能</li><li>我的相册</li><li><code>Gitalk</code>、<code>Gitment</code>、<code>Valine</code> 和 <code>disqus</code> 评论配置</li><li><a href="https://yafine-blog.cn/go.html?url=aHR0cDovL2J1c3VhbnppLmlicnVjZS5pbmZvLw==">不蒜子统计</a>和谷歌分析（<code>Google Analytics</code>）</li><li>默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 <code>hashcode</code> 值取余，来选择展示对应的特色图</li></ul><p><strong>我认为个人博客应该都有自己的风格和特色</strong>。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 <code>_config.yml</code> 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：</p><h3 id="4-1-修改主题颜色"><a href="#4-1-修改主题颜色" class="headerlink" title="4.1 修改主题颜色"></a>4.1 修改主题颜色</h3><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 comment">/*如果想去掉banner图的颜色渐变效果，请将以下的css属性注释掉或者删除掉即可*/</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 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><h3 id="4-2-修改-banner-图和文章特色图"><a href="#4-2-修改-banner-图和文章特色图" class="headerlink" title="4.2 修改 banner 图和文章特色图"></a>4.2 修改 banner 图和文章特色图</h3><p>你可以直接在 <code>/source/medias/banner</code> 文件夹中更换你喜欢的 <code>banner</code> 图片，主题代码中是每天动态切换一张，只需 <code>7</code> 张即可。如果你会 <code>JavaScript</code> 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，<code>banner</code> 切换的代码位置在 <code>/layout/_partial/bg-cover-content.ejs</code> 文件的 `` 代码中：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.bg-cover'</span><span class="token punctuation">)</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> <span class="token operator">+</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</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 operator">+</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><p>如果想改为每小时或者每分钟切换banner图的话，需要将<code>getDay()</code>改为<code>getHours()</code>或者<code>getMinutes()</code>即可</p><p>到这里此次教程就完了，下一篇呢，我会把一些美化主题的方法告诉你们，还有一些优化访问博客速度…等等之类的。</p><blockquote><p>只要你有一件喜欢的事去做，你的生活就会显得特别美好。</p></blockquote>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 博客 </tag>
<tag> 博客优化 </tag>
</tags>
</entry>
<entry>
<title>Hexo博客主题安装和优化（二）自定义首页</title>
<link href="/posts/ea5c43d5.html"/>
<url>/posts/ea5c43d5.html</url>
<content type="html"><![CDATA[<h1 id="一、Hexo自定义-—Kalbim—"><a href="#一、Hexo自定义-—Kalbim—" class="headerlink" title="一、Hexo自定义 —Kalbim—"></a>一、Hexo自定义 —<a href="https://kaiboshi.gitee.io/">Kalbim</a>—</h1><hr><p><img src="https://pic.yupoo.com/kalbim/aa10dbff/dacc3892.png"></p><h2 id="1-动态标题"><a href="#1-动态标题" class="headerlink" title="1. 动态标题"></a>1. 动态标题</h2><p>打开博客主题文件夹，路径：<code>themes/matery/layout/layout.ejs</code>，在对应位置添加如下代码：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span> <span class="token keyword">var</span> OriginTitile <span class="token operator">=</span> document<span class="token punctuation">.</span>title<span class="token punctuation">,</span> st<span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"visibilitychange"</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> document<span class="token punctuation">.</span>hidden <span class="token operator">?</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">"写离开页面标题显示的内容"</span><span class="token punctuation">,</span> <span class="token function">clearTimeout</span><span class="token punctuation">(</span>st<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">"写进入页面标题显示的内容"</span><span class="token punctuation">,</span> st <span class="token operator">=</span> <span class="token function">setTimeout</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> document<span class="token punctuation">.</span>title <span class="token operator">=</span> OriginTitile <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3e3</span><span class="token punctuation">)</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 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></code></pre><h2 id="2-修改导航栏颜色以及透明效果"><a href="#2-修改导航栏颜色以及透明效果" class="headerlink" title="2. 修改导航栏颜色以及透明效果"></a>2. 修改导航栏颜色以及透明效果</h2><p>打开<code>themes/matery/source/css/matery.css</code>文件，大约在250行，有一个<code>.bg-color</code>属性，修改其属性值即可，代码如下：</p><pre class="line-numbers language-css" data-language="css"><code class="language-css"><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 property">opacity</span><span class="token punctuation">:</span> 0.8<span class="token punctuation">;</span> //透明效果 值范围 0~1，看情况自己修改<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><h2 id="3-添加动态诗词"><a href="#3-添加动态诗词" class="headerlink" title="3. 添加动态诗词"></a>3. 添加动态诗词</h2><p>采用的是<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly93d3cuamlucmlzaGljaS5jb20v">今日诗词</a>，每次返回一句诗词，根据时间、地点、天气、事件智能推荐。官网有<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly93d3cuamlucmlzaGljaS5jb20vZG9jLw==">API文档</a>，可以去看一下，有多种安装方式，最简单的方式就是从官网获取代码，在<code>/themes/matery/layout/_partial/head.ejs</code>添加下面的一行代码：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"https://sdk.jinrishici.com/v2/browser/jinrishici.js"</span> charset<span class="token operator">=</span><span class="token string">"utf-8"</span><span class="token operator">></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></code></pre><p>然后再将<code>/themes/matery/layout/_partial/bg-cover-content.ejs</code>中的<code><%= config.description %></code>修改为把<code><%= config.description %></code>改为<code><%- '正在加载今日诗词....' %></code>，这个使用前提是将主题配置文件的<code>subtitle</code>的值改为<code>false</code>。</p><h2 id="4-鼠标点击文字特效"><a href="#4-鼠标点击文字特效" class="headerlink" title="4. 鼠标点击文字特效"></a>4. 鼠标点击文字特效</h2><p>实现方法，引入js文件，在主题文件下的<code>/source/js/</code>下新建<code>click_show_text.js</code>，其代码如下：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> a_idx <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span><span class="token function">jQuery</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">$</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"body"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token string">"富强"</span><span class="token punctuation">,</span> <span class="token string">"民主"</span><span class="token punctuation">,</span> <span class="token string">"文明"</span><span class="token punctuation">,</span> <span class="token string">"和谐"</span><span class="token punctuation">,</span> <span class="token string">"自由"</span><span class="token punctuation">,</span> <span class="token string">"平等"</span><span class="token punctuation">,</span> <span class="token string">"公正"</span><span class="token punctuation">,</span> <span class="token string">"法治"</span><span class="token punctuation">,</span> <span class="token string">"爱国"</span><span class="token punctuation">,</span> <span class="token string">"敬业"</span><span class="token punctuation">,</span> <span class="token string">"诚信"</span><span class="token punctuation">,</span> <span class="token string">"友善"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> $i <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"<span/>"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">text</span><span class="token punctuation">(</span>a<span class="token punctuation">[</span>a_idx<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> a_idx <span class="token operator">=</span> <span class="token punctuation">(</span>a_idx <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">%</span> a<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token keyword">var</span> x <span class="token operator">=</span> e<span class="token punctuation">.</span>pageX<span class="token punctuation">,</span> y <span class="token operator">=</span> e<span class="token punctuation">.</span>pageY<span class="token punctuation">;</span> $i<span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token string">"z-index"</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token string">"top"</span><span class="token operator">:</span> y <span class="token operator">-</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token string">"left"</span><span class="token operator">:</span> x<span class="token punctuation">,</span> <span class="token string">"position"</span><span class="token operator">:</span> <span class="token string">"absolute"</span><span class="token punctuation">,</span> <span class="token string">"font-weight"</span><span class="token operator">:</span> <span class="token string">"bold"</span><span class="token punctuation">,</span> <span class="token string">"color"</span><span class="token operator">:</span> <span class="token string">"#FF0000"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"body"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>$i<span class="token punctuation">)</span><span class="token punctuation">;</span> $i<span class="token punctuation">.</span><span class="token function">animate</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token string">"top"</span><span class="token operator">:</span> y <span class="token operator">-</span> <span class="token number">180</span><span class="token punctuation">,</span> <span class="token string">"opacity"</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">3000</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> $i<span class="token punctuation">.</span><span class="token function">remove</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><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token string">'delay()'</span><span class="token punctuation">,</span> <span class="token number">2000</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 keyword">function</span> <span class="token function">delay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".buryit"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeAttr</span><span class="token punctuation">(</span><span class="token string">"onclick"</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></code></pre><h2 id="5-修改原有相册"><a href="#5-修改原有相册" class="headerlink" title="5. 修改原有相册"></a>5. 修改原有相册</h2><blockquote><p>参考教程：<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly95YWZpbmUtYmxvZy5jbi9wb3N0cy8zYjk4Lmh0bWw=">https://yafine-blog.cn/posts/3b98.html</a></p></blockquote><h2 id="6-添加天气小插件"><a href="#6-添加天气小插件" class="headerlink" title="6. 添加天气小插件"></a>6. 添加天气小插件</h2><p>首先去中国天气官网：<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9jai53ZWF0aGVyLmNvbS5jbi9wbHVnaW4vcGPvvIzphY3nva7oh6rlt7HnmoTmj5Lku7bvvIzpgInmi6noh6rlrprkuYnmj5Lku7bigJQ+6Ieq5a6a5LmJ5qC35byP4oCU4oCUPueUn+aIkOS7o+egge+8jOeEtuWQjuS8mueUn+aIkOS4gOauteS7o+egge+8jOWkjeWItueymOi0tOWIsA==">https://cj.weather.com.cn/plugin/pc，配置自己的插件，选择自定义插件—>自定义样式——>生成代码，然后会生成一段代码，复制粘贴到</a> <code>themes/matery/layout/layout.ejs</code>即可。</p><h2 id="7-关于我页面添加个人简历"><a href="#7-关于我页面添加个人简历" class="headerlink" title="7. 关于我页面添加个人简历"></a>7. 关于我页面添加个人简历</h2><p>打开<code>theme/matery/layout/about.ejs</code>文件，大约在13行。有一个``标签，找出其对应结尾的标签，大约在61行左右，然后在新增如下代码：</p><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 attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card<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>div</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>card-content<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>div</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>card-content article-card-content<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>div</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>title center-align<span class="token punctuation">"</span></span> <span class="token attr-name">data-aos</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zoom-in-up<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>fa fa-address-book<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 entity named-entity" title=" ">&nbsp;</span><span class="token entity named-entity" title=" ">&nbsp;</span><%- __('个人简历') %> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>articleContent<span class="token punctuation">"</span></span> <span class="token attr-name">data-aos</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fade-up<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <%- page.content %> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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 class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</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></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>注意粘贴的位置和空格要正确，这里的位置随你自己设置，你也可以把简历作为第一个card，然后<code>/source/about/index.md</code>下面写上你的简历了（就像写博客一样）。</p><h2 id="8-豆瓣书单电影页面"><a href="#8-豆瓣书单电影页面" class="headerlink" title="8. 豆瓣书单电影页面"></a>8. 豆瓣书单电影页面</h2><ol><li><p>首先在博客站点目录执行下面的命令安装豆瓣插件：</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-douban --save <span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li><p>紧接着在博客站点目录的配置文件<code>_config.yml</code>下，添加如下配置：</p> <pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"> <span class="token key atrule">douban</span><span class="token punctuation">:</span> <span class="token key atrule">user</span><span class="token punctuation">:</span> <span class="token number">252345665</span> <span class="token comment">#这个需要修改为你个人的id </span><span class="token key atrule">builtin</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment">#如果想生成豆瓣页面，这个需要设置为true</span><span class="token key atrule">book</span><span class="token punctuation">:</span> <span class="token key atrule">title</span><span class="token punctuation">:</span> <span class="token string">'This is my book title'</span> <span class="token key atrule">quote</span><span class="token punctuation">:</span> <span class="token string">'This is my book quote'</span> <span class="token key atrule">movie</span><span class="token punctuation">:</span> <span class="token key atrule">title</span><span class="token punctuation">:</span> <span class="token string">'This is my movie title'</span> <span class="token key atrule">quote</span><span class="token punctuation">:</span> <span class="token string">'This is my movie quote'</span> <span class="token key atrule">game</span><span class="token punctuation">:</span> <span class="token key atrule">title</span><span class="token punctuation">:</span> <span class="token string">'This is my game title'</span> <span class="token key atrule">quote</span><span class="token punctuation">:</span> <span class="token string">'This is my game quote'</span> <span class="token key atrule">timeout</span><span class="token punctuation">:</span> <span class="token number">10000</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></code></pre></li></ol><ul><li><p><strong>user</strong>:：你的豆瓣ID。打开豆瓣，登入账户，然后在右上角点击 ”个人主页“，这时候地址栏的URL大概是这样：<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly93d3cuZG91YmFuLmNvbS9wZW9wbGUveHh4eHh4Lw==">https://www.douban.com/people/xxxxxx/</a> ，其中的”xxxxxx”就是你的个人ID了。</p><ul><li><strong>builtin</strong>：是否将生成页面的功能嵌入 <code>hexo s</code> 和 <code>hexo g</code> 中，默认是 <code>false</code> ，另一可选项为 <code>true</code> 。</li><li><strong>title</strong>： 该页面的标题。</li><li><strong>quote</strong>： 写在页面开头的一段话,支持html语法。</li><li><strong>timeout</strong>： 爬取数据的超时时间，默认是 10000ms，如果在使用时发现报了超时的错(ETIMEOUT)可以把这个数据设置的大一点。</li></ul><p>如果只想显示某一个页面(比如movie)，那就把其他的配置项注释掉即可</p></li></ul><ol><li>然后再主题配置文件<code>_config.yml</code>中添加关于此页面的菜单：(下面是我的配置)</li></ol><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">menu</span><span class="token punctuation">:</span><span class="token key atrule">媒体</span><span class="token punctuation">:</span> <span class="token key atrule">url</span><span class="token punctuation">:</span> / <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>list <span class="token key atrule">children</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 电影 <span class="token key atrule">url</span><span class="token punctuation">:</span> /movies <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>film <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 书单 <span class="token key atrule">url</span><span class="token punctuation">:</span> /books <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>book <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> 游戏 <span class="token key atrule">url</span><span class="token punctuation">:</span> /games <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>gamepad<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></code></pre><ol><li><p>适配Matery主题：在 <code>/themes/hexo-theme-matery/layout</code> 文件夹下面创建一个名为 <code>douban.ejs</code> 的文件，并将下面的内容复制进去：</p> <pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span><span class="token operator">%</span><span class="token operator">-</span> <span class="token function">partial</span><span class="token punctuation">(</span><span class="token string">'_partial/post-cover'</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span>style<span class="token operator">></span> <span class="token punctuation">.</span>hexo<span class="token operator">-</span>douban<span class="token operator">-</span>picture img <span class="token punctuation">{</span> width<span class="token operator">:</span> <span class="token number">100</span><span class="token operator">%</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>style<span class="token operator">></span><span class="token operator"><</span>main <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"content"</span><span class="token operator">></span> <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token string">"contact"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"container chip-container"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-content"</span> style<span class="token operator">=</span><span class="token string">"padding: 30px"</span><span class="token operator">></span> <span class="token operator"><</span>h1 style<span class="token operator">=</span><span class="token string">"margin: 10px 0 10px 0px;"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">%=</span> page<span class="token punctuation">.</span>title <span class="token operator">%</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">-</span> page<span class="token punctuation">.</span>content <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card-content"</span> style<span class="token operator">=</span><span class="token string">"text-align: center"</span><span class="token operator">></span> <span class="token operator"><</span>h3 style<span class="token operator">=</span><span class="token string">"margin: 5px 0 5px 5px;"</span><span class="token operator">></span>如果你有好的内容推荐，欢迎在下面留言！<span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"card"</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>theme<span class="token punctuation">.</span>gitalk <span class="token operator">&&</span> theme<span class="token punctuation">.</span>gitalk<span class="token punctuation">.</span>enable<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">-</span> <span class="token function">partial</span><span class="token punctuation">(</span><span class="token string">'_partial/gitalk'</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span> <span class="token punctuation">}</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>theme<span class="token punctuation">.</span>gitment<span class="token punctuation">.</span>enable<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">-</span> <span class="token function">partial</span><span class="token punctuation">(</span><span class="token string">'_partial/gitment'</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span> <span class="token punctuation">}</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>theme<span class="token punctuation">.</span>disqus<span class="token punctuation">.</span>enable<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">-</span> <span class="token function">partial</span><span class="token punctuation">(</span><span class="token string">'_partial/disqus'</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span> <span class="token punctuation">}</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>theme<span class="token punctuation">.</span>livere <span class="token operator">&&</span> theme<span class="token punctuation">.</span>livere<span class="token punctuation">.</span>enable<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">-</span> <span class="token function">partial</span><span class="token punctuation">(</span><span class="token string">'_partial/livere'</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span> <span class="token punctuation">}</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>theme<span class="token punctuation">.</span>valine <span class="token operator">&&</span> theme<span class="token punctuation">.</span>valine<span class="token punctuation">.</span>enable<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span><span class="token operator">-</span> <span class="token function">partial</span><span class="token punctuation">(</span><span class="token string">'_partial/valine'</span><span class="token punctuation">)</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">%</span> <span class="token punctuation">}</span> <span class="token operator">%</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>main<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></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></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></li><li><p>然后在博客站点目录下的<code>node_modules</code>文件夹下找到<code>hexo-douban/lib</code>，文件夹下有三个js文件，分别为：<code>books-generator.js</code> 、<code>games-generator.js</code> 、<code>movies-generator.js</code>，用文本编辑器打开这三个文件，并将其文件内容末尾的代码修改为一下内容：</p></li></ol><pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token comment">/* 原文件内容为 layout: [`page`, `post`] ，将其修改为下面的内容*/</span>layout<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">page</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">douban</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><ol><li> 最后就是使用并生成相应的页面，执行命令如下:</li></ol><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo douban <span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p><strong>需要注意的是</strong>，通常大家都喜欢用 <code>hexo d</code> 来作为 <code>hexo deploy</code> 命令的简化，但是当安装了 <code>hexo douban</code> 之后，就不能用 <code>hexo d</code> 了，因为 <code>hexo douban</code> 跟 <code>hexo deploy</code> 的前缀都是 <code>hexo d</code> ，你以后执行的 <code>hexo d</code> 将不再是 Hexo 页面的生成，而是豆瓣页面的生成。</p><p>以下是可选的命令参数：</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">-h, --help <span class="token comment"># 帮助页面</span>-b, --books <span class="token comment"># 只生成书单页面</span>-g, --games <span class="token comment"># 只生成游戏页面</span>-m, --movies <span class="token comment"># 只生成电影页面</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p><strong>当站点配置文件的builtin的值为true时，生成页面的功能会嵌入到<code>hexo g</code>和<code>hexo s</code>中，在进行部署生成操作，会自动生成相应的页面</strong>。</p><h2 id="9-外链跳转插件"><a href="#9-外链跳转插件" class="headerlink" title="9. 外链跳转插件"></a>9. 外链跳转插件</h2><p><a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9ibG9nLmh2bm9idWcuY29tL2dvLmh0bWw/dXJsPWFIUjBjSE02THk5bmFYUm9kV0l1WTI5dEwyaDJibTlpZFdjdmFHVjRieTFsZUhSbGNtNWhiQzFzYVc1cg==">hexo-external-link</a>是一个跳转外链相关插件。自动为所有html文件中外链的a标签生成对应的属性。 比如 设置<code>target=’_blank’, rel=’external nofollow noopener noreferrer’</code> 告诉搜索引擎这是外部链接,不要将该链接计入权重。 同时自动生成外链跳转页面,默认在根目录下 go.html;</p><p>使用 npm 或者 yarn 安装</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment">## npm 安装</span><span class="token function">npm</span> <span class="token function">install</span> hexo-external-link --save<span class="token comment">## yarn 安装</span><span class="token function">yarn</span> <span class="token function">add</span> hexo-external-link<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>之后再hexo博客站点根目录下添加如下配置：</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">hexo_external_link</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">enable_base64_encode</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">url_param_name</span><span class="token punctuation">:</span> <span class="token string">'u'</span> <span class="token key atrule">html_file_name</span><span class="token punctuation">:</span> <span class="token string">'go.html'</span> <span class="token key atrule">target_blank</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">link_rel</span><span class="token punctuation">:</span> <span class="token string">'external nofollow noopener noreferrer'</span> <span class="token key atrule">domain</span><span class="token punctuation">:</span> <span class="token string">'your_domain'</span> <span class="token comment"># 如果开启了防盗链，填写你的域名</span> <span class="token key atrule">safety_chain</span><span class="token punctuation">:</span> <span class="token boolean important">true</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></code></pre><ul><li><strong>enable</strong> - 是否开启<code>hexo_external_link</code>插件 - 默认 false</li><li><strong>enable_base64_encode</strong> - 是否对跳转<code>url</code>使用<code>base64编码</code> - 默认 fasle</li><li><strong>url_param_name</strong> - url参数名,在跳转到外链传递给<code>html_file_name</code>的参数名 - 默认 ‘u’</li><li><strong>html_file_name</strong> - 跳转到外链的页面文件路径 - 默认 ‘go.html’</li><li><strong>target_blank</strong> - 是否为外链的<code>a</code>标签添加<code>target='_blank'</code> - 默认 true</li><li><strong>link_rel</strong> - 设置外链的<code>a</code>标签的rel属性 - 默认 ‘external nofollow noopener noreferrer’</li><li><strong>domain</strong> - 如果开启了防盗链,除了 localhost 和 domain(你的域名) 之外调用会跳到主页,同时也是判断链接是否为外链的依据 - 默认 window.location.host</li><li><strong>safety_chain</strong> - go.html 为了防止外链盗用 对域名进行的判断 - 默认 false</li></ul><h2 id="10-添加动态科技线条背景"><a href="#10-添加动态科技线条背景" class="headerlink" title="10. 添加动态科技线条背景"></a>10. 添加动态科技线条背景</h2><p>在<code>themes/matery/layout/layout.ejs</code>文件中添加如下代码：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span>动态线条背景<span class="token operator">--</span><span class="token operator">></span><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span>color<span class="token operator">=</span><span class="token string">"122 103 238"</span> opacity<span class="token operator">=</span><span class="token string">'0.7'</span> zIndex<span class="token operator">=</span><span class="token string">"-2"</span> count<span class="token operator">=</span><span class="token string">"200"</span> src<span class="token operator">=</span><span class="token string">"//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"</span><span class="token operator">></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></code></pre><p>其中：</p><ul><li>color：表示线条颜色，三个数字分别为(R,G,B)，默认：（0,0,0）</li><li>opacity：表示线条透明度（0~1），默认：0.5</li><li>count：表示线条的总数量，默认：150</li><li>zIndex：表示背景的z-index属性，css属性用于控制所在层的位置，默认：-1</li></ul><h2 id="11-添加鼠标点击烟花爆炸效果"><a href="#11-添加鼠标点击烟花爆炸效果" class="headerlink" title="11. 添加鼠标点击烟花爆炸效果"></a>11. 添加鼠标点击烟花爆炸效果</h2><p>首先在<code>themes/matery/source/js</code>目录下新建<code>fireworks.js</code>文件，打开这个网址<a href="https://cdn.jsdelivr.net/gh/baifeng66/cdn@1.1/source/js/fireworks.js">传送门</a>，将内容复制粘贴到<code>fireworks.js</code>即可。</p><p>然后再<code>themes/matery/layout/layout.ejs</code>文件内添加下面的内容：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>canvas <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"fireworks"</span> style<span class="token operator">=</span><span class="token string">"position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;"</span> <span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>canvas<span class="token operator">></span> <span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span> src<span class="token operator">=</span><span class="token string">"//cdn.bootcss.com/animejs/2.2.0/anime.min.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span> src<span class="token operator">=</span><span class="token string">"/js/fireworks.js"</span><span class="token operator">></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></code></pre><p>然后<code>hexo clean && hexo g && hexo s</code>即可，就可以看到效果了。</p><h2 id="12-添加樱花飘落效果"><a href="#12-添加樱花飘落效果" class="headerlink" title="12. 添加樱花飘落效果"></a>12. 添加樱花飘落效果</h2><p>在<code>themes/matery/source/js</code>目录下新建<code>sakura.js</code>文件，打开这个网址<a href="https://cdn.jsdelivr.net/gh/baifeng66/cdn@1.1/source/js/sakura.js">传送门</a>，将内容复制粘贴到sakura.js即可。</p><p>然后再<code>themes/matery/layout/layout.ejs</code>文件内添加下面的内容：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span><span class="token operator">></span><span class="token comment">//只在桌面版网页启用特效</span><span class="token keyword">var</span> windowWidth <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span>window<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 punctuation">;</span><span class="token keyword">if</span> <span class="token punctuation">(</span>windowWidth <span class="token operator">></span> <span class="token number">768</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">'<script type="text/javascript" src="/js/sakura.js"><\/script>'</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></code></pre><h2 id="13-添加鼠标彩虹星星掉落跟随效果"><a href="#13-添加鼠标彩虹星星掉落跟随效果" class="headerlink" title="13. 添加鼠标彩虹星星掉落跟随效果"></a>13. 添加鼠标彩虹星星掉落跟随效果</h2><p>在<code>themes/matery/source/js</code>目录下新建<code>cursor.js</code>文件，打开这个网址<a href="https://cdn.jsdelivr.net/gh/baifeng66/cdn@1.1/source/js/cursor.js">传送门</a>，将内容复制粘贴到cursor.js即可。</p><p>然后再<code>themes/matery/layout/layout.ejs</code>文件内添加下面的内容：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"/js/cursor.js"</span><span class="token operator">></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></code></pre><h2 id="14-添加雪花飘落效果"><a href="#14-添加雪花飘落效果" class="headerlink" title="14. 添加雪花飘落效果"></a>14. 添加雪花飘落效果</h2><p>在<code>themes/matery/source/js</code>目录下新建<code>snow.js</code>文件，打开这个网址<a href="https://cdn.jsdelivr.net/gh/baifeng66/cdn@1.1/source/js/snow.js">传送门</a>，将内容复制粘贴到cursor.js即可。</p><p>然后再<code>themes/matery/layout/layout.ejs</code>文件内添加下面的内容：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"/js/snow.js"</span><span class="token operator">></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></code></pre><h2 id="15-文章生成永久链接"><a href="#15-文章生成永久链接" class="headerlink" title="15. 文章生成永久链接"></a>15. 文章生成永久链接</h2><p>主题默认的文章链接配置是</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token punctuation">:</span>year/<span class="token punctuation">:</span>month/<span class="token punctuation">:</span>day/<span class="token punctuation">:</span>title<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>这种生成的链接地址很长，文章版权的链接地址会出现一大串字符编码，一点也不好看。因此需要修改文章生成链接的格式。</p><p>首先再根目录下执行下面的命令：</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-abbrlink --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>然后再站点配置文件下添加如下配置：</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">abbrlink</span><span class="token punctuation">:</span> <span class="token key atrule">alg</span><span class="token punctuation">:</span> crc16 <span class="token comment">#算法： crc16(default) and crc32</span> <span class="token key atrule">rep</span><span class="token punctuation">:</span> hex <span class="token comment">#进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>再将站点配置文件的<code>permalink</code>的值修改为：</p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">permalink</span><span class="token punctuation">:</span> posts/<span class="token punctuation">:</span>abbrlink.html <span class="token comment"># 此处可以自己设置，也可以直接使用 :/abbrlink</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>生成完后，原md文件的Front-matter 内会增加<code>abbrlink</code> 字段，值为生成的ID 。这个字段确保了在我们修改了<code>Front-matter</code> 内的博客标题title或创建日期date字段之后而不会改变链接地址。</p>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 博客 </tag>
<tag> 博客优化 </tag>
</tags>
</entry>
<entry>
<title>Hello World</title>
<link href="/posts/3eeb.html"/>
<url>/posts/3eeb.html</url>
<content type="html"><![CDATA[<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>Hexo 博客自定义一个不使用主题模板渲染的独立页面</title>
<link href="/posts/2e58.html"/>
<url>/posts/2e58.html</url>
<content type="html"><![CDATA[<h3 id="Hexo-博客自定义一个不使用主题模板渲染的独立页面"><a href="#Hexo-博客自定义一个不使用主题模板渲染的独立页面" class="headerlink" title="Hexo 博客自定义一个不使用主题模板渲染的独立页面"></a>Hexo 博客自定义一个不使用主题模板渲染的独立页面</h3><p>Hexo 是一个轻量、快速，简单和强大的博客框架，当我们需要发布博文的时候，只需要将写好的文章（MarkDown文件）放入本地的 \source_posts 文件夹，然后再推送上去就行了，原理就是当我们在执行 hexo g 命令时，.md 文件就会被转化成 HTML 文件，但是有时候我们需要新建一个独立的页面，这个页面不使用主题的渲染，具有自己独立的样式，可以放一些自己的作品，相册什么的，以下就介绍这种独立页面的实现方法。</p><h3 id="方法一"><a href="#方法一" class="headerlink" title="方法一"></a>方法一</h3><p>使用 Hexo 提供的跳过渲染配置，在博客根目录的配置文件_config.yml 里找到 skip_render 关键字，在后面添加想要跳过渲染的页面，比如我们创建 \source\about\index.html，目录配置文件填写： </p><pre class="line-numbers language-none"><code class="language-none">skip_render: about\** <span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>主题配置里面写</p><pre class="line-numbers language-none"><code class="language-none">关于: url: /about icon: fas fa-user-circle<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>那么就表示 \source\about 里所有的文件将跳过渲染，里面的文件将会被接复制到 public 文件夹，此时就会得到一个独立的 about 页面；官方文档：<a href="https://hexo.io/docs/configuration">https://hexo.io/docs/configuration</a></p><h3 id="方法二"><a href="#方法二" class="headerlink" title="方法二"></a>方法二</h3><p>在文章头部的 Front-matter 里添加配置 layout: false 来跳过渲染配置，比如我们要使 about 页面跳过渲染，创建 \source\about\index.md，将这个页面的相关 HTML 代码写进.md文件并保存，然后在 index.md 的头部写入: </p><pre class="line-numbers language-none"><code class="language-none">layout: false <span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>PS：Front-matter 是 .md 文件最上方以 — 分隔的区域，用于指定个别文件的变量，官方文档：<a href="https://hexo.io/docs/front-matter">https://hexo.io/docs/front-matter</a><br>.md文件中的 HTML 代码要用 和 包起来，使其能正确编译里面的代码 </p><pre class="line-numbers language-none"><code class="language-none">{% raw %}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <p>null</p></body></html>{% endraw %} <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></code></pre><p>效果以我的博客主页和 百宝箱页面为例</p>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 博客 </tag>
</tags>
</entry>
<entry>
<title>Hexo博客主题安装和优化（三）添加评论系统</title>
<link href="/posts/ccdb282d.html"/>
<url>/posts/ccdb282d.html</url>
<content type="html"><![CDATA[<p><img src="https://pic.yupoo.com/kalbim/593feb53/f20e2302.png"></p><h2 id="2-1添加来必力评论系统"><a href="#2-1添加来必力评论系统" class="headerlink" title="2.1添加来必力评论系统"></a>2.1添加来必力评论系统</h2><p>首先去<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9saXZlcmUuY29tLw==">来必力官网</a>，点击导航栏上的安装，会出现如下图的页面：</p><ul><li>City 版：是一款适合所有人使用的免费版本；</li><li>Premium 版：是一款能够帮助企业实现自动化管理的多功能收费版本。</li></ul><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDIwMDExNTE0MjMxMy5wbmc?x-oss-process=image/format,png"></p><p>注册完之后，会提示你填写网站的相关信息，如网站链接，网站名称等等，填写完毕之后，会给你一段代码，如下图所示：</p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy9pbWFnZS0yMDIwMDExNTE0MjcwOTU4NS5wbmc?x-oss-process=image/format,png"></p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token comment"># Livere comment configuration, the default is not activated</span><span class="token comment"># Livere 来必力评论模块的配置，默认为不激活</span><span class="token key atrule">livere</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token comment"># true即为开启评论系统</span> <span class="token key atrule">uid</span><span class="token punctuation">:</span> <span class="token comment">#这里填写你的uid</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>然后在执行相关的部署命令，然后查看效果即可。</p><h2 id="2-2-添加Valine评论系统"><a href="#2-2-添加Valine评论系统" class="headerlink" title="2.2 添加Valine评论系统"></a>2.2 添加Valine评论系统</h2><p><a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly92YWxpbmUuanMub3JnLw==">Valine官方文档</a></p><p>如果注册过LeanCloud，请点击此处进行<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9sZWFuY2xvdWQuY24vZGFzaGJvYXJkL2xvZ2luLmh0bWwjL3NpZ25pbg==">登录</a>，未注册的请点击<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9sZWFuY2xvdWQuY24vZGFzaGJvYXJkL2xvZ2luLmh0bWwjL3NpZ251cA==">注册</a></p><p>经过登录或者注册之后再登录，就会进入如下的页面：</p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDIwMDExNTE0NTg1NS5wbmc?x-oss-process=image/format,png"></p><p>创建应用完成后，会出现如下页面，然后点击设置</p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDIwMDExNTE1MDMxOS5wbmc?x-oss-process=image/format,png"></p><p>会出现下面的页面，将其中APPID和APPKey复制，添加到配置文件中。</p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDIwMDExNTE1MDYucG5n?x-oss-process=image/format,png"></p><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token comment"># The configuration of the Valine comment module is not activated by default.</span><span class="token comment"># To use it, activate the configuration item and set appId and appKey.</span><span class="token comment"># Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.</span><span class="token key atrule">valine</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># true即为开启评论系统</span> <span class="token key atrule">appId</span><span class="token punctuation">:</span> <span class="token comment">#此处填写你的appid</span> <span class="token key atrule">appKey</span><span class="token punctuation">:</span> <span class="token comment">#此处填写你的appkey</span> <span class="token key atrule">notify</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token key atrule">verify</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token key atrule">visitor</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">avatar</span><span class="token punctuation">:</span> <span class="token string">'mm'</span> <span class="token comment"># Gravatar style : mm/identicon/monsterid/wavatar/retro/hide</span> <span class="token key atrule">pageSize</span><span class="token punctuation">:</span> <span class="token number">10</span> <span class="token key atrule">placeholder</span><span class="token punctuation">:</span> <span class="token string">'just go go'</span> <span class="token comment"># Comment Box placeholder</span> <span class="token key atrule">background</span><span class="token punctuation">:</span> https<span class="token punctuation">:</span>//cdn.jsdelivr.net/gh/Yafine/cdn@3.1.1/social/comment_bg.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></code></pre><p>然后执行相关部署命令，查看效果即可。</p><h2 id="2-3-添加Gitalk评论模块"><a href="#2-3-添加Gitalk评论模块" class="headerlink" title="2.3 添加Gitalk评论模块"></a>2.3 添加Gitalk评论模块</h2><p>安装步骤如下：</p><ol><li> <strong>注册 OAuth Application</strong></li></ol><p>当别人评论你的文章时，会需要它是授权。点击<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9naXRodWIuY29tL3NldHRpbmdzL2FwcGxpY2F0aW9ucy9uZXc=">注册 OAuth Application</a>进行注册，注册界面如下：</p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy9TbmlwYXN0ZV8yMDIwLTAyLTI4XzIwLTE4LTU1LnBuZw?x-oss-process=image/format,png"></p><ul><li>**Application name：**应用名称，自己随意起名。</li><li>**Homepage URL：**博客主页地址，如果有域名，此处填写域名，无域名，填写你的默认github地址：如<code>https://username.github.io</code>。</li><li>**Application description：**应用描述，可选，可以写也可以不写。</li><li><strong>Authorization callback URL：</strong>授权后返回的地址，需要与<strong>Homepage URL</strong>一致。</li></ul><p>点击 <strong>Register application</strong>（注册）会出现 <strong>Client ID/Secret</strong>，接下来就是将信息填入配置文件中。</p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy9TbmlwYXN0ZV8yMDIwLTAyLTI4XzIwLTIyLTQyLnBuZw?x-oss-process=image/format,png"></p><ol start="2"><li> <strong>新建GitHub仓库</strong></li></ol><p>新建仓库就不在多说了，相信大家都会，如果不会的话，前面的文章有写。</p><ol start="3"><li><p><strong>配置 _config.yml 文件</strong></p> <pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"> <span class="token comment"># the Gitalk config，default disabled</span> <span class="token comment"># Gitalk 评论模块的配置，默认为不激活</span> <span class="token key atrule">gitalk</span><span class="token punctuation">:</span><span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token comment"># true即开启评论模块</span><span class="token key atrule">owner</span><span class="token punctuation">:</span> Yafine <span class="token comment"># 填写你的 github 账户名即可</span><span class="token key atrule">repo</span><span class="token punctuation">:</span> Yafine<span class="token punctuation">-</span>gitalks <span class="token comment"># 新建一个仓库或者使用博客托管的仓库也可</span><span class="token key atrule">oauth</span><span class="token punctuation">:</span> <span class="token key atrule">clientId</span><span class="token punctuation">:</span> <span class="token comment">#填写你的clientId</span> <span class="token key atrule">clientSecret</span><span class="token punctuation">:</span> <span class="token comment">#填写你的clientSecret</span><span class="token key atrule">admin</span><span class="token punctuation">:</span> Yafine <span class="token comment">#填写你的 github 账户名即可</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></li><li><p> 然后再进行部署步骤即可，第一次查看效果需要登录github账号，关联授权后，就可以使用评论系统了。</p></li><li><p>注意事项 </p></li></ol><p>在 Hexo 博客中，评论的功能在所有页面都默认开启，但是有的时候我们在页面上不需要显示评论功能，例如分类，标记页面我们并不需要评论功能。</p><p>在 Front-matter 中通过comments属性设置true或false控制该页面或者是文章的评论功能是否打开，如下：</p><pre class="line-numbers language-none"><code class="language-none">title: Tagsdate: 2019-12-19 16:10:19type: "tags"comments: false<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 博客 </tag>
<tag> 博客优化 </tag>
</tags>
</entry>
<entry>
<title>Hexo博客主题安装和优化（五）优化图片，代码</title>
<link href="/posts/ccdb282h.html"/>
<url>/posts/ccdb282h.html</url>
<content type="html"><![CDATA[<p><img src="https://pic.yupoo.com/kalbim/593feb53/f20e2302.png"></p><h1 id="五、博客优化"><a href="#五、博客优化" class="headerlink" title="五、博客优化"></a>五、博客优化</h1><h2 id="1-图片懒加载"><a href="#1-图片懒加载" class="headerlink" title="1. 图片懒加载"></a>1. 图片懒加载</h2><p>使用图片懒加载需要安装插件：<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9naXRodWIuY29tL1Ryb3ktWWFuZy9oZXhvLWxhenlsb2FkLWltYWdl">hexo-lazyload-image</a></p><p>在站点根目录执行下面的命令：</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-lazyload-image --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>之后在站点配置文件下添加下面的代码：</p><pre class="line-numbers language-yml" data-language="yml"><code class="language-yml"><span class="token key atrule">lazyload</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token comment"># 是否开启图片懒加载</span> <span class="token key atrule">onlypost</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># 是否只对文章的图片做懒加载</span> <span class="token key atrule">loadingImg</span><span class="token punctuation">:</span> <span class="token comment"># eg ./images/loading.gif</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre><p>最后执行<code>hexo clean && hexo g && hexo s</code>就可以看到效果了。</p><h2 id="2-代码压缩"><a href="#2-代码压缩" class="headerlink" title="2. 代码压缩"></a>2. 代码压缩</h2><h3 id="方法一：gulp代码压缩"><a href="#方法一：gulp代码压缩" class="headerlink" title="方法一：gulp代码压缩"></a>方法一：gulp代码压缩</h3><p><strong>使用方法：</strong></p><ol><li><p>进入站点根目录下依次执行下面的命令：</p> <pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token comment"># 全局安装gulp模块</span><span class="token function">npm</span> <span class="token function">install</span> gulp -g<span class="token comment"># 安装各种小功能模块 执行这步的时候，可能会提示权限的问题，最好以管理员模式执行</span><span class="token function">npm</span> <span class="token function">install</span> gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save<span class="token comment"># 额外的功能模块</span><span class="token function">npm</span> <span class="token function">install</span> gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p> b. 在Hexo根目录新建文件 <code>gulpfile.js</code>，并复制以下内容到文件中，有中文注释，可以根据自己需求修改。（注意：文件名不能错，一定为<code>gulpfile.js</code>，否则会出错！）</p> <pre class="line-numbers language-js" data-language="js"><code class="language-js"><span class="token keyword">var</span> gulp <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gulp"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> debug <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gulp-debug"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> cleancss <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gulp-clean-css"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//css压缩组件</span><span class="token keyword">var</span> uglify <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gulp-uglify"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//js压缩组件</span><span class="token keyword">var</span> htmlmin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gulp-htmlmin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//html压缩组件</span><span class="token keyword">var</span> htmlclean <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gulp-htmlclean"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//html清理组件</span><span class="token keyword">var</span> imagemin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gulp-imagemin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//图片压缩组件</span><span class="token keyword">var</span> changed <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gulp-changed"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//文件更改校验组件</span><span class="token keyword">var</span> gulpif <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gulp-if"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//任务 帮助调用组件</span><span class="token keyword">var</span> plumber <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gulp-plumber"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//容错组件（发生错误不跳出任务，并报出错误内容）</span><span class="token keyword">var</span> isScriptAll <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">//是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)</span><span class="token keyword">var</span> isDebug <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span> <span class="token comment">//是否调试显示 编译通过的文件</span><span class="token keyword">var</span> gulpBabel <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"gulp-babel"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> es2015Preset <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"babel-preset-es2015"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> del <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"del"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> Hexo <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"hexo"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">var</span> hexo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Hexo</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span><span class="token function">cwd</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> <span class="token comment">// 初始化一个hexo对象</span><span class="token comment">// 清除public文件夹</span>gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">"clean"</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">return</span> <span class="token function">del</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"public/**/*"</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 comment">// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return</span><span class="token comment">// 创建静态页面 （等同 hexo generate）</span>gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">"generate"</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">return</span> hexo<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</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">return</span> <span class="token function">hexo</span> <span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">"generate"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> watch<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</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">return</span> hexo<span class="token punctuation">.</span><span class="token function">exit</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 function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> hexo<span class="token punctuation">.</span><span class="token function">exit</span><span class="token punctuation">(</span>err<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><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 启动Hexo服务器</span>gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">"server"</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">return</span> hexo <span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</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">return</span> <span class="token function">hexo</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">"server"</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> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<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><span class="token punctuation">;</span><span class="token comment">// 部署到服务器</span>gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">"deploy"</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">return</span> hexo<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</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">return</span> <span class="token function">hexo</span> <span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token string">"deploy"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> watch<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</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">return</span> hexo<span class="token punctuation">.</span><span class="token function">exit</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 function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> hexo<span class="token punctuation">.</span><span class="token function">exit</span><span class="token punctuation">(</span>err<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><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 压缩public目录下的js文件</span>gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">"compressJs"</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">return</span> gulp <span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"./public/**/*.js"</span><span class="token punctuation">,</span> <span class="token string">"!./public/libs/**"</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">//排除的js</span> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">gulpif</span><span class="token punctuation">(</span><span class="token operator">!</span>isScriptAll<span class="token punctuation">,</span> <span class="token function">changed</span><span class="token punctuation">(</span><span class="token string">"./public"</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">pipe</span><span class="token punctuation">(</span><span class="token function">gulpif</span><span class="token punctuation">(</span>isDebug<span class="token punctuation">,</span> <span class="token function">debug</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Compress JS:"</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 function">pipe</span><span class="token punctuation">(</span><span class="token function">plumber</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">pipe</span><span class="token punctuation">(</span> <span class="token function">gulpBabel</span><span class="token punctuation">(</span><span class="token punctuation">{</span> presets<span class="token operator">:</span> <span class="token punctuation">[</span>es2015Preset<span class="token punctuation">]</span> <span class="token comment">// es5检查机制</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">pipe</span><span class="token punctuation">(</span><span class="token function">uglify</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//调用压缩组件方法uglify(),对合并的文件进行压缩</span> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">"./public"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//输出到目标目录</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 压缩public目录下的css文件</span>gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">"compressCss"</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> option <span class="token operator">=</span> <span class="token punctuation">{</span> rebase<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]</span> compatibility<span class="token operator">:</span> <span class="token string">"ie7"</span> <span class="token comment">//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]</span> <span class="token comment">//keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]</span> <span class="token comment">//keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">return</span> gulp <span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">"./public/**/*.css"</span><span class="token punctuation">,</span> <span class="token string">"!./public/**/*.min.css"</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token comment">//排除的css</span> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">gulpif</span><span class="token punctuation">(</span><span class="token operator">!</span>isScriptAll<span class="token punctuation">,</span> <span class="token function">changed</span><span class="token punctuation">(</span><span class="token string">"./public"</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">pipe</span><span class="token punctuation">(</span><span class="token function">gulpif</span><span class="token punctuation">(</span>isDebug<span class="token punctuation">,</span> <span class="token function">debug</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Compress CSS:"</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 function">pipe</span><span class="token punctuation">(</span><span class="token function">plumber</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">pipe</span><span class="token punctuation">(</span><span class="token function">cleancss</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">"./public"</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 comment">// 压缩public目录下的html文件</span>gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">"compressHtml"</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> cleanOptions <span class="token operator">=</span> <span class="token punctuation">{</span> protect<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><\!--%fooTemplate\b.*?%--></span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token comment">//忽略处理</span> unprotect<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex"><script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script></span><span class="token regex-delimiter">/</span><span class="token regex-flags">gi</span></span> <span class="token comment">//特殊处理</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">var</span> minOption <span class="token operator">=</span> <span class="token punctuation">{</span> collapseWhitespace<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//压缩HTML</span> collapseBooleanAttributes<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//省略布尔属性的值 <input checked="true"/> ==> <input /></span> removeEmptyAttributes<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//删除所有空格作属性值 <input id="" /> ==> <input /></span> removeScriptTypeAttributes<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//删除<script>的type="text/javascript"</span> removeStyleLinkTypeAttributes<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//删除<style>和<link>的type="text/css"</span> removeComments<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//清除HTML注释</span> minifyJS<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//压缩页面JS</span> minifyCSS<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//压缩页面CSS</span> minifyURLs<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">//替换页面URL</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">return</span> gulp <span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">"./public/**/*.html"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">gulpif</span><span class="token punctuation">(</span>isDebug<span class="token punctuation">,</span> <span class="token function">debug</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Compress HTML:"</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 function">pipe</span><span class="token punctuation">(</span><span class="token function">plumber</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">pipe</span><span class="token punctuation">(</span><span class="token function">htmlclean</span><span class="token punctuation">(</span>cleanOptions<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">htmlmin</span><span class="token punctuation">(</span>minOption<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">"./public"</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 comment">// 压缩 public/medias 目录内图片</span>gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">"compressImage"</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> option <span class="token operator">=</span> <span class="token punctuation">{</span> optimizationLevel<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> <span class="token comment">//类型：Number 默认：3 取值范围：0-7（优化等级）</span> progressive<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">//类型：Boolean 默认：false 无损压缩jpg图片</span> interlaced<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">//类型：Boolean 默认：false 隔行扫描gif进行渲染</span> multipass<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">//类型：Boolean 默认：false 多次优化svg直到完全优化</span><span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token keyword">return</span> gulp <span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token string">"./public/medias/**/*.*"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">gulpif</span><span class="token punctuation">(</span><span class="token operator">!</span>isScriptAll<span class="token punctuation">,</span> <span class="token function">changed</span><span class="token punctuation">(</span><span class="token string">"./public/medias"</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">pipe</span><span class="token punctuation">(</span><span class="token function">gulpif</span><span class="token punctuation">(</span>isDebug<span class="token punctuation">,</span> <span class="token function">debug</span><span class="token punctuation">(</span><span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">"Compress Images:"</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 function">pipe</span><span class="token punctuation">(</span><span class="token function">plumber</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">pipe</span><span class="token punctuation">(</span><span class="token function">imagemin</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token string">"./public"</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 comment">// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器</span>gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">"build"</span><span class="token punctuation">,</span>gulp<span class="token punctuation">.</span><span class="token function">series</span><span class="token punctuation">(</span> <span class="token string">"clean"</span><span class="token punctuation">,</span> <span class="token string">"generate"</span><span class="token punctuation">,</span> <span class="token string">"compressHtml"</span><span class="token punctuation">,</span> <span class="token string">"compressCss"</span><span class="token punctuation">,</span> <span class="token string">"compressJs"</span><span class="token punctuation">,</span> <span class="token string">"compressImage"</span><span class="token punctuation">,</span> gulp<span class="token punctuation">.</span><span class="token function">parallel</span><span class="token punctuation">(</span><span class="token string">"deploy"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 默认任务</span>gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">"default"</span><span class="token punctuation">,</span>gulp<span class="token punctuation">.</span><span class="token function">series</span><span class="token punctuation">(</span> <span class="token string">"clean"</span><span class="token punctuation">,</span> <span class="token string">"generate"</span><span class="token punctuation">,</span> gulp<span class="token punctuation">.</span><span class="token function">parallel</span><span class="token punctuation">(</span><span class="token string">"compressHtml"</span><span class="token punctuation">,</span> <span class="token string">"compressCss"</span><span class="token punctuation">,</span> <span class="token string">"compressJs"</span><span class="token punctuation">,</span><span class="token string">"compressImage"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数</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></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></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> c. 以后的执行方式有两种：</p><ul><li>直接在Hexo根目录执行 <code>gulp</code>或者 <code>gulp default</code> ，这个命令相当于 <code>hexo cl&&hexo g</code> 并且再把代码和图片压缩。</li><li>在Hexo根目录执行 <code>gulp build</code> ，这个命令与第1种相比是：在最后又加了个 <code>hexo d</code> ，等于说生成、压缩文件后又帮你自动部署了。</li></ul><p> 值得注意的是：这个加入了图片压缩，如果不想用图片压缩可以把第154行的 <code>"compressImage",</code> 和第165行的 <code>,"compressImage"</code> 去掉即可</p></li></ol><h3 id="方法二：hexo-neat插件实现代码压缩"><a href="#方法二：hexo-neat插件实现代码压缩" class="headerlink" title="方法二：hexo-neat插件实现代码压缩"></a>方法二：hexo-neat插件实现代码压缩</h3><p><a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9naXRodWIuY29tL3JvemJvL2hleG8tbmVhdA==">hexo-neat</a>插件也是用来压缩代码的，底层也是通过gulp来实现的。</p><p>但是这个插件是有Bug的：</p><ul><li>压缩 md 文件会使 markdown 语法的代码块消失</li><li>会删除全角空格</li></ul><p>在博客站点根目录执行安装代码：</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-neat --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>紧接着在站点根目录下的配置文件添加如下代码：</p><pre class="line-numbers language-yml" data-language="yml"><code class="language-yml"><span class="token key atrule">neat_enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span><span class="token key atrule">neat_html</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">exclude</span><span class="token punctuation">:</span><span class="token key atrule">neat_css</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">exclude</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token string">'*.min.css'</span><span class="token key atrule">neat_js</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">mangle</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">output</span><span class="token punctuation">:</span> <span class="token key atrule">compress</span><span class="token punctuation">:</span> <span class="token key atrule">exclude</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token string">'*.min.js'</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><p>然后直接 <code>hexo cl&&hexo g</code> 就可以了，会自动压缩文件 。</p><p><strong>补充</strong>：为了解决以上Bug，<strong>对于matery主题</strong>（其他主题自行解决）需要将以上默认配置修改为：</p><pre class="line-numbers language-yml" data-language="yml"><code class="language-yml"><span class="token comment">#hexo-neat 优化提速插件（去掉HTML、css、js的blank字符）</span><span class="token key atrule">neat_enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span><span class="token key atrule">neat_html</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">exclude</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token string">'**/*.md'</span><span class="token key atrule">neat_css</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">exclude</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token string">'**/*.min.css'</span><span class="token key atrule">neat_js</span><span class="token punctuation">:</span> <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">mangle</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token key atrule">output</span><span class="token punctuation">:</span> <span class="token key atrule">compress</span><span class="token punctuation">:</span> <span class="token key atrule">exclude</span><span class="token punctuation">:</span> <span class="token punctuation">-</span> <span class="token string">'**/*.min.js'</span> <span class="token punctuation">-</span> <span class="token string">'**/**/instantpage.js'</span> <span class="token punctuation">-</span> <span class="token string">'**/matery.js'</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><h2 id="3-打造稳定快速、高效免费图床"><a href="#3-打造稳定快速、高效免费图床" class="headerlink" title="3.打造稳定快速、高效免费图床"></a>3.打造稳定快速、高效免费图床</h2><blockquote><p>请看我的另一篇博客文章:<a href="https://white/_maple.gitee.io/posts/eb3a.html">https://white\_maple.gitee.io/posts/eb3a.html</a></p></blockquote><h2 id="4-CDN加速"><a href="#4-CDN加速" class="headerlink" title="4. CDN加速"></a>4. CDN加速</h2><blockquote><p>推荐一位大佬的博客文章：<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly95YWZpbmUtYmxvZy5jbi9wb3N0cy9lZTM1Lmh0bWw=">https://yafine-blog.cn/posts/ee35.html</a></p></blockquote><h1 id="五、部署到Coding和码云"><a href="#五、部署到Coding和码云" class="headerlink" title="五、部署到Coding和码云"></a>五、部署到Coding和码云</h1><blockquote><p>推荐一位大佬的文章：<a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly95YWZpbmUtYmxvZy5jbi9wb3N0cy81MWZiLmh0bWw=">https://yafine-blog.cn/posts/51fb.html</a></p></blockquote><h1 id="l六、新建文章自动打开本地Markdown编辑器"><a href="#l六、新建文章自动打开本地Markdown编辑器" class="headerlink" title="l六、新建文章自动打开本地Markdown编辑器"></a>l六、新建文章自动打开本地Markdown编辑器</h1><p>写新文章时，需要控制台执行<code>hexo new "文章名字"</code>，这样就会在<code>_posts</code>下生成一篇新文章，但需要手动打开，挺麻烦，只需要在站点根目录下新建<code>scripts</code>目录，然后在新建<code>auto_open.js</code>，在文件填入一下内容：</p><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> spawn <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'child_process'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>exec<span class="token punctuation">;</span><span class="token comment">// Hexo 2.x 用户复制这段</span><span class="token comment">//hexo.on('new', function(path){</span> <span class="token comment">//spawn('start "markdown编辑器绝对路径.exe" ' + path);</span><span class="token comment">//});</span><span class="token comment">// Hexo 3 用户复制这段</span>hexo<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'new'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">spawn</span><span class="token punctuation">(</span><span class="token string">'start "D:\Program Files\Typorae\Typora.exe" '</span> <span class="token operator">+</span> data<span class="token punctuation">.</span>path<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 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><p>其中<code>"D:\Program Files\Typorae\Typora.exe"</code>是我本地编辑器的路径，只需要改为你本地编辑器的路径即可，然后在执行<code>hexo cl && hexo g \-d</code>，部署到GitHub即可，以后在发布文章就会自动打开编辑器。</p><p>文章参考来源**</p><ul><li><p><a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9naXRodWIuY29tL2JsaW5rZm94L2hleG8tdGhlbWUtbWF0ZXJ5L2Jsb2IvZGV2ZWxvcC9SRUFETUVfQ04ubWQ=">matery主题文档</a></p></li><li><p><a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9ibG9nLmxpY2FyZG8uY24vcG9zdHMvMTExOTkv">Matery主题配置豆瓣插件</a></p></li><li><p><a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly93d3cuaXRyaHguY29tLzIwMTgvMDgvMjcvQTA0LUhleG8tYmxvZy10b3BpYy1wZXJzb25hbGl6YXRpb24v">Hexo博客主题个性化</a></p></li><li><p><a href="https://yafine-blog.cn/posts/4ab2.html#toc-heading-78">Hexo+github搭建博客(超级详细版，精细入微)</a></p></li><li><p><a href="https://yafine-blog.cn/go.html?url=aHR0cHM6Ly9ibG9nLmh2bm9idWcuY29tL3Bvc3QvaGV4by1vcHRpbWl6ZS5odG1s">hexo博客美化</a></p><h2 id="—Kalbim—"><a href="#—Kalbim—" class="headerlink" title="—Kalbim—"></a>—<a href="https://kaiboshi.gitee.io/">Kalbim</a>—</h2></li></ul>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 博客 </tag>
<tag> 博客优化 </tag>
</tags>
</entry>
<entry>
<title>Hexo博客主题安装和优化（四）域名解析与绑定</title>
<link href="/posts/ccdb282.html"/>
<url>/posts/ccdb282.html</url>
<content type="html"><![CDATA[]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 博客 </tag>
<tag> 博客优化 </tag>
</tags>
</entry>
<entry>
<title>Hexo安装教程</title>
<link href="/posts/ea543d5.html"/>
<url>/posts/ea543d5.html</url>
<content type="html"><![CDATA[<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>使用github pages服务搭建博客的好处有：</p><ol><li><p>全是静态文件，访问速度快；</p></li><li><p>免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；</p></li><li><p>可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；</p></li><li><p>数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；</p></li><li><p>博客内容可以轻松打包、转移、发布到其它平台；</p></li><li><p>等等；</p></li></ol><h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><ol><li><p>首先安装git、node，Mac需先安装Homebrew，Windows可以去<a href="http://nodejs.cn/">node官网</a>和<a href="https://git-scm.com/">git官网</a>下载安装</p> <pre class="line-numbers language-sh" data-language="sh"><code class="language-sh">brew install gitbrew install node<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre></li><li><p>配置SSH key，用于连接GitHub上传博客</p> <pre class="line-numbers language-sh" data-language="sh"><code class="language-sh">cd ~/.ssh #检查本机已存在的ssh密钥<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li><p>如果提示：No such file or directory 说明你是第一次使用git。</p> <pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">ssh-keygen -t rsa -C <span class="token string">"你的邮箱地址"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p> 第一次回车确认生成路径，第二次会车输入密码，第三次回车确认密码；这个密码pull或push的时候会用到，当然也可以为空</p><p> <img src="https://sky03-blog-images.oss-cn-beijing.aliyuncs.com/2019-3-7/2019-03-07%2013.03.24.png" alt="SSH"></p></li><li><p>生成的密钥一般在用户目录下，打开用户目录，找到<code>.ssh/id_rsa.pub</code>文件，记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key:</p><p> 将刚复制的内容粘贴到key那里，title随便填，保存。</p></li><li><p>测试是否成功</p> <pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">ssh</span> -T git@github.com <span class="token comment">#注意邮箱地址不用改</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p> 有密码的会提示输入密码，就是刚才自己设置的密码</p><p> 如果提示<code>Are you sure you want to continue connecting (yes/no)?</code>，输入yes，然后会看到：</p><blockquote><p>Hi skyls03! You’ve successfully authenticated, but GitHub does not provide shell access.</p></blockquote><p> 看到这个信息说明SSH已配置成功！<br> 此时你还需要配置：</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">"skyls03"</span> <span class="token comment"># 你的github用户名，非昵称</span><span class="token function">git</span> config --global user.email <span class="token string">"skyls03@qq.com"</span> <span class="token comment"># 填写你的github注册邮箱</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><p> 这个是提交的时候的一种身份声明，说明你是谁。</p></li></ol><h2 id="配置Hexo"><a href="#配置Hexo" class="headerlink" title="配置Hexo"></a>配置Hexo</h2><p>Hexo官网：<a href="http://hexo.io/">http://hexo.io</a></p><h3 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h3><p>由于github pages存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，假如每次写完一篇文章都要手动更新博文目录和相关链接信息，相信谁都会疯掉，所以hexo所做的就是将这些md文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到github。</p><h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><p>执行命令：</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-cli -g<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h3 id="初始化博客"><a href="#初始化博客" class="headerlink" title="初始化博客"></a>初始化博客</h3><p>cd到你电脑上放博客的位置(必需是空文件夹,注意是否包含隐藏文件)，然后再初始化</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token builtin class-name">cd</span> /Users/sky03/Bloghexo init<span class="token function">npm</span> <span class="token function">install</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>然后生成静态博客文件</p><pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo g<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">hexo s<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p>在浏览器中输入 <code>http://localhost:4000</code><br>如果出现以下画面就说明成功了！<br><img src="https://sky03-blog-images.oss-cn-beijing.aliyuncs.com/2019-3-7/2019-03-07%2013.42.04.png" alt="HEXO"></p>]]></content>
<categories>
<category> 关于Hexo博客 </category>
</categories>
<tags>
<tag> Hexo </tag>
<tag> 博客 </tag>
</tags>
</entry>
</search>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
