进阶使用

帮助我们完善此页面

使用 Git 管理 Hexo

正如 开始使用 中提到的，我们建议使用 git 获取主题文件，以便第一时间跟进新版本。

但是如果你有使用 Git 管理整个站点文件的需求话，需要使用 git submodule 避免冲突。

git submodule 允许将另一个仓库克隆至你的项目，同时还保持提交的独立。

  1. 获取「Cards」为子模块

    git submodule add https://github.com/ChrAlpha/hexo-theme-cards.git themes/cards

  2. 跟进「Cards」为远程最新版本

    git submodule update --remote

这样一来，之后只需要克隆站点仓库便可获取站点文件及主题文件。

git clone --recurse-submodules https://github.com/ChrAlpha/[website source].git

更多关于 git submodule 的详细内容可以参考 Git 文档。

平滑更新

基于 Hexo 3.0 新增「数据文件」特性，无需直接更改主题 _config.yml 便可达到相同效果。以此使得主题配置文件的修改可存储与主题文件夹外，方便直接使用 Git 管理主题版本，而无需每次更新手动更改主题配置文件。

在站点根目录下创建 source/_data/cards.yml（若 source/_data 目录不存在，请新建）。并将你需要修改的内容填写至此（无需复制整个主题配置文件），根据约定，这里的内容将覆盖主题配置文件中对应的内容。

此特性从「Cards」v0.5.0 开始支持。

{% note success %} 例子： 比如你需要修改 opengraph 配置，在主题配置文件中是： 
head: 

  favicon: 
  # ...

  opengraph: 
    enable: true
    type: 
    twitter_card: summary_large_image
    twitter_id: 
    twitter_site: 
    image: page.thumbnail
    fb_admins: 
    fb_app_id:
你只需要在 `source/_data/cards.yml` 中添加： 
head: 
  opengraph: 
    twitter_id: ichralpha
    twitter_site: ichralpha
{% endnote %}

CDN

使用 CDN 获取所需的静态资源通常能使请求更加快速、稳定。而主题默认采用 jsDelivr（国内备案，网宿接入，100 SLA，在全球范围内都有很不错的速度），当然你也可以自行选择其他 CDN。

此方面配置请在主题配置文件中定位到 vendors 并修改相应配置。

style

主题默认 CSS 文件，如果你有自定义 style ，请务必替换为相应的 CDN 地址或者将此项留空。

jsDelivr

style: https://cdn.jsdelivr.net/npm/hexo-theme-cards@1.4/dist/css/style/main.min.css

UNPKG

style: https://unpkg.com/hexo-theme-cards@1.4/dist/css/style/main.min.css

darkmode

暗色模式样式及切换按钮。

jsDelivr

darkmode: 
  css: https://cdn.jsdelivr.net/npm/hexo-theme-cards@1.4/dist/css/style/dark.min.css
  js: https://cdn.jsdelivr.net/npm/hexo-theme-cards@1.4/dist/js/darkmode.min.js

UNPKG

darkmode: 
  css: https://unpkg.com/hexo-theme-cards@1.4/dist/css/style/dark.min.css
  js: https://unpkg.com/hexo-theme-cards@1.4/dist/js/darkmode.min.js

highlight

https://theme-cards.ichr.me/expand/#highlight

主题定制 highlight 样式。

jsDelivr

highlight: https://cdn.jsdelivr.net/npm/hexo-theme-cards@1.4/dist/css/highlight/

UNPKG

highlight: https://unpkg.com/hexo-theme-cards@1.4/dist/css/highlight/

hljs

https://highlightjs.org/

原生 highlight.js 样式。

详见：https://theme-cards.ichr.me/expand/#hljs

jsDelivr

hljs: https://cdn.jsdelivr.net/npm/highlight.js@10.1.2/styles/

UNPKG

hljs: https://unpkg.com/highlight.js@10.1.2/styles/

cdnjs

hljs: https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/styles/

css.net

hljs: https://cdnjs.loli.net/ajax/libs/highlight.js/10.1.2/styles/

prismjs

https://prismjs.com/

PrismJS 样式。

详见：https://theme-cards.ichr.me/expand/#prismjs

jsDelivr

prismjs: https://cdn.jsdelivr.net/npm/prismjs@1.21.0/themes/

UNPKG

prismjs: https://unpkg.com/prismjs@1.21.0/themes/

cdnjs

prismjs: https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/

css.net

https://cdnjs.loli.net/ajax/libs/prism/1.21.0/themes/

lazyload

Vanilla-Lazyload 17.1.2 https://github.com/verlok/lazyload

主题内置图片 Lazyload 功能，默认调用 Vanilla Lazyload。

详见 https://theme-cards.ichr.me/expand/#Lazyload

jsDelivr

lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.1.2/dist/lazyload.min.js

UNPKG

lazyload: https://unpkg.com/vanilla-lazyload@17.1.2/dist/lazyload.min.js

cdnjs

lazyload: https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.1.2/lazyload.min.js

css.net

lazyload: https://cdnjs.loli.net/ajax/libs/vanilla-lazyload/17.1.0/lazyload.min.js

valine

https://github.com/xcss/Valine https://valine.js.org/

Valine 评论系统。

详见 https://theme-cards.ichr.me/third-party/#Valine

jsDelivr

valine: https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js

UNPKG

valine: https://unpkg.com/valine@1.4.14/dist/Valine.min.js

cdnjs

valine: https://cdnjs.cloudflare.com/ajax/libs/valine/1.4.14/Valine.min.js

css.net

valine: https://cdnjs.loli.net/ajax/libs/valine/1.4.14/Valine.min.js

minivaline

https://github.com/MiniValine/MiniValine https://minivaline.github.io/

MiniValine 评论系统。

详见 https://theme-cards.ichr.me/third-party/#MiniValine

jsDelivr

minivaline: https://cdn.jsdelivr.net/npm/minivaline@2.7.5/dist/MiniValine.min.js

UNPKG

minivaline: https://unpkg.com/minivaline@2.7.5/dist/MiniValine.min.js

artalk

https://github.com/qwqcode/Artalk

Artalk 评论系统。

详见 https://theme-cards.ichr.me/third-party/#Artalk。

jsDelivr

artalk:
  css: https://cdn.jsdelivr.net/npm/artalk@1.0.6/dist/Artalk.css
  js: https://cdn.jsdelivr.net/npm/artalk@1.0.6/dist/Artalk.js

UNPKG

artalk:
  css: https://unpkg.com/artalk@1.0.6/dist/Artalk.css
  js: https://unpkg.com/artalk@1.0.6/dist/Artalk.js

wildfire

https://github.com/cheng-kang/wildfire https://wildfire.js.org

Wildfire 评论系统。

详见 https://theme-cards.ichr.me/third-party/#Wildfire

jsDelivr

wildfire: https://cdn.jsdelivr.net/npm/wildfire@0.3.9/dist/wildfire.auto.js

UNPKG

wildfire: https://unpkg.com/wildfire@0.3.9/dist/wildfire.auto.js

mathjax

https://www.mathjax.org/

MathJax 数学公式渲染。

jsDelivr

mathjax: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js

UNPKG

mathjax: https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js

cdnjs

mathjax: https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.0.5/es5/tex-mml-chtml.js

css.net

mathjax: https://cdnjs.loli.net/ajax/libs/mathjax/3.0.5/es5/tex-mml-chtml.js

katex

https://katex.org/

KaTeX 数学公式渲染。

katex:
  css: https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css
  js: https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js

UNPKG

katex:
  css: https://unpkg.com/katex@0.12.0/dist/katex.min.css
  js: https://unpkg.com/katex@0.12.0/dist/katex.min.js

cdnjs

katex:
  css: https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css
  js: https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.js

css.net

katex:
  css: https://cdnjs.loli.net/ajax/libs/KaTeX/0.12.0/katex.min.css
  js: https://cdnjs.loli.net/ajax/libs/KaTeX/0.12.0/katex.min.js

busuanzi

https://busuanzi.ibruce.info

不蒜子计数系统。

详见 https://theme-cards.ichr.me/third-party/#不蒜子

此项默认从官方 CDN 而非 jsDelivr 加载。

官方 CDN

busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

jsDelivr

busuanzi: https://cdn.jsdelivr.net/npm/busuanzi@2.3.0/bsz.pure.mini.js

UNPKG

busuanzi: https://unpkg.com/busuanzi@2.3.0/bsz.pure.mini.js

Artitalk

https://github.com/ArtitalkJS/Artitalk

基于 Leancloud、可实时发布说说的 JS 组件。

jsDelivr

artitalk: https://cdn.jsdelivr.net/npm/artitalk@3.1.2/artitalk.min.js

UNPKG

artitalk: https://unpkg.com/artitalk@3.1.2/artitalk.jss

jQuery

jQuery 3.4.1 https://github.com/jquery/jquery/ https://jquery.com/

详见 https://theme-cards.ichr.me/expand/#jQuery

jsDelivr

jquery: https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js

UNPKG

jquery: https://unpkg.com/jquery@3.4.1/dist/jquery.min.js

cdnjs

jquery: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

css.net

jquery: https://cdnjs.loli.net/ajax/libs/jquery/3.4.1/jquery.min.js

fancybox

fancybox 3.5.7 https://github.com/fancyapps/fancybox/ https://fancyapps.com/fancybox/3/

详见 https://theme-cards.ichr.me/expand/#fancybox

jsDelivr

fancybox: 
  css: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css
  js: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js

UNPKG

fancybox: 
  css: https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css
  js: https://unpkg.com/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js

cdnjs

fancybox: 
  css: https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css
  js: https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js

css.net

fancybox: 
  css: https://cdnjs.loli.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css
  js: https://cdnjs.loli.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js

custom_script

自定义 scripts，将追加至 </body> 前。