# Cosy 入门
Author: Mozzie

Mozzie
Search...
`Ctrl K`
苏ICP备19008833号-4

# 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:
      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 %}` 包裹

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

相应配置如下

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

## valine 文章评论

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

请根据相关地区法规，酌情

    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` 中加入

    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 仓库 最新说明

安装命令：

    npm install hexo-algoliasearch --save

## 使用 algolia

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

    hexo clean
    hexo generate
    hexo algolia

# 🇨🇳 和风天气 Widget

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

注册完成后，在配置中填入你的 `appKey` 和 `cityCode(城市代码)`

    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
    ---

Post Url： https://mozzie.cn/2023/10/21/Cosy%20%E5%85%A5%E9%97%A8/

- Author

  Mozzie

- Published on

  2023-10-21

- License

  CC BY-NC-SA 4.0

Catalog