blog-hexo/source/_posts/Cosy-Starter-Guide.md

519 lines
11 KiB
Markdown
Raw Normal View History

2023-10-20 09:11:26 +08:00
---
2023-11-03 14:25:01 +08:00
title: Cosy 入门
top: 2
2023-10-20 09:11:26 +08:00
categories:
- Hexo
status: doing
---
2023-11-03 14:25:01 +08:00
# Hexo 安装主题
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
`Hexo` 主题的安装方式非常简单,只需将主题 `Hexo-theme-cosy` 复制目录的 `themes` 目录下,然后在 `Hexo``_config.yml` 中修改下主题配置即可
2023-10-20 13:58:15 +08:00
```yml
2023-11-03 14:25:01 +08:00
# 找到 theme 配置项
theme: Hexo-theme-cosy
2023-10-20 13:58:15 +08:00
```
2023-11-03 14:25:01 +08:00
## 获取 Cosy
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
- 进入 [Cosy 代码仓库](https://github.com/17px/hexo-theme-cosy/tree/main),了解最新的主题开发进度
- 在 [发布页面](https://github.com/17px/hexo-theme-cosy/releases) 下载 `hexo-theme-cosy.zip`
- 解压至站点的 `themes` 目录下
- 在 Hexo 的 `_config.yml` 中启用
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
# hexo配置
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
`Hexo``_config.yml` 中调整
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
## 基础配置
2023-10-20 13:58:15 +08:00
```yml
2023-11-03 14:25:01 +08:00
# 网页标题
2023-10-20 13:58:15 +08:00
title: 17px blog
2023-11-03 14:25:01 +08:00
# 侧边栏顶部显示
2023-10-20 13:58:15 +08:00
subtitle: "Mozzie"
2023-11-03 14:25:01 +08:00
# 用于SEO的html元描述
2023-10-20 13:58:15 +08:00
description: ""
2023-11-03 14:25:01 +08:00
# 用于SEO的html关键字
2023-10-20 13:58:15 +08:00
keywords:
2023-11-03 14:25:01 +08:00
# 文章版权声明显示作者名称
2023-10-20 13:58:15 +08:00
author: Mozzie
2023-11-03 14:25:01 +08:00
# 在此处设置您的网站url
2023-10-20 13:58:15 +08:00
url: https://mozzie.cn
```
2023-11-03 14:25:01 +08:00
## 语言
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
你可以在 `hexo-theme-cosy/languages` 中找到不同的语言文件,如果想切换语言,在配置文件中,填入 `yml` 的文件名
2023-10-20 13:58:15 +08:00
```yml
language: en
```
2023-11-03 14:25:01 +08:00
## 文章语法高亮
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
关闭hexo默认的highlight.js语法高亮
2023-10-20 13:58:15 +08:00
```yml
highlight:
enable: false
line_number: true
auto_detect: false
tab_replace: ""
wrap: true
hljs: false
prismjs:
enable: true
preprocess: true
line_number: true
line_threshold: 0
tab_replace: ""
```
2023-11-03 14:25:01 +08:00
# Cosy 主题配置
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
下面的配置基于 `Hexo-theme-cosy` 下的 `_config.yml`
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
## 文章分类图标
2023-10-20 13:58:15 +08:00
2023-11-10 14:17:50 +08:00
> 可以在 [xicon](https://www.xicons.org/) 获取丰富的图标
在`主题_config.yml`文件中,添加`分类名称`和`图标svg`的映射,如值设置为 `false`,代表不显示该分类
2023-10-20 13:58:15 +08:00
```yml
2023-11-10 14:17:50 +08:00
category_meta:
foo: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1"></path><path d="M8 16h8"></path><path d="M8.322 12.582l7.956.836"></path><path d="M8.787 9.168l7.826 1.664"></path><path d="M10.096 5.764l7.608 2.472"></path></g></svg>
bar: false
2023-10-20 13:58:15 +08:00
```
2023-11-03 14:25:01 +08:00
## 网站图标 favicon
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
- 支持 `svg`
- 支持 `图片url`,如:`/img/favicon.png`
2023-10-20 13:58:15 +08:00
```yml
favicon: ''
```
2023-11-03 14:25:01 +08:00
## ICP备案号
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
😁 如不需要备案号,可直接删除
2023-10-20 13:58:15 +08:00
```yml
icp: 苏ICP备xxxxxxx号-x
```
2023-11-03 14:25:01 +08:00
## 首页底部文字
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
😁 如不需要,可直接删除,或者改为 `false`
2023-10-20 13:58:15 +08:00
```yml
motto: false
```
2023-11-03 14:25:01 +08:00
## 文章版权申明
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
默认开启,当 `enable: false`,默认关闭
2023-10-20 13:58:15 +08:00
```yml
postCopyright:
enable: true
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
```
2023-11-03 14:25:01 +08:00
## katex 数学公式
2023-10-20 13:58:15 +08:00
2023-11-08 10:11:56 +08:00
可自行配置 `cdn`,全局默认关闭该插件
2023-10-20 13:58:15 +08:00
```yml
katex:
jsCdn: //cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js
cssCdn: //cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css
```
2023-11-08 10:11:56 +08:00
为了加载速度,如果文章需要用到插件,请在文章头部增加,如
```markdown
---
use: katex
---
```
2023-11-03 14:25:01 +08:00
## mermaid 流程图
2023-10-20 13:58:15 +08:00
2023-11-08 10:11:56 +08:00
在撰写时,请使用 `{% mermaid %}``{% endmermaid %}` 包裹,全局默认关闭该插件
2023-10-20 13:58:15 +08:00
```markdown
{% mermaid %}
graph TD;
A --> B;
A --> C;
B --> D;
C --> D;
{% endmermaid %}
```
2023-11-03 14:25:01 +08:00
相应配置如下
2023-10-20 13:58:15 +08:00
```yml
mermaid:
cdn: //cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js
```
2023-11-08 10:11:56 +08:00
为了加载速度,如果文章需要用到插件,请在文章头部增加,如
```markdown
---
use: mermaid,katex...
---
```
2023-11-03 14:25:01 +08:00
## valine 文章评论
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
首先需要注册 `LeanCloud` 国际区用户,创建数据库
2023-10-20 13:58:15 +08:00
2023-11-08 10:11:56 +08:00
请根据相关地区法规,酌情,全局默认关闭该插件
2023-10-20 13:58:15 +08:00
```yml
valine:
# 替换
appId: appId
# 替换
appKey: appKey
avatar: monsterid
cdn: //unpkg.com/valine@latest/dist/Valine.min.js
# 替换
serverURLs: //xxxxxxxx.api.lncldglobal.com
```
2023-11-08 10:11:56 +08:00
为了加载速度,如果文章需要用到插件,请在文章头部增加,如
```markdown
---
use: valine,mermaid...
---
```
2023-11-03 14:25:01 +08:00
# algolia搜索
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
博客自带的本地搜索,基于前端开发,存在或多或少的问题,建议换成 `algolia`,免费账户 总共有 `10,000` 条记录,每月有 `100,000` 的操作数
2023-10-20 13:58:15 +08:00
2023-11-10 14:17:50 +08:00
## 关闭搜索
主页左侧导航栏不再显示搜索,通知相关资源不会加载,在主题 `_config.yml` 中:
```yml
search: false
```
2023-11-03 14:25:01 +08:00
## 注册 & 获取 Key
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
1. 创建一个新的 `Index`,例如 `hex-blog`
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
2. 复制并保存:
2023-10-20 13:58:15 +08:00
- Application ID
- Search-Only API Key
- Admin API Key
- Usage API Key
2023-10-22 21:07:03 +08:00
![API Keys](/img/algolia-api-keys.png)
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
3. 替换配置
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
`Hexo``_config.yml` 中加入
2023-10-20 13:58:15 +08:00
```yml
algolia:
2023-11-03 14:25:01 +08:00
# 替换
2023-10-20 13:58:15 +08:00
appId: Application ID
2023-11-03 14:25:01 +08:00
# 替换
2023-10-20 13:58:15 +08:00
apiKey: Usage API Key
2023-11-03 14:25:01 +08:00
# 请勿泄露,用于上报,替换
2023-10-20 13:58:15 +08:00
adminApiKey: Admin API Key
2023-11-03 14:25:01 +08:00
# 替换
2023-10-20 13:58:15 +08:00
SearchOnlyAPIKey: Search-Only API Key
chunkSize: 5000
2023-11-03 14:25:01 +08:00
# 替换
2023-10-20 13:58:15 +08:00
indexName: hex-blog
fields:
2023-11-07 16:12:40 +08:00
- content
- excerpt:strip
2023-10-20 13:58:15 +08:00
- categories
2023-11-07 16:12:40 +08:00
- title
2023-10-20 13:58:15 +08:00
- permalink
- slug
- tags
- title
```
2023-11-07 16:12:40 +08:00
## 安装 hexo-algoliasearch-next
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
这是 Hexo 博客帖子索引插件,自动化提交索引到 Algolia
2023-10-20 13:58:15 +08:00
2023-11-07 16:12:40 +08:00
> 如出遇到问题,可阅读 [hexo-algoliasearch-next 仓库](https://github.com/Becavalier/hexo-algoliasearch-next) 最新说明
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
安装命令:
2023-10-20 13:58:15 +08:00
```bash
2023-11-07 16:12:40 +08:00
npm install hexo-algoliasearch-next --save
2023-10-20 13:58:15 +08:00
```
2023-11-03 14:25:01 +08:00
## 使用 algolia
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
在每次博客发布之前,进行索引上传的操作,命令通常如下
2023-10-20 13:58:15 +08:00
```bash
hexo clean
hexo generate
hexo algolia
```
2023-11-03 14:25:01 +08:00
# 🇨🇳 和风天气 Widget
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
Cosy 主要针对国内用户,在首页集成了和风天气的卡片,通过 [和风天气开发服务](https://dev.qweather.com/docs/start/) 注册
2023-10-20 13:58:15 +08:00
2023-11-03 14:25:01 +08:00
注册完成后,在配置中填入你的 `appKey``cityCode(城市代码)`
2023-10-20 13:58:15 +08:00
```yml
weather:
enable: true
2023-11-03 14:25:01 +08:00
# 替换
2023-10-20 13:58:15 +08:00
cityCode: cityCode
appKey: appKey
```
2023-11-03 14:25:01 +08:00
其中 `cityCode` 可以在 [官方的地区列表仓库](https://github.com/qwd/LocationList) 中的 `China-City-List-latest.csv` 找到你所在城市的 `cityCode`
2023-10-20 16:29:07 +08:00
2023-11-03 14:25:01 +08:00
# 前置元数据
2023-10-20 16:29:07 +08:00
2023-11-03 14:25:01 +08:00
在 Hexo 的 Markdown 文件中,一个典型的 YAML 格式的 `Front Matter` 可能会是这样的:
2023-10-20 16:29:07 +08:00
```markdown
---
2023-11-03 14:25:01 +08:00
title: 我的文章标题
2023-10-20 16:29:07 +08:00
categories:
- javascript
tags:
2023-11-03 14:25:01 +08:00
- 编程
2023-10-20 16:29:07 +08:00
- JavaScript
---
```
## top
2023-11-03 14:25:01 +08:00
实现文章置顶的功能,给定一个数值,可以进行排序,设定了 `top` 元数据的文章,会在分类列表中,使用 📌 标记
2023-10-20 16:29:07 +08:00
2023-11-03 14:25:01 +08:00
例如有三篇文章:
2023-10-20 16:29:07 +08:00
2023-11-03 14:25:01 +08:00
- 文章1
2023-10-20 16:29:07 +08:00
```markdown
---
2023-11-03 14:25:01 +08:00
title: 文章1
2023-10-20 16:29:07 +08:00
top: 0
categories:
2023-11-03 14:25:01 +08:00
- javascript
tags:
- 编程
- JavaScript
2023-10-20 16:29:07 +08:00
---
```
2023-11-03 14:25:01 +08:00
- 文章2
2023-10-20 16:29:07 +08:00
```markdown
---
2023-11-03 14:25:01 +08:00
title: 文章2
2023-10-20 16:29:07 +08:00
top: 1
categories:
2023-11-03 14:25:01 +08:00
- javascript
tags:
- 编程
- JavaScript
2023-10-20 16:29:07 +08:00
---
```
2023-11-03 14:25:01 +08:00
- 文章3
2023-10-20 16:29:07 +08:00
```markdown
---
2023-11-03 14:25:01 +08:00
title: 文章3
2023-10-20 16:29:07 +08:00
categories:
2023-11-03 14:25:01 +08:00
- javascript
tags:
- 编程
- JavaScript
2023-10-20 16:29:07 +08:00
---
```
2023-11-03 14:25:01 +08:00
那么在 `javascript` 分类下,排序的顺序依次为:`文章1 > 文章2 > 文章3`
2023-10-20 16:29:07 +08:00
## status
2023-11-03 14:25:01 +08:00
用于区分文章的状态,同时利用文章分类列表的`筛选`进行快速筛选Cosy 主题内置了 4 种状态
2023-10-20 16:29:07 +08:00
2023-11-03 14:25:01 +08:00
- done完成
- doing进行中
- todo待办
- other废弃
2023-10-20 16:29:07 +08:00
2023-11-03 14:25:01 +08:00
例如:
2023-10-20 16:29:07 +08:00
```markdown
---
2023-11-03 14:25:01 +08:00
title: 文章1
2023-10-20 16:29:07 +08:00
categories:
- javascript
status: done
---
```
2023-11-03 14:25:01 +08:00
# 自定义页面
2023-10-20 16:29:07 +08:00
2023-11-03 14:25:01 +08:00
Hexo 使用 Markdown或其他渲染引擎解析你的文章并生成静态文件以快速加载。除了默认生成的文章和归档页面之外Hexo 还允许你创建自定义页面。
2023-10-20 16:29:07 +08:00
2023-11-10 14:17:50 +08:00
## 基本配置
可以通过配置 `nav_meta` 属性关闭页面、更改图标
```yml
nav_meta:
# 不显示 timeline页面
timeline: false
# 自定义图标
roadmap:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M10.5 20.4l-6.9-6.9c-.781-.781-.781-2.219 0-3l6.9-6.9c.781-.781 2.219-.781 3 0l6.9 6.9c.781.781.781 2.219 0 3l-6.9 6.9c-.781.781-2.219.781-3 0z"></path>
<path d="M9 14v-2c0-.59.414-1 1-1h5"></path>
<path d="M13 9l2 2l-2 2"></path>
</g>
</svg>
resume:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
<path d="M5 8V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2h-5"></path>
<circle cx="6" cy="14" r="3"></circle>
<path d="M4.5 17L3 22l3-1.5L9 22l-1.5-5"></path>
</g>
</svg>
```
2023-11-03 14:25:01 +08:00
## Roadmap路线图
2023-10-30 11:56:47 +08:00
2023-11-03 14:25:01 +08:00
创建页面,你可以使用命令
2023-10-30 11:56:47 +08:00
```bash
hexo new page roadmap
```
2023-11-03 14:25:01 +08:00
成功后在 `source/` 文件夹下会生成一个新的文件夹 `/roadmap/index.md`
2023-10-30 11:56:47 +08:00
2023-11-03 14:25:01 +08:00
你可以参照此模板,进行配置,参数说明:
2023-10-30 11:56:47 +08:00
2023-11-03 14:25:01 +08:00
- title: roadmap页面 html 的标题
- initYear: 默认显示的年份
2023-10-30 11:56:47 +08:00
```markdown
2023-11-03 14:25:01 +08:00
---
title: 陈不渡 - roadmap
2023-10-30 11:56:47 +08:00
layout: roadmap
initYear: 2023
years:
2022:
2023-11-03 14:25:01 +08:00
- title: 读书
2023-10-30 11:56:47 +08:00
start: 01-01
end: 1-5
2023-11-03 14:25:01 +08:00
- title: 还是读书
2023-10-30 11:56:47 +08:00
start: 02-01
end: 05-30
2023:
2023-11-03 14:25:01 +08:00
- title: 越陌度阡
2023-10-30 11:56:47 +08:00
start: 01-01
end: 1-2
2023-11-03 14:25:01 +08:00
- title: 枉用相存
2023-10-30 11:56:47 +08:00
start: 02-01
end: 06-30
2023-11-03 14:25:01 +08:00
- title: 短歌行
2023-10-30 11:56:47 +08:00
start: 10-26
end: 10-31
2023-11-03 14:25:01 +08:00
content: 对酒当歌,人生几何!譬如朝露,去日苦多。慨当以慷,忧思难忘。何以解忧?唯有杜康。青青子衿,悠悠我心。但为君故,沉吟至今。呦呦鹿鸣,食野之苹。
- title: 声律启蒙
2023-10-30 11:56:47 +08:00
start: 11-01
end: 11-31
2023-11-03 14:25:01 +08:00
content: 花开红锦绣,水漾碧琉璃。去妇因探邻舍枣,出妻为种后园葵
---
2023-10-30 11:56:47 +08:00
```
2023-11-03 14:25:01 +08:00
## Resume简历页面
2023-10-30 11:56:47 +08:00
2023-11-03 14:25:01 +08:00
创建页面,你可以使用命令
2023-10-30 11:56:47 +08:00
```bash
hexo new page resume
```
2023-11-03 14:25:01 +08:00
成功后在 `source/` 文件夹下会生成一个新的文件夹 `/resume/index.md`
2023-10-30 11:56:47 +08:00
2023-11-03 14:25:01 +08:00
你可以参照此模板,进行配置,参数说明:
2023-10-30 11:56:47 +08:00
2023-11-03 14:25:01 +08:00
- title: resume 页面 html 的标题
- avatar: 头像图片的地址
2023-10-30 11:56:47 +08:00
2023-11-03 14:25:01 +08:00
```yml
title: 页面标题document.title
2023-10-30 11:56:47 +08:00
layout: resume
avatar: /img/avatar.png
name: Hi! Mozzie
role: Full Stack
email: himozzie@gmail.com
phone: +86 180-xxxx-xxx
birth: Jan 21, 1994
location: Nanjing, China
social:
- name: github
link: https://github.com/17px
2023-10-30 15:45:20 +08:00
icon: svg
2023-10-30 11:56:47 +08:00
about:
2023-11-03 14:25:01 +08:00
- 我的工作是建立你的网站,使其功能强大,用户友好,但同时具有吸引力。
- 此外,我为您的产品添加了个人风格,并确保其引人注目且易于使用。我的目标是以最有创意的方式传达你的信息和身份。我为许多知名品牌公司设计网页。
2023-10-30 11:56:47 +08:00
skill:
2023-11-03 14:25:01 +08:00
- 熟悉Node具备后端开发能力有SpringBoot、Egg、Koa2、Midway等单个应用项目经验有Nestjs微服务应用项目经验
- 具有Monoreo工程经验能够分离单个单元的前端和后端并应用DevOps
2023-10-30 11:56:47 +08:00
education:
2023-11-03 14:25:01 +08:00
- school: 大学艺术学院
2023-10-30 11:56:47 +08:00
time: 2012-2016
workExp:
2023-11-03 14:25:01 +08:00
- inc: 创意研发
time: 2021.09 ~ 至今
- inc: Web设计
2023-10-30 11:56:47 +08:00
time: 2021.01 ~ 2021.09
projectExp:
2023-11-03 14:25:01 +08:00
- name: PC/React• 标注 ,算法数据中心
desc: 这是一个xxx系统。它主要包括一个bc函数。我主要负责x、y和z模块的开发和维护。
list:
- 使用pnpm工作区管理Monorepo中的多个代码库支持多个框架共存共享通用组件库和功能
- name: PC/React•Tavigator主动脉根部/外周
desc: 这是一个xxx系统。它主要包括一个bc函数。我主要负责x、y和z模块的开发和维护。
portfolio:
- name: 项目A
desc: 项目A描述
iconSVG: 复制svg的path到这里
link: 网址http(s)://...
# 更多 ...
2023-10-30 11:56:47 +08:00
```