使用Hexo＋ github快速搭建自己的部落格網站（二）

tankboo發表於2017-12-01
HexoGithub網站

主題設定

個人比較喜歡 NexT 主題，所以這篇文章主要講next主題的設定

在 Hexo 中有兩份主要的配置檔案，其名稱都是 _config.yml。 其中，一份位於站點根目錄下，主要包含 Hexo 本身的配置；另一份位於主題目錄下，這份配置由主題作者提供，主要用於配置主題相關的選項。

為了描述方便，在以下說明中，將前者稱為 站點配置檔案， 後者稱為 主題配置檔案。

NexT 主題安裝

主題下載

現將路徑切換到專案根目錄

    cd blog
    git clone https://github.com/iissnan/hexo-theme-next themes/next複製程式碼

啟用主題

與所有 Hexo 主題啟用的模式一樣。 當 克隆/下載 完成後，開啟 站點配置檔案， 找到 theme 欄位，並將其值更改為 next。

    theme: next複製程式碼

到此，NexT 主題安裝完成。下一步我們將驗證主題是否正確啟用。在切換主題之後、驗證之前， 我們最好使用 hexo clean 來清除 Hexo 的快取。

主題驗證

    hexo s --debug複製程式碼

此時即可使用瀏覽器訪問 http://localhost:4000，檢查站點是否正確執行。

語言設定

編輯 站點配置檔案，將 language 設定成你所需要的語言。例如選用簡體中文，配置如下

    language: zh-Hans複製程式碼

設定選單

    menu:
        home: / || home
        about: /about/ || user
        tags: /tags/ || tags
        #categories: /categories/ || th
        archives: /archives/ || archive
        #schedule: /schedule/ || calendar
        #sitemap: /sitemap.xml || sitemap
        #commonweal: /404/ || heartbeat複製程式碼

常用建立命令

新增「標籤」頁面

新建頁面

    hexo new page tags複製程式碼

設定頁面型別

    title: 標籤
    date: 2014-12-22 12:39:04
    type: "tags"
    comments: false
    ---複製程式碼

新增「分類」頁面

新建頁面

    hexo new page categories複製程式碼

設定頁面型別

    title: 分類
    date: 2014-12-22 12:39:04
    type: "categories"
    comments: false
    ---複製程式碼

側邊欄社交連結

側欄社交連結的修改包含兩個部分，第一是連結，第二是連結圖示。 兩者配置均在 主題配置檔案 中

連結

    # Social links
    social:
        GitHub: https://github.com/your-user-name
        Twitter: https://twitter.com/your-user-name
        微博: http://weibo.com/your-user-name
        豆瓣: http://douban.com/people/your-user-name
        知乎: http://www.zhihu.com/people/your-user-name
        # 等等複製程式碼

圖示

    # Social Icons
        social_icons:
        enable: true
        # Icon Mappings
        GitHub: github
        Twitter: twitter
        微博: weibo複製程式碼

友情連結

編輯 主題配置檔案 新增：

    # title
    links_title: Links
    links:
        MacTalk: http://macshuo.com/
        Title: http://example.com/複製程式碼

站點建立時間

這個時間將在站點的底部顯示，例如 © 2013 - 2015。 編輯 主題配置檔案，新增欄位 since。

    since: 2015複製程式碼

設定「動畫效果」

編輯 主題配置檔案， 搜尋 motion，根據您的需求設定值為 true 或者 false 即可,同時還可以根據需求設定需要的動畫效果。

    motion:
        enable: true
        async: false
        transition:
        # Transition variants:
        # fadeIn | fadeOut | flipXIn | flipXOut | flipYIn | flipYOut | flipBounceXIn | flipBounceXOut | flipBounceYIn | flipBounceYOut
        # swoopIn | swoopOut | whirlIn | whirlOut | shrinkIn | shrinkOut | expandIn | expandOut
        # bounceIn | bounceOut | bounceUpIn | bounceUpOut | bounceDownIn | bounceDownOut | bounceLeftIn | bounceLeftOut | bounceRightIn | bounceRightOut
        # slideUpIn | slideUpOut | slideDownIn | slideDownOut | slideLeftIn | slideLeftOut | slideRightIn | slideRightOut
        # slideUpBigIn | slideUpBigOut | slideDownBigIn | slideDownBigOut | slideLeftBigIn | slideLeftBigOut | slideRightBigIn | slideRightBigOut
        # perspectiveUpIn | perspectiveUpOut | perspectiveDownIn | perspectiveDownOut | perspectiveLeftIn | perspectiveLeftOut | perspectiveRightIn | perspectiveRightOut
        post_block: fadeIn
        post_header: slideDownIn
        post_body: slideDownIn
        coll_header: slideLeftIn
        # Only for Pisces | Gemini.
        sidebar: slideUpIn複製程式碼

設定「背景動畫」

NexT 自帶四種背景動畫效果

編輯 主題配置檔案， 搜尋 canvas_nest , canvas_lines,canvas_sphere 或 three_waves，根據您的需求設定值為 true 或者 false 即可,注意只能同時開啟一種背景動畫效果。：

    # Canvas-nest
    canvas_nest: true
    # three_waves
    three_waves: false
    # canvas_lines
    canvas_lines: false
    # canvas_sphere
    canvas_sphere: false複製程式碼

設定載入進度條樣式

    # Progress bar in the top during page loading.
    pace: true
    # Themes list:
    #pace-theme-big-counter
    #pace-theme-bounce
    #pace-theme-barber-shop
    #pace-theme-center-atom
    #pace-theme-center-circle
    #pace-theme-center-radar
    #pace-theme-center-simple
    #pace-theme-corner-indicator
    #pace-theme-fill-left
    #pace-theme-flash
    #pace-theme-loading-bar
    #pace-theme-mac-osx
    #pace-theme-minimal
    # For example
    # pace_theme: pace-theme-center-simple
    pace_theme: pace-theme-flash複製程式碼

footer資訊設定

    footer:
    # Specify the date when the site was setup.
    # If not defined, current year will be used.
    since: 2017
    # Icon between year and copyright info.
    icon: user
    # If not defined, will be used `author` from Hexo main config.
    copyright:
    # -------------------------------------------------------------
    # Hexo link (Powered by Hexo).
    powered: false
    theme:
        # Theme & scheme info link (Theme - NexT.scheme).
        enable: false
        # Version info of NexT after scheme info (vX.X.X).
        version: true
    # -------------------------------------------------------------
    # Any custom text can be defined here.
    #custom_text: Hosted by <a target="_blank" href="https://pages.github.com">GitHub Pages</a>複製程式碼

新增字數統計功能

next中內建有hexo-wordcount的配置資訊，但是啟用被指之前需要下載hexo-wordcount

    $ npm install hexo-wordcount --save複製程式碼

安裝完成之後，在主題配置檔案中進行開始(true)或關閉(false)設定
wordcount： 文章中的字數統計
min2read: 大概閱讀完整篇文章的時間
totalcount: 文章中總的字數

    post_wordcount:
        item_text: true  
        wordcount: true  
        min2read: true
        totalcount: false
        separated_meta: true複製程式碼

啟用busuanzi 展示網站的PV/UV

    # Show PV/UV of the website/page with busuanzi.
    # Get more information on http://ibruce.info/2015/04/04/busuanzi/
    busuanzi_count:
    # count values only if the other configs are false
    enable: true
    # custom uv span for the whole site
    site_uv: true
    site_uv_header: <i class="fa fa-user"></i> 訪問人數
    site_uv_footer: 人
    # custom pv span for the whole site
    site_pv: true
    site_pv_header: <i class="fa fa-eye"></i> 訪問次數
    site_pv_footer: 次
    # custom pv span for one page only
    page_pv: false
    page_pv_header: <i class="fa fa-file-o"></i>
    page_pv_footer:複製程式碼

啟用leancloud的文章閱讀統計功能

需要先去leancloud官網申請一個賬號，並獲取到賬號的app_id 和 app_key ,然後複製到以下程式碼的id和key中

    leancloud_visitors:
        enable: true
        app_id: xxxxx  #<app_id>
        app_key: xxxxx #<app_key>複製程式碼

配置完成後，需要在leancloud的後臺建立一個Counter類，位置為：儲存/資料 ，然後點選建立Class，如下圖所示


建立完成後，再重新部署即可完成配置

在部落格中新增Fork me on GitHub

在新增之前可以去官網官網選擇自己喜歡的樣式

在NexT主題中找到 next\layout\_layout.swig目錄下的_layout.swig 的檔案，然後找到如下程式碼塊

    <div class="{{ container_class }} {% block page_class %}{% endblock %} ">
    <div class="headband"></div>複製程式碼

然後將選中的樣式的程式碼放到<div class="headband"></div>的後面

    <a target="_blank" href="https://github.com/tankboo"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/c6625ac1f3ee0a12250227cf83ce904423abf351/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://user-gold-cdn.xitu.io/2017/11/30/1600c8fe7bc8587e?w=149&h=149&f=png&s=6789"></a>複製程式碼

然後在重新編譯後就可以看到效果了

顯示更多

在瀏覽生成後的頁面時，發現首頁會把文章的全部內容列出來，如果文章內容太多，則這種方式是不友好的，我們需要把一部分資訊隱藏起來，方法就是在文章中的適當位置加入如下程式碼

    <!--more-->複製程式碼

然後重新編譯生成的首頁中的文章中就會生成如下按鈕

自定義樣式

這個模版用的人太多，我們想要更個性化一點，則需要我們自己去修改主題中的一些樣式，自己定義的樣式主要放在next\source\css\_variables\_custom.styi中，比如我們想給首頁的每個文章加上一個含有陰影的邊框，並增加文章之間的上下間距，可以進行如下設定

    .post {
         margin-bottom: 100px;
        padding: 25px;
        -webkit-box-shadow: 0 0 14px #cacbcb;
        -moz-box-shadow: 0 0 14px #cacbcc;
         background: #fff;
    }複製程式碼

然後就能看到上一圖中的樣式了

相關文章