github pages + Hexo + 域名綁定搭建我的博客加強版

概述

前面咱們用github pages + Hexo 搭建了一個簡單版的我的博客系統，可是裏面的內容單調，不少功能不夠完善，因此咱們須要對yelle 的主題進行優化和完善。基本搭建請訪問：http://blog.csdn.net/xiangzhihong8/article/details/53355036php

主題配置介紹

從中咱們也能夠看出，對於主題來說，大部分能夠配置的地方其實都是在這裏的。因此咱們須要瞭解一個基本的主題樣式。css

duoshuo，若是你是打算採用多說評論系統的話，你須要設置這裏，可是我我的對多說沒好印象
youyan，有言也是國內實用比較多的評論系統之一，我的感受相對比較穩定
open_in_new，我我的以爲這個東西就應該是 true，不是用新標籤的都是壞人
baidu_tongji，我我的使用的是百度統計，具體百度統計的使用能夠查看百度統計官網：http://tongji.baidu.com。

yelle主題完整配置

# Theme Version | 當前版本
Yelee: "3.5"

# >>> Basic Setup | 基礎設置 <<<

# Header | 主菜單
## About Page: `hexo new page about`
## Tags Cloud Page: `hexo new page tags`
menu:
  主頁: /
  全部文章: /archives/
  #隨筆: /tags/隨筆
  標籤雲: /tags/
  關於我: /about/

# Link to your avatar | 填寫頭像地址
avatar: http://ohe65w0xx.bkt.clouddn.com/avert.png

# Small icon of Your site | 站點小圖標地址
favicon: /favicon.png

# Internationalization | 主題語言
## Change Language in SITE's _config.yml | 在站點配置中切換語言
## https://hexo.io/docs/internationalization.html
## Available Languages: en, zh-Hans, zh-Hant-TW, zh-Hant-HK

# Subdirectory | 子目錄
## If your site' url is 'http://yoursite.com/blog', set root_url as '/blog/'
## 網站若存放在子目錄，請按上面格式填寫
## https://hexo.io/docs/configuration.html#URL
root_url: 

# Year of Site Creation | 網站成立年份
since: 2016

# Social info. Bar | 社交信息展現
## Keep "mailto:" in Email | 設置 Email 時保留 "mailto:"
## Encrypt email 加密郵件地址 http://ctrlq.org/encode/
## RSS requires a plugin to take effect | 使用 RSS 需先安裝對應插件
## https://github.com/hexojs/hexo-generator-feed

subnav:
  Email: "1044817967@qq.com"
  #新浪微博: "sina weibo"
  GitHub: "https://github.com/xiangzhihong/"
  #V2EX: "#"
  RSS: "/atom.xml"
  #知乎: "zhihu"
  #豆瓣: "douban"
  #簡書: "jianshu"
  #SegmentFault: ""
  #博客園: "cnblogs"
  CSDN: "http://blog.csdn.net/xiangzhihong8/"
  #Coding: ""
  #網易雲音樂: "netease"
  #蝦米音樂: "xiami"
  #bilibili: ""
  #AcFun: ""
  #niconico: ""
  #Quora: ""
  #Facebook: "#"
  #Google: "#"
  #Twitter: "#"
  #LinkedIn: "#"
  #QQ: "1044817967"
  #微信: "Wechat"
  #PayPal: "#"
  #StackOverflow: "#"
  #CodePen: ""
  #Plunker: ""
  #Instagram: "#"
  #LOFTER: ""
  #Flickr: "#"
  #reddit: ""
  #Medium: ""
  #TiddlyWiki: ""
  #Tumblr: ""
  #_500px: ""

# >>> Conments 評論系統 <<<
# Chose ONE as your comment system and keep others disable.
# 選一個做爲網站評論系統，其餘保持禁用。

preload_comment: true
## false: 當點擊評論條等區域時再加載評論模塊
## false: load comment's section until u click/hover on the bar/icon

show_count: false
## 是否在主頁文章標題旁顯示評論數（多說、Disqus）
## Add comment count after article title

disqus: 
  #on: true
  shortname: 
  # https://help.disqus.com/customer/en/portal/articles/466208-what-s-a-shortname-
  # It is unnecessary to enable disqus here if 
  # you have set "disqus_shortname" in your site's "_config.yml" 

duoshuo: 
  #on: true
  domain: 
  # 是否開啓多說評論，http://duoshuo.com/create-site/
  # 使用上面網址登錄你的多說，而後建立站點，在 domain 中填入你設定的域名前半部分
  # http://<要填的部分>.duoshuo.com (domain只填上<>裏的內容，不要填整個網址)

youyan:
  on: true
  id: 2120654
  # 是否開啓友言評論，http://www.uyan.cc/index.php
  # id 中填寫你的友言用戶數字ID，註冊後進入後臺管理便可查看
  # 友言服務在 Web 環境下運行，普通本地環境沒法查看，請部署後在線上測試。


# >>> Style Customisation 樣式自定義 <<<

# Background | 背景
## "5": show images form bg-1.jpg to bg-5.jpg in `/yelee/source/background/`
## "5": 顯示`/yelee/source/background/`文件夾中 bg-1.jpg 到 bg-5.jpg 這5張圖片
## "0": white-gray background | 淳樸灰白背景
background_image: 5

# Base Font Size | 字號調節
base_font_size: 16  #px, 16 - 24

## General Color Scheme | 主題配色方案 
## 可用值 Value: yilia
color_scheme: 

highlight_style:
  #on: true
  inline_code: 3  # Value: 0 - 9 可選
  code_block: 2  # Value: 0 - 4 
  # Set inline_code to style highlight text
  # Chose a highlight theme for code block
  # 經過 inline_code 切換內置文本高亮樣式
  # 經過 code_block 切換內置代碼高亮配色主題

blockquote_style:
  on: true
  blockquote: 1  # Value: 0 - 7 可選
  # 自定義文章「引用部分」的樣式

# Headings Style | 標題風格
## 0-Yelee, 1-Yilia, 2-GitHub
heading_style: 0 # Value: 0 - 2

## List style type (ul) | 無序列表項標記樣式
list_style: 0  # value: 0 - 12 可選

# 左邊欄寬度 px
left_col_width: 300

# Copyright info. of post | 文末版權信息
copyright: true

# Table of contents | 文章目錄
toc:
  on: true
  list_number: true # 目錄序號
  max_depth: 3  # 1 - 6 (h1-h6) 目錄最大級數
  nowrap: false # Keep title on same line | 目錄標題不換行

# 是否開啓主頁及加載頭像時的動畫效果
# Animation in Homepage and Loading avatar
animate: true

# Load jQuery UI to style tooltips
# 工具提示框樣式美化
jquery_ui: false

# Max width of right cloumn | 限制右側內容的寬帶 
limit_article_width: 
  on: false
  max_width: 60 # em

# >>> Small features | 小功能設置 <<<

# 是否開啓邊欄多標籤切換
# Birdhouse button in left column
tagcloud: true

# Blogroll, Link exchange | 友情連接
friends:
  Blog: http://www.xiangzhihong.com/
  GitHub: https://pages.github.com/
  MOxFIVE: http://moxfive.xyz/
#friends: false

#是否開啓「關於我」。
aboutme: 專一於前端
#aboutme: false

# Open link in a new tab | 是否在新窗口打開連接
## `global` 0: Set separately, 1: Open all in new 2: Open all in current
## `global` 0: 分開設置, 1: 所有在新標籤打開, 2: 所有在"當前"標籤打開
open_in_new:
  global: 0 # 0-2
  title: false # article title in homepage 主頁文章標題
  post: false # link within post/page 正文中的連接
  tags: false # 標籤
  categories: false # 分類
  article_nav: false # 導航
  archives: true # 歸檔
  mini_archives: true # 迷你歸檔
  menu: false # 邊欄菜單
  friends: true  # 友情連接
  socail: true # 社交圖標

# Customize feed link 自定義訂閱地址
rss: /atom.xml

# Update Reminder for IE6/7/8
# 針對 IE6/7/8 的升級瀏覽器提示
ie_updater:
  on: true
  link: //outdatedbrowser.com/
  ## http://browsehappy.com/
  ## http://outdatedbrowser.com/

# Tab Title Change | 標籤頁標題切換
tab_title_change: 
  on: false
  left_tab_title: '(つェ⊂) 我藏好了哦~ '
  return_tab_title: '(*´∇｀*) 被你發現啦~ '


# >>> Vendors | 第三方工具 & 服務 <<<

# Local Site Search | 本地站內搜索
## Insatall below plugin to take effect | 使用搜索需先安裝對應插件
## https://github.com/PaicHyperionDev/hexo-generator-search
search: 
  #on: true
  onload: false
  ## true: get search.xml file when the page has loaded
  ## false: get the file when search box gets focus

# images viewer | 圖片瀏覽器
## http://www.fancyapps.com/fancybox/
fancybox: true

# Display Math(LaTeX, MathML...) | 數學公式支持
## https://www.mathjax.org/
mathjax: false

# Socail Share | 是否開啓分享
share: 
  on: true
  baidu: true
  addthis: false
  addthis_pubid: "ra-56ff76c972fc0cf9"
  ## Go to www.addthis.com/dashboard to get your pubid (in src of Code)
  ## and customize AddThis share buttons

# 百度、谷歌站長驗證。填寫 HTML 標籤 content
# Site Verification for Google and Baidu. HTML label content.
baidu_site: 
google_site: 

# Fill in Google Analytics tracking ID, #e.g. UA-XXXXX-X
google_analytics: 

# 百度統計 http://sitecenter.baidu.com/sc-web/
# 查看代碼，填入 //hm.baidu.com/hm.js? 以後的內容
baidu_tongji: 

# 不蒜子網站計數設置
# http://ibruce.info/2015/04/04/busuanzi/
visit_counter:
  on: true
  site_visit: true
  page_visit: true

# GitHub Repo Widget
# https://github.com/hustcc/GitHub-Repo-Widget.js
github_widget: false

# Progress Bar | 頁面加載進度條
# Demo: http://github.hubspot.com/pace/docs/welcome/
# type: barber-shop|big-counter|bounce|center-atom|center-circle|
# center-radar|center-simple|corner-indicator|flash|flat-top|
# loading-bar|mac-osx|minimal
# color: black|blue|green|orange|pink|purple|red|silver|white|yellow|
progressBar:
  on: true
  type: "minimal"  # Keep Quotes | 保留引號避免出錯
  color: blue

CDN:
  jquery: //cdn.bootcss.com/jquery/2.2.4/jquery.min.js
  require: //cdn.bootcss.com/require.js/2.2.0/require.min.js
  fontawesome: //cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css
  fancybox_js: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js
  fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css
  animate_css: //cdn.bootcss.com/animate.css/3.5.1/animate.min.css
  jquery_ui_js: //cdn.bootcss.com/jqueryui/1.10.4/jquery-ui.min.js
  jquery_ui_css: //cdn.bootcss.com/jqueryui/1.10.4/css/jquery-ui.min.css
  pace_js: //cdn.bootcss.com/pace/1.0.2/pace.min.js
  clipboard: //cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js
  mathjax: //cdn.bootcss.com/mathjax/2.6.1/MathJax.js
  scrollreveal: //cdn.bootcss.com/scrollReveal.js/3.1.4/scrollreveal.min.js

添加經常使用頁面

首先定位到咱們的本地的blog項目，如我存放的位置是E:\blog\blog
html

新增一個 404 頁面：hexo new page 404
新增一個 about 頁面：hexo new page about
新增一個 tag 標籤雲頁面：hexo new page tags
新增一個 robot.txt 文件，把該文件放在：E:\blog\blog\hexo\source 目錄下，robot 文件內容

User-Agent: *
Allow: /
Disallow: /background
Disallow: /css
Disallow: /fancybox
Disallow: /font-awesome
Disallow: /img
Disallow: /js
Sitemap: http://code.skyheng.com/sitemap.xml
Sitemap: http://code.skyheng.com/baidusitemap.xml

其餘插件推薦

插件的基本使用命令

插件官網：https://hexo.io/plugins/
安裝插件：npm install 插件名 –save
卸載插件：npm uninstall 插件名
更新插件和博客框架（須要在 E:\blog_space\hexo 目錄下）：npm update
注：插件的管理實質上是經過項目根目錄下 package.json 文件更來管理各大插件。前端

必備插件

支持RSS：npm install hexo-generator-feed –save
生成站點地圖：npm install hexo-generator-sitemap –save
生成百度站點地圖：npm install hexo-generator-baidu-sitemap –save
HTML 壓縮：npm install hexo-html-minifier –save
JavaScript 壓縮：npm install hexo-uglify –save
CSS 壓縮插件：npm install hexo-clean-css –save
SEO優化：npm install hexo-generator-seo-friendly-sitemap

添加文章擡頭信息

Hexo默認新建的文章擡頭已有title、date、tags等屬性，可能缺少categories和meta標籤，想要指定目錄就須要添加categories屬性，而meta標籤則是爲了便於搜索引擎的收錄。想要修改的話，能夠打開D:\Hexo\scaffolds\post.md（這是你clone下來的地址）文件在裏面添加。jquery

title:  #文章標題
date:  #時間，通常不用改
categories:  #目錄分類
tags:  #標籤，格式能夠是[Hexo,總結]，中間用英文逗號分開
keywords:  #文章關鍵詞，多個關鍵詞用英文逗號隔開

文章圖片的存放

想要在文章中插入圖片的話，能夠按照Markdown語法來插入，格式爲。圖片的存放有兩種方式：在本地D:\Hexo\source目錄下新建一個存放圖片的文件夾，好比images，而後把想要插入的圖片放在裏面，插入圖片的路徑；第二種方法是把圖片上傳到網絡，而後插入圖片路徑。推薦使用第二種，好比百度雲，七牛等。git

本文同步分享在博客「xiangzhihong8」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。github