blog-hexo/source/_posts/Cosy-Starter-Guide.md
2023-11-08 10:11:56 +08:00

9.7 KiB
Raw Blame History

title top categories status
Cosy 入门 2
Hexo
doing

Hexo 安装主题

Hexo 主题的安装方式非常简单,只需将主题 Hexo-theme-cosy 复制目录的 themes 目录下,然后在 Hexo_config.yml 中修改下主题配置即可

# 找到 theme 配置项
theme: Hexo-theme-cosy

获取 Cosy

  • 进入 Cosy 代码仓库,了解最新的主题开发进度
  • 发布页面 下载 hexo-theme-cosy.zip
  • 解压至站点的 themes 目录下
  • 在 Hexo 的 _config.yml 中启用

hexo配置

Hexo_config.yml 中调整

基础配置

# 网页标题
title: 17px blog
# 侧边栏顶部显示
subtitle: "Mozzie"
# 用于SEO的html元描述
description: ""
# 用于SEO的html关键字
keywords:
# 文章版权声明显示作者名称
author: Mozzie

# 在此处设置您的网站url
url: https://mozzie.cn

语言

你可以在 hexo-theme-cosy/languages 中找到不同的语言文件,如果想切换语言,在配置文件中,填入 yml 的文件名

language: en

文章语法高亮

关闭hexo默认的highlight.js语法高亮

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 方面的获取丰富的图标

postCategoryIcons:
  - <svg>...</svg>
  - <svg>...</svg>
  - <svg>...</svg>

网站图标 favicon

  • 支持 svg
  • 支持 图片url,如:/img/favicon.png
favicon: ''

ICP备案号

😁 如不需要备案号,可直接删除

icp: 苏ICP备xxxxxxx号-x

首页底部文字

😁 如不需要,可直接删除,或者改为 false

motto: false

文章版权申明

默认开启,当 enable: false,默认关闭

postCopyright:
  enable: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

katex 数学公式

可自行配置 cdn,全局默认关闭该插件

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

为了加载速度,如果文章需要用到插件,请在文章头部增加,如

---
use: katex
---

mermaid 流程图

在撰写时,请使用 {% mermaid %}{% endmermaid %} 包裹,全局默认关闭该插件

{% mermaid %}
graph TD;
    A --> B;
    A --> C;
    B --> D;
    C --> D;
{% endmermaid %}

相应配置如下

mermaid:
  cdn: //cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js

为了加载速度,如果文章需要用到插件,请在文章头部增加,如

---
use: mermaid,katex...
---

valine 文章评论

首先需要注册 LeanCloud 国际区用户,创建数据库

请根据相关地区法规,酌情,全局默认关闭该插件

valine:
  # 替换
  appId: appId
  # 替换
  appKey: appKey
  avatar: monsterid
  cdn: //unpkg.com/valine@latest/dist/Valine.min.js
  # 替换
  serverURLs: //xxxxxxxx.api.lncldglobal.com

为了加载速度,如果文章需要用到插件,请在文章头部增加,如

---
use: valine,mermaid...
---

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

  1. 替换配置

Hexo_config.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
    - excerpt:strip
    - categories
    - title
    - permalink
    - slug
    - tags
    - title

安装 hexo-algoliasearch-next

这是 Hexo 博客帖子索引插件,自动化提交索引到 Algolia

如出遇到问题,可阅读 hexo-algoliasearch-next 仓库 最新说明

安装命令:

npm install hexo-algoliasearch-next --save

使用 algolia

在每次博客发布之前,进行索引上传的操作,命令通常如下

hexo clean
hexo generate
hexo algolia

🇨🇳 和风天气 Widget

Cosy 主要针对国内用户,在首页集成了和风天气的卡片,通过 和风天气开发服务 注册

注册完成后,在配置中填入你的 appKeycityCode(城市代码)

weather:
  enable: true
  # 替换
  cityCode: cityCode
  appKey: appKey

其中 cityCode 可以在 官方的地区列表仓库 中的 China-City-List-latest.csv 找到你所在城市的 cityCode

前置元数据

在 Hexo 的 Markdown 文件中,一个典型的 YAML 格式的 Front Matter 可能会是这样的:

---
title: 我的文章标题
categories:
- javascript
tags: 
- 编程
- JavaScript
---

top

实现文章置顶的功能,给定一个数值,可以进行排序,设定了 top 元数据的文章,会在分类列表中,使用 📌 标记

例如有三篇文章:

  • 文章1
---
title: 文章1
top: 0
categories:
- javascript
tags: 
- 编程
- JavaScript
---
  • 文章2
---
title: 文章2
top: 1
categories:
- javascript
tags: 
- 编程
- JavaScript
---
  • 文章3
---
title: 文章3
categories:
- javascript
tags: 
- 编程
- JavaScript
---

那么在 javascript 分类下,排序的顺序依次为:文章1 > 文章2 > 文章3

status

用于区分文章的状态,同时利用文章分类列表的筛选进行快速筛选Cosy 主题内置了 4 种状态

  • done完成
  • doing进行中
  • todo待办
  • other废弃

例如:

---
title: 文章1
categories:
- javascript
status: done
---

自定义页面

Hexo 使用 Markdown或其他渲染引擎解析你的文章并生成静态文件以快速加载。除了默认生成的文章和归档页面之外Hexo 还允许你创建自定义页面。

Roadmap路线图

创建页面,你可以使用命令

hexo new page roadmap

成功后在 source/ 文件夹下会生成一个新的文件夹 /roadmap/index.md

你可以参照此模板,进行配置,参数说明:

  • title: roadmap页面 html 的标题
  • initYear: 默认显示的年份
---
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简历页面

创建页面,你可以使用命令

hexo new page resume

成功后在 source/ 文件夹下会生成一个新的文件夹 /resume/index.md

你可以参照此模板,进行配置,参数说明:

  • title: resume 页面 html 的标题
  • avatar: 头像图片的地址
title: 页面标题document.title
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:
  - 我的工作是建立你的网站,使其功能强大,用户友好,但同时具有吸引力。
  - 此外,我为您的产品添加了个人风格,并确保其引人注目且易于使用。我的目标是以最有创意的方式传达你的信息和身份。我为许多知名品牌公司设计网页。

skill:
  - 熟悉Node具备后端开发能力有SpringBoot、Egg、Koa2、Midway等单个应用项目经验有Nestjs微服务应用项目经验
  - 具有Monoreo工程经验能够分离单个单元的前端和后端并应用DevOps

education:
  - school: 大学艺术学院
    time: 2012-2016

workExp:
  - inc: 创意研发
    time: 2021.09 ~ 至今
  - inc: Web设计
    time: 2021.01 ~ 2021.09

projectExp:
  - 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)://...
  # 更多 ...