如何下載fluid主題
- hexo 5.0以上的版本,直接npm安裝:
npm install --save hexo-theme-fluid
- 安裝好之後,在部落格目錄下建立
_config.fluid.yml
,將主題_config.yml
的內容複製進去。以後如果修改任何主題配置,都直接修改_config.fluid.yml
就好,因為它的配置優先順序是高於原_config.yml
的。
- 透過
hexo g --debug
命令列輸出檢視覆蓋的配置有沒有生效
- 全部的fluid主題設定在
node_modules/hexo_theme_fluid/_config.yml
裡,把自己想要的修改引數複製到_config.fluid.yml
中。
- 如果主題有更新,使用
npm update --save hexo-theme-fluid
執行
- fluid官方參考使用者手冊
建立about page頁
- 使用
hexo new page about
新增about頁。會生成一個預設的index.md
![](https://img2024.cnblogs.com/blog/3427087/202407/3427087-20240721115553744-1934917841.png)
- index.md的檔案例項格式如下,注意
layout: about
必須存在,且不能修改成其他值,否則不顯示頭像等樣式
---
title: 標題
layout: about
---
這裡寫關於頁的正文,支援 Markdown, HTML
- about頁需要的圖片資源:官方手冊的建議如果是本地圖片,目錄資料夾可以自定義,但是必須在source目錄下,部落格與主題的source目錄最終會合並,因此優先選擇部落格的source,最好圖片1MB以內,不然嚴重拖慢頁面載入;指向外站的圖片直接放連結。
- 存放圖片,在source:
![](https://img2024.cnblogs.com/blog/3427087/202407/3427087-20240721122720634-2046747144.png)
- about頁裡面關於介紹自己的基礎資訊,需要在
主題配置
設定
#---------------------------
# 關於頁
# About Page
#---------------------------
about:
enable: true
banner_img: /img/about_page_pic2.jpg
banner_img_height: 60
banner_mask_alpha: 0.3
avatar: /img/avatar.png
name: "一位不願透露姓名的小村村同學"
intro: "生活因你而火熱"
# 更多圖示可從 https://hexo.fluid-dev.com/docs/icon/ 查詢,`class` 代表圖示的 css class,新增 `qrcode` 後,圖示不再是連結而是懸浮二維碼
# More icons can be found from https://hexo.fluid-dev.com/docs/en/icon/ `class` is the css class of the icon. If adding `qrcode`, The icon is no longer a link, but a hovering QR code
icons:
- { class: "iconfont icon-github-fill", link: "https://github.com", tip: "GitHub" }
- { class: "iconfont icon-douban-fill", link: "https://douban.com", tip: "豆瓣" }
- { class: "iconfont icon-wechat-fill", qrcode: "/img/favicon.png" }
如何找到fluid的主題設定
# 導航欄的相關配置
# Navigation bar
navbar:
# 導航欄左側的標題,為空則按 hexo config 中 `title` 顯示
# The title on the left side of the navigation bar. If empty, it is based on `title` in hexo config
blog_title: 一位不願透露姓名的小村村同學的個人部落格
index:
# 首頁 Banner 頭圖,可以是相對路徑或絕對路徑,以下相同
# Path of Banner image, can be a relative path or an absolute path, the same on other pages
banner_img: /img/first_page_bg1.png
# 首頁副標題的獨立設定
# Independent config of home page subtitle
slogan:
enable: true
# 為空則按 hexo config.subtitle 顯示
# If empty, text based on `subtitle` in hexo config
text: "一代人終將老去,但總有人正年輕"
# 一些好玩的功能
# Some fun features
fun_features:
# 為 subtitle 新增打字機效果
# Typing animation for subtitle
typing:
enable: true
# 列印速度,數字越大越慢
# Typing speed, the larger the number, the slower
typeSpeed: 70
# 遊標字元
# Cursor character
cursorChar: "_"
# 是否迴圈播放效果
# If true, loop animation
loop: false
# 在指定頁面開啟,不填則在所有頁面開啟
# Enable in specified page, all pages by default
# Options: home | post | tag | category | about | links | page | 404
scope: []
- 用不蒜子展示網站的PV,UV數,因為不蒜子不用註冊直接使用;把enable使能為true
# 展示網站的 PV、UV 統計數
# Display website PV and UV statistics
statistics:
enable: true
# 統計資料來源,使用 leancloud 需要設定 `web_analytics: leancloud` 中的引數;使用 busuanzi 不需要額外設定,但是有時不穩定,另外本地執行時 busuanzi 顯示統計資料很大屬於正常現象,部署後會正常
# Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
# Options: busuanzi | leancloud
source: "busuanzi"
pv_format: "總訪問量 {} 次"
uv_format: "總訪客數 {} 人"
文章頁操作
---
title: 文章標題
index_img: /img/example.jpg
date: 2019-10-10 10:00:00
sticky: 100
---
以下是文章內容
---
title: 文章標題
tags: [Hexo, Fluid]
index_img: /img/example.jpg
date: 2019-10-10 10:00:00
---
以下是文章內容
post:
default_index_img: /img/example.jpg
post:
meta:
author: # 作者,優先根據 front-matter 裡 author 欄位,其次是 hexo 配置中 author 值
enable: false
date: # 文章日期,優先根據 front-matter 裡 date 欄位,其次是 md 檔案日期
enable: true
format: "dddd, MMMM Do YYYY, h:mm a" # 格式參照 ISO-8601 日期格式化
wordcount: # 字數統計
enable: true
format: "{} 字" # 顯示的文字,{}是數字的佔位符(必須包含),下同
min2read: # 閱讀時間
enable: true
format: "{} 分鐘"
views: # 閱讀次數
enable: false
source: "leancloud" # 統計資料來源,可選:leancloud | busuanzi 注意不蒜子會間歇抽風
format: "{} 次"
- 評論功能推薦Valin,現在
主題配置
中把使能開啟,再在front-matter
中設定。
#---------------------------
# 文章頁
# Post Page
#---------------------------
post:
banner_img: /img/default.png
banner_img_height: 70
banner_mask_alpha: 0.3
# 評論外掛
# Comment plugin
comments:
enable: true
# 指定的外掛,需要同時設定對應外掛的必要引數
# The specified plugin needs to set the necessary parameters at the same time
# Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus | discuss
type: valine
# Valine
# 基於 LeanCloud
# Based on LeanCloud
# See: https://valine.js.org/
valine:
appId:
appKey:
path: window.location.pathname
placeholder:
avatar: 'retro'
meta: ['nick', 'mail', 'link']
requiredFields: []
pageSize: 10
lang: 'zh-CN'
highlight: false
recordIP: false
serverURLs: ''
emojiCDN:
emojiMaps:
enableQQ: false
---
title: 標題
layout: about
comment: 'valine'
---
文章分類和標籤
- 分類和標籤最終都需要在front-master中實現,參考文件,不過再次之前還是先新建一個分類頁和一個標籤頁,以免點不進去。
- 新建分類頁
hexo new page categories
,標籤頁hexo new page tags
,成功後會生成對應的index.md
- 分別在對應的在index.md中新增分類/標籤以下內容
---
title: 文章分類
date: 2024-07-21 14:09:44
type: "categories"
---
---
title: 文章標籤
date: 2024-07-21 14:09:54
type: "tags"
---
- 在部落格文章的front-master中,新增相應的內容;
---
title: 西門子PLC的大端模式
categories:
- PLC
- 1500PLC
tags:
- PLC part
- industrial control
---
- 上面會生成PLC分類下的子分類1500PLC,以及兩個標籤。注意:hexo一篇文章只能屬於一個分類,也就是說如果在“- web前端”下方新增“-xxx”,hexo不會產生兩個分類,而是把分類巢狀(即該文章屬於 “- web前端”下的 “-xxx ”分類)。