Hexo Theme Fluid 使用教程

Hexo Theme Fluid 使用教程

hexo-theme-fluid:ocean: 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo项目地址:https://gitcode.com/gh_mirrors/he/hexo-theme-fluid

1. 项目的目录结构及介绍

Hexo Theme Fluid 的目录结构如下：

hexo-theme-fluid/
├── _config.yml
├── layout/
│   ├── _partial/
│   ├── _widget/
│   ├── archive.ejs
│   ├── category.ejs
│   ├── index.ejs
│   ├── page.ejs
│   ├── post.ejs
│   └── tag.ejs
├── source/
│   ├── css/
│   ├── fonts/
│   ├── images/
│   └── js/
├── package.json
└── README.md

目录结构介绍

• _config.yml: 主题的配置文件。
• layout/: 存放页面模板文件。
  • _partial/: 存放页面部分模板。
  • _widget/: 存放小部件模板。
  • archive.ejs: 归档页面模板。
  • category.ejs: 分类页面模板。
  • index.ejs: 首页模板。
  • page.ejs: 页面模板。
  • post.ejs: 文章模板。
  • tag.ejs: 标签页面模板。
• source/: 存放静态资源文件。
  • css/: 存放CSS文件。
  • fonts/: 存放字体文件。
  • images/: 存放图片文件。
  • js/: 存放JavaScript文件。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

Hexo Theme Fluid 的启动文件主要是 _config.yml 和 package.json。

_config.yml

这是主题的主要配置文件，包含了主题的各种设置，如导航菜单、侧边栏、社交链接等。用户可以通过修改这个文件来定制主题的外观和功能。

package.json

这个文件定义了项目的依赖和脚本。通过运行 npm install 可以安装项目所需的所有依赖。常用的脚本命令包括：

• npm run build: 构建项目。
• npm run serve: 启动本地服务器预览项目。

3. 项目的配置文件介绍

Hexo Theme Fluid 的配置文件是 _config.yml，以下是一些关键配置项的介绍：

基本配置

title: 博客标题
subtitle: 副标题
description: 描述
keywords: 关键词
author: 作者
language: 语言
timezone: 时区

导航菜单

menu:
  Home: /
  Archives: /archives
  Categories: /categories
  Tags: /tags
  About: /about

侧边栏

sidebar:
  position: left # 侧边栏位置，可选 left 或 right
  display: always # 侧边栏显示方式，可选 always 或 post

社交链接

social:
  GitHub: https://github.com/your-username
  Twitter: https://twitter.com/your-username
  Email: mailto:your-email@example.com

其他配置

# 文章相关配置
post_meta:
  created_at: true # 显示创建时间
  updated_at: true # 显示更新时间
  word_count: true # 显示字数统计

# 评论系统配置
comments:
  enable: true
  provider: disqus # 可选 disqus, gitalk, valine 等
  disqus:
    shortname: your-disqus-shortname

通过修改 _config.yml 文件，用户可以灵活地配置和定制 Hexo Theme Fluid 主题。

hexo-theme-fluid:ocean: 一款 Material Design 风格的 Hexo 主题 / An elegant Material-Design theme for Hexo项目地址:https://gitcode.com/gh_mirrors/he/hexo-theme-fluid