ParticleX 主题,诞生原因是因为原来的 Particle 主题不维护了,但是我觉得还是很好的。
原来用的是 Vue 2 + Ant Design Vue 1,现更新到 Vue 3,去除 Ant Design Vue 采用自定义样式,图标更改为 Font Awesome 6,CDN 改为 ZStatic。
原项目 README.md
里说:
目前有 Full、Night 和 Maiden 两个主题样式。
但是更改后只有一种了,如果你想改颜色就在 main.css
里替换吧。
cd themes
git clone https://github.com/theme-particlex/hexo-theme-particlex.git particlex --depth=1
然后在根目录 _config.yml
设置主题为 ParticleX 即可。
theme: particlex
Hexo 有自带的代码高亮,但是和 ParticleX 的不兼容。
highlight:
enable: false
prismjs:
enable: false
如果使用 Hexo 7.0.0 之后的版本只需要修改为:
syntax_highlighter:
如果使用 Pandoc 还需要设置一下:
pandoc:
extra:
- no-highlight:
Hexo 会自动生成年度月度归档,可是 ParticleX 主题没有这个功能。我太懒了
archive_generator:
enabled: true
per_page: 0
yearly: false
monthly: false
daily: false
修改完请 hexo cl
清除缓存。
background
参数是一个列表,打开时会随机加载一个背景。
# Avatar image
avatar: /images/avatar.jpg
# Home page background image
background:
- /images/background.jpg
# Loading image
loading: /images/loading.gif
# Optional colors for category and tag
colors:
- "#ffa2c4"
- "#00bcd4"
- "#03a9f4"
- "#00a596"
- "#ff7d73"
为了方便,主题使用的图标是 Font Awesome 6 图标。
# ParticleX theme icon is adopts the Font Awesome 6
# https://fontawesome.com
# Main menu navigation
menu:
Home:
name: house
theme: solid
link: /
About:
name: id-card
theme: solid
link: /about
Archives:
name: box-archive
theme: solid
link: /archives
Categories:
name: bookmark
theme: solid
link: /categories
Tags:
name: tags
theme: solid
link: /tags
description
支持 Markdown 格式。
图标链接 iconLinks
配置和导航栏配置相同。
# Side info card
card:
enable: true
description: |
Description
...
iconLinks:
friendLinks:
Argvchs: https://argvchs.github.io
考虑到博客部署在服务器并使用自己域名的情况,按规定需要在网站下边添加备案消息。
如没有需要显示备案消息的可以关闭。
# Footer info
footer:
since: 2022
# Customize the server domain name ICP
ICP:
enable: false
code:
link:
使用 Polyfill.io 自动根据 UA 处理新的 JS API 兼容。
可以配合 Hexo-Babel 插件处理 JS 语法兼容。
Polyfill 在国内一些省份被墙,这里换成了阿里的 Polyfill。
# Polyfill
# https://polyfill.io
polyfill:
enable: true
features:
- default
使用 Highlight.js 代码高亮。
样式可以在这里选择,默认为 GitHub。
# Highlight.js
# https://highlightjs.org
highlight:
enable: true
style: github
使用 KaTeX 渲染数学公式。
# KaTeX math rendering
math:
enable: false
简单的点击图片放大缩小的预览。
# Image preview
preview:
enable: true
一般来说,缩略展示文档只需要在文档中添加 <!-- more -->
即可,缩略内容在显示全文中也会出现。
但考虑到不想把缩略内容放在正文里,就添加了此参数,在 Front-Matter 里设置。
支持 Markdown 格式。
description: |
Normal _Italic_ **Strong**
在 Front-Matter 里设置 pinned
作为置顶参数,越大越靠前,默认为 0。
使用 AES 加密算法,在 Front-Matter 里设置 secret
作为密码,使用请安装插件 Hexo-Helper-Crypto。
# Article encryption
crypto:
enable: false
嵌入到 Archives 中的搜索。
目前只支持搜索文档标题。
# Search
search:
enable: false
giscus 是一个由 GitHub Discussions 支持的评论系统。
在 giscus.app 设置好各项后,会在下面生成一个 <script>
标签,在主题内填入即可。
# giscus
# https://github.com/giscus/giscus
giscus:
enable: false
src: https://giscus.app/client.js
repo:
repoID:
category:
categoryID:
mapping: pathname
strict: 0
reactionsEnabled: 1
emitMetadata: 0
inputPosition: bottom
theme: preferred_color_scheme
lang:
Gitalk 是一个基于 GitHub Issue 和 Preact 的评论系统。
由于 Gitalk 官方 CORS 代理用的是 Cloudflare,速度过慢,搭建 CORS 代理可以看这篇文章。
# Gitalk
# https://github.com/gitalk/gitalk
gitalk:
enable: false
clientID: # Default ClientID
clientSecret: # Default ClientSecret
repo: # The name of repository of store comments
owner: # GitHub repo owner
admin: # GitHub repo owner and collaborators, only these guys can initialize github issues
language: # en, zh-CN, zh-TW, es-ES, fr, ru, de, pl and ko are currently available
proxy: # CORS proxy
Waline 是一个简单、安全的评论系统。
详见:在 ParticleX 上使用 Waline | Yuzi's Blog
# Waline
# https://github.com/walinejs/waline
waline:
enable: false
serverURL: # Waline server address url, you should set this to your own link
locale: # Locale: https://waline.js.org/guide/client/i18n.html#locale-option
commentCount: true # If false, comment count will only be displayed in post page, not in home page
pageview: false # Pageviews count, Note: You should not enable both `waline.pageview` and `leancloud_visitors`
emoji: # Custom emoji
- https://unpkg.com/@waline/[email protected]/weibo
- https://unpkg.com/@waline/[email protected]/alus
- https://unpkg.com/@waline/[email protected]/bilibili
- https://unpkg.com/@waline/[email protected]/qq
- https://unpkg.com/@waline/[email protected]/tieba
- https://unpkg.com/@waline/[email protected]/tw-emoji
meta: # Comment information, valid meta are nick, mail and link
- nick
- mail
- link
requiredMeta: # Set required meta field, e.g.: [nick] | [nick, mail]
- nick
lang: # Language, available values: en-US, zh-CN, zh-TW, pt-BR, ru-RU, jp-JP
wordLimit: 0 # Word limit, no limit when setting to 0
login: enable # Whether enable login, can choose from 'enable', 'disable' and 'force'
pageSize: 10 # Comment per page
Twikoo 是一个一个简洁、安全、免费的静态网站评论系统。
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
enable: false
envID:
region:
path: location.pathname
lang:
本项目采用 MIT 开源许可证,欢迎大家贡献,你可以随意打开一个 Issue 来进行提问,有任何改进想法都可以进行 Fork,期待您的 Pull Request!