Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hexo-theme-particlex) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Hexo-Theme-ParticleX
ParticleX 主题,诞生原因是因为原来的 Particle 主题不维护了,但是我觉得还是很好的
原来用的是 Vue 2 + Ant Design Vue 1,现更新到 Vue 3,去除 Ant Design Vue 采用自定义样式,图标更改为 Font Awesome 6,CDN 改为 Staticfile
原项目 README.md
里说:
目前有 Full、Night 和 Maiden 两个主题样式
虽然更改后只有一种了,如果你想改颜色就在 particlex.css
里 Ctrl+F
替换吧
演示
安装
cd themes
git clone https://github.com/argvchs/hexo-theme-particlex.git particlex --depth=1
关闭自带 Highlight
在博客根目录下的
_config.yml
,修改highlight
和prismjs
参数highlight: enable: false line_number: true auto_detect: false tab_replace: "" wrap: true hljs: false prismjs: enable: false preprocess: true line_number: true tab_replace: ""
如果使用 Pandoc 还需要设置一下
pandoc: extra: - "no-highlight": extensions: - "+hard_line_breaks" - "+emoji" - "-implicit_figures"
禁用年度/月度归档
Hexo 会自动生成年度/月度归档,可是 ParticleX 主题没有这个功能
我太懒了archive_generator: enabled: true per_page: 0 yearly: false monthly: false daily: false
修改完请 hexo cl
清除缓存
配置
avatar: # Avatar image
headBlockEnable: true # Home page info block
background: # Home page background image
highlightStyle: github # Highlight style
导航栏
为了方便,主题使用的图标是 Font Awesome 6 图标
menu: home: name: house theme: solid src: / about: name: id-card theme: solid src: /about archives: name: box-archive theme: solid src: /archives categories: name: bookmark theme: solid src: /categories tags: name: tags theme: solid src: /tags # <name>: # name: <icon-name> # theme: <icon-theme> # src: <link-url>
主页信息卡片
和导航栏差不多
description
支持 Markdown 格式如果图标链接或友链为空,请在
iconLinks:
或friendLinks:
后添加一个{}
card: enable: true description: - "Description" - "..." iconLinks: {} # <name>: # name: <icon-name> # theme: <icon-theme> # link: <link-url> friendLinks: {} # <name>: <link-url>
文档缩略
一般来说,缩略展示文档只需要在文档中添加
<!-- more -->
即可,缩略内容在显示全文中也会出现但考虑到不想把缩略内容放在正文里,就添加了此参数,在 Front-Matter 里设置
支持 Markdown 格式
description: "Normal **Strong** _Italic_"
页脚
考虑到博客部署在服务器并使用自己域名的情况,按国家规定需要在网站下边添加备案消息
如没有需要显示备案消息的可以关闭
footer: since: 2022 ICP: enable: false code: link:
Polyfill
使用 Polyfill.io 自动根据 UA 处理新的 JS API 兼容
可以配合 Hexo-Renderer-BabelJS 插件处理 JS 语法
polyfill: enable: true features: - default
渲染数学公式
使用 $\mathrm{K\kern{-0.2em}\raise{0.21em}{\scriptstyle{A}}\kern{-0.17em}T\kern{-0.14em}\lower{0.5ex}{E}\kern{-0.115em}X}$ 渲染数学公式,默认关闭
math: enable: false
文章加密
使用 AES 加密算法,在 Front-Matter 里设置
password
作为密码,使用请安装插件 Hexo-Helper-Cryptocrypto: enable: false
搜索
嵌入到 Archives 中的搜索,搜索数据是用 Hexo-Generator-Search-Lite 生成,默认关闭,使用需要安装上述插件并设置
optimize: true
目前只支持搜索文档的 Title Categories Tags(我太弱了)
要同时在主题和根目录的两个
_config.yml
添加配置# Theme config search: enable: false path: /search.json
# Site config search: path: /search.json optimize: true
Gitalk
Gitalk 是一个基于 GitHub Issue 和 Preact 的评论系统
考虑到博客可能部署到多个网站同步评论,但 OAuth APP 只能有一个回调 URL,所以添加了
sites
参数用于其他网站的评论,请注册多个 Oauth APP同样如果没有其他网站,请在
sites:
后添加一个{}
由于 Gitalk 官方 CORS 代理用的是 Cloudflare,速度过慢,添加了
proxy
参数,搭建 CORS 代理可以看这篇文章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: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru, de, pl and ko are currently available proxy: # CORS proxy sites: # Sites {} # <www.example.com>: # clientID: <client-id> # clientSecret: <client-secret>
Giscus
Giscus 是一个由 GitHub Discussions 支持的评论系统
在 Giscus.app 设置好各项后,会在下面生成一个
<script>
标签,在主题内填入即可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: zh-CN
Waline
Waline 是一个简单、安全的评论系统
详见:在 ParticleX 上使用 Waline | Yuzi's Blog
注意如果不需要
locale
参数,请在locale:
后添加一个{}
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 {} # e.g.: # placeholder: Leave a comment 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/emojis@1.0.1/weibo - https://unpkg.com/@waline/emojis@1.0.1/alus - https://unpkg.com/@waline/emojis@1.0.1/bilibili - https://unpkg.com/@waline/emojis@1.0.1/qq - https://unpkg.com/@waline/emojis@1.0.1/tieba - https://unpkg.com/@waline/emojis@1.0.1/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: zh-CN # 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 是一个一个简洁、安全、免费的静态网站评论系统
twikoo: enable: false envId: region: path: location.pathname lang: zh-CN
写在最后
本项目采用 MIT 开源许可证,欢迎大家贡献,你可以随意打开一个 Issue 来进行提问,有任何改进想法都可以进行 Fork,期待您的 Pull Request