歡迎猛擊悟の跡【http://chihweihsu.com】跳轉原文
2017-05-21：
Markdown內置標簽
文本居中的引用
<!-- HTML方式: 直接在 Markdown 文件中編寫 HTML 來調用 -->
<!-- 其中 class="blockquote-center" 是必須的 -->
<blockquote class="blockquote-center">blah blah blah</blockquote>
<!-- 標簽 方式，要求版本在0.4.5或以上 -->
{% centerquote %}blah blah blah{% endcenterquote %}
<!-- 標簽別名 -->
{% cq %} blah blah blah {% endcq %}
預覽：
<blockquote class="blockquote-center">人的一切痛苦，本質上都是對自己的無能的憤怒。</blockquote>
突破容器寬度限制的圖片
<!-- HTML方式: 直接在 Markdown 文件中編寫 HTML 來調用 -->
<!-- 其中 class="full-image" 是必須的 -->
<!-- 標簽 方式，要求版本在0.4.5或以上 -->
{% fullimage /image-url, alt, title %}
<!-- 別名 -->
{% fi /image-url, alt, title %}
預覽：
{% fi http://ohhmsby4v.bkt.clouddn.com/image/2017-05-21_%E5%BB%BA%E7%AB%99%E6%97%A5%E5%BF%97_full_img1.jpg, alt, 時光 %}
Bootstrap Callout
{% note class_name %} Content (md partial supported) {% endnote %}
*class_name可以為：default、primary、success、info、warning、danger，也可以為空。
預覽：
{% note %} Content (md partial supported of none) {% endnote %}
{% note default %} Content (md partial supported of default) {% endnote %}
{% note primary %} Content (md partial supported of primary) {% endnote %}
{% note success %} Content (md partial supported of success) {% endnote %}
{% note info %} Content (md partial supported of info) {% endnote %}
{% note warning %} Content (md partial supported of warning) {% endnote %}
{% note danger %} Content (md partial supported of danger) {% endnote %}
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文件，復制下面這段代碼，放在最后，標簽</body>之前即可。（注意將https://github.com/you改為你自己的github鏈接）
<a >
<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="http://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>
預覽：
<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-->
這里不顯示
預覽：
博文轉載至我的個人博客網站---悟の跡，文章所述功能均于網站中實現，歡迎來訪。
