diff --git a/2018/08/10/hello-world/index.html b/2018/08/10/hello-world/index.html deleted file mode 100644 index 2c3ff6788665b2dde18141054a2b09482c93b9ef..0000000000000000000000000000000000000000 --- a/2018/08/10/hello-world/index.html +++ /dev/null @@ -1,573 +0,0 @@ - - - - - - Hello World | TRHX's Blog - Live and Learn! - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
- -
- -
- -
-
-
- -
- -
- - - -
- -
- - - - -
- - -

- Hello World -

- - -
- -
- - - -
-
- - -
- - -

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

- -

Quick Start

Create a new post

1
$ hexo new "My New Post"
-

More info: Writing

-

Run server

1
$ hexo server
-

More info: Server

-

Generate static files

1
$ hexo generate
-

More info: Generating

-

Deploy to remote sites

1
$ hexo deploy
-

More info: Deployment

- - - -
- -
- - -
-

本文标题:Hello World

-

文章作者:TRHX

-

发布时间:2018年08月10日 - 17时33分

-

最后更新:2018年08月23日 - 17时36分

-

- 原始链接:http://yoursite.com/2018/08/10/hello-world/ - - - -

-

- 许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。 -

-
- - - - - - -
- -
- 文章目录 -
  1. 1. Quick Start
    1. 1.1. Create a new post
    2. 1.2. Run server
    3. 1.3. Generate static files
    4. 1.4. Deploy to remote sites
-
- - - - - - - - - -
- - - - - - - -
- - - - - - - -
- - -
- - - - - -
- - - - - - - - - -
- - - - - - - -
-
-
- - -
- - - - - || - - - - -
- -
-
- -
- - - - - - - - - -
- - - -
- - - - - - - - - -
- - - - - \ No newline at end of file diff --git "a/2018/08/10/\345\215\232\345\256\242\351\225\207\347\253\231\344\271\213\345\256\235/index.html" "b/2018/08/10/\345\215\232\345\256\242\351\225\207\347\253\231\344\271\213\345\256\235/index.html" index 740e394b3d22b01294926d4346a7291031a8fda3..9eaa511ea0ab72a1d51d5b29f08aeb49f59720a7 100644 --- "a/2018/08/10/\345\215\232\345\256\242\351\225\207\347\253\231\344\271\213\345\256\235/index.html" +++ "b/2018/08/10/\345\215\232\345\256\242\351\225\207\347\253\231\344\271\213\345\256\235/index.html" @@ -261,6 +261,29 @@ +
+ +
+ + + + 字数统计: + 46字 + + + + +   |   + + + 阅读时长: + 1分 + + +
+ + +
@@ -325,11 +348,6 @@ - -
Hello World
- > - - @@ -413,12 +431,10 @@ - - - +
- +
本文将讲述一些博客主题的美化、实用功能的添加，不同主题可能方法有些不同（本文以作者 luuman 的 spfk 主题为例）

– 添加评论系统

主流的评论系统有很多，比如：网易云跟帖、多说、友言、畅言、来必力（LiveRe）、Disqus、Valine、Gitment等等，目前网易云跟帖、多说、友言都已经关闭了，还有些可能需要翻墙，比较麻烦，百度了一下，最后还是选择了来必力评论系统

进入来必力官网，注册一个账号（注册时可能需要翻墙）



注册完毕之后，登录，进入安装页面，选择 City 免费版安装，安装之后你会得到一段代码



我们打开主题文件下的 _config.yml 文件，添加如下代码：



在 \themes\hexo-theme-spfk\layout\_partial\comments 文件夹下新建一个 livere.ejs 的文件，在里面填写来必力提供的代码：

<!-- 来必力City版安装代码 --><div id="lv-container" data-id="city" data-uid="这里是你的uid"><script type="text/javascript">   (function(d, s) {   var j, e = d.getElementsByTagName(s)[0];   if (typeof LivereTower === 'function') { return; }   j = d.createElement(s);   j.src = 'https://cdn-city.livere.com/js/embed.dist.js';   j.async = true;   e.parentNode.insertBefore(j, e);   })(document, 'script');</script><noscript>为正常使用来必力评论功能请激活JavaScript</noscript></div><!-- City版安装代码已完成 -->

打开 \themes\hexo-theme-spfk\layout\_partial\article.ejs 文件，在适当位置添加如下红框中的代码：





完成以上操作之后，我们就可以使用来必力评论系统了



– 添加卡通人物

我在逛别人博客的时候偶然发现右下角居然有一个萌萌的卡通人物，还能根据你鼠标位置摇头，瞬间被吸引到了，赶紧也给自己博客添加一个吧！点击此处进入该项目地址

输入如下命令获取 live2d ：

$ npm install --save hexo-helper-live2d

输入以下命令，下载相应的模型，将 packagename 更换成模型名称即可，更多模型选择请点击此处，各个模型的预览请访问原作者的博客 

$ npm install packagename

打开站点目录下的 _config.yml 文件，添加如下代码： 

live2d:  enable: true  scriptFrom: local  model:    use: live2d-widget-model-haruto #模型选择  display:    position: right  #模型位置   width: 150       #模型宽度   height: 300      #模型高度  mobile:    show: false      #是否在手机端显示

设置好过后我们就拥有了一个卡通人物

]]> +
本文将讲述一些博客主题的美化、实用功能的添加，不同主题可能方法有些不同（本文以作者 luuman 的 spfk 主题为例）

– 添加评论系统


主流的评论系统有很多，比如：网易云跟帖、多说、友言、畅言、来必力（LiveRe）、Disqus、Valine、Gitment等等，目前网易云跟帖、多说、友言都已经关闭了，还有些可能需要翻墙，比较麻烦，百度了一下，最后还是选择了来必力评论系统

进入来必力官网，注册一个账号（注册时可能需要翻墙）



注册完毕之后，登录，进入安装页面，选择 City 免费版安装，安装之后你会得到一段代码



我们打开主题文件下的 _config.yml 文件，添加如下代码：

在 \themes\hexo-theme-spfk\layout\_partial\comments 文件夹下新建一个 livere.ejs 的文件，在里面填写来必力提供的代码：

<!-- 来必力City版安装代码 --><div id="lv-container" data-id="city" data-uid="这里是你的uid"><script type="text/javascript">   (function(d, s) {   var j, e = d.getElementsByTagName(s)[0];   if (typeof LivereTower === 'function') { return; }   j = d.createElement(s);   j.src = 'https://cdn-city.livere.com/js/embed.dist.js';   j.async = true;   e.parentNode.insertBefore(j, e);   })(document, 'script');</script><noscript>为正常使用来必力评论功能请激活JavaScript</noscript></div><!-- City版安装代码已完成 -->

打开 \themes\hexo-theme-spfk\layout\_partial\article.ejs 文件，在适当位置添加如下红框中的代码：



完成以上操作之后，我们就可以使用来必力评论系统了




– 添加卡通人物


我在逛别人博客的时候偶然发现右下角居然有一个萌萌的卡通人物，还能根据你鼠标位置摇头，瞬间被吸引到了，赶紧也给自己博客添加一个吧！点击此处进入该项目地址

输入如下命令获取 live2d ：

$ npm install --save hexo-helper-live2d

输入以下命令，下载相应的模型，将 packagename 更换成模型名称即可，更多模型选择请点击此处，各个模型的预览请访问原作者的博客 

$ npm install packagename

打开站点目录下的 _config.yml 文件，添加如下代码： 

live2d:  enable: true  scriptFrom: local  model:    use: live2d-widget-model-haruto #模型选择  display:    position: right  #模型位置   width: 150       #模型宽度   height: 300      #模型高度  mobile:    show: false      #是否在手机端显示

设置好过后我们就拥有了一个卡通人物



– 添加鼠标点击爱心效果


在 /themes/hexo-theme-spfk/source/js 下新建文件 love.js，在 love.js 文件中添加以下代码：

1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 500%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在 \themes\hexo-theme-spfk-x\layout\layout.ejs 文件末尾添加以下代码：

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/love.js"></script>

完成以上操作后，当我们点击鼠标的时候就可以看见爱心的特效了


– 添加字数统计和阅读时长


先在博客目录下执行以下命令安装 hexo-wordcount 插件：

1
$ npm i --save hexo-wordcount

之后在 \themes\hexo-theme-spfk-x\layout\_partial\post 目录下创建 word.ejs 文件，在 word.ejs 文件中写入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div style="margin-top:10px;">
    <span class="post-time">
      <span class="post-meta-item-icon">
        <i class="fa fa-keyboard-o"></i>
        <span class="post-meta-item-text">  字数统计: </span>
        <span class="post-count"><%= wordcount(post.content) %>字</span>
      </span>
    </span>

    <span class="post-time">
      &nbsp; | &nbsp;
      <span class="post-meta-item-icon">
        <i class="fa fa-hourglass-half"></i>
        <span class="post-meta-item-text">  阅读时长: </span>
        <span class="post-count"><%= min2read(post.content) %>分</span>
      </span>
    </span>
</div>

然后在 \themes\hexo-theme-spfk-x\layout\_partial\article.ejs 中适当位置添加以下代码：

最后在主题目录下的 _config.yml 添加以下配置

1
word_count: true

如果显示的位置不好，可以自行更改其位置，成功配置后的效果如下：


– 添加背景音乐



打开网页版网易云音乐，选择你准备添加的背景音乐，点击生成外链播放器，前提是要有版权，不然是无法生成外链播放器的，复制底下的HTML代码

然后将此代码放到你想要放的地方，比如放在博客的左侧，则打开 \themes\hexo-theme-spfk-x\layout\_partial\left-col.ejs 文件，将复制的HTML代码粘贴进去，再进行适当的位置设置让播放器更美观，其中 auto=1 表示打开网页自动播放音乐，auto=0 表示关闭自动播放音乐

最后效果如下：


– 添加网站运行时间



一个比较好的小功能，可以看见自己的博客运行多久了，时间一天天的增加，成就感也会一天天增加的
在 \themes\hexo-theme-spfk-x\layout\_partial\footer.ejs 文件下添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("08/10/2018 17:38: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 = "本站已安全运行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);
</script>

最后效果如下：


]]> @@ -52,7 +52,7 @@ Markdown 语法&技巧总结 /2018/08/25/Markdown%20%E8%AF%AD%E6%B3%95&%E6%8A%80%E5%B7%A7%E6%80%BB%E7%BB%93/ -


在写博客的时候，我们不希望都是千篇一律的没有色彩，多了解一些 Markdown 语法技巧有利于丰富我们的博客，看起来更有 feel ！

– 插入图片

如果你使用 MarkdownPad 的话就比较方便，可以直接选择插入本地图片或者是网络图片，实质是通过以下代码实现的，小括号里面就是你的图片地址，中括号里面是图片的替代文字，如果是本地图片，可以上传到 imgur ，之后就可以得到你图片的地址

! [] ( https://i.imgur.com/UyEXrBi.jpg )

]]> +
在写博客的时候，我们不希望都是千篇一律的没有色彩，多了解一些 Markdown 语法技巧有利于丰富我们的博客，看起来更有 feel ！

– 插入图片


车

如果你使用 MarkdownPad 的话就比较方便，可以直接选择插入本地图片或者是网络图片，实质是通过以下代码实现的，小括号里面就是你的图片地址，中括号里面是图片的替代文字，比如上面的图片代码如下：

1
![车](https://i.imgur.com/UyEXrBi.jpg)


– 插入音乐



打开网页版网易云音乐，选择你准备插入的音乐，点击生成外链播放器，前提是要有版权，不然是无法生成外链播放器的，复制底下的HTML代码

然后将此HTML代码粘贴到你想要放的地方，可自行调节播放器的大小，其中 auto=1 表示打开网页自动播放音乐，auto=0 表示关闭自动播放音乐，比如See You Again (中英文版) - 罗艺恒这首歌曲代码如下：

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=32405683&auto=1&height=66"></iframe>


– 插入视频



高考毕业了我们为下一届的学弟学妹们录制高考加油视频，我担任后期制作，在这里就以该视频为例٩(๑❛ᴗ❛๑)۶，在腾讯视频播放页面找到分享按钮，复制该视频的通用代码（其他视频播放平台也一样）,粘贴到文章中对应位置即可，可根据情况调整视频播放器的大小

1
<iframe frameborder="0" width="1040"  height="700" src="https://v.qq.com/txp/iframe/player.html?vid=x0643zvgtf7" allowFullScreen="true"></iframe>
]]> @@ -117,15 +117,6 @@ - - Hello World - - /2018/08/10/hello-world/ -

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

]]> - - - -