个人博客搭建(二) - Fluid 主题安装

一.前言

可以使用任何自己喜欢的主题，一部分主题会带有统计，评论，友情链接，pv、uv统计等功能。我自己使用的是Fluid。建议找一个文档齐全的主题使用。

可以在 官方主题库 挑选自己的喜欢的主题。

二.安装

主题的安装需要在博客根目录执行
安装主题命令

1
$ npm install --save hexo-theme-fluid

修改 _config.yml 中主题配置

1
2
3
4
# 指定主题
theme: fluid  
# 指定语言
language: zh-CN

主题安装后生成主题自己的配置，譬如 fluid 主题的配置文件就是 _config.fluid.yml 如果没有生成可以手动创建 。

只要存在于 _config.fluid.yml 的配置都是高优先级，修改原 _config.yml 是无效的，文章中所有的配置修改都是 _config.fluid.yml。

参考配置，可以全部复制过去，也可以复制部分，建议全部复制过去。

三.自定义页面

使用命令创建：

1
$ hexo new page example

创建成功后编辑博客目录下 /source/example/index.md：

1
2
3
4
5
6
7
---
title: example
subtitle: 若不填默认是 title
---

这里写正文，支持 Markdown, HTML

四.导航菜单

导航菜单可以添加链接或者自己定义页面。

1
2
3
4
5
6
7
8
9
10
navbar:
  menu:
    - { key: '首页', link: '/', icon: 'iconfont icon-home-fill' }
    - { key: '归档', link: '/archives/', icon: 'iconfont icon-archive-fill' }
    - { key: '分类', link: '/categories/', icon: 'iconfont icon-category-fill' }
    - { key: '标签', link: '/tags/', icon: 'iconfont icon-tags-fill' }
    - { key: "留言板", link: "/remark/", icon: 'iconfont icon-cliplist' }
    - { key: "友情链接", link: "/links/", icon: "iconfont icon-link-fill" }
    - { key: "博客园", link: "https://www.cnblogs.com/linhuiy/", icon: "iconfont icon-link-fill" }
    - { key: '关于', link: '/about/', icon: 'iconfont icon-user-fill' }
  • key: 用于关联有语言配置，如不存在关联则显示 key 本身的值
  • link: 跳转链接
  • icon: 图标的 css class，可以省略（即没有图标），主题内置图标详见这里
  • name: 强制使用此名称显示（不再按语言配置显示），可省略

五.创建关于页

命令创建：

1
$ hexo new page about

创建成功后修改 /source/about/index.md，添加 layout 属性。

1
2
3
4
5
6
---
title: 标题
layout: about
---

这里可以写正文，支持 Markdown, HTML

在关于页介绍自己的基础信息，可以在主题配置中设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
about:
  banner_img: /img/bg/nKO_1QyFh9o.jpg
  banner_img_height: 60
  banner_mask_alpha: 0.3
  avatar: https://file.coreapi.ltd/WechatIMG124.jpeg
  name: "她微笑的脸y"
  intro: "一枚程序员"
# 社交图片
  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" }

六.评论插件

评论插件推荐使用用 Valine、Waline 或者 twikoo。我自己使用的 twikoo，配置集成相对于简单。

twikoo 支持自动拉取QQ头像、图文评论、点赞回复、ip归属地、关键字过滤、 提供API获取最近评论信息等。

twikoo 安装教程 推荐使用手动部署，购买每月6.9元的特惠基础版。

图片名称

安装结束配置twikoo参数：

1
2
3
4
5
6
twikoo:
  enable: true
  visitor: true
  envId: <环境id> 
  region: ap-shanghai
  # region: ap-guangzhou # 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填

评论需要每个页面单独开启：

1
2
3
4
5
6
7
8
9
10
11
# 博客开启评论
post:
  comments:
    enable: true
    type: twikoo
# 友链开启评论
links:
  comments:
    enable: true
    type: twikoo

七.常用配置

顶部大图：

1
banner_img: /img/bg/nKO_1QyFh9o.jpg

页面顶部大图都是独立的，如果需要统一可以搜索 banner_img 配置然后统一替换，如果是本地图片，目录文件夹可自定义，但必须在 source 目录下。图片大小建议在 1mb 以下，过大的图片会拖慢页面加载。

浏览器标签的图标：

1
favicon: https://file.coreapi.ltd/WechatIMG124.jpeg

博客标题：

1
2
navbar:
  blog_title: 博客标题

打字机：

1
2
3
4
5
6
7
8
9
10
index:
  slogan:
    enable: true
    text: "往往并不是有兴趣才能做好，而是做好了才有兴趣。"
    # api:
    #   enable: false
    #   url: "https://v1.hitokoto.cn/"
    #   method: "GET"
    #   headers: {}
    #   keys: ["hitokoto"]

还可以通过 api 的方式，但是不推荐使用。

文章配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
# 文章标题
title: 个人博客搭建(二) - Fluid 主题安装
# 时间，如果没有排序字段，会根据事件排序。
date: 2022-07-14 16:44:33
# 排序，越大越靠前。
# sticky: 1000
# 文章首页显示图片
index_img: /img/common/hexologo.png
# 是否显示文章
hide: true
# 分类
categories: categories: [Hexo, Fluid]
# 标签
tags: [Hexo, Fluid]
---

八.结束

以上配置均在当前博客中使用，可以点击 https://www.linhuiy.com 查看效果。

Hexo > Fluid
#Hexo #Fluid
个人博客搭建(二) - Fluid 主题安装
http://example.com/posts/3818.html
作者
她微笑的脸y
发布于
2022年7月14日
许可协议