hexo fluid主题折腾

如何下载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 ”分类）。