• 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 ”分类)。
  •