Front-matter Front-matter 是 markdown 文件最上方以 ---
分隔的區域,用於指定個別檔案的變數。
Page Front-matter 用於 頁面
配置 Post Front-matter 用於 文章頁
配置 如果標注可選
的參數,可根據自己需要添加,不用全部都寫在 markdown 裏
Page Front-matter 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 --- title: date: updated: type: comments: description: keywords: top_img: mathjax: katex: aside: aplayer: highlight_ shrink:random: ---
參數 解釋 title 【必需】頁面標題 date 【必需】頁面創建日期 type 【必需】標籤、分類和友情鏈接三個頁面需要配置 updated 【可選】頁面更新日期 description 【可選】頁面描述 keywords 【可選】頁面關鍵字 comments 【可選】顯示頁面評論模塊 (默認 true) top_img 【可選】頁面頂部圖片 mathjax 【可選】顯示 mathjax (當設置 mathjax 的 per_page: false 時,才需要配置,默認 false) katex 【可選】顯示 katex (當設置 katex 的 per_page: false 時,才需要配置,默認 false) aside 【可選】顯示側邊欄 (默認 true) aplayer 【可選】在需要的頁面加載 aplayer 的 js 和 css,請參考文章下面的音樂
配置 highlight_shrink 【可選】配置代碼框是否展開 (true/false) (默認為設置中 highlight_shrink 的配置) random 【可選】配置友情鏈接是否隨機排序(默認為 false)
Post Front-matter 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 --- title: date: updated: tags: categories: keywords: description: top_img: comments: cover: toc: toc_ number:toc_style_ simple: copyright: copyright_author: copyright_ author_href: copyright_ url:copyright_info: mathjax: katex: aplayer: highlight_ shrink:aside: abcjs: ---
寫法 解釋 title 【必需】文章標題 date 【必需】文章創建日期 updated 【可選】文章更新日期 tags 【可選】文章標籤 categories 【可選】文章分類 keywords 【可選】文章關鍵字 description 【可選】文章描述 top_img 【可選】文章頂部圖片 cover 【可選】文章縮略圖(如果沒有設置 top_img,文章頁頂部將顯示縮略圖,可設為 false/圖片地址/留空) comments 【可選】顯示文章評論模塊(默認 true) toc 【可選】顯示文章 TOC(默認為設置中 toc 的 enable 配置) toc_number 【可選】顯示 toc_number(默認為設置中 toc 的 number 配置) toc_style_simple 【可選】顯示 toc 簡潔模式 copyright 【可選】顯示文章版權模塊(默認為設置中 post_copyright 的 enable 配置) copyright_author 【可選】文章版權模塊的文章作者
copyright_author_href 【可選】文章版權模塊的文章作者
鏈接 copyright_url 【可選】文章版權模塊的文章連結
鏈接 copyright_info 【可選】文章版權模塊的版權聲明
文字 mathjax 【可選】顯示 mathjax(當設置 mathjax 的 per_page: false 時,才需要配置,默認 false ) katex 【可選】顯示 katex (當設置 katex 的 per_page: false 時,才需要配置,默認 false ) aplayer 【可選】在需要的頁面加載 aplayer 的 js 和 css,請參考文章下面的音樂
配置 highlight_shrink 【可選】配置代碼框是否展開(true/false)(默認為設置中 highlight_shrink 的配置) aside 【可選】顯示側邊欄 (默認 true) abcjs 【可選】加載 abcjs (當設置 abcjs 的 per_page: false 時,才需要配置,默認 false )
標籤頁 標籤頁文件名不一定是 tags, 例子中的 tags 只是一個示例 記得添加 type: "tags"
前往你的 Hexo 的根目錄
輸入 hexo new page tags
你會找到 source/tags/index.md
這個文件
修改這個文件:
1 2 3 4 5 6 7 --- title: 標籤 date: 2018-01-05 00:00:00 type: 'tags' orderby: random order: 1 ---
參數 解釋 type 【必須】頁面類型,必須為 tags
orderby 【可選】排序方式 : random - 隨機排序 / name - 標簽名字排序 / length - 標簽數量排序 order 【可選】排序次序: 1(升序),-1(降序)
分類頁 分類頁文件名不一定是 categories, 例子中的 categories 只是一個示例 記得添加 type: "categories"
前往你的 Hexo 的根目錄
輸入 hexo new page categories
你會找到 source/categories/index.md
這個文件
修改這個文件:
1 2 3 4 5 --- title: 分類 date: 2018-01-05 00:00:00 type: 'categories' ---
友情鏈接 為你的博客創建一個友情鏈接!
創建友情鏈接頁面 友情鏈接頁文件名不一定是 link, 例子中的 link 只是一個示例 記得添加 type: "link"
前往你的 Hexo 的根目錄
輸入 hexo new page link
你會找到 source/link/index.md
這個文件
修改這個文件:
1 2 3 4 5 --- title: 友情鏈接 date: 2018-06-07 22:17:49 type: 'link' ---
數據來源 本地生成 遠程拉取
在 Hexo 根目錄中的 source/_data
(如果沒有 _data 文件夾,請自行創建),創建一個文件 link.yml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 - class_name: 友情鏈接 class_desc: 那些人,那些事 link_list: - name: Hexo link: https://hexo.io/zh-tw/ avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg descr: 快速、簡單且強大的網誌框架 - class_name: 網站 class_desc: 值得推薦的網站 link_list: - name: Youtube link: https://www.youtube.com/ avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png descr: 視頻網站 - name: Weibo link: https://www.weibo.com/ avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png descr: 中國最大社交分享平台 - name: Twitter link: https://twitter.com/ avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png descr: 社交分享平台
class_name
和 class_desc
支持 html 格式書寫,如不需要,也可以留空。
從 4.0.0
開始,支持從遠程加載友情鏈接,遠程拉取只支持 json
。
在 source/link/index.md
這個文件的 front-matter 添加遠程鏈接
Json 的格式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 [ { "class_name" : "友情鏈接" , "class_desc" : "那些人,那些事" , "link_list" : [ { "name" : "Hexo" , "link" : "https://hexo.io/zh-tw/" , "avatar" : "https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg" , "descr" : "快速、簡單且強大的網誌框架" } ] } , { "class_name" : "網站" , "class_desc" : "值得推薦的網站" , "link_list" : [ { "name" : "Youtube" , "link" : "https://www.youtube.com/" , "avatar" : "https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png" , "descr" : "視頻網站" } , { "name" : "Weibo" , "link" : "https://www.weibo.com/" , "avatar" : "https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png" , "descr" : "中國最大社交分享平台" } , { "name" : "Twitter" , "link" : "https://twitter.com/" , "avatar" : "https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png" , "descr" : "社交分享平台" } ] } ]
友情鏈接隨機排序 主題支持友情鏈接隨機排序,只需要在頂部 front-matter
添加 random: true
友情鏈接界面設置 由 2.2.0 起,友情鏈接界面可以由用户自己自定義,只需要在友情鏈接的 Markdown 檔設置就行,以普通的 Markdown 格式書寫。
圖庫 圖庫頁面只是普通的頁面,你只需要 hexo n page xxxxx
創建你的頁面就行
然後使用標簽外掛 galleryGroup ,具體用法請查看對應的內容。
1 2 3 4 5 <div class="gallery-group-main"> {% galleryGroup '壁紙' '收藏的一些壁紙' '/Gallery/wallpaper' https://i.loli.net/2019/11/10/T7Mu8Aod3egmC4Q.png % } {% galleryGroup '漫威' '關於漫威的圖片' '/Gallery/marvel' https://i.loli.net/2019/12/25/8t97aVlp4hgyBGu.jpg % } {% galleryGroup 'OH MY GIRL' '關於OH MY GIRL的圖片' '/Gallery/ohmygirl' https://i.loli.net/2019/12/25/hOqbQ3BIwa6KWpo.jpg % } </div>
壁紙
收藏的一些壁紙
漫威
關於漫威的圖片
OH MY GIRL
關於OH MY GIRL的圖片
子頁面 子頁面也是普通的頁面,你只需要 hexo n page xxxxx
創建你的頁面就行
然後使用標簽外掛 gallery ,具體用法請查看對應的內容。
1 2 3 4 5 6 7 8 9 10 {% gallery % } ![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg) ![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg) ![](https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg) ![](https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg) ![](https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg) ![](https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg) ![](https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg) ![](https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg) {% endgallery % }
[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]
如果你想要使用 /photo/ohmygirl
這樣的鏈接顯示你的圖片內容
你可以把創建好的 ohmygirl
整個文件夾移到 photo
文件夾裏去
404 頁面 主題內置了一個簡單的 404 頁面,可在設置中開啟
本地預覽時,訪問出錯的網站是不會跳到 404 頁面的。
如需本地預覽,請訪問 http://localhost:4000/404.html
1 2 3 4 5 error_404: enable: true subtitle: '頁面沒有找到' background:
説説頁面 請留意,説説界面只支持原生的 markdown 格式,不支持標簽外挂和數學公式
創建説説頁面 説説頁文件名不一定是 shuoshuo, 例子中的 shuoshuo 只是一個示例 記得添加 type: "shuoshuo"
前往你的 Hexo 的根目錄
輸入 hexo new page shuoshuo
你會找到 source/shuoshuo/index.md
這個文件
修改這個文件:
1 2 3 4 5 --- title: 説説 date: 2018-06-07 22:17:49 type: 'shuoshuo' ---
數據來源 本地生成 遠程拉取
在 Hexo 根目錄中的 source/_data
(如果沒有 _data 文件夾,請自行創建),創建一個文件 shuoshuo.yml
author
和 avatar
可省略,會自動去獲取配置文件中的 author
和 avatar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 - author: Butterfly avatar: https://butterfly.js.org/img/avatar.png date: 2024-06-21 23:33:26 content: | This is a sample content for **Author 1**. ![Sample Image](https://via.placeholder.com/150) tags: - tags1 - tags2 - author: Butterfly avatar: https://butterfly.js.org/img/avatar.png date: 2024-06-20 23:33:26 content: | This is a sample content for **Author 2**. ![Sample Image](https://via.placeholder.com/150) tags: - tag2 - tag3 - author: Butterfly avatar: https://butterfly.js.org/img/avatar.png date: 2024-06-19 23:33:26 content: | This is a sample content for **Author 3 **.
參數 解釋 author 【可選】作者名稱 avatar 【可選】作者頭像 date 【必需】日期 content 【必需】內容( Markdown 格式或者 Html 格式 tags 【可選】標籤
注意: 選擇遠程加載後,本地生成的方法會無效。 遠程拉取只支持 json
在説説頁面 Markdown 裏的 front-matter 添加遠程鏈接
Json 的格式:
author
和 avatar
可省略,會自動去獲取配置文件中的 author
和 avatar
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 [ { "author" : "Butterfly" , "avatar" : "https://butterfly.js.org/img/avatar.png" , "date" : "2024-06-21 23:33:26" , "content" : "This is a sample content for **Author 1**." , "tags" : [ "tags1" , "tags2" ] } , { "author" : "Butterfly" , "avatar" : "https://butterfly.js.org/img/avatar.png" , "date" : "2024-06-20 23:33:26" , "content" : "This is a sample content for **Author 2**." , "tags" : [ "tag2" , "tag3" ] } , { "author" : "Butterfly" , "avatar" : "https://butterfly.js.org/img/avatar.png" , "date" : "2024-06-19 23:33:26" , "content" : "This is a sample content for **Author 3**." } ]
參數 解釋 author 【可選】作者名稱 avatar 【可選】作者頭像 date 【必需】日期 content 【必需】內容( Markdown 格式或者 Html 格式 tags 【可選】標籤
📌 Butterfly 文檔(三) 主題配置