Fluid主题安装及配置

Fluid主题安装及配置全攻略

Fluid是一个优雅、现代的Hexo主题,以其简洁的设计和丰富的功能而受到广大博客爱好者的喜爱。本文记录本人的Fluid主题的安装过程、基础配置以及一些主题美化过程。

1. Fluid主题的安装

1.1 前置条件

  • Hexo 7.3.0
  • Node.js v20.18.0
  • npm v10.9.0

可以通过以下命令检查Node.js和npm的版本:

1
2
3
hexo -v
node -v
npm -v

1.2 安装步骤

  1. 进入Hexo博客根目录
    打开终端或命令提示符,切换到Hexo博客根目录:

    1
    cd path/to/your/hexo/blog

  2. 使用npm安装Fluid主题(!Hexo 5.0.0 版本以上)
    执行以下命令安装最新版本的Fluid主题:

    1
    npm install --save hexo-theme-fluid

  3. 然后在博客目录下创建 _config.fluid.yml，将主题的 config.yml 内容复制进去。

  4. 修改Hexo配置文件
    打开Hexo根目录下的_config.yml文件,将主题设置改为Fluid:

    1
    2
    theme: fluid  # 指定主题
    language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

1.3 验证安装

完成上述步骤后,让我们验证一下Fluid主题是否安装成功:

  1. 清理并重新生成静态文件:

    1
    hexo clean && hexo g

  2. 启动本地服务器:

    1
    hexo s

  3. 在浏览器中打开 http://localhost:4000 查看效果。如果看到Fluid主题的界面,那就说明安装成功了!

2. 基础配置

2.1 站点信息设置

打开Hexo根目录下的_config.yml文件,修改以下内容:

1
2
3
4
5
6
7
# Site
title: 博客标题
subtitle: '副标题'
description: '网站描述'
keywords:
author: 名字
timezone: 'Asia/Shanghai'

2.2 导航菜单配置

在Fluid主题的配置文件_config.fluid.yml中,找到navbar部分,根据需要添加或修改导航菜单:

1
2
3
4
5
6
7
navbar:
  menu:
    - { key: 'home', link: '/', icon: 'iconfont icon-home-fill' }
    - { key: 'archive', link: '/archives/', icon: 'iconfont icon-archive-fill' }
    - { key: 'category', link: '/categories/', icon: 'iconfont icon-category-fill' }
    - { key: 'tag', link: '/tags/', icon: 'iconfont icon-tags-fill' }
    - { key: 'about', link: '/about/', icon: 'iconfont icon-user-fill' }

2.3 首页设置

在_config.fluid.yml中,设置首页的显示效果:

1
2
3
4
5
6
7
8
9
10
11
12
index:
  slogan:
    enable: true
    text: '一个安静的个人博客'
  post_meta:
    date: true
    category: true
    tag: true
  post_url_target: _self
  post_excerpt:
    enable: true
    length: 120

2.4 文章页面配置

配置文章页面的显示效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
post:
  meta:
    author:
      enable: true
    date:
      enable: true
      format: "LL a"
    wordcount:
      enable: true
    min2read:
      enable: true
      awl: 2
      wpm: 60
  copyright:
    enable: true
    content: '本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！'

2.5 评论系统集成

Fluid支持多种评论系统,这里以Valine为例:

1
2
3
4
5
6
7
8
9
comments:
  enable: true
  type: valine
valine:
  appid: AppID
  appkey: AppKey
  placeholder: 说点什么
  path: window.location.pathname
  avatar: retro

请确保在使用前已经在Valine官网注册并获取了AppID和AppKey。

3. 主题美化

3.1 自定义字体：霞鹜文楷

  1. 编辑Fluid配置文件 _config.fluid.yml
    找到custom_css部分,添加以下内容:

    1
    2
    custom_css:
      - https://cdn.bootcdn.net/ajax/libs/lxgw-wenkai-screen-webfont/1.7.0/style.min.css

  2. 在同一配置文件中,搜索font_family,设置为:

    1
    font_family: "LXGW WenKai Screen"

3.2 背景固定和毛玻璃效果

  1. 创建背景脚本
    在博客根目录下新建scripts文件夹,创建bg.js文件,内容如下:

    1
    2
    3
    const { root: siteRoot = "/" } = hexo.config;
    hexo.extend.injector.register("body_begin", `<div id="web_bg"></div>`);
    hexo.extend.injector.register("body_end",`<script src="${siteRoot}js/backgroundize.js"></script>`);

  2. 创建背景设置脚本
    在source/js目录下新建backgroundize.js文件,内容如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 在手机端显示的背景图片链接
    const mobileBgImageUrl = "url('您的移动端背景图片URL')";
    // 在电脑端显示的背景图片链接
    const desktopBgImageUrl = "url('您的桌面端背景图片URL')";

    // 根据设备设置背景图片
    if (window.innerWidth < 768) {
      document.querySelector('#web_bg').setAttribute('style', `background-image: ${mobileBgImageUrl};position: fixed;width: 100%;height: 100%;z-index: -1;background-size: cover;`);
    } else {
      document.querySelector('#web_bg').setAttribute('style', `background-image: ${desktopBgImageUrl};position: fixed;width: 100%;height: 100%;z-index: -1;background-size: cover;`);
    }

    // 设置banner背景
    document.querySelector("#banner").setAttribute('style', 'background-image: none');
    document.querySelector("#banner .mask").setAttribute('style', 'background-color: rgba(0,0,0,0)');

  3. 修改Fluid配置文件
    在_config.fluid.yml中设置背景色为透明:

    1
    2
    3
    # 主面板背景色
    board_color: "#ffffff80"
    board_color_dark: "#00000080"

  4. 创建毛玻璃效果CSS
    在source/css目录下新建glassbg.css文件,内容如下:

    1
    2
    3
    4
    #board {
      -webkit-backdrop-filter: blur(5px);
      backdrop-filter: blur(5px);
    }

  5. 引用自定义CSS
    在_config.fluid.yml中添加:

    1
    2
    custom_css:
      - /css/glassbg.css

3.3 页面效果

在主题配置_config.yml中找到custom_js或者custom_css，修改如下
（效果添加或去除注释 # 即可使用）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
custom_js:
  - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicRibbon.min.js # 动态彩带
  - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/runtime.min.js # 运行时间
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Ribbon.min.js # 静态彩带
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/DynamicLine.min.js # 动态黑色线条
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/snowflake.min.js # 小雪花飘落
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/Cherry.min.js #樱花飘落
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/star.min.js # 鼠标跟随小星星
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/containsWord.min.js # 鼠标点击出字
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/love.min.js #鼠标点击出爱心

custom_css:
  - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/shubiao.css #鼠标指针
  - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/scroll.css # 滚动条颜色
  # - //cdn.jsdelivr.net/gh/EmoryHuang/BlogBeautify@1.1/gradient.css # 头部打字机颜色效果渐变

3.4 添加网站运行时间

  1. 修改页脚配置
    在_config.fluid.yml中找到 footer: content 部分,添加以下内容:

    1
    2
    3
    4
    5
    6
    footer:
      content: '
        <span id="timeDate">载入天数...</span>
        <span id="times">载入时分秒...</span>
        <script src="/js/duration.js"></script>
      '

  2. 创建运行时间脚本
    在source/js目录下创建duration.js文件,内容如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var now = new Date();
    function createtime() {
        var grt= new Date("03/03/2021 12:00:00");//在此处修改你的建站时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
        hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;}
        minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes);
        if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds);
        if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
    setInterval("createtime()",250);

    将脚本中的建站时间修改为实际建站时间。

安装记录
#Hexo
Fluid主题安装及配置
http://endless-path.github.io/2024/10/12/Fluid主题安装及配置/
作者
Endless-Path
发布于
2024年10月12日
许可协议