Hexo 有趣功能盤點

時間  2019-11-10
標籤 hexo 有趣 功能 盤點 简体版
原文   原文鏈接

經過在網上的學習，又在hexo的Next主題中添加了幾個比較好玩的東西，以下：
注：此功能某些只對 next 主題有效。javascript

添加頂部加載條

  1. 主題文件夾下 _config.yml 
pace: true

下面是加載時顯示的效果

添加置頂功能

一種方法是手動對相關文件進行修改，具體可參考博文置頂。css

另外一種方法就是，目前已經有修改後支持置頂的倉庫，java

  1. 直接用如下命令安裝。
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
  1. 在須要置頂的文章的 Front-matter 中加上 top: true 便可。好比下面這篇文章：
---
title: Hexo好玩的小東西
date: 2018-06-12 18:59:12
top: true
...
---
  1. 在 /blog/themes/next/layout/_macro 目錄下的 post.swig 文件，定位到 <div class="post-meta"> 標籤下，插入以下代碼：
{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置頂</font>
  <span class="post-meta-divider">|</span>
{% endif %}

添加點擊愛心效果

  1. 建立js文件

在 /themes/next/source/js/src 下新建文件 clicklove.js，接着把該連接下的代碼拷貝粘貼到 clicklove.js 文件中。添加的代碼以下：git

!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: 50%;-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);
  1. 修改_layout.swig

在 \themes\next\layout\_layout.swig 文件末尾添加：github

<!-- 頁面點擊小紅心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

添加網頁標題崩潰欺騙搞怪特效

  1. 建立js文件

在 next\source\js\src 文件夾下建立 crash_cheat.js，添加代碼以下：web

<!--崩潰欺騙-->
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/img/TEP.ico");
         document.title = '╭(°A°`)╮ 頁面崩潰啦 ~';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/favicon.ico");
         document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
  1. 引用

在 next\layout\_layout.swig 文件中，添加引用（注：在swig末尾添加）：shell

<!--崩潰欺騙-->
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>

接入網頁的在線聯繫功能

  1. 首先在DaoVoice註冊個帳號。
  2. 完成後，會獲得一個 app_id，後面會用到
  3. 修改 /themes/next/layout/_partials/head.swig 文件，添加內容以下：
{% 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/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "{{theme.daovoice_app_id}}"
    });
  daovoice('update');
  </script>
{% endif %}
  1. 在主題配置文件 _config.yml 文件中添加內容：
# Online contact
daovoice: true
daovoice_app_id:   # 這裏填你剛纔得到的 app_id

網頁的在線聯繫功能已經完成，從新hexo g，hexo d上傳GitHub後，頁面上就能看到效果了。
效果請看右下角npm

給每篇文章後添加結束標語

  1. 在 \themes\next\layout\_macro 中新建 passage-end-tag.swig 文件，添加代碼至該文件中：
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:16px;font-family: cursive;">-------------紙短情長 <i class="fa fa-umbrella"></i> 下次再見-------------</div>
    {% endif %}
</div>
  1. 打開 \themes\next\layout\_macro\post.swig 文件，在 post-body 後，post-footer 前，添加下面內容：
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>
  1. 打開主題配置文件 _config.yml,在末尾添加：
# 文章末尾添加「本文結束」標記
passage_end_tag:
  enabled: true

此刻，看下面，這就是結束語啦api

添加網頁音樂播放器功能

  1. 點擊訪問Aplayer源碼：GitHub Aplayer。下載到本地，解壓後將dist文件夾複製到 themes\next\source 文件夾下。
  2. 新建 themes\next\source\dist\music.js 文件，添加內容：
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: true,
    volume: 0.3,
    loop: 'all',
    audio: [
      {
        name: "逍遙嘆",
        artist: '徐薇',
        url: 'http://other.web.ri01.sycdn.kuwo.cn/resource/n3/24/12/4042158646.mp3',
        cover: 'http://imge.kugou.com/stdmusic/20171117/20171117142652315559.jpg',
      },
      {
        name: '紅昭願',
        artist: '音闕詩聽',
        url: 'http://up.mcyt.net/?down/45962.mp3',
        cover: 'http://imge.kugou.com/stdmusic/20170407/20170407225248906484.jpg',
      },
      {
        name: '時間煮雨',
        artist: '鬱可惟',
        url: 'http://up.mcyt.net/?down/37600.mp3',
        cover: 'http://imge.kugou.com/stdmusic/20130625/20130625181709936236.jpg',
      },
      {
        name: '愛情轉移',
        artist: '陳奕迅',
        url: 'http://other.web.ra01.sycdn.kuwo.cn/resource/n2/320/52/97/1397406180.mp3',
        cover: 'http://imge.kugou.com/stdmusic/20161010/20161010200518926406.jpg',
      }
    ]
});

源碼中對應的參數解釋，這邊都有：Aplayer 中文文檔hexo

audio對應的即是音頻文件，因此音樂播放器須要播放的音樂是須要本身進行相關信息（如歌曲連接、歌詞、封面等）的配置。這裏放一個mp3音樂外鏈網站：(http://www.170mv.com/tool/song/) ，搜索酷我中對應的音樂，而後解析出外聯網址；對應土平的話能夠在酷狗上找到並單擊右鍵保存。

注：因爲該外鏈網站沒有歌詞連接，我這邊沒有進行配置，因此播放器在播放音樂時點擊歌詞是沒有顯示的。

  1. 打開 themes\next\layout\_layout.swig 文件，將如下文件添加到 <body itemscope ...> 後面就行，即在 <body></body> 裏面。
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>
  1. 從新生成，訪問頁面，就能看到左下角的音樂播放器了。

添加百度分享功能

  1. 由於在配置百度分享功能時需指定其type，在 next\layout_partials\share\baidushare.swig 文件中代碼顯示:
{% if theme.baidushare.type === "button" %}
...
...
{% elseif theme.baidushare.type === "slide" %}
...
...
  1. 因此將主題配置_config.yml文件中關於baidushare部分的內容改成(其中type爲slide時有用)：
baidushare:
  type: slide
  baidushare: true
  1. 主題文件 _config.yml 中提示：Warning: Baidu Share does not support https. 由於百度分享不支持在 https 上使用，因此一種解決方法即是，直接放文件到咱們本身的目錄下面。

訪問連接：static文件夾
下載壓縮包到本地，解壓後，將 static 文件夾保存至 themes\next\source 目錄下。

  1. 修改文件：themes\next\layout_partials\share\baidushare.swig文件
#  將 末尾 部分的代碼：
.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
# 改成：
.src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
  1. 最後從新生成下，就能展現分享功能了。

添加字數統計、閱讀時長

  1. NexT 主題默認已經集成了文章【字數統計】、【閱讀時長】統計功能，若是咱們須要使用，只須要在主題配置文件 _config.yml 中打開 wordcount 統計功能便可。以下所示：
post_wordcount:
  item_text: true
  wordcount: true  # 單篇 字數統計
  min2read: false  # 單篇 閱讀時長
  totalcount: true # 網站 字數統計
  separated_meta: false
  1. 修改完主題配置，啓用服務預覽時，若是出現錯誤，通常是由於沒有安裝 hexo-wordcount 插件
npm i --save hexo-wordcount
  1. 打開 next/layout/_macro/post.swig 修改字數統計、閱讀時長(只須要添加文字便可)：
<span title="{{ __('post.wordcount') }}">
    {{ wordcount(post.content) }} 字
</span>

<span title="{{ __('post.min2read') }}">
    {{ min2read(post.content) }} 分鐘
</span>

添加博客運行時間

找到文件 next/layout/_partials/footer.swig ，將下面內容複製粘貼進去便可：

<section class="footer-time">
    <span class="footer__copyright">
    <div>
    <span id="span_dt_dt"> </span>
    <script language="javascript">
      function show_date_time(){
        window.setTimeout("show_date_time()", 1000);
        BirthDay=new Date("6/8/2018 10:56:12");//這個日期是能夠修改的
        today=new Date();
        timeold=(today.getTime()-BirthDay.getTime());//其實僅僅改了這裏
        sectimeold=timeold/1000
        secondsold=Math.floor(sectimeold);
        msPerDay=24*60*60*1000
        e_daysold=timeold/msPerDay
        daysold=Math.floor(e_daysold);
        e_hrsold=(e_daysold-daysold)*24;
        hrsold=Math.floor(e_hrsold);
        e_minsold=(e_hrsold-hrsold)*60;
        minsold=Math.floor((e_hrsold-hrsold)*60);
        seconds=Math.floor((e_minsold-minsold)*60);
        span_dt_dt.innerHTML="一世長安的博客已經運行 "+daysold+" 天 "+hrsold+" 小時 "+minsold+" 分 "+seconds+" 秒";
      }
      show_date_time();
    </script>
    </div>
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
</section>

如何去掉博客底部的 由Hexo強力驅動...

找到文件 next/layout/_partials/footer.swig
將下面代碼刪除便可：

{% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; {#
  #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}

添加萌妹紙

  1. 安裝代碼：
npm install --save hexo-helper-live2d
  1. 相應配置代碼以下：
live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-wanko
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

注：萌妹紙功能是集成在 yilia 主題中的，next 主題我還沒發現有這個功能，因此若是使用的話，確實會有一個可愛的萌妹紙出如今你的網頁上，可是：你用代碼控制不了她(比方說妹紙的人選、大小、位置等)。

參考連接

參考連接1：(https://asdfv1929.github.io/)
參考連接2：(http://www.aisun.org/2017/10/...

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程