hexo實用技巧隨記

關於hexo

安裝hexo及主題

安裝hexo，可以參考：用 Hexo 和 GitHub Pages 搭建博客

解決latex公式渲染的問題

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-pandoc --save

然後到配置的主題next下的配置文件 /Users/lijia/科研&學習/github博客/themes/next/_config.yml，更改配置如下：

math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: false

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

更改markdown信息頭模板

默認的信息頭不全，我們把markdown模板 /Users/lijia/科研&學習/github博客/scaffolds/post.md 裏面最開始的信息更改如下：

title: {{ title }}
date: {{ date }}
tags:
description: 點擊閱讀前文前, 首頁能看到的文章的簡短描述 
categories:

添加搜索功能

首先在blog文件夾目錄下安裝依賴
npm install hexo-generator-searchdb --save

然後在站點配置文件中_config.yml中增加如下內容

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

最後在主題配置文件（\themes\next_config.yml），修改local_search的值如下

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true

---

關於next主題

首先進入本地blog目錄，使用git clone，把主題項目克隆下來,
git clone https://github.com/theme-next/hexo-theme-next themes/next
然後在站點配置文件中更改theme選項爲 next.

更改主題細節設置

頁面配置

設置開始頁面顯示，設置頭像，設置社交媒體鏈接等等，
可以參考這個博客：Linux下使用 github+hexo 搭建個人博客04-next主題優化
或者參考這個文章：Hexo+Next配置Blog

更改默認字體大小

主題默認的字體太大了，一個頁面放不下很多內容，根據我們創建的路徑，在/Users/lijia/科研&學習/github博客/themes/next/source/css/_variables/base.styl 中找到font size，把font-size-base默認值更改即可

// Font size
$font-size-base           = (hexo-config('font.enable') and hexo-config('font.global.size') is a 'unit') ? unit(hexo-config('font.global.size'), em) : 14px;

網址縮略圖

如果我們想要更改網址欄左側的縮略圖標，我們先製作好圖標，放入對應的 /Users/lijia/科研&學習/github博客/themes/next/source/images 文件夾下，然後更改主題（我們用的是next）下的配置文件如下：

favicon:
  small: /images/flower-16x16.png
  medium: /images/flower.ico # 建議使用ico圖標而不是png圖片，以防兼容性問題
  apple_touch_icon: /images/flower.png # apple-touch-icon-next.png
  #safari_pinned_tab: /images/flower.svg #logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

接入評論系統以及文章閱讀次數顯示

參考：
http://www.zhangblog.com/2019/06/16/hexo05/
http://www.zhangblog.com/2019/06/16/hexo06/
使用 LeanCloud，可以同時實現評論留言系統以及文章閱讀次數統計。

# Valine
# For more information: https://valine.js.org, https://github.com/xCss/Valine
valine:
  enable: true
  appid: hcHrBNtFBdqhBMIhjL67LT0t-gzGzoHsz # Your leancloud application appid
  appkey: Pe1HEgFp3AUcNCQ7dpQ3HRE4 # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: 歡迎討論留言！ # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: true # Article reading statistic # 這裏控制顯示文章閱讀次數

設置完成後文章的開頭就會顯示如下：

增加了 Views 和 Valine，而博客文章下面就有了留言板。