主题配置
上次主要是对主题的使用作下简答的说明,现在说的是主题的美化,注意此处讨论的主题为Tranquilpeak,如有不适请自行Google。
添加搜索
搜索功能采用的是algolia
提供的服务,国际惯例注册账号,然后创建index,然后是安装插件hexo-algoliasearch
,网上教程安装的是hexo-algolia
插件,由于Tranquilpeak的原作者文档说明使用的hexo-algoliasearch
,故所有配置基于hexo-algoliasearch
,具体配置参考hexo-algoliasearch
注意:配置完成后需要执行hexo algolia
命令更新索引。
添加live2d
首先安装npm install --save hexo-helper-live2d
插件,然后安装npm install live2d-widget-model-xxxx
,此处的xxxx
代表具体的主题样式,如我采用的live2d-widget-model-koharu
,再在hexo的工程下面的_config.yml
文件中添加如下代码用于控制模型的显示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| live2d: enable: true scriptFrom: local model: use: live2d-widget-model-koharu display: position: right width: 100 height: 200 vOffset: -60 mobile: show: true scale: 0.5 react: opacityDefault: 0.9 opacityOnHover: 0.1
|
具体的属性可参考:L2Dwidget.js
文件。下面列出了安装后能够看到效果的module,自行选择食用。
添加网站访问统计
引入js文件
1
| <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
|
在footer中添加如下代码:
1 2 3 4 5 6 7 8 9
| <span id="busuanzi_container_site_uv"> Total <span id="busuanzi_value_site_uv"></span> visitors. </span> <% if (is_post()) { %> <span id="busuanzi_container_page_pv"> Total reading <span id="busuanzi_value_page_pv"></span> times. </span> <% } %>
|
添加博客时长
在footer中添加博客时长,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| <span id="timeDate">0</span><span id="times">0</span> <script> var now = new Date(); function createtime() { var grt= new Date("06/06/2016 06:06:00"); now.setTime(now.getTime()+250); days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} document.getElementById("timeDate").innerHTML = "Blog age: "+dnum+" day "; document.getElementById("times").innerHTML = hnum + " h " + mnum + " m " + snum + " s"; } setInterval("createtime()",250); </script>
|
请注意将时间改为自己的时间。
赞赏
氪金?NoNoNo,这是对他人劳动的尊重。将以下代码添加到评论区的上方,需要将支付宝和微信的收款码替换成自己的:
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
| <div class ="post-donate"> <div id="donate_board" class="donate_bar center"> <a id="btn_donate" class="btn_donate" href="javascript:;" title="打赏">打脸赞赏戳这里OwO</a> <br> </div> <div id="donate_guide" class="donate_bar center hidden" > <img src="你的支付宝收款码图片" alt="支付宝打赏"> <img src="你的微信收款码图片" alt="微信打赏"> </div> <script type="text/javascript"> let btnDonate = document.getElementById('btn_donate'); btnDonate.onclick = function(){ var qr=document.getElementById("donate_guide"); if ("none"===qr.style.display) { qr.style.display="block" btnDonate.innerText = "我再想想->.->" } else { qr.style.display="none" btnDonate.innerText = "打脸赞赏戳这里OwO" } } </script> </div>
|
在线聊天
通过daovoice可以很方便的浏览者进行在线聊天,进入Daovoice注册账号、然后创建一个聊天,如果需要邀请码的话可以使用:2fc1f5b3
。后续操作如下:
为了控制daovoice的打开和关闭,以及id的统一管理现将其抽出到themes下的config文件中去
1 2 3
| daovoice: true daovoice_app_id: 你的id
|
完整的配置为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <% if (theme.daovoice) { %> <script>(function (i, s, o, g, r, a, m) { i["DaoVoiceObject"] = r; i[r] = i[r] || function () { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; a.charset = "utf-8"; m.parentNode.insertBefore(a, m) })(window, document, "script", ('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0ba5a2ce.js", "daovoice") daovoice('init', { app_id: "<%=theme.daovoice_app_id %>" }); daovoice('update'); </script> <% } %>
|
其它的daovoice配置,可在dashboard页面中进行设置。
添加版权信息
新建themes/tranquilpeak/layout/_partial/post/copyright.ejs
文件:
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
| <% if (page.copyright) { %> <div class="my_post_copyright"> <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <p><span>本文标题:</span><a href="<%= url_for(page.path) %>"><%= page.title %></a></p> <p><span>文章作者:</span><a href="/" title="访问 <%= config.copyright %> 的个人博客"><%= config.copyright %></a></p> <p><span>发布时间:</span><%= page.date.format("YYYY年MM月DD日 - HH:MM") %></p> <p><span>最后更新:</span><%= page.updated.format("YYYY年MM月DD日 - HH:MM") %></p> <p><span>原始链接:</span><a href="<%= url_for(page.path) %>" title="page.title"><%= page.permalink %></a> <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="<%= page.permalink %>" aria-label="复制成功!"></i></span> </p> <p><span>许可协议:</span><i class="fab fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p> </div> <script> var clipboard = new Clipboard('.fa-clipboard'); $(".fa-clipboard").click(function(){ clipboard.on('success', function(){ swal({ title: "", text: '复制成功', icon: "success", showConfirmButton: true }); }); }); </script> <% } %>
|
样式为:
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
| .my_post_copyright { width: 85%; max-width: 45em; margin: 2em auto 0; margin-top: 2em; margin-bottom: 2em; padding: 0.5em 1.0em; border: 1px solid #d3d3d3; font-size: 1.7rem; line-height: 1.6em; word-break: break-all; background: rgba(255, 255, 255, 0.4); }
.my_post_copyright p { margin: 0; }
.my_post_copyright span { display: inline-block; width: 5.2em; color: #b5b5b5; font-weight: bold; }
.my_post_copyright .raw { margin-left: 1em; width: 5em; }
.my_post_copyright a { color: #808080; border-bottom: 0; }
.my_post_copyright a:hover { color: #349ef3; text-decoration: underline; }
.my_post_copyright:hover .fa-clipboard { color: #000; }
.my_post_copyright .post-url:hover { font-weight: normal; }
.my_post_copyright .copy-path { margin-left: 1em; width: 1em; + mobile() { display: none; } }
.my_post_copyright .copy-path:hover { color: #808080; cursor: pointer; }
|
然后添加到文章列表内容的底部和品论框的上面<%- partial('post/copyright') %>
。
最后
本次只是列出了自己用到的一些配置,如果你还有需要可以根据自己需求添加,好了,下次再见。