Hexo + Fluid 建站

本文最后更新于 2024年12月16日 凌晨

Hexo + Fluid 建站

1. 基本安装步骤

1.1 安装 Hexo

执行命令： npm install hexo-cli -g

1.2 新建空文件夹初始化

以管理员命令进入cmd到该文件夹目录执行：hexo init

1.3 本地测试

输入命令： hexo s

启动成功后去：http://localhost:4000 查看生成的博客

1.4 修改安装目录下的 _config.yml 文件部分配置

1
2
3
4
deploy:
  type: git
  repo: https://gitee.com/Wzzz0/my-blog.git   #将地址换成自己的地址
  branch: master

1.5 清理缓存

cmd中输入： hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

1.6 生成静态文件

cmd中输入： hexo g

1.7 添加主题模板Fluid

使用手册地址：https://hexo.fluid-dev.com/docs/guide/

  • 在 Blog 的 themes 目录下进入 cmd

  • 使用 git 克隆主题文件： git clone https://gitee.com/mirrors/hexo-theme-fluid.git

  • 修改 _config.yml 主题为: theme: hexo-theme-fluid

  • 修改 _config.yml 语言为中文： language: zh-CN

  • 博客功能常用的修改和添加 themes\hexo-theme-fluid 中的 _config.yml:

    • 暗色模式：开启后菜单会出现切换的按钮

      1
      2
      3
      dark_mode:
        enable: true
        default: auto

      default 是暗色默认的模式，可选参数：auto / light / dark

      选择 auto 时优先遵循 prefers-color-scheme (opens new window)，如果不支持则按用户本地时间 18 点到次日 6 点之间进入暗色模式。

    • 首页的 Slogan(打字机)

      首页大图中的标题文字，可在**主题配置(themes\hexo-theme-fluid 中的 _config.yml)**中设定是否开启：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      index:
        slogan:
          enable: true
          text: 欢迎来到 CloudyW 的个人博客*^_^*/
          api:
            enable: false
            url: "https://v1.hitokoto.cn/"
            method: "GET"
            headers: {}
            keys: ["hitokoto"]

      标题文字默认开启了打字机动效，相关配置如下：

      1
      2
      3
      4
      5
      6
      fun_features:
        typing: # 为 subtitle 添加打字机效果
          enable: true
          typeSpeed: 70 # 打印速度
          cursorChar: "_" # 游标字符
          loop: false # 是否循环播放效果

      还可以使用 api 获取：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      api:
        enable: false
          
        # 请求地址
        # Request url
        url: ""
          
        # 请求方法
        # Request method
        # Available: GET | POST | PUT
        method: "GET"
          
        # 请求头
        # Request headers
        headers: {}
          
        # 从请求结果获取字符串的取值字段，最终必须是一个字符串，例如返回结果为 {"data": {"author": "fluid", "content": "An elegant theme"}}, 则取值字段为 ['data', 'content']；如果返回是列表则自动选择第一项
        keys: []

    • 修改浏览器标签：

      1
      2
      3
      4
      # 用于浏览器标签的图标
      favicon: /img/icon.png
      # 用于苹果设备的图标
      apple_touch_icon: /img/icon.png

    • 导航栏的相关配置：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      navbar:
        # 导航栏左侧的标题，为空则按 hexo config 中 `title` 显示
        blog_title: "CloudyW"

        # 导航栏毛玻璃特效，实验性功能，可能会造成页面滚动掉帧和抖动，部分浏览器不支持会自动不生效
        ground_glass:
          enable: false

        # 模糊像素，只能为数字，数字越大模糊度越高
        px: 3

        # 不透明度，数字越大透明度越低，注意透明过度可能看不清菜单字体
        alpha: 0.7

        # 导航栏菜单，可自行增减，key 用来关联 languages/*.yml，如不存在关联则显示 key 本身的值；icon 是 css class，可以省略；增加 name 可以强制显示指定名称
        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" }
          #- { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }

      # 搜索功能，基于 hexo-generator-search 插件，若已安装其他搜索插件请关闭此功能，以避免生成多余的索引文件
      # Search feature, based on hexo-generator-search. If you have installed other search plugins, please disable this feature to avoid generating redundant index files
      search:
        enable: true

    • 首页图片的相关配置：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      banner:
        # 视差滚动，图片与板块会随着屏幕滚动产生视差效果
        # Scrolling parallax
        parallax: true
        # 图片最小的宽高比，以免图片两边被过度裁剪，适用于移动端竖屏时，如需关闭设为 0
        width_height_ratio: 1.0

      # 向下滚动的箭头
      scroll_down_arrow:
        enable: true

        # 头图高度不小于指定比例，才显示箭头
        banner_height_limit: 80

        # 翻页后自动滚动
        scroll_after_turning_page: true

      # 向顶部滚动的箭头
      scroll_top_arrow:
        enable: true

    • 修改首页头图及其属性：

      1
      2
      3
      4
      5
      6
      7
      index:
        # 首页 Banner 头图，可以是相对路径或绝对路径
        banner_img: /img/default.jpg
        # 头图高度，屏幕百分比
        banner_img_height: 100
        # 头图黑色蒙版的不透明度，available: 0 - 1.0， 1 是完全不透明
        banner_mask_alpha: 0.3

    • 页脚内容：

      1
      2
      3
      4
      5
      6
      7
      footer:
        # 页脚第一行文字的 HTML，建议保留 Fluid 的链接，用于向更多人推广本主题
        content: '
          <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
          <i class="iconfont icon-love"></i>
          <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
        '

1.8 生成 about 页面

  • cmd 输入： hexo new page about
  • 进入 Blog\source\about\index.md
  • 增加 layout: about 属性

1.9 生成 categories 页面

  • cmd 输入： hexo new page categories
  • 进入 Blog\source\categories\index.md
  • 增加 layout: categories 属性

1.10 添加友链导航

友情链接页用于展示好友的博客入口，默认关闭，开启需要先在 navbar 项中将 links 的注释(#号)删掉：

1
2
3
navbar:
  menu:
    - { key: 'links', link: '/links/', icon: 'iconfont icon-link-fill' }

然后找到 links 的配置项，对页面内容进行配置：

1
2
3
4
5
6
7
8
9
links:
  items:
    - {
      title: 'Fluid Docs',
      intro: '主题使用指南',
      link: 'https://hexo.fluid-dev.com/docs/',
      avatar: '/img/favicon.png'
    }
  default_avatar: /img/avatar.png
  • title: 友链站的标题
  • intro: 站点或博主的简介，可省略
  • link: 跳转链接
  • avatar: 头像图片，可省略
  • default_avatar: 成员的默认头像（仅在指定了头像并且加载失败时生效）

1.11 修改页面标题以及页面 icon

位于 Blog 目录下的 _config.yml 中修改 title属性

1.12 博客上传 .md 文件

  • 用指令生成 .md 文件： 直接执行 hexo new "博客名" 就可生成 .md 文件在Blog\source_posts目录下了

  • 已经写好了 .md 文件：直接移动到这里，然后再重新启动 hexo 三件套( hexo clean 、hexo g 、hexo s)

    注意：需要在页面顶部将 title、date、tags 等属性在顶部用 YAML Front Matter 包裹，才会显示标题、时间和标签属性。标签可以用 [tag1, tag2] 显示多个标签

1.13 添加网站运行时间

  • 页脚配置网站运行时间，只需要在主题配置中的 footer: content 中添加：

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

  • 然后在 Blog\themes\hexo-theme-fluid\source\js 目录下新建 duration.js，将下面这段代码写入：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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);

1.14 在自己服务器上部署博客

使用 Hexo 搭建个人博客并部署到云服务器 - Cheyaoyao - 博客园 (cnblogs.com)

2. 美化样式

2.1 看板娘插件

  • 安装插件：

    • hexo博客根目录使用git bash 输入以下代码，安装插件：

      1
      npm install --save hexo-helper-live2d

  • 下载模型：

    • 作者提供了很多模型(github传送门)：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      live2d-widget-model-chitose
      live2d-widget-model-epsilon2_1
      live2d-widget-model-gf
      live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
      live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
      live2d-widget-model-haruto
      live2d-widget-model-hibiki
      live2d-widget-model-hijiki
      live2d-widget-model-izumi
      live2d-widget-model-koharu
      live2d-widget-model-miku
      live2d-widget-model-ni-j
      live2d-widget-model-nico
      live2d-widget-model-nietzsche
      live2d-widget-model-nipsilon
      live2d-widget-model-nito
      live2d-widget-model-shizuku
      live2d-widget-model-tororo
      live2d-widget-model-tsumiki
      live2d-widget-model-unitychan
      live2d-widget-model-wanko
      live2d-widget-model-z16

    • npm install model 下载即可

  • 基础使用：

    • 在最后一行加上如下代码：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      live2d:
        enable: true
        scriptFrom: local
        pluginRootPath: live2dw/
        pluginJsPath: lib/
        pluginModelPath: assets/
        tagMode: false
        debug: false
        model:
          use: live2d-widget-model-shizuku # 你的看板娘model
        display:
          position: left
          width: 150
          height: 300
        mobile:
          show: true

      最后重启hexo就可以看到可爱的看板娘啦！

2.2 鼠标点击爱心特效

  • 首先在 Blog\themes\hexo-theme-fluid\source\js 下新建一个 love.js 文件

  • 然后把如下这段代码复制进去：

    1
    !function(e,t,a){var r,o=[];function n(){for(var e=0;e<o.length;e++)o[e].alpha<=0?(t.body.removeChild(o[e].el),o.splice(e,1)):(o[e].y--,o[e].scale+=.004,o[e].alpha-=.013,o[e].el.style.cssText="left:"+o[e].x+"px;top:"+o[e].y+"px;opacity:"+o[e].alpha+";transform:scale("+o[e].scale+","+o[e].scale+") rotate(45deg);background:"+o[e].color);requestAnimationFrame(n)}function i(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},function(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),r="function"==typeof e.onclick&&e.onclick,e.onclick=function(e){r&&r(),function(e){var a=t.createElement("div");a.className="heart",o.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:i()}),t.body.appendChild(a)}(e)},n()}(window,document);

  • 最后在 Blog\themes\hexo-theme-fluid\_config.yml 中的 custom_js 添加如下这段代码：

    1
    /js/love.js

2.3 打字机渐变样式

  • 在 Blog\themes\hexo-theme-fluid\source\css 下新建一个 gradient.css 的 css 文件,然后将下面这段代码粘入：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    /* 打字机效果渐变 -bynote.cn*/

    #subtitle {
        background: linear-gradient(-45deg, #e75022, #ce3e75, #23a6d5, #73fede);
        background-size: 400% 400%;
        -webkit-animation: Gradient 10s ease infinite;
        -moz-animation: Gradient 10s ease infinite;
        animation: Gradient 10s ease infinite;
        -o-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    #subtitle:before {
        background-color: rgba(0, 0, 0, 0);
    }

2.4 添加waline评论功能

参考文章：Fluid -6- 使用 Waline 评论系统-腾讯云开发者社区-腾讯云 (tencent.com)

注意：按照以上流程走完后，发现在博客评论时请求出现 401 Unauthorized ; 其实这是 vercel 创建项目时对于访问权限的限制，在 project settings 里的 Deployment Protection 中可以找到 Vercel Authentication，将这个改为 Disabled 即可。

另外，在 waline 升级到 v2 之后原有的 yml 文件里的 placeholder 属性会失效，查询 waline 的手册

可以发现 V1 的 placeholder 在 V2 已经变为 local.placeholder (要问为什么跟手册里写的 locales.placeholder 不一样，问就是我实际用的时候发现不管用🙄)，就像这样：

修改后的示例

参考

Hexo + Fluid 美化

Fluid -33- 添加书信人偶动画效果

教程
#教程 #Hexo #Hexo + Fluid 建站
Hexo + Fluid 建站
http://cloudyw.cn/2024/04/24/Hexo + Fluid 建站笔记/
作者
cloudyW
发布于
2024年4月24日
许可协议