Frontend | Icarus主题美化

1. 为博客添加nest动态线条特效

   在themes\icarus\layout\layout.jsx的body中添加如下代码，CDN可根据自己使用的修改。

   <script type="text/javascript" color="30,144,255" opacity='0.5' zIndex="-1" count="150" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

   除了通过CDN加载，也可以下载到本地使用，详见官方文档。

   color="255,255,255" opacity='0.7' # 改成了自己喜欢的颜色

2. Code Highlight

   可以从这些code highlight中找自己喜欢的styles。highlight.js/src/styles at 9.18.1 · highlightjs/highlight.js (github.com)

   article:
       # Code highlight settings
       highlight:
           # Code highlight themes
           # https://github.com/highlightjs/highlight.js/tree/master/src/styles
           theme: xt256 # 赛博朋克主题的暗黑code highlight
           # Show copy code button
           clipboard: true
           # Default folding status of the code blocks. Can be "", "folded", "unfolded"
           fold: unfolded

   我的最爱：monokai

3. 支持Latex

   安装mathjax插件

   npm uninstall hexo-rendered-marked
   npm install hexo-filter-mathjax

   修改主博客_config.yaml

   mathjax:
     tags: none # or 'ams' or 'all'
     single_dollars: true # enable single dollar signs as in-line math delimiters
     cjk_width: 0.9 # relative CJK char width
     normal_width: 0.6 # relative normal (monospace) width
     append_css: true # add CSS to pages rendered by MathJax
     every_page: false # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter

   设置md页面头部

   mathjax: true

References

• icarus个性化配置 - Hongjie’s blog (anticme.com)
• (1278条消息) (一)设置hexo支持Latex公式_hexo 公式_恒友成的博客-CSDN博客