Hexo & Github 建站日誌（一）

2017-05-19：

添加新 Page

1.用如下命令添加新page:

hexo new page "categories"
hexo new page "tags"
hexo new page "Python"
hexo new page "Linux"
hexo new page "Notes"
hexo new page "Something"
hexo new page "Links"
hexo new page "About"

2.打開主題配置文件``\themes\next\_config.yml文件，在menu中添加：

menu:
  home: /
  archives: /archives
  categories: /categories
  tags: /tags
  Python: /Python
  Linux: /Linux
  Notes: /Notes
  Something: /Something
  Links: /Links
  About: /About

3.打開\themes\next\languages\zh-Hans.yml，修改menu：

menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標籤
  python: Python
  linux: Linux
  notes: 筆記
  something: 有料
  links: 鏈接
  about: 關於

*注意這裏第一列必須全爲小寫。

*這是簡體中文的配置文件，如果你的博客用的是其他語言，請打開對應的文件。

修改blog頁面配色

添加自定義顏色

打開\themes\next\source\css\ _variables\base.styl文件，修改：

// Colors
// colors for use across theme.
// --------------------------------------------------
$whitesmoke   = #f5f5f5
$gainsboro    = #eee
$gray-lighter = #ddd
$grey-light   = #ccc
$grey         = #bbb
$grey-dark    = #999
$grey-dim     = #666
$black-light  = #555
$black-dim    = #333
$black-deep   = #222
$red          = #ff2a2a
$blue-bright  = #87daff
$blue         = #0684bd
$blue-deep    = #262a30
$orange       = #fc6423
// 下面是我自定義的顏色
$my-link-blue = #0593d3  //鏈接顏色
$my-link-hover-blue = #0477ab  //鼠標懸停後顏色
$my-code-foreground = #dd0055  // 用``圍出的代碼塊字體顏色
$my-code-background = #eee  // 用``圍出的代碼塊背景顏色

修改超鏈接顏色

還是base.styl文件，修改這幾行：

// Global link color.
$link-color                   = $my-link-blue
$link-hover-color             = $my-link-hover-blue
$link-decoration-color        = $gray-lighter
$link-decoration-hover-color  = $my-link-hover-blue

預覽：

修改小型代碼塊顏色

依舊是base.styl文件，修改$code-background和$code-foreground的值：

// Code & Code Blocks
// 用``圍出的代碼塊
// --------------------------------------------------
$code-font-family               = $font-family-monospace
$code-font-size                 = 15px
$code-background                = $my-code-background
$code-foreground                = $my-code-foreground
$code-border-radius             = 4px

預覽：

修改blog頁面字體大小

打開\themes\next\source\css\ _variables\base.styl文件，找到：

// Font size
$font-size-base           = 14px

改爲：

$font-size-base           = 16px

修改blog頁面寬度

現在一般都用寬屏顯示器，博客頁面兩側留白太多，調整一下寬度。

1.打開\themes\next\source\css\_common\components\post\post-expand.styl，找到:

@media (max-width: 767px)

改爲

@media (max-width: 1080px)

2.打開\themes\next\source\css\ _variables\base.styl文件，找到：

$main-desktop                   = 960px
$main-desktop-large             = 1200px
$content-desktop                = 700px

改爲：

$main-desktop                   = 1080px
$main-desktop-large             = 1200px
$content-desktop                = 810px

修改博客部署的message

在\node_modules\hexo-deployer-git\lib\deployer.js文件末尾找到：

Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}

改得個性化一點：

好傢伙又改版了悟の跡: {{ now('YYYY-MM-DD HH:mm:ss') }}

Github項目主頁添加README

問題原因：

Github上博客的倉庫主頁沒有README，如果把README.md放入source文件夾，hexo g生成時會被解析成html文件，而放到public文件夾中，生成時又會自動刪除。

解決方法:

在source目錄下新建文件README.mdown，在裏面寫README即可。hexo g會把它複製到public文件夾，且不會被解析成html

Github項目主頁添加LICENSE

修改主題配置文件，找到：

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa
#creative_commons:

將其中第 4 行的註釋放開，然後選擇你想使用的 LICENSE 即可，可選項參照第 3 行。

SEO優化

爲優化SEO，更改首頁標題格式爲「關鍵詞-網站名稱 - 網站描述」

打開\themes\next\layout\index.swig文件，找到這行代碼：

{% block title %} {{ config.title }} {% endblock %}

把它改成：

{% block title %}
  {{ theme.keywords }} - {{ config.title }} - {{ theme.description }}
{% endblock %}

添加“Fork me on Github” ribbon

1.點擊Fork me on Github；

2.給blog主頁選擇一個綬帶（ribbon），並複製相應代碼；

3.找到正在使用的theme下的layout文件，將代碼插入即可；

4.比如我選擇了紅色的ribbon，使用的themes爲next，那麼只要打開 blog\themes\next\layout\_layout.swig文件，複製下面這段代碼，放在最後，標籤之前即可。（注意將https://github.com/you改爲你自己的github鏈接）

<a href="https://github.com/you">
    <img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
    alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png">
</a>

添加404公益頁面

在blog/source下新建自己的404.html文件即可，強推騰訊公益404，代碼可參考如下：

---
layout: default
---
<html>
    <head>
         <meta charset="UTF-8" />
         <title>404</title>
    </head>
    <body>
         <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="http://chihweihsu.com/" homePageName="回到悟の跡"></script>
    </body>
</html>

文章閱讀次數統計

1.註冊LeanCloud帳號並驗證郵箱；

2.創建應用，新建一個應用來專門進行博客的訪問統計的數據操作；

3.創建完成之後我們點擊新創建的應用的名字來進行該應用的參數配置；

4.新建一個Class用來專門保存我們博客的文章訪問量等數據；

5.新建Class名字必須爲Counter，設置默認的ACL權限，建議在此處選擇無限制；

6.選擇左側的應用Key選項，拿到我們創建應用的AppID以及AppKey；

7.編輯 主題配置文件，如下:

leancloud_visitors:
  enable: true
  app_id: joaeuuc4hsqudUUwx4gIvGF6-gzGzoHsz
  app_key: E9UJsJpw1omCHuS22PdSpKoh

8.ok，部署後可見。

2017-05-18：

配置導航欄網站小圖標

挑選一張圖片，名字改爲favicon.ico，放到..\blog\source下，配置主題配置文件如下：

favicon: /favicon.ico

集成百度分享模塊

首先，編輯 站點配置文件，末尾添加字段:

baidushare: true #百度分享功能

其次，編輯主題配置文件，找到如下代碼位置，去掉最後兩行#註釋，並選擇展示方式，建議slide懸浮狀態：

# Baidu Share
# Available value:
#    button | slide
# Warning: Baidu Share does not support https.
baidushare:
 type: slide #百度分享展示的方式button|slide

*注意：百度分享不支持https方式，可以自己買個域名綁定，或者搜下百度分享不支持https的解決方案，有前輩做出解答。

其實，現在已經完成了；但是，爲了折騰，我們接着來自定義百度分享的顯示，點擊代碼獲取，一步步進行定製，走完流程，點擊直接獲取代碼，拿到一段js代碼，類似如下：

<script>
    window._bd_share_config = {
        "common": {
            "bdSnsKey": {},
            "bdText": "",
            "bdMini": "2",
            "bdMiniList": [
                "mshare",
                "bdysc",
                "evernotecn",
                "tqq",
                "weixin",
                "sqq",
                "qzone",
                "douban",
                "tsina",
                "tieba",
                "youdao",
                "isohu",
                "mail",
                "ty",
                "fbook",
                "twi",
                "linkedin",
                "copy",
                "print"
            ],
            "bdPic": "",
            "bdStyle": "0",
            "bdSize": "16"
        },
        "slide": {
            "type": "slide",
            "bdImg": "5",
            "bdPos": "right",
            "bdTop": "53.5"
        },
        "image": {
            "viewList": [
                "weixin",
                "qzone",
                "tsina",
                "evernotecn",
                "douban",
                "bdysc"
            ],
            "viewText": "分享到：",
            "viewSize": "16"
        },
        "selectShare": {
            "bdContainerClass": null,
            "bdSelectMiniList": [
                "weixin",
                "qzone",
                "tsina",
                "evernotecn",
                "douban",
                "bdysc"
            ]
        }
    };
</script>

最後，打開如下文件blog\themes\next\layout\_partials\share\baidushare.swing，替換掉裏面的js代碼，本文以slide模式爲例，替換掉

{% elseif theme.baidushare.type === "slide" %}

後面的<script>...</script>即可。

2017-05-17：

markdown寫文章時，添加居中引用模塊

只需在寫文章時，添加如下標籤即可：

<blockquote class="blockquote-center">
    優秀的人，不是不合羣，而是他們合羣的人裏面沒有你
</blockquote>

預覽：

優秀的人，不是不合羣，而是他們合羣的人裏面沒有你

2017-05-16：

首頁文章預覽添加圖片

打開scaffolds/post.md文件，在默認參數中添加如下參數：

# 首頁文章預覽添加圖片：
photos:
    - http://xxx.com/photo1.jpg
    - http://xxx.com/photo2.jpg

預覽：

首頁文章摘要模式

首頁開啓文章摘要模式，不全文顯示，而是出現閱讀全文>，只需在主題配置文件中找到auto_excerpt屬性進行配置

# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true #改寫爲true
  length: 150 #默認展示的高度

或者，在Markdown文章中不想顯示的位置，添加如下代碼：

這裏顯示
<!--more-->
這裏不顯示

預覽：

待續未完…

作者：Chihwei_hsu
來源：http://chihweihsu.com
Github：https://github.com/HsuChihwei

米Py

發佈了39 篇原創文章 · 獲贊 10 · 訪問量 8萬+

私信關注