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
-
-
创建一个新的
-Index
,例如hex-blog
-复制并保存:
-
-
-
-
- Application ID -
- Search-Only API Key -
- Admin API Key -
- Usage API Key -
-
-
- 替换配置 -
在 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
----
-
-自定义页面
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: 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
-
----