前言

  喜歡寫Blog的人，會經歷三個階段。

• 第一階段，剛接觸Blog，覺得很新鮮，試著選擇一個免費空間來寫。
• 第二階段，發現免費空間限制太多，就自己購買域名和空間，搭建獨立部落格。
• 第三階段，覺得獨立部落格的管理太麻煩，最好在保留控制權的前提下，讓別人來管，自己只負責寫文章。

引自阮一峰

  第一階段我已經經歷過了，目前在CSDN的文章仍然在更新。但是作為一個免費空間，一個技術部落格的聚集地，其管理和運營雖說正在變得越來越好，但是噁心人的事件也時有發生，比如對新手不友好的稽核機制、近期改版造成的各種不相容問題。

  於是，就想著掙脫枷鎖，向第二第三階段發展。

  我這人吧凡事都考慮的比較詳盡，，我感覺我如果再去經歷第二階段的話既浪費精力又消耗時間，而且自己也過了玩網站、玩部落格的年紀，如果申請個域名再搞個網站，我不知道這股熱度會持續多久。

  所以，我就直接跳到了第三個階段，開始在github上搭建自己的部落格。由於自己對前端一無所知，即使使用現成的部落格框架，剛開始玩的時候特別費勁。但是經過不斷摸索，我的部落格已經基本成型，傳送門開啟：wordzzzz的個人部落格-託管於github wordzzzz的個人部落格-託管於gitee。

  本篇博文並不打算長篇大論的介紹基於GitHub Pages或者Gitee Pages搭建部落格的步驟，因為這類的文章實在是太多了，青菜蘿蔔又各有所愛，不如給出資源，讓大家自己折騰。所以我只是在此有序貼出我在搭建部落格的過程中用到的各種有用資源，以及搭建部落格的大致流程，也算是對我這段時間的一個告別儀式吧。

GitHub Pages

  我想在GitHub Pages推出之前，由於技術門檻的存在，第三個階段應該會很少有人涉足。所以在開始一切之前，我們先來看看什麼是GitHub Pages。

  Github Pages 是面向使用者、組織和專案開放的公共靜態頁面搭建託管服 務，站點可以被免費託管在 Github 上，你可以選擇使用 Github Pages 默 認提供的域名 github.io 或者自定義域名來發布站點。Github Pages 支援 自動利用 Jekyll 生成站點，也同樣支援純 HTML 文件，將你的 Jekyll 站 點託管在 Github Pages 上是一個不錯的選擇。

  網站首頁就是搭建GitHub Pages的過程其中第一步之後，選擇不同的git客戶端選項，會出現相應的初始化步驟，很人性化。

  大家可以跟著上面的連結先在自己的github新建倉庫，倉庫名稱為username.github.io，其中username要替換成你github的名稱，比如我的github名稱為wordzzzz，所以我新建的倉庫就應該是wordzzzz.github.io。那麼等我以後搭建好了我的部落格，我就可以通過https://wordzzzz.github.io來訪問我的主頁了。

  到現在為止，只是搭建部落格的準備工作。搭建部落格的下一步是選擇合適的靜態部落格框架。

jekyll or hexo

  目前有兩大靜態部落格主流框架：jekyll和hexo。

  我一開始用的是jekyll，這是中文社群翻譯出來的中文開發文件。我使用的主題是Minimal Mistakes，開發文件很詳細。但是後來由於jekyll體驗不是很好（中文資料少，我英語比較差我會說嘛），依賴環境總是出問題（需要安裝ruby），markdown採用的是Kramdown（Kramdown對我之前的一些部落格格式支援的不是很好，我自己寫文件用的都是小書匠，然後發表到CSDN，所以並不想花時間在改格式上面），而且我使用的這個主題是個人維護的，種種原因導致最後做出來的部落格很難符合我的胃口，最後被我扔進了停屍房jekyll_mysite。

  就在我將要放棄之時，hexo拯救了我。對，沒錯，它有中文開發文件。而在hexo界，使用最多的主題就是next了。光是看到這兩份資料，我就已經激動的不行了，這種扁平化設計的網站，不就正是我需要的麼。加上詳盡的開發文件和豐富的第三方介面，讓我對它愛不釋手。最終定稿了自己的個人部落格，儲存在githubwordzzzz的個人部落格-託管於github和giteewordzzzz的個人部落格-託管於gitee上。

next主題

  next主題支援三種外觀顯示，支援多國語言，5套程式碼高亮主題，可以深度定製。在其Github上，更是有三個主題的代表作，其中我最喜歡的莫過於基於Muse scheme的wanghao的部落格。於是，我就在wanghao的部落格的基礎上進行了相應的更改，形成了我現在的部落格，主題檔案全部在我的github上，歡迎大家fork、star、follow。

  其實先按照hexo配置開發環境，再按照next文件配置站點檔案，完全可以輕鬆搭建起自己的部落格。但是還是藏不住內心那顆年輕的心啊，終究還是蒐羅了一些好玩的東西放到了自己的部落格上，比如音樂播放器。

  下面我先簡單介紹一下基於github平臺、hexo框架的next主題部落格開發步驟：

  文件都非常詳細，下面我主要就第三方服務做一些說明。我提到的大部分三方服務在next的官方文件都提及到了，所以具體配置大家跟著官方文件走就行，我只是為每一類服務選擇哪個做一下建議。

評論系統

  我用的韓國的livere，從國內到國外，支援幾乎全部社交賬號登陸，具體步驟請按照next的官方文件操作。

資料統計與分析

閱讀量統計

內容分享服務

搜尋服務

網站收錄

其他服務

  NexT 藉助於 MathJax 來顯示數學公式，此選項預設關閉，如果部落格中有公式，那麼一定要開啟這個選項。

next進階

  最後想說一下其他一些配置，比如新增背景圖片、側邊欄頭像旋轉、側邊欄滑鼠滑入顯示、背景音樂等等，此處大部分參考這個部落格。

  next人性化的為使用者提供了custom介面，我們可以在不影響主題檔案的基礎上進行個性化定製。

給頁面新增背景圖片

  在theme/next/source/css/_custom資料夾下開啟custom.styl檔案，往裡面新增以下程式碼：

body {
  background: url(/images/blogbk.jpg) no-repeat;
  /* 背景圖垂直、水平均居中 */
  background-position: center center;
  /* 當內容高度大於圖片高度時，背景影象的位置相對於viewport固定 */
  background-attachment: fixed;
  /* 讓背景圖基於容器大小伸縮 */
  background-size: cover;
  /* 設定背景顏色，背景圖載入過程中會顯示背景色 */
  background-color: rgba(0, 0, 0, 0.5);
}

  其中的css樣式屬性都可以根據你的自定義圖片來更改，以達到最佳的效果。

給側邊欄新增背景圖片

  在theme/next/source/css/_custom資料夾下開啟custom.styl檔案，往裡面新增以下程式碼：

#sidebar {
            background:url(/images/sidebar.jpg);
            background-size: cover;
            background-position:center;
            background-repeat:no-repeat;
            p,span,a {color: rgba(255, 255, 255, 1);}
}

文字背景色以及半透明的設定

  在theme/next/source/css/_custom資料夾下開啟custom.styl檔案，往裡面新增以下程式碼：

.content {
            border-radius: 20px;
            padding: 30px 60px 30px 60px;
            background:rgba(255, 255, 255, 0.8) none repeat scroll !important;
         }

  其中border-radius是給文章背景設定圓角，margin-top是設定文章到頂部的距離，其中屬性可根據自己的需要進行調整。

評論(來必力)新增背景色

  在theme/next/source/css/_custom資料夾下開啟custom.styl檔案，往裡面新增以下程式碼：

#lv-container {
       border-radius: 20px;
       padding: 30px 60px 30px 60px;
       background:rgba(255, 255, 255, 0.8) none repeat scroll !important;
    }

  和上面一樣，背景色和圓角可自己調整更改。

實現點擊出現桃心效果

  在網址輸入如下

http://7u2ss1.com1.z0.glb.clouddn.com/love.js

  然後將裡面的程式碼copy一下，新建love.js檔案並且將程式碼複製進去，然後儲存。將love.js檔案放到路徑/themes/next/source/js/src裡面，然後開啟\themes\next\layout_layout.swig檔案,在末尾（在前面引用會出現找不到的bug）新增以下程式碼：

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

側邊欄頭像旋轉

  開啟\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在裡面新增如下程式碼：

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* start*/
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */
}

/* start */
.site-author-image:hover {

  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

設定滑鼠劃入側邊欄才顯示站點資訊：

設定自定義div

  在theme/next/layout/_macro資料夾下開啟sidebar.swig檔案，找到以下程式碼行的位置：

<nav class="site-state motion-element">

  在其上新增以下程式碼：

<!--my custom code begin-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
<script type="text/javascript">
  $("#sidebar").hover(function(){
    $("#mydivshow").velocity('stop').velocity({opacity: 1});
  },function(){
    $("#mydivshow").velocity('stop').velocity({opacity: 0});
  });
</script>
<div id="mydivshow" class="mydivshow">
<!--my custom code end-->

  然後找到程式碼行：

</section>
{% if display_toc and toc(page.content).length > 1 %}
<!--noindex-->
<section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">

  在此的上方新增一個，如下所示：

<!--my custom code begin-->
</div>
<!--my custom code end-->
</section>
{% if display_toc and toc(page.content).length > 1 %}
<!--noindex-->
  <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
    <div class="post-toc">

自定義區域的初始化設定

  在theme/next/source/css/_custom資料夾下開啟custom.styl檔案，向裡面增添下列程式碼：

#mydivshow{opacity: 0;}

注：具體程式碼新增位置以及程式碼裡的section.site-overview可以自己修改，

和末尾的是控制顯示區域，section.site-overview則是使用者滑鼠滑入劃出時的觸發事件區域。

自定義音樂播放器

  描述：本站所用的音樂播放器是由DIYgod所製作的APlayer，其詳細資料可參見這裡。

安裝APlayer外掛

$ npm install aplayer --save

  安裝完後在node_modules目錄下找到APlayer.min.js檔案，將其複製到theme/next/source/js/src/目錄下。

生成音樂播放器

  在你想要加入音樂播放器的地方插入以下程式碼，本站把他放在了側邊欄裡，具體操作如下。

  開啟theme/next/layout/_custom/資料夾下的sidebar.swig檔案，向其中新增以下程式碼：

<div id="player1" class="aplayer"></div>
<script src="/js/src/APlayer.min.js"></script>
<script type="text/javascript">
var ap = new APlayer({
    element: document.getElementById('player1'),                       // Optional, player element
    narrow: false,                                                     // Optional, narrow style
    autoplay: false,                                                    // Optional, autoplay song(s), not supported by mobile browsers
    showlrc: 0,                                                        // Optional, show lrc, can be 0, 1, 2, see: ###With lrc
    mutex: true,                                                       // Optional, pause other players when this player playing
    theme: '#e6d0b2',                                                  // Optional, theme color, default: #b7daff
    mode: 'random',                                                    // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
    preload: 'metadata',                                               // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
    listmaxheight: '513px',                                             // Optional, max height of play list
    music: {                                                           // Required, music info, see: ###With playlist
        title: '你曾是少年',                                          // Required, music title
        author: 'cover',                                              // Required, music author
        url: 'http://mp3.qqmusic.cc/yq/102426570.mp3',                // Required, music url
        pic: '/images/visitor.jpg',                                   // Optional, music picture
    }
});
</script>

  這裡的歌曲url必須是線上音樂，當時現在大部分播放器都不會曝露出真實的歌曲播放地址，找資源很是費勁。這裡給大家推薦一個解析平臺，大部分的qq音樂還是可以解析出來或者直接在該平臺上找到播放連結的。大家可以寫多個music結構，以此來新增多個音樂。

  當然，我們還可以通過新增網易雲音樂外鏈的方式在我們的部落格中新增音樂。開啟theme/next/layout/_custom/資料夾下的sidebar.swig檔案，向其中新增以下程式碼：

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

  替換上述程式碼中的iframe標籤之間的內容，就可以替換不同的音樂進行播放了。網易雲音樂的歌單也可以生成外鏈，前提是歌單裡的歌曲都有版權哦~

自定義播放器樣式

  包含顏色更改，列表歌曲資訊的排版修改。

  在theme/next/source/css/_custom資料夾下開啟custom.styl檔案，往裡面新增以下程式碼：

.aplayer-list ol li:hover {   /*列表懸停顏色*/
                  background:rgba(255, 255, 255, 1) none repeat scroll !important;}
.aplayer-list ol li {   /*列表底色*/
                        background:rgba(255, 255, 255, 1);}
.aplayer-list-light {   /*列表播放歌曲顏色*/
                      background:rgba(255, 255, 255, 1) none repeat scroll !important;}
#player1 {    /*邊框樣式*/
          border-radius: 6px;
          div,ol {border-radius: 6px;}
        }
#player1 *{color: rgba(255, 255, 255, 1);}    /*字型顏色*/
/*列表歌曲資訊的排版*/
.aplayer-list-index{float:left;}
.aplayer-list-title{float:left;}
.aplayer-list-author{float:right;}

自定義萌萌噠音樂播放控制邊欄

  這一步要在自定義音樂播放器的配置完成之後才能進行，因為aplayer-controler依賴於aplayer來實現播放功能。

安裝aplayer-controler外掛

npm install aplayer-controler --save

新增js程式碼

  將其放入theme/next/source/js/src下。

建立按鈕區域

  在theme/next/layout/_custom/資料夾下新建一個myapcontroler.swig的檔案。向其中新增以下程式碼：

<script src="/js/src/Aplayer-Controler.js"></script>
<div id="AP-controler"></div>
<script type="text/javascript">
var myapc=new APlayer_Controler({
        APC_dom:$('#AP-controler'),
        aplayer:ap, //此為繫結的aplayer物件
        attach_right:true,
        position:{top:'300px',bottom:''},
        fixed:true,
        btn_width:100,
        btn_height:120,
        img_src:['http://oty1v077k.bkt.clouddn.com/bukagirl.jpg',
                'http://oty1v077k.bkt.clouddn.com/jumpgirl.jpg',
                'http://oty1v077k.bkt.clouddn.com/pentigirl.jpg',
                'http://oty1v077k.bkt.clouddn.com/%E8%90%8C1.gif'],
        img_style:{repeat:'no-repeat',position:'center',size:'contain'},
        ctrls_color:'rgba(173,255,47,0.8)',
        ctrls_hover_color:'rgba(255,140,0,0.7)',
        tips_on:true,
        tips_width:140,
        tips_height:25,
        tips_color:'rgba(255,255,255,0.6)',
        tips_content:{},
        timeout:30
    });
</script>

將控制按鈕加入body頁面

  在theme/next/layout資料夾下開啟_layout.swig檔案，在前新增以下程式碼：

{% include '_custom/myapcontroler.swig' %}

  到此，自定義音樂播放控制邊欄就基本完成，完成整個配置需要根據自己的主題背景進一步修改完善。

本教程到此結束，歡迎訂閱、關注、收藏、評論、點贊哦～～(￣▽￣～)～

完的汪(∪｡∪)｡｡｡zzz