🔥 A special hexo theme.
npm install hexo-theme-tangyuxianbash
npm install hexo-theme-tangyuxian hexo-renderer-inferno
`
- 使用Tangyuxian
- 方法1 在项目的根目录中编辑 _config.yml。将名为 theme 的键的值更改为 tangyuxian
- 方法2
`bash
hexo config theme tangyuxian
`
- 配置tangyuxian
在项目的根目录中编辑 _config.tangyuxian.yml。
- 设置文章信息
`markdown
---
title: 此处为标题
date: 此处为时间
tags:
- 标签1
- 标签2
categories:
- 分组名
cover: /images/post/markerdown.jpg(可选:封面地址,可以是相对也可以是绝对路径)
coverWidth: 1200(可选:封面宽度)
coverHeight: 320(可选:封面高度)
author:文章作者(可选)
from:文章来源(可选)
---
`
- 自动通过标签来匹配封面
在_config.tangyuxian.yml的tagsCovers下可配置对应类型的封面,默认内置了常见封面,可直接使用,也可自行配置封面。
- 文章归档
为了让文章归档到一个页面,请在项目的根目录/source/下创建archives.md文件,文件内填写如下内容即可:
`markdown
---
title: 文章归档
layout: archives
permalink: archives.html
---
`
- 更多...
3. 修改本主题并在本地使用方法
在根目录的package.json中增加配置项
`json
"workspaces": [
"packages/*"
]
`
在根目录创建文件夹packages,将本主题下载后放到该文件夹里,然后在根目录的package.json中修改内容
`json
"hexo-theme-tangyuxian": "workspace:^"
`
之后就可以在本地随时修改本主题
4. 以下是本主题包的目录结构图
`
├── languages //国际化语言包
├── layout //ejs模板布局文件夹
├── scripts //自定义执行脚本
├── source //静态资源文件夹
├── package.json //node配置项
└── README.md //说明文档
`
5. ~~即时通讯插件~~
~~daovoice需要您到daovoice官网申请key并配置~~
6. AI对话插件(可选)
聊天框开放为自由嵌入,可以采用dify的工作流生成智能体进行嵌入,在_config.tangyuxian.yml配置文件中有预设的配置项
`yml
# 聊天机器人 可以内嵌ai聊天页面到这里,chat中配置内嵌的地址,比如dify或者是其它定制化的聊天界面
chatbot:
enable: true
options:
title: 糖糖的AI分身(BETA)
chat: https://www.tangyuxian.com/weifu.html
style: "width: 100%; height: 100%;overflow: hidden;"
`
7. memos插件使用(可选)
- memos是可完全私有化的备忘录,可通过markerdown-一键生成专属自己的备忘录 - 糖羽仙该文章了解部署过程。当拥有memos后,可在_config.tangyuxian.yml配置项中对参数进行调整
`yml
# 配置memos组件相关内容,需要使用已有的momos服务才行,可到https://usememos.com/本地部署一套备忘录服务
memos:
host: https://memos.tangyuxian.com
pageSize: 10
filter: "#moments" # 用于筛选memos的标签,默认是#moments。匹配到后会自动移除
enableFancybox: true
`
- 为了让文章归档到一个页面,请在项目的根目录/source/下创建memos.md文件,文件内填写如下内容即可:
`markdown
---
title: 动态
layout: memos
permalink: memos.html
---
`
8. 主题色个性化配置(可选)
默认配置内容如下:
`css
:root {
--gutter: 24px;
--radius: 13px;
--color-primary: #e67249;
--color2: rgba(255, 118, 30, 0.5);
--color3: #ffb900;
--color4: #33d57a;
--color5: #00dbff;
--color6: #1a98ff;
--color7: #9090ff;
--color-primary-bg: rgba(255, 78, 106, 0.15);
--color2-bg: rgba(255, 118, 30, 0.15);
--color3-bg: rgba(255, 185, 0, 0.15);
--color4-bg: rgba(51, 213, 122, 0.15);
--color5-bg: rgba(0, 219, 255, 0.15);
--color6-bg: rgba(26, 152, 255, 0.15);
--color7-bg: rgba(144, 144, 255, 0.15);
--color-shadow: rgba(161, 177, 204, 0.4);
--color-card: #fff;
--color-text-1: #111;
--color-text-2: #444;
--color-text-3: #363636;
--clock-logo:url("/images/background/clock_logo.png");
--qweather-logo:url("/images/background/clock_logo.png");
--character:url("/images/background/character.png");
}
`
其中 --clock-logo 是时钟中间显示的图片,--qweather-logo是天气旁边显示的图片,--character是左侧的立绘图片,在根目录中的 _config.tangyuxian.yml 中设置 customStyles 的值。 默认配置如下:
yaml
`yml
customStyles:
- custom.css
- themes/umaru/index.css
`
然后,在名为 source 的路径中创建和配置对应路径的文件。这样就可以编写自己的自定义样式,下面会覆盖上面,注意顺序。
9. 本地搜索功能依赖(可选)
参考hexo-generator-search,配置相关参数,用于生成search.json,本地搜索依赖该文件进行检索
`yml
search:
path: search.json
field: post
``