一.前言
可以使用任何自己喜欢的主题,一部分主题会带有统计,评论,友情链接,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
。
参考配置,可以全部复制过去,也可以复制部分,建议全部复制过去。
三.自定义页面
使用命令创建:
创建成功后编辑博客目录下 /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: 强制使用此名称显示(不再按语言配置显示),可省略
五.创建关于页
命令创建:
创建成功后修改 /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
|
评论需要每个页面单独开启:
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 的方式,但是不推荐使用。
文章配置:
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
index_img: /img/common/hexologo.png
hide: true
categories: categories: [Hexo, Fluid]
tags: [Hexo, Fluid] ---
|
八.结束
以上配置均在当前博客中使用,可以点击 https://www.linhuiy.com 查看效果。