hexo fluid主題折騰

不愿透露姓名的小村村發表於2024-07-21
HexoUI

如何下載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
  • index.md的檔案例項格式如下，注意layout： about必須存在，且不能修改成其他值，否則不顯示頭像等樣式
---
title: 標題
layout: about
---

這裡寫關於頁的正文，支援 Markdown, HTML
  • about頁需要的圖片資源：官方手冊的建議如果是本地圖片，目錄資料夾可以自定義，但是必須在source目錄下，部落格與主題的source目錄最終會合並，因此優先選擇部落格的source，最好圖片1MB以內，不然嚴重拖慢頁面載入；指向外站的圖片直接放連結。
  • 存放圖片，在source：
  • 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的主題設定

  • navbar，新增部落格標題
# 導航欄的相關配置
# 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: 一位不願透露姓名的小村村同學的個人部落格
  • banner_img：新增背景圖片
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
  • slogan新增標語
  # 首頁副標題的獨立設定
  # 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 ”分類）。

相關文章