462 lines
11 KiB
Markdown
462 lines
11 KiB
Markdown
---
|
||
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
|
||
|
||
|
||
|
||
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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></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
|
||
---
|
||
|
||
``` |