起因
在更新日志撰写完毕后,我觉得开设一个帖子,专门存放一些Hexo与Markdown之类的代码与功能,这就是LimeLAB的由来。 主要还是没东西写罢了,只不过是为赋新词强说愁
实验性功能[测试]
以下存放代码以及功能实现,一方面是便于我调用,另一方面是为了水一篇帖子
Solitude部分功能测试
Ruby与Spoiler
😋请先确保安装hexo-renderer-markdown-it
提示
我在solitude无法使用Ruby这个插件,可能和我其它安装的插件有关系,也可能是主题问题。
1 2 $ npm un hexo-renderer-marked --save $ npm i hexo-renderer-markdown-it --save
之后在config.yml中添加配置内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 markdown: preset: 'default' render: html: true xhtmlOut: false langPrefix: 'language-' breaks: true linkify: true typographer: true quotes: '“”‘’' enable_rules: disable_rules: plugins: anchors: level: 2 collisionSuffix: '' permalink: false permalinkClass: 'header-anchor' permalinkSide: 'left' permalinkSymbol: '¶' case: 0 separator: '-' images: lazyload: false prepend_root: false post_asset: false inline: false
Ruby是一个文字注释插件,可以在文字上方标注注释信息
我是Lime.不玩原神 这其实是我用html写的
1 <ruby > 我是Lime.<rt > 不玩原神</rt > </ruby >
Spoiler是一个文字遮盖插件,可以将文本进行遮盖,支持纯色遮盖与模糊遮盖。
很简单,安装插件即可 1 $ npm install hexo-spoiler --save
接着,在config.yml中添加
1 2 3 4 spoiler: style: blur color: black p: false
1 2 {% spoiler Lime世界第一帅 %}与 {% spoiler style:box Lime世界第一帅 %}
Lime世界第一帅
与Lime世界第一帅
Tikz几何支持
如图所示,
x f ( x ) f ( x ) = x f ( x ) = sin x f ( x ) = 1 20 e x
参照本文Tikz On
Hexo
数学公式支持
警告
在安装本文的两个插件前,请先卸载其它的hexo数学公式类插件(渲染)
测试一下
没啥可说的,安装以下两个插件即可
1 2 3 pkg install pandoc npm i hexo-filter-mathjax --save npm i hexo-renderer-pandoc --save
接着,在hexo根目录下的config.yml下添加:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 mathjax: tags: none single_dollars: true cjk_width: 0.9 normal_width: 0.6 append_css: true every_page: false packages: extension_options: {} pandoc: args: - "-f" - "markdown" - "-t" - "html" - "--mathjax"
在md顶部添加mathjax: true即可在页面生效,例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 ૧(●´৺`●)૭ --- title: LAB date: 2025-01-15 22:06:35 cover: tags: - 实验室- 测试- Hexo- 博客categories: 日常 top: 499 mathjax: true "这是我加是哈” ---
如何使用呢?使用LateX的语法即可生效,在公式上下添加,如下 ,
1 2 3 4 5 6 $ $ f(x)=f(x+T),T\in N^ {*} 什么周期 $ $ 调整字号大小 \tiny { }, \scriptsize { }, \small { }, \normal { }, \large { }, \Large { }, \LARGE { }, \huge { }, \Huge { }
, 什 么 周 期
Hexo-Admonition
Hexo 内容辅助插件,支持将类似 reStructuredText 的警告提示块添加到
Markdown 文档中。
官方Github
其实也没啥好说的,安装之后直接看示例就可以了
1 npm install hexo-admonition --save
1 2 3 4 !!! note 原神 这是一条note提示块 !!! warning 原神 这是一条warning提示块
以此类推,接下来我将会把所有可用的提示块样式列举出来
就是这样子,个人感觉在md中使用还是很方便的! 其中
1 2 !!! info "" 这是一条不带标题的info提示块
等等,请在自定义css目录下创建Hexo-admonition.css
然后在其中添加以下css代码,以确保该插件可以正常显示以及字体颜色正确。
提示
如果你不知道什么是自定义css目录,请在博客搜索相关内容
或者单击这里查看教程
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 .admonition { margin: 1.5625em 0; padding: .6rem; overflow: hidden; color: #808080; font-size: .64rem; page-break-inside: avoid; border-left: .3rem solid #42b983; border-radius: .3rem; box-shadow: 0 0.1rem 0.4rem rgba(0,0,0,.05), 0 0 0.05rem rgba(0,0,0,.1); background-color: #fafafa; } p.admonition-title { color: #808080; position: relative; margin: -.6rem -.6rem .8em -.6rem !important; padding: .4rem .6rem .4rem 2.5rem; font-weight: 700; background-color:rgba(66, 185, 131, .1); } .admonition-title::before { position: absolute; color: #808080; top: .9rem; left: 1rem; width: 12px; height: 12px; background-color: #42b983; border-radius: 50%; content: ' '; } .info>.admonition-title, .todo>.admonition-title { background-color: rgba(0,184,212,.1); color: #808080; } .warning>.admonition-title, .attention>.admonition-title, .caution>.admonition-title { background-color: rgba(255,145,0,.1); color: #808080; } .failure>.admonition-title, .missing>.admonition-title, .fail>.admonition-title, .error>.admonition-title { background-color: rgba(255,82,82,.1); color: #808080; } .admonition.info, .admonition.todo { border-color: #00b8d4; color: #808080; } .admonition.warning, .admonition.attention, .admonition.caution { border-color: #ff9100; color: #808080; } .admonition.failure, .admonition.missing, .admonition.fail, .admonition.error { border-color: #ff5252; color: #808080; } .info>.admonition-title::before, .todo>.admonition-title::before { background-color: #00b8d4; border-radius: 50%; color: #808080; } .warning>.admonition-title::before, .attention>.admonition-title::before, .caution>.admonition-title::before { background-color: #ff9100; border-radius: 50%; color: #808080; } .failure>.admonition-title::before,.missing>.admonition-title::before,.fail>.admonition-title::before,.error>.admonition-title::before{ background-color: #ff5252;; border-radius: 50%; color: #808080; } .admonition>:last-child { margin-bottom: 0 !important; color: #808080; }
在md中引入Geogebra
这个功能就是使用</iframe>
来引入网页 功能如下
如果是几何的话甚至可以拖动!这样就可以很方便的在Hexo引入数学函数图像,方便易用。
1 2 3 4 <iframe src ="https://www.geogebra.org/material/iframe/id/aybe2kg6/width/400/height/400/" width ="400px" height ="400px" ></iframe >
如何创建分享链接?
首先,你需要一个账户,这太简单了,使用邮箱即可注册,这里跳过不讲
打开Geogebra
Classic 输入你要的函数之后点击“分享”
如果你不知道如何正确使用Geogebra,点击这里开始入门
在输入需要保存的文件名后选择保存即可 之后,选择链接插入
进行复制
你大概率会得到这样一串这样的代码
1 <iframe scrolling ="no" title ="test" src ="https://www.geogebra.org/material/iframe/id/aybe2kg6/width/360/height/801/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/false/ctl/false" width ="360px" height ="801px" style ="border:0px;" > </iframe >
你要做的,就是对以下链接进行净化
1 https://www.geogebra.org/material/iframe/id/aybe2kg6/width/360/height/801/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/false/rc/false/ld/false/sdz/false/ctl/false
以下为净化后的链接 就是把height之后的参数删除了而已
1 2 https://www.geogebra.org/material/iframe/id/aybe2kg6/width/360/height/801/
如果你需要开启额外的功能,可以参照这篇文档 通过输入
参数
/布尔值
的方式来决定你是否要在插入的链接里开启部分功能!
接着,将链接放回代码中 建议将链接里和代码里的width
与height
的值修改为400!在我看来这样的阅读效果是最佳的!
1 <iframe scrolling ="no" title ="test" src ="https://www.geogebra.org/material/iframe/id/aybe2kg6/width/400/height/400/" width ="400px" height ="400px" style ="border:0px;" > </iframe >
就像这样子!完事!接着将代码直接粘贴到你的md文件中即可被正确加载!