[實戰乾貨]30分鐘快速搭建hexo3.7.0 + next主題6.4教程(持續更新)

時間  2019-12-08
標籤 實戰 乾貨 30分 快速 搭建 hexo3.7.0 hexo 主題 6.4 教程 持續 更新 简体版
原文   原文鏈接

30分鐘便可完成一個帶評論、打賞、搜索、RSS、分類、標籤等功能的博客
高效的搭建讓博主更加專一於內容的生產javascript

歡迎關注博主的我的博客 東行不西遊

準備工做

  1. 必須安裝git和node,官網有各平臺詳細的安裝過程
  1. 準備一張頭像和網站favicon
  • 200*200方形或圓形頭像 (用來顯示做者頭像)
  • 32*32的favicon (瀏覽器打開網站標籤的一個ico)
  1. hexo全局的圖標配置信息均來自fontawesome
  2. 全部的配置項在修改的時候必定要記住 冒號 後是有一個空格的,否則保存後 在執行 hexo server 會失敗

開始安裝

git和node安裝完後進入到博客的文件夾內,執行下面代碼(均在終端操做)php

$ npm install hexo-cli -g  #全局安裝hexo命令
$ hexo init blog           #在當前目錄下,初始化hexo一個名爲blog項目
$ cd blog                  #進入該目錄
$ git clone https://github.com/theme-next/hexo-theme-next themes/next #安裝next主題
$ npm install              #安裝項目必備插件
$ hexo server              #本地啓動項目
複製代碼

若是以上步驟均正確能夠 點擊便可看到博客首頁 或 瀏覽器輸入 localhost:4000 便可看到博客首頁,如不能請檢查以前的步驟是否正確,此時你已經完成了50%的工做html

先找到 站點配置文件 blog/_config.yml
重要提示:修改每個配置的時候均可以刷新頁面觀看修改結果,若是不顯示能夠在終端的博客目錄執行java

$ hexo clean
$ hexo server
複製代碼

站點配置

  1. 先設置hexo的next主題 找到theme後修改成:
    theme: next #配置成剛下載的next主題
複製代碼
  2. 配置hexo網站相關信息 找到site的設置 按下面備註修改相關信息
    # Site
title: 東行不西遊  #網站標題
subtitle: 風在前,無懼!  #網站副標題
description: 心猿不定，意馬四馳  #描述,介紹網站的
keywords: python,php,mysql,滑雪,攝影 #網站的關鍵字
author: Bowen #博主姓名
language: zh-CN #語言 zh-CN 是簡體中文
timezone: UTC #時區
複製代碼
  3. 設置hexo永久連接 設置永久連接的目的是爲了便於分享和seo優化.這樣別人收藏地址後不會出現連接失效
    # URL
url: https://dangbowen.com #網站的首頁地址
root: / #網站的根目錄設置
permalink: :year/:month/:day/:title.html # 這種 
設置的url表現爲2018/10/18/hello-world.html 樣式
複製代碼
    默認連接樣式可修改成 (permalink配置只能有一種,關閉某種開頭加 #)
    permalink: :category/:title.html #用分類和博客title當作url地址
複製代碼
  4. 設置hexo中的默認分類 找到 Category & Tag
    # Category & Tag
default_category: default  #這裏設置一個默認分類名稱,若是第3條永久連接設置爲 permalink: category/:title/ 那麼沒有分類的博客就會被放在default這個分類下進行歸檔
複製代碼

額外配置:hexo如何配置git信息(可跳過!後續新開一貼詳細介紹) github和coding都提供page服務,這樣咱們就能夠把博客靜態資源發佈到這2個倉庫,而後用域名來訪問博客,全部人均可以經過瀏覽器來觀看你的博客.雙倉庫格式以下:node

deploy:
  type: git
  repo:
      github: https://github.com/{your_name}/{your_name}.github.io,master #github 提供page的服務要求倉庫名必須爲 {your_name}.github.io 格式 好比你的github用戶名爲 abc 那麼你必須創建一個 abc.github.io倉庫
      coding: https://git.coding.net/{your_name}/{your_name}.git,master #coding要求page服務的倉庫名爲 用戶名 同樣 .例如:用戶名爲abc 倉庫名也必須爲abc 
複製代碼

先找到 主題配置文件 blog/themes/next/_config.yml ,修改配置的時候均可以刷新頁面觀看修改結果,若是不顯示能夠在終端的博客目錄執行python

$ hexo clean
$ hexo server
複製代碼

主題配置

  1. 配置hexo網站的favicon 把準備好的favicon放在 blog/themes/next/source/images/下mysql

    favicon:
  small: /images/favicon-16x16-next.png #把favicon名修改爲你本身的
  medium: /images/favicon-32x32-next.png 
複製代碼

  2. 配置hexo中的tag,categories菜單 默認菜單隻開啓了首頁和歸檔,hexo全部圖標均來自fontawesomegit

    menu: #菜單設置爲 菜單名: /菜單目錄 || 菜單圖標名字
  home: / || home 
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  commonweal: /404/ || heartbeat
menu_settings:
  icons: true  #顯示圖標
  badges: true  #顯示統計信息
複製代碼

  3. 手動生成hexo菜單對應文件 新菜單開啓後是沒有對應文件的,因此要手動生成about,tags,categories和404頁面,這裏咱們將404替換成騰訊的公益頁面 新建about頁面github

    $ cd blog
$ hexo new page about #about就是普通的佈局通常用來介紹站點信息和博主信息等
複製代碼

    新建一個tags頁面sql

    $ cd blog
$ hexo new page tags
複製代碼

    找到tags文件 blog/source/tags/index.md 編輯它,在頭部修改成

    ---
title: All tags
date: 2018-10-01 13:58:44 #時間隨意
type: "tags" #類型必定要爲tags
comments: false #提示找個頁面不須要評論,後續評論插件那裏會詳細介紹
---
複製代碼

    新建一個categories頁面

    $ cd blog
$ hexo new page categories
複製代碼

    找到categories文件 blog/source/categories/index.md 編輯它,在頭部修改成

    ---
title: 分類
date: 2018-10-15 00:03:57
type: "categories"
comments: false
---
複製代碼

    新建一個404頁面

    $ cd blog
$ hexo new page 404
複製代碼

    找到404文件 blog/source/404/index.md 編輯它,內容所有替換成以下

    <!DOCTYPE html>
<html lang="en">
<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="/" homePageName="返回"></script> 
</body></html>
 ```
複製代碼

  4. 配置hexo本地搜索 安裝插件,終端進入 cd blog 後執行:

    npm install hexo-generator-searchdb --save
複製代碼

    主題配置文件以下:

    local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1
  unescape: false
複製代碼

    站點配置文件新添加以下代碼:

    search:
  path: search.xml
  field: post
  format: html
  limit: 100
複製代碼

  5. 設置hexo中的rss訂閱 rss須要安裝一個插件,終端進入 cd blog 後執行:

    npm install hexo-generator-feed --save
複製代碼

    刷新主頁就能夠看到rss

  6. 配置hexo站點的footer信息 底部footer能夠開關顯示hexo版權,theme版權,還有建站時間等個性化配置

    footer:
  since: 2015   #建站開始時間
  icon:
    name: user  #設置 建站初始時間和至今時間中間的圖標 默認是一個'小人像'更改user爲heart能夠變成一個'心'
    color: "#808080" #更改圖標的顏色 紅色爲 '#ff0000'
  powered:
    enable: true #是否開啓hexo驅動
    version: true #是否開啓hexo版本號
  theme:
    enable: true #是否開啓theme驅動
    version: true #是否開啓主題版本號
  custom_text: Hosted by <a target="_blank" rel="external nofollow" href="https://pages.coding.me"><b>Coding Pages</b></a> #這裏的底部標識是爲了添加coding page服務時的版權聲明 打開註釋就能夠看到底部有一個 hosted by coding pages
複製代碼

  7. 配置hexo中next主題樣式選擇 next一共提供了4種首頁樣式,按照本身喜愛選擇一個,切記選擇一個其餘主題後其餘的主題以前必定要加上#

    # Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini
複製代碼

  8. hexo網站next主題側邊欄寬度,頭像信息,頭像設置圓形和頭像旋轉

    sidebar:
  position: left  #選擇pisces 或者 gemini 主題是 能夠 選擇側邊欄 位置 調整左邊或者右邊
  #position: right
  width: 300   # muse mist 主題 能夠控制側邊欄的寬度 
  display: post   #若是是muse mist 主題 能夠選擇 側邊欄彈出動做 post 是 只在內容頁彈出
  #display: always #全局彈出
  #display: hide #全局隱藏側邊欄 右下角有角標喚出
  #display: remove #移除側邊欄
avatar:
  url: /images/avatar.gif  #設置頭像資源的位置
  rounded: false  #開啓圓形頭像
  opacity: 1    #不透明的比例 0 就是徹底透明
  rotated: false  #開啓旋轉
複製代碼

  9. hexo中next主題的社交信息和友鏈配置

    social: #和菜單設置格式同樣 社交名字: 社交url || 社交圖標 ,圖標信息仍是[fontawesome](https://fontawesome.com/v4.7.0/icons)
  GitHub: https://github.com/yourname || github
  E-Mail: mailto:yourname@gmail.com || envelope
  Google: https://plus.google.com/yourname || google

social_icons:
  enable: true  #顯示社交圖標
  icons_only: false #只顯示圖標的開關

# Blog rolls
links_icon: link  #友鏈的圖標 參考上文
links_title: Links #友鏈的title 好比你能夠更改成 友情連接
links_layout: block #友鏈擺放的樣式,按塊 一行一個
#links_layout: inline #按線擺放,一行不少個 切記 同時只能一種樣式
links:
  Title: http://example.com/  #友鏈的地址
複製代碼

  10. hexo中next主題首頁文章不展現全文顯示摘要,自動截取摘要和點擊閱讀全文跳轉頂部

    scroll_to_more: true  #點擊閱讀全文後是否跳到<!--more-->標記處,設爲false時點擊閱讀全文能夠從頭閱讀
auto_excerpt: #是否自動截取摘要
  enable: false #設置爲true則自動截取150字當作首頁摘要
  length: 150   #自動截取的字數
複製代碼

  11. hexo中next主題首頁文章屬性顯示建立時間,修改時間,分類

    post_meta:
  item_text: false  # 設爲true 能夠一行顯示 文章的全部屬性
  created_at: true  #顯示建立時間
  updated_at:
    enabled: true   #顯示修改的時間
    another_day: true #設true時 若是建立時間和修改時間同樣則顯示一個時間
  categories: true  #顯示分類信息
複製代碼

  12. hexo中的next增長頁面閱讀統計,字數統計,閱讀時長 新增busuanzi閱讀統計

    busuanzi_count:
  enable: false  #設true 開啓
  total_visitors: true  #總閱讀人數 uv數
  total_visitors_icon: user  #閱讀總人數的圖標
  total_views: true  #總閱讀次數 pv數
  total_views_icon: eye  #閱讀總次數的圖標
  post_views: true #開啓內容閱讀次數
  post_views_icon: eye #內容頁閱讀數的圖標
複製代碼

    新增字數統計,閱讀時長,先安裝插件

    $ npm install hexo-symbols-count-time --save
複製代碼

    主題配置信息以下:

    symbols_count_time:
  separated_meta: true  # false 會顯示一行
  item_text_post: true  # 顯示屬性名稱,設爲false後只顯示圖標和統計數字,不顯示屬性的文字
  item_text_total: true #底部footer是否顯示字數統計屬性文字
  awl: 4 #計算字數的一個設置,沒設置過
  wpm: 275 #一分鐘閱讀的字數
複製代碼

    站點配置新增以下:

    symbols_count_time:
 #文章內是否顯示
  symbols: true
  time: true
 # 網頁底部是否顯示
  total_symbols: true
  total_time: true
複製代碼

  13. hexo中next主題給內容頁裏的代碼塊新增複製按鈕

    codeblock:
  copy_button:
    enable: true #增長複製按鈕的開關
    show_result: true #點擊複製完後是否顯示 複製成功 結果提示
複製代碼

  14. hexo中next主題文章主頁配置微信公衆號

    # Wechat Subscriber
wechat_subscriber:
  enabled: true
  qcode: /images/wechat-qcode.jpg #微信公衆號的二維碼
  description: 這是個人公衆號  #公衆號描述文字
複製代碼

  15. hexo中next主題配置微信,支付寶打賞

    # Reward
reward_comment: 一毛也是愛~  #打賞描述
wechatpay: /images/wechat_pay.png #微信支付的二維碼圖片地址
alipay: /images/ali_pay.png  #支付寶的地址
#bitcoin: /images/bitcoin.png #這個是設置比特幣的...
複製代碼

  16. hexo中next主題新增 相關文章推薦 安裝推薦文章的插件

    $ npm install hexo-related-popular-posts --save
複製代碼

    主題配置信息以下:

    related_posts:
  enable: true
  title: 相關文章推薦 # 屬性的命名
  display_in_home: false #false表明首頁不顯示
  params:
    maxCount: 5 #最多5條
    #PPMixingRate: 0.0 #能夠看github上 這個相關度介紹
    #isDate: true #是否顯示 日期
    #isImage: false #是否顯示配圖
    isExcerpt: false #是否顯示摘要
複製代碼

  17. hexo中next主題的文章原創申明 給每個原創文章開啓版權保護

    post_copyright:
  enable: true #設置true就開啓了
  license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>
複製代碼

  18. hexo中next主題更改code高亮樣式

    highlight_theme: normal #可選值爲 normal | night | night eighties | night blue | night bright 這幾個挑一個喜歡的
複製代碼

  19. hexo中next主題添加評論-Valine 點擊官網leancloud註冊帳號,獲取本身的appid,appkey,再看valine官網設置下本身的leancloud

    valine:
  enable: true # 開啓評論
  appid:  ~~~  # 剛申請 leancloud 的 appid
  appkey:  ~~~ # 剛生情 leancloud 的 appkey
  notify: false # 是否郵件推送 詳情看 https://github.com/xCss/Valine/wiki
  verify: false # 
  placeholder: Just go go # 評論框裏的placeholder信息
  avatar: mm # gravatar style
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # 一頁顯示的評論條數
  visitor: false # 
複製代碼

  20. hexo中next主題配置網頁body背景動態效果 4個效果同時只能開啓一個

    canvas_nest: false
three_waves: false
canvas_lines: false
canvas_sphere: false
複製代碼

常見問題

  1. 爲何hexo server報錯? 檢查最近修改的配置文件中的各個配置項冒號後是否有空格,某些樣式選擇是否惟一
  2. 爲何menu設置完後,點擊各個菜單無效,href=""現象? 檢查站點配置文件relative_link: false 如爲true 改成 false便可

最後的最後

因爲6.4比5.x多了不少之前個性定製的配置,使得個性化的配置操做簡單不少,不用修改樣式和源碼便可完成之前的定製效果,因此主題的更新仍是要看我的的需求,若是功可以用的狀況下仍是保證創做博客爲主,畢竟內容纔是最能吸引讀者的,共勉.

歡迎關注博主的我的博客 東行不西遊,今天是10月24日,祝你們也祝本身節日快樂

本文做者： Bowen 本文原創連接： dangbowen.com/hexo/ad0bed… 版權聲明： 本博客全部文章除特別聲明外，均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明出處！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程