12 KiB
title | top | categories | status | |
---|---|---|---|---|
Cosy Starter Guide | 1 |
|
doing |
Hexo Installation
Installing a Hexo
theme is straightforward. Simply copy the Hexo-theme-cosy
directory to the themes
directory, and then modify the theme configuration in Hexo
's _config.yml
.
# Locate the theme setting
theme: hexo-theme-cosy
Acquiring Cosy
- Visit Cosy's code repository to stay updated on the latest theme developments.
- Download
hexo-theme-cosy.zip
from the releases page. - Extract it into your site's
themes
directory. - Enable it in Hexo's
_config.yml
.
Hexo Configuration
Adjust settings in Hexo
's _config.yml
.
Basic Configuration
# Website title
title: 17px blog
# Sidebar header
subtitle: "Mozzie"
# HTML meta description for SEO
description: ""
# HTML meta keywords for SEO
keywords:
# Copyright text displaying author's name
author: Mozzie
# Set your website URL here
url: https://mozzie.cn
Language Switch
You can find different language files in hex theme liner/languages
. If you want to switch languages, fill in the file name of yml
in the _config.yml
file
language: en
Code Highlighting
Disable Hexo's default highlight.js syntax highlighting.
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 Theme Configuration
💡 The following settings are based on the _config.yml
under hexo-theme-cosy
.
Post Category Icons
In sequence, set the svg
icons. You can get a wide variety of icons at xicon.
postCategoryIcons:
- <svg>...</svg>
- <svg>...</svg>
- <svg>...</svg>
Website Favicon
- Supports
svg
- Supports
image URL
, e.g.,/img/favicon.png
favicon: ''
ICP Number 🇨🇳
😁 If not required, can be directly deleted.
icp: 苏ICP备xxxxxxx号-x
Footer Text on Homepage 🇨🇳
😁 If not required, can be directly deleted or set to false
.
motto: false
Post Copyright Statement
Enabled by default. When enable: false
, it is disabled by default.
postCopyright:
enable: true
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
Katex Mathematical Formulas
You can configure the CDN yourself.
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 Flowcharts
To draft flowchart syntax, use {% mermaid %}
and {% endmermaid %}
as wrappers.
{% mermaid %}
graph TD;
A --> B;
A --> C;
B --> D;
C --> D;
{% endmermaid %}
Corresponding configurations are as follows:
mermaid:
enable: true
cdn: //cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js
Valine Comments
First, register as a LeanCloud
international user and create a database.
Please proceed in accordance with relevant regional regulations.
valine:
enable: true
# 替换
appId: appId
# 替换
appKey: appKey
avatar: monsterid
cdn: //unpkg.com/valine@latest/dist/Valine.min.js
# 替换
serverURLs: //xxxxxxxx.api.lncldglobal.com
Algolia Search
The blog comes with built-in local search, based on frontend development, which may have some issues. It's recommended to switch to Algolia
. The free account has a total of 10,000 records and 100,000 operations per month.
Register & Acquire Key
-
Create a new
Index
, for example,hex-blog
-
Copy and save:
- Application ID
- Search-Only API Key
- Admin API Key
- Usage API Key
- Replace configurations
Add the following to Hexo's _config.yml
algolia:
# Replace
appId: Application ID
# Replace
apiKey: Usage API Key
# Do not disclose, used for reporting, replace
adminApiKey: Admin API Key
# Replace
SearchOnlyAPIKey: Search-Only API Key
chunkSize: 5000
# Replace
indexName: hex-blog
fields:
- content:strip
- categories
- date
- permalink
- slug
- tags
- title
Install hexo-algoliasearch
This is a Hexo blog post index plugin that automates the submission of indexes to Algolia.
If you encounter any problems, you can read the hexo-algoliasearch repository for the latest instructions.
Installation command:
npm install hexo-algoliasearch --save
Using Algolia
Before publishing each blog post, carry out index uploading operations. The usual commands are as follows:
hexo clean
hexo generate
hexo algolia
QWeather Widget 🇨🇳
Cosy mainly targets domestic users and integrates QWeather cards on the homepage. Register via QWeather Developer Service.
After registering, fill in your appKey
and cityCode
in the configuration.
weather:
enable: true
# Replace
cityCode: cityCode
appKey: appKey
You can find your city's cityCode
in the official region list repository's China-City-List-latest.csv
.
Front Matter
In Hexo's Markdown files, a typical YAML-formatted Front Matter
might look like this:
---
title: My Article Title
categories:
- javascript
tags:
- Programming
- JavaScript
---
top
To pin an article to the top, assign a numerical value to the top
metadata. Articles with a specified top
value will be marked with a 📌 icon in the category list.
For example, if there are three articles:
- Article 1
---
title: Article 1
top: 0
categories:
- javascript
---
- Article 2
---
title: Article 2
top: 1
categories:
- javascript
---
- Article 3
---
title: Article 3
categories:
- javascript
---
Then, under the javascript
category, the sort order will be: Article 1 > Article 2 > Article 3
.
status
This is used to differentiate the status of articles and can be quickly filtered
using the category list. The Cosy theme comes with 4 built-in statuses:
- done: Completed
- doing: In Progress
- todo: To Do
- other: Abandoned
For example:
---
title: Article 1
categories:
- javascript
status: done
---
Custom Page
Hexo uses Markdown (or other rendering engine) to parse your article and generate static files for quick loading. In addition to the default generated articles and archive pages, Hexo also allows you to create custom pages.
Roadmap
To create a page, you can use the command
hexo new page roadmap
After success, a new folder /roadmap/index.md
will be generated under the source/
folder
You can refer to this template for configure /roadmap/index.md
, parameter description:
- title: Title of roadmap page HTML
- initYear: Default displayed year
---
title: Title - roadmap
layout: roadmap
initYear: 2023
years:
2022:
- title: reading
start: 01-01
end: 1-5
- title: cooking
start: 02-01
end: 05-30
2023:
- title: Yue Mo Du Qian
start: 01-01
end: 1-2
- title: To use and preserve in vain
start: 02-01
end: 06-30
- title: Short Song Line
start: 10-26
end: 10-31
content: Singing and drinking, geometry of life! For example, the morning dew is more bitter than the past. Be generous and forget your worries. How to relieve worries? Only Du Kang. Qingqing Zijin, carefree in my heart. But for your sake, I have been pondering until now. Yo, deer chirp, eating wild apples.
- title: Prosody enlightenment
start: 11-01
end: 11-31
content: The flowers bloom in red and beautiful colors, and the water ripples with azure glass. Going to my wife to explore my neighbor's date, going to my wife to plant a backyard sunflower
---
Resume
To create a page, you can use the command
hexo new page resume
After success, a new folder will be generated folder /resume/index.md'
under the source/
You can refer to this template for configure /resume/index.md
, parameter description:
- title: The title of the resume page's HTML
- avatar: Address of the avatar image
---
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 ~ today
- 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
---