-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsearch.xml
More file actions
71 lines (33 loc) · 39.1 KB
/
search.xml
File metadata and controls
71 lines (33 loc) · 39.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>解决layui数据表格回显问题</title>
<link href="/2022/04/27/jie-jue-layui-shu-ju-biao-ge-hui-xian-wen-ti/"/>
<url>/2022/04/27/jie-jue-layui-shu-ju-biao-ge-hui-xian-wen-ti/</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>有属性： private Date createtime;</p><p>但是回显的时候，显示 {Object object}，想要转换成字符串格式显示。</p><p><strong>layui 中显示：</strong></p><p>在对应的实体类中添加属性：private String createtimestr;</p><p>然后添加对应的 set/get 方法，但是方法处理的是 createtime</p><p>但是在 Mybatis-plus 框架映射时，数据库表里面又没有该字段，获取数据的时候会报异常，unknown field “createtimestr” in table ，</p><p><strong>解决办法，</strong>在添加的属性上面添加注解 @TableField(exist = false)</p><p>用于表示表中没有该字段，不然报错。</p><p>最后就是</p><p><strong>方法二：</strong></p><p>在前端页面创建处理时间的函数：</p><pre class=" language-js"><code class="language-js"><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><span class="token operator">></span> <span class="token keyword">function</span> <span class="token function">dateToStr</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> time <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>date<span class="token punctuation">.</span>time<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> y <span class="token operator">=</span> time<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> M <span class="token operator">=</span> time<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span> M <span class="token operator">=</span> M <span class="token operator"><</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token punctuation">(</span><span class="token string">"0"</span> <span class="token operator">+</span> M<span class="token punctuation">)</span> <span class="token punctuation">:</span> M<span class="token punctuation">;</span> <span class="token keyword">var</span> d <span class="token operator">=</span> time<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> d <span class="token operator">=</span> d <span class="token operator"><</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token punctuation">(</span><span class="token string">"0"</span> <span class="token operator">+</span> d<span class="token punctuation">)</span> <span class="token punctuation">:</span> d<span class="token punctuation">;</span> <span class="token keyword">var</span> h <span class="token operator">=</span> time<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> h <span class="token operator">=</span> h <span class="token operator"><</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token punctuation">(</span><span class="token string">"0"</span> <span class="token operator">+</span> h<span class="token punctuation">)</span> <span class="token punctuation">:</span> h<span class="token punctuation">;</span> <span class="token keyword">var</span> m <span class="token operator">=</span> time<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> m <span class="token operator">=</span> m <span class="token operator"><</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token punctuation">(</span><span class="token string">"0"</span> <span class="token operator">+</span> m<span class="token punctuation">)</span> <span class="token punctuation">:</span> m<span class="token punctuation">;</span> <span class="token keyword">var</span> s <span class="token operator">=</span> time<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> s <span class="token operator">=</span> s <span class="token operator"><</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token punctuation">(</span><span class="token string">"0"</span> <span class="token operator">+</span> s<span class="token punctuation">)</span> <span class="token punctuation">:</span> s<span class="token punctuation">;</span> <span class="token keyword">var</span> str <span class="token operator">=</span> y <span class="token operator">+</span> <span class="token string">"-"</span> <span class="token operator">+</span> M <span class="token operator">+</span> <span class="token string">"-"</span> <span class="token operator">+</span> d <span class="token operator">+</span> <span class="token string">" "</span> <span class="token operator">+</span> h <span class="token operator">+</span> <span class="token string">":"</span> <span class="token operator">+</span> m <span class="token operator">+</span> <span class="token string">":"</span> <span class="token operator">+</span> s<span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> str<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></code></pre><p>然后再模板输出</p><pre class=" language-js"><code class="language-js"><span class="token punctuation">{</span>field<span class="token punctuation">:</span> <span class="token string">'createtime'</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">'发布时间'</span><span class="token punctuation">,</span>sort<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> minWidth<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>templet<span class="token punctuation">:</span><span class="token string">'<div>{{dateToStr(d.createtime)}}</div>'</span><span class="token punctuation">}</span></code></pre><p>或者</p><pre class=" language-js"><code class="language-js"><span class="token punctuation">{</span>field<span class="token punctuation">:</span> <span class="token string">'createtime'</span><span class="token punctuation">,</span> title<span class="token punctuation">:</span> <span class="token string">'发布时间'</span><span class="token punctuation">,</span>sort<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> minWidth<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>templet<span class="token punctuation">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span>d<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">dateToStr</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span>createtime<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></code></pre><p>还有就是，时间对象里面会有个 time 时间戳属性，可以通过 new Date（xxx.time），即可。</p><p>以上这篇解决 layui 数据表格 Date 日期格式的回显 Object 的问题就是小编分享给大家的全部内容了，希望能给大家一个参考。</p><p>声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。</p>]]></content>
<tags>
<tag> layui学习 </tag>
</tags>
</entry>
<entry>
<title>Hexo主题美化</title>
<link href="/2022/04/20/hexo-zhu-ti-mei-hua/"/>
<url>/2022/04/20/hexo-zhu-ti-mei-hua/</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h2 id="0-1-说明"><a href="#0-1-说明" class="headerlink" title="0|1 说明"></a><strong><em>0</em></strong>|<strong><em>1</em></strong> <strong>说明</strong></h2><p>前两篇文章介绍了 <code>Hexo</code> + <code>github pages</code> + <code>travis ci</code> 进行自动化部署，并介绍了 <code>Hexo</code> 的配置文件中的各个属性，相信通过前两篇文章的学习，你已经学会了如何搭建自己的博客，并能够根据自己的需要进行个性化配置。</p><p>这一篇将以 <code>Matery</code> 这款主题为例，说明一下主题应该如何配置。包括主题配置、插件设置、注意事项等。</p><h2 id="0-1-设置博客主题"><a href="#0-1-设置博客主题" class="headerlink" title="0|1 设置博客主题"></a><strong><em>0</em></strong>|<strong><em>1</em></strong> <strong>设置博客主题</strong></h2><p>先到<a href="https://hexo.io/themes/">这里</a> 选择你喜欢的主题，点击它的标题（注意，点图片是进去 <em>demo</em> 站点，点标题才是跳转到对应到 <em>github</em> 仓库），跳转到 <em>github</em> 仓库，复制其仓库地址。</p><p>比如我使用到主题是 <code>Matery</code> ，其项目地址为：<code>git@github.com:blinkfox/hexo-theme-matery.git</code>。</p><p>打开本地目录，来到与我们的博客项目同级的目录（注意是同级，不是在博客项目内部），将主题项目克隆到本地。</p><pre><code>git clone git@github.com:blinkfox/hexo-theme-matery.git</code></pre><p>在博客项目下的 <em>themes</em> 文件夹里新建一个叫 <em>matery</em> 的文件夹，然后将主题文件复制到这个文件夹里：</p><pre><code>mkdir breeze-blog/themes/materycp -r hexo-theme-matery/* breeze-blog/themes/matery</code></pre><p>这里的 <em>breeze-blog</em> 是我的博客项目所在的文件夹，这里替换成你的即可。</p><p>再次打开我们的配置文件 (_<em>config.yml</em>)，修改 <em>theme</em> 属性，设置为博客主题所在的文件夹名，这里即为 _matery_，注意要与文件夹名称完全一致。</p><p>然后我们重新生成一下博客静态文件：</p><pre><code>cd breeze-bloghexo clean && hexo generatehexo server</code></pre><p>然后再打开我们的博客地址：<code>localhost:4000</code>，我们的主题便设置好了。</p><p><img src="https://i.loli.net/2020/05/04/YKwFax1NrtVL6Zo.jpg"></p><p>但现在大部分信息都是默认数据，所以我们需要根据需要进行自定义设置，不同主题的配置文件都不太一样，因此设置方法也有所不同，这里仅介绍 <code>Matery</code> 主题的设置方法。</p><h2 id="0-1-主题内容自定义"><a href="#0-1-主题内容自定义" class="headerlink" title="0|1 主题内容自定义"></a><strong><em>0</em></strong>|<strong><em>1</em></strong> <strong>主题内容自定义</strong></h2><h3 id="新建页面"><a href="#新建页面" class="headerlink" title="新建页面"></a>新建页面</h3><p>如果你点击首页最上面的那一栏，会发现很多页面打开是没有的，因为我们还没有创建对应的页面，所以需要先创建对应的页面。</p><p><img src="https://i.loli.net/2020/05/04/9o7sjVdBMcm24TP.jpg"></p><p>先新建分类 <code>categories</code> 页，<code>categories</code> 页是用来展示所有分类的页面，命令如下：</p><pre><code>hexo new page "categories"</code></pre><p>编辑新建的页面文件 _/source/categories/index.md_，写入以下内容：</p><pre><code>---title: categoriesdate: 2020-05-04 10:40:13type: "categories"layout: "categories"---</code></pre><p>然后新建标签 <code>tags</code> 页，<code>tags</code> 页是用来展示所有标签的页面，命令如下：</p><pre><code>hexo new page "tags"</code></pre><p>编辑新建的页面文件 _/source/tags/index.md_，写入以下内容：</p><pre><code>---title: tagsdate: 2020-05-04 10:40:14type: "tags"layout: "tags"---</code></pre><p>接下来是新建 <code>about</code> 页，<code>about</code> 页是用来展示关于我和我的博客信息的页面，命令如下：</p><pre><code>hexo new page "about"</code></pre><p>编辑新建的页面文件 <code>/source/about/index.md</code>，写入以下内容：</p><pre><code>---title: aboutdate: 2020-05-04 10:40:15type: "about"layout: "about"---</code></pre><p>然后新建留言板 <code>contact</code> 页，<code>contact</code> 页是用来展示留言板信息的页面，方便其他人进行统一留言，命令如下：</p><pre><code>hexo new page "contact"</code></pre><p>编辑新建的页面文件 _/source/contact/index.md_，写入以下内容：</p><pre><code>---title: contactdate: 2020-05-04 10:40:16type: "contact"layout: "contact"---</code></pre><p>注意，留言板功能依赖于第三方评论系统，需要先激活评论系统才有效果，如果嫌麻烦不想使用，也可以不处理，后面在菜单栏里去掉这一选项即可。</p><p>最后，新建友情链接 <code>friends</code> 页，<code>friends</code> 页是用来展示友情链接信息的页面，命令如下：</p><pre><code>hexo new page "friends"</code></pre><p>编辑新建的页面文件 _/source/friends/index.md_，写入以下内容：</p><pre><code>---title: friendsdate: 2020-05-04 10:40:17type: "friends"layout: "friends"---</code></pre><p>同时，在你的博客 <code>source</code> 目录下新建 _<em>data</em> 目录，在 _<em>data</em> 目录中新建 <em>friends.json</em> 文件，文件内容如下所示：</p><pre><code>[{ "avatar": "https://mfrank2016.github.io/breeze-blog/medias/avatar.jpg", "name": "清风", "introduction": "技术博主，文章还不错", "url": "https://mfrank2016.github.io/breeze-blog/", "title": "前去学习"}, { "avatar": "https://draveness.me/images/draven-logo.png", "name": "真没什么逻辑", "introduction": "面向信仰编程", "url": "https://draveness.me/", "title": "前去学习"}]</code></pre><p>这里可以根据需要进行删减，当然，要看效果可以先这样设置，之后再来修改也不迟。</p><p>新建完页面后，我们再重新生成一下博客静态页，然后运行一下项目，便能看到效果了。这里标签页和分类页都只会展示现有博客的标签和分类数据，所以如果还没有文章设置标题或者分类，那么对应页面是没有数据的。要想看到效果，就得先写几篇文章。</p><h3 id="菜单导航配置"><a href="#菜单导航配置" class="headerlink" title="菜单导航配置"></a>菜单导航配置</h3><h4 id="配置基本菜单导航的名称、路径-url-和图标-icon"><a href="#配置基本菜单导航的名称、路径-url-和图标-icon" class="headerlink" title="配置基本菜单导航的名称、路径 url 和图标 icon."></a>配置基本菜单导航的名称、路径 url 和图标 icon.</h4><ol><li>菜单导航名称可以是中文也可以是英文 (如：<code>Index</code>或<code>主页</code>) 2. 图标 icon 可以在 <a href="https://fontawesome.com/icons">Font Awesome</a> 中查找</li></ol><pre><code>menu: Index: url: / icon: fas fa-home Tags: url: /tags icon: fas fa-tags Categories: url: /categories icon: fas fa-bookmark Archives: url: /archives icon: fas fa-archive About: url: /about icon: fas fa-user-circle Friends: url: /friends icon: fas fa-address-book</code></pre><h4 id="二级菜单配置方法"><a href="#二级菜单配置方法" class="headerlink" title="二级菜单配置方法"></a>二级菜单配置方法</h4><p>如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作 </p><ol><li>在需要添加二级菜单的一级菜单下添加<code>children</code>关键字 (如:<code>About</code>菜单下添加<code>children</code>) </li><li>在<code>children</code>下创建二级菜单的 名称 name, 路径 url 和图标 icon. </li><li>注意每个二级菜单模块前要加 <code>-</code>. </li><li>注意缩进格式</li></ol><pre><code>menu: Index: url: / icon: fas fa-home Tags: url: /tags icon: fas fa-tags Categories: url: /categories icon: fas fa-bookmark Archives: url: /archives icon: fas fa-archive About: url: /about icon: fas fa-user-circle-o Friends: url: /friends icon: fas fa-address-book Medias: icon: fas fa-list children: - name: Musics url: /musics icon: fas fa-music - name: Movies url: /movies icon: fas fa-film - name: Books url: /books icon: fas fa-book - name: Galleries url: /galleries icon: fas fa-image</code></pre><p>执行 <code>hexo clean && hexo g</code> 重新生成博客文件，然后就可以在文章中对应位置看到你用<code>emoji</code>语法写的表情了。</p><h3 id="代码高亮"><a href="#代码高亮" class="headerlink" title="代码高亮"></a>代码高亮</h3><p>由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 <a href="https://github.com/ele828/hexo-prism-plugin">hexo-prism-plugin</a> 的 Hexo 插件来做代码高亮，安装命令如下：</p><pre><code>npm i -S hexo-prism-plugin</code></pre><p>然后，修改 Hexo 根目录下 <code>_config.yml</code> 文件中 <code>highlight.enable</code> 的值为 <code>false</code>，并新增 <code>prism</code> 插件相关的配置，主要配置如下：</p><pre><code>highlight: enable: falseprism_plugin: mode: 'preprocess' # realtime/preprocess theme: 'tomorrow' line_number: false # default false custom_css:</code></pre><h3 id="搜索"><a href="#搜索" class="headerlink" title="搜索"></a>搜索</h3><p>主题中还使用到了 <a href="https://github.com/wzpan/hexo-generator-search">hexo-generator-search</a> 的 Hexo 插件来做内容搜索，安装命令如下：</p><pre><code>npm install hexo-generator-search --save</code></pre><p>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre><code>search: path: search.xml field: post</code></pre><p>效果图如下：</p><p><img src="https://i.loli.net/2020/05/04/RrE3pQdq9CmtcTP.jpg"></p><h3 id="中文链接转拼音（建议安装）"><a href="#中文链接转拼音（建议安装）" class="headerlink" title="中文链接转拼音（建议安装）"></a>中文链接转拼音（建议安装）</h3><p>如果你的文章名称是中文的，那么 <em>Hexo</em> 默认生成的永久链接也会有中文，这样不利于 <code>SEO</code>，且 <code>gitment</code> 评论对中文链接也不支持。我们可以用 <a href="https://github.com/viko16/hexo-permalink-pinyin">hexo-permalink-pinyin</a> <em>Hexo</em> 插件使在生成文章时生成中文拼音的永久链接。</p><p>安装命令如下：</p><pre><code>npm i hexo-permalink-pinyin --save</code></pre><p>在 <em>Hexo</em> 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre><code>permalink_pinyin: enable: true separator: '-' # default: '-'</code></pre><h3 id="文章字数统计插件（建议安装）"><a href="#文章字数统计插件（建议安装）" class="headerlink" title="文章字数统计插件（建议安装）"></a>文章字数统计插件（建议安装）</h3><p>如果你想要在文章中显示文章字数、阅读时长信息，可以安装 <a href="https://github.com/willin/hexo-wordcount">hexo-wordcount</a> 插件。</p><p>安装命令如下：</p><pre><code>npm i --save hexo-wordcount</code></pre><p>然后只需在本主题下的 <code>_config.yml</code> 文件中，将各个文章字数相关的配置激活即可：</p><pre><code>postInfo: date: true update: true wordCount: true # 设置文章字数统计为 true. totalCount: true # 设置站点文章总字数统计为 true. min2read: true # 阅读时长. readCount: true # 阅读次数.</code></pre><h3 id="添加-emoji-表情支持（可选的）"><a href="#添加-emoji-表情支持（可选的）" class="headerlink" title="添加 emoji 表情支持（可选的）"></a>添加 emoji 表情支持（可选的）</h3><p><em>Matery</em> 主题新增了对<code>emoji</code>表情的支持，使用到了 <a href="https://npm.taobao.org/package/hexo-filter-github-emojis">hexo-filter-github-emojis</a> 的 Hexo 插件来支持 <code>emoji</code>表情的生成，把对应的<code>markdown emoji</code>语法（<code>::</code>, 例如：<code>:smile:</code>）转变成会跳跃的<code>emoji</code>表情，安装命令如下：</p><pre><code>npm install hexo-filter-github-emojis --save</code></pre><p>在 <em>Hexo</em> 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre><code>githubEmojis: enable: true className: github-emoji inject: true styles: customEmojis:</code></pre><h3 id="添加-RSS-订阅支持（可选的）"><a href="#添加-RSS-订阅支持（可选的）" class="headerlink" 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><code>npm install hexo-generator-feed --save</code></pre><p>在 <em>Hexo</em> 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p><pre><code>feed: type: atom path: atom.xml limit: 20 hub: content: content_limit: 140 content_limit_delim: ' ' order_by: -date</code></pre><p>执行 <code>hexo clean && hexo g</code> 重新生成博客文件，然后在 <code>public</code> 文件夹中即可看到 <code>atom.xml</code> 文件，说明你已经安装成功了。</p><h3 id="添加-DaoVoice-在线聊天功能（可选的）"><a href="#添加-DaoVoice-在线聊天功能（可选的）" class="headerlink" title="添加 DaoVoice 在线聊天功能（可选的）"></a>添加 <a href="http://www.daovoice.io/">DaoVoice</a> 在线聊天功能（可选的）</h3><p>前往 <a href="http://www.daovoice.io/">DaoVoice</a> 官网注册并且获取 <code>app_id</code>，并将 <code>app_id</code> 填入主题的 <code>_config.yml</code> 文件中。</p><h3 id="添加-Tidio-在线聊天功能（可选的）"><a href="#添加-Tidio-在线聊天功能（可选的）" class="headerlink" title="添加 Tidio 在线聊天功能（可选的）"></a>添加 <a href="https://www.tidio.com/">Tidio</a> 在线聊天功能（可选的）</h3><p>前往 <a href="https://www.tidio.com/">Tidio</a> 官网注册并且获取 <code>Public Key</code>，并将 <code>Public Key</code> 填入主题的 <code>_config.yml</code> 文件中。</p><h3 id="修改社交链接"><a href="#修改社交链接" class="headerlink" title="修改社交链接"></a>修改社交链接</h3><p>在主题的 <code>_config.yml</code> 文件中，默认支持 <code>QQ</code>、<code>GitHub</code> 和邮箱等的配置，你可以在主题文件的 <code>/layout/_partial/social-link.ejs</code> 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：</p><pre><code><% if (theme.socialLink.github) { %> <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50"> <i class="fab fa-github"></i> </a><% } %></code></pre><p>其中，社交图标（如：<code>fa-github</code>）你可以在 <a href="https://fontawesome.com/icons">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><h3 id="修改打赏的二维码图片"><a href="#修改打赏的二维码图片" class="headerlink" title="修改打赏的二维码图片"></a>修改打赏的二维码图片</h3><p>在主题文件的 <code>source/medias/reward</code> 文件中，可以替换成你的微信和支付宝的打赏二维码图片。</p><h3 id="配置音乐播放器（可选的）"><a href="#配置音乐播放器（可选的）" class="headerlink" title="配置音乐播放器（可选的）"></a>配置音乐播放器（可选的）</h3><p>要支持音乐播放，在主题的 <code>_config.yml</code> 配置文件中激活 music 配置即可：</p><pre><code># 是否在首页显示音乐music: enable: true title: #非吸底模式有效 enable: true show: 听听音乐 server: netease #require music platform: netease, tencent, kugou, xiami, baidu type: playlist #require song, playlist, album, search, artist id: 503838841 #require song id / playlist id / album id / search keyword fixed: false # 开启吸底模式 autoplay: false # 是否自动播放 theme: '#42b983' loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none' order: 'random' # 音频循环顺序, 可选值: 'list', 'random' preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto' volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效 listFolded: true # 列表默认折叠</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>获取示例: 打开手机版网易云音乐，选择喜欢的歌单，然后点击分享</p></blockquote><p>我这里随便选了一个歌单，分享后的文字长这样：</p><blockquote><p>分享真咸鱼饼干的歌单《青年节：致逐梦人，有志者事竟成》<a href="http://music.163.com/playlist/4965675848/1548006936/?userid=120124365">http://music.163.com/playlist/4965675848/1548006936/?userid=120124365</a> (@网易云音乐)</p></blockquote><p><code>4965675848</code> 这就是歌单的 id，文件里默认设置的歌单其实也还不错，歌挺多的，所以如果没什么特殊要求，使用默认歌单也不错。</p><p>⚠️这里需要注意一点，如果你想要替换成自己的歌单时，会发现，后续歌单的更新是不会影响到它的，这也是我捣鼓半天才发现的，音乐插件使用的是 <em>Aplayer</em> 播放器，在 <em><a href="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js">https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js</a></em> 这个文件里可以看到，数据是从这个接口获取的：_<a href="https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r">https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r</a>_，猜测服务端是直接将获取到的榜单列表写进里数据库，但后续不会进行更新，所以导致无论多少次刷新，都只能获取第一次取到的数据。</p><p>所以有两种解决办法，第一种是创建新歌单，然后一次性添加足够多的歌，然后在配置文件中替换成你的歌单 id，另一种是自己写一个网易云音乐歌单解析接口，来获取网易云音乐数据。我比较懒，所以选择了第一种方案，23333，还在充实歌单中。</p><h2 id="0-1-文章-Front-matter-介绍"><a href="#0-1-文章-Front-matter-介绍" class="headerlink" title="0|1 文章 Front-matter 介绍"></a><strong><em>0</em></strong>|<strong><em>1</em></strong> <strong>文章 Front-matter 介绍</strong></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><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><tr><td>keywords</td><td>文章标题</td><td>文章关键字，SEO 时需要</td></tr><tr><td>reprintPolicy</td><td>cc_by</td><td>文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个</td></tr></tbody></table><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><li>您可以在文章 md 文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则</li></ol></blockquote><p>以下为文章的 <code>Front-matter</code> 示例。</p><p>最简示例</p><pre><code>---title: typora-vue-theme主题介绍date: 2018-09-07 09:25:00---</code></pre><p>最全示例</p><pre><code>---title: typora-vue-theme主题介绍date: 2018-09-07 09:25:00author: 赵奇img: /source/images/xxx.jpgtop: truecover: truecoverImg: /images/1.jpgpassword: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92toc: falsemathjax: falsesummary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要categories: Markdowntags: - Typora - Markdown---</code></pre><p>上述大部分内容都来自主题说明文档，只是添加了一下我觉得需要注意的地方。这里还有一些没有说到到的属性，这配置文件里都有详细的介绍，确实不需要过多解释。</p><p>最后再介绍一下我折腾比较久的插件，valine 评价插件。</p><h2 id="0-1Valine-评价插件"><a href="#0-1Valine-评价插件" class="headerlink" title="0|1Valine 评价插件"></a><strong><em>0</em></strong>|1Valine 评价插件</h2><p>插件主页：_<a href="https://valine.js.org/">https://valine.js.org/</a>_ ，上面有详细的介绍，可以查看<a href="https://valine.js.org/quickstart.html">这里</a>，注册后，验证邮箱，绑定手机号，然后新建一个应用，获取到对应的 <code>AppId</code> 和 <code>AppKey</code>，然后写回到主题文件下到 <code>_config.yml</code> 文件里，但是要<strong>注意一点，不要直接使用国内版进行注册，而要用国际版，否则无法申请二级域名</strong>。</p><pre><code>valine: enable: true appId: XXX appKey: XXX notify: true verify: false visitor: true avatar: 'retro' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide pageSize: 10 placeholder: 'Comment here' # Comment Box placeholder background: /medias/comment_bg.png</code></pre><p>最新版的 <code>Valine</code> 已经移除了邮件通知功能。如果没有邮件通知，很可能别人评价之后，你却毫不知情，后续回复对方也收不到。因此，需要再配置一个插件来实现， ++<a href="https://github.com/zhaojun1998/Valine-Admin++">https://github.com/zhaojun1998/Valine-Admin++</a> 。在配置这个插件之前，需要确保 <code>Valine</code> 可以正常工作，可以自己给自己评论一下进行测试。</p><p>配置好之后，别人在你的文章下评论后你便能收到邮件通知了。</p><p>至此，<code>Matery</code> 主题就搭建配置完成了，接下来就只需要安心写博客了～</p>]]></content>
<tags>
<tag> 博客主题 </tag>
</tags>
</entry>
<entry>
<title>SpringMVC笔记1</title>
<link href="/2022/04/19/springmvc-bi-ji-1/"/>
<url>/2022/04/19/springmvc-bi-ji-1/</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><h1 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h1><p>这是我的第一篇Hexo文章</p>]]></content>
</entry>
<entry>
<title>Hello World</title>
<link href="/2022/04/19/hello-world/"/>
<url>/2022/04/19/hello-world/</url>
<content type="html"><![CDATA[<link rel="stylesheet" class="aplayer-secondary-style-marker" href="\assets\css\APlayer.min.css"><script src="\assets\js\APlayer.min.js" class="aplayer-secondary-script-marker"></script><p>Welcome to <a href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p><h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><pre class=" language-bash"><code class="language-bash">$ hexo new <span class="token string">"My New Post"</span></code></pre><p>More info: <a href="https://hexo.io/docs/writing.html">Writing</a></p><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><pre class=" language-bash"><code class="language-bash">$ hexo server</code></pre><p>More info: <a href="https://hexo.io/docs/server.html">Server</a></p><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><pre class=" language-bash"><code class="language-bash">$ hexo generate</code></pre><p>More info: <a href="https://hexo.io/docs/generating.html">Generating</a></p><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><pre class=" language-bash"><code class="language-bash">$ hexo deploy</code></pre><p>More info: <a href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>]]></content>
</entry>
</search>