hexo設置文件

這篇文章是我hexo網站的設置文件概要，主要是給自己一個紀錄加上有一個可以記錄心情以及學習紀錄的地方，最後本文章感謝Z.QIANG大大的大力贊助？？哈哈

根目錄config設置

主題設置

使用最多人使用的NEXT沒有別的原因，就是懶…

1 2	cd filename git clone https://github.com/theme-next/hexo-theme-next themes/next

在根目錄中更換主題（默認的話是landscape）

URL欄設置

這個地方放在github上面好像暫時什麼都不用設置，美化網站語尾檔案功能是自動開啟的。

#URL
#If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://yourname.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

圖片插入功能

使用這項功能之後，在新建文檔的時候會新增出一個資料夾，可以把圖片或是要插入的內容放入。

1 2	post_asset_folder: true future: true

Blog單頁文章數

1	per_page: 5

數學公式

看大家都換js我也來試試

install

1 2	npm un hexo-renderer-marked --save npm i hexo-renderer-markdown-it-plus --save

修改themes的_config.yml的katex enable:true

#hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
katex:
  enable: true
  #See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
  copy_tex: false

在根目錄中_config.yml添加render-markdown設置

#hexo-renderer-markdown-it-plus
markdown_it_plus:
  highlight: true
  html: true
  xhtmlOut: true
  breaks: true
  langPrefix:
  linkify: true
  typographer:
  quotes: “”‘’

主題文件中的_config.yml設置

可以在根目錄中設置菜單顯示（可能可以設計自己的菜單？menu）
、社交網站的連結(social)、文章顯示目錄(toc)、閱讀全文(excerpt_description)(似乎只要使用hexo tag就會可以使用了而不用添加，不過我還是加了啦)、返回頂部按鈕(back2top)、程式碼區塊設置(codeblock)、頁面搜尋(local_search)、流程圖(mermaid)

mermaid流程圖

參考文件Yu’s Notes

安裝npm

1	npm install hexo-filter-mermaid-diagrams

修改設置文件

於根目錄中的_config.yml添加內容

#Mermaid tag
mermaid:
  enable: true
  #Available themes: default | dark | forest | neutral
  theme: forest

修改themes的_config,yml

#Mermaid tag
mermaid:
  enable: true
  #Available themes: default | dark | forest | neutral
  theme: forest

修改mermaid檔案顏色

在themes主題_config.yml文件中新增style路徑

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

先修改並自己新創一個source/_data/styles.styl的檔案，添加顏色設置

// mermaid流程圖背景色透明設置
.mermaid {
 background: transparent;
}

就可以使用囉～只是mermaid語法要注意，我使用了下面這個方法才成功的

{% mermaid graph LR %}
  A-->B
  A-->C
  B-->D
  C-->D
{% endmermaid %}

            graph LR
            A-->B
A-->C
B-->D
C-->D

參考文獻

Z.QIANG大大的部落格
 EDEN大大的部落格