blog-hexo/source/_posts/Cosy 入门.md
2023-10-30 15:45:20 +08:00

464 lines
10 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Cosy 入门
top: 2
categories:
- Hexo
status: doing
---
# Hexo 安装主题
`Hexo` 主题的安装方式非常简单,只需将主题 `Hexo-theme-cosy` 复制目录的 `themes` 目录下,然后在 `Hexo``_config.yml` 中修改下主题配置即可
```yml
# 找到 theme 配置项
theme: Hexo-theme-cosy
```
## 获取 Cosy
- 进入 [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` 中启用
# hexo配置
`Hexo``_config.yml` 中调整
## 基础配置
```yml
# 网页标题
title: 17px blog
# 侧边栏顶部显示
subtitle: "Mozzie"
# 用于SEO的html元描述
description: ""
# 用于SEO的html关键字
keywords:
# 文章版权声明显示作者名称
author: Mozzie
# 在此处设置您的网站url
url: https://mozzie.cn
```
## 语言
你可以在 `hexo-theme-cosy/languages` 中找到不同的语言文件,如果想切换语言,在配置文件中,填入 `yml` 的文件名
```yml
language: en
```
## 文章语法高亮
关闭hexo默认的highlight.js语法高亮
```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: ""
```
# Cosy 主题配置
下面的配置基于 `Hexo-theme-cosy` 下的 `_config.yml`
## 文章分类图标
按照顺序,依次设置 `svg` 图标,可以在 [xicon](https://www.xicons.org/) 方面的获取丰富的图标
```yml
postCategoryIcons:
- <svg>...</svg>
- <svg>...</svg>
- <svg>...</svg>
```
## 网站图标 favicon
- 支持 `svg`
- 支持 `图片url`,如:`/img/favicon.png`
```yml
favicon: ''
```
## ICP备案号
😁 如不需要备案号,可直接删除
```yml
icp: 苏ICP备xxxxxxx号-x
```
## 首页底部文字
😁 如不需要,可直接删除,或者改为 `false`
```yml
motto: false
```
## 文章版权申明
默认开启,当 `enable: false`,默认关闭
```yml
postCopyright:
enable: true
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
```
## katex 数学公式
可自行配置 `cdn`
```yml
katex:
enable: true
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
```
## mermaid 流程图
在撰写时,请使用 `{% mermaid %}``{% endmermaid %}` 包裹
```markdown
{% mermaid %}
graph TD;
A --> B;
A --> C;
B --> D;
C --> D;
{% endmermaid %}
```
相应配置如下
```yml
mermaid:
enable: true
cdn: //cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js
```
## valine 文章评论
首先需要注册 `LeanCloud` 国际区用户,创建数据库
请根据相关地区法规,酌情
```yml
valine:
enable: true
# 替换
appId: appId
# 替换
appKey: appKey
avatar: monsterid
cdn: //unpkg.com/valine@latest/dist/Valine.min.js
# 替换
serverURLs: //xxxxxxxx.api.lncldglobal.com
```
# algolia搜索
博客自带的本地搜索,基于前端开发,存在或多或少的问题,建议换成 `algolia`,免费账户 总共有 `10,000` 条记录,每月有 `100,000` 的操作数
## 注册 & 获取 Key
1. 创建一个新的 `Index`,例如 `hex-blog`
2. 复制并保存:
- Application ID
- Search-Only API Key
- Admin API Key
- Usage API Key
![API Keys](/img/algolia-api-keys.png)
3. 替换配置
`Hexo``_config.yml` 中加入
```yml
algolia:
# 替换
appId: Application ID
# 替换
apiKey: Usage API Key
# 请勿泄露,用于上报,替换
adminApiKey: Admin API Key
# 替换
SearchOnlyAPIKey: Search-Only API Key
chunkSize: 5000
# 替换
indexName: hex-blog
fields:
- content:strip
- categories
- date
- permalink
- slug
- tags
- title
```
## 安装 hexo-algoliasearch
这是 Hexo 博客帖子索引插件,自动化提交索引到 Algolia
> 如出遇到问题,可阅读 [hexo-algoliasearch 仓库](https://www.npmjs.com/package/hexo-algoliasearch) 最新说明
安装命令:
```bash
npm install hexo-algoliasearch --save
```
## 使用 algolia
在每次博客发布之前,进行索引上传的操作,命令通常如下
```bash
hexo clean
hexo generate
hexo algolia
```
# 🇨🇳 和风天气 Widget
Cosy 主要针对国内用户,在首页集成了和风天气的卡片,通过 [和风天气开发服务](https://dev.qweather.com/docs/start/) 注册
注册完成后,在配置中填入你的 `appKey``cityCode(城市代码)`
```yml
weather:
enable: true
# 替换
cityCode: cityCode
appKey: appKey
```
其中 `cityCode` 可以在 [官方的地区列表仓库](https://github.com/qwd/LocationList) 中的 `China-City-List-latest.csv` 找到你所在城市的 `cityCode`
# 前置元数据
在 Hexo 的 Markdown 文件中,一个典型的 YAML 格式的 `Front Matter` 可能会是这样的:
```markdown
---
title: 我的文章标题
categories:
- javascript
tags:
- 编程
- JavaScript
---
```
## top
实现文章置顶的功能,给定一个数值,可以进行排序,设定了 `top` 元数据的文章,会在分类列表中,使用 📌 标记
例如有三篇文章:
- 文章1
```markdown
---
title: 文章1
top: 0
categories:
- javascript
tags:
- 编程
- JavaScript
---
```
- 文章2
```markdown
---
title: 文章2
top: 1
categories:
- javascript
tags:
- 编程
- JavaScript
---
```
- 文章3
```markdown
---
title: 文章3
categories:
- javascript
tags:
- 编程
- JavaScript
---
```
那么在 `javascript` 分类下,排序的顺序依次为:`文章1 > 文章2 > 文章3`
## status
用于区分文章的状态,同时利用文章分类列表的`筛选`进行快速筛选Cosy 主题内置了 4 种状态
- done完成
- doing进行中
- todo待办
- other废弃
例如:
```markdown
---
title: 文章1
categories:
- javascript
status: done
---
```
# 自定义页面
Hexo 使用 Markdown或其他渲染引擎解析你的文章并生成静态文件以快速加载。除了默认生成的文章和归档页面之外Hexo 还允许你创建自定义页面。
## Roadmap路线图
创建页面,你可以使用命令
```bash
hexo new page roadmap
```
成功后在 `source/` 文件夹下会生成一个新的文件夹 `/roadmap/index.md`
你可以参照此模板,进行配置,参数说明:
- title: roadmap页面 html 的标题
- initYear: 默认显示的年份
```markdown
---
title: 陈不渡 - roadmap
layout: roadmap
initYear: 2023
years:
2022:
- title: 读书
start: 01-01
end: 1-5
- title: 还是读书
start: 02-01
end: 05-30
2023:
- title: 越陌度阡
start: 01-01
end: 1-2
- title: 枉用相存
start: 02-01
end: 06-30
- title: 短歌行
start: 10-26
end: 10-31
content: 对酒当歌,人生几何!譬如朝露,去日苦多。慨当以慷,忧思难忘。何以解忧?唯有杜康。青青子衿,悠悠我心。但为君故,沉吟至今。呦呦鹿鸣,食野之苹。
- title: 声律启蒙
start: 11-01
end: 11-31
content: 花开红锦绣,水漾碧琉璃。去妇因探邻舍枣,出妻为种后园葵
---
```
## Resume简历页面
创建页面,你可以使用命令
```bash
hexo new page resume
```
成功后在 `source/` 文件夹下会生成一个新的文件夹 `/resume/index.md`
你可以参照此模板,进行配置,参数说明:
- title: resume 页面 html 的标题
- avatar: 头像图片的地址
```markdown
---
title: resume
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
icon: svg
about:
- My job is to build your website so that it is functional and user-friendly but at the same time attractive.
- Moreover, I add personal touch to your product and make sure that is eye-catching and easy to use. My aim is to bring across your message and identity in the most creative way. I created web design for many famous brand companies.
skill:
- Familiar with Node, with backend development capabilities, experience in individual application projects such as SpringBoot, Egg, Koa2, and Midway, and experience in Nestjs microservice application projects
- Having experience in Monorepo engineering and possessing the ability to separate the front and rear ends of a single unit and apply DevOps
- Familiar with three. js, familiar with Vtk. js, with development experience in medical 3D front-end and graphics related fields
- Master basic Linux commands and understand the basic use of Nginx and Docker
education:
- school: University School of the Arts
time: 2012-2016
workExp:
- inc: Creative Director
time: 2021.09 ~ 至今
- inc: Web Designer
time: 2021.01 ~ 2021.09
projectExp:
- name: PC/React • Annotation, Algorithm Data Center
desc: This is a xxx system. It mainly includes a b c function. I am mainly responsible for the development and maintenance of the x, y, and z modules.
list:
- Using pnpm workspace to manage multiple code repositories in Monorepo, supporting the coexistence of multiple frameworks, and sharing common component libraries and capabilities
- Use Rollup to package some functional capabilities (such as a b) on your own, which can be used for both browsers and node.js to achieve code isomorphism
- Develop the system server using Nest.js and use it for the microservice system of the project
- name: PC/React • Tavigator Aortic Root/Peripheral
desc: This is a xxx system. It mainly includes a b c function. I am mainly responsible for the development and maintenance of the x, y, and z modules.
list:
- Using pnpm workspace to manage multiple code repositories in Monorepo, supporting the coexistence of multiple frameworks, and sharing common component libraries and capabilities
- Use Rollup to package some functional capabilities (such as a b) on your own, which can be used for both browsers and node.js to achieve code isomorphism
- Develop the system server using Nest.js and use it for the microservice system of the project
---
```