1

Gridea 短代码效果测试 ✨


一、模糊遮罩短代码 blur

鼠标悬浮以下文字即可显示清晰内容:
{% blur 这是一段被模糊处理的文字,鼠标移上来就会立刻清晰显示,测试成功! %}

{% blur 测试多内容模糊:Gridea+Next主题 原生JS短代码完美适配,无报错、无依赖,超好用~ %}

二、折叠面板短代码 fold

默认折叠(点击展开)

{% fold 点击展开查看折叠内容 %}
✅ 这是折叠后的内容区域
✅ 支持换行、支持Markdown语法
✅ 比如:加粗文本斜体文本超链接测试
✅ 多行内容也能完美展示,测试折叠面板功能正常!
{% endfold %}

折叠面板嵌套测试

{% fold 点击展开查看嵌套内容 %}

  1. 一级折叠内容
    {% fold 点击展开二级折叠 %}
    ✅ 二级折叠内容正常显示,功能无问题~
    {% endfold %}
  2. 百度
    {% endfold %}

三、Notice 带图标通知框 全类型测试(warning/info/note/tip 4种)

{% notice warning %}⚠️ 警告类通知框 - warning 样式测试,背景浅红+左侧红边,内置原生SVG图标 ✔️{% endnotice %}

{% notice info %}ℹ️ 信息类通知框 - info 样式测试,背景浅橙+左侧橙边,内置原生SVG图标 ✔️{% endnotice %}

{% notice note %}📌 笔记类通知框 - note 样式测试,背景浅蓝+左侧蓝边,内置原生SVG图标 ✔️{% endnotice %}

{% notice tip %}✅ 提示类通知框 - tip 样式测试,背景浅绿+左侧绿边,内置原生SVG图标 ✔️{% endnotice %}

四、时间线短代码 timeline 全标签类型测试(样式/文章/页面/自定义标签)

时间线1(样式+文章 双标签)

{% timeline date="2026-01-17" title="短代码适配完成" description="完美移植原生JS+CSS短代码,无任何报错,所有效果正常显示,Gridea构建预览生效。" tags="样式, 文章" %}

时间线2(页面 单标签)

{% timeline date="2026-01-16" title="主题样式优化" description="完成暗黑模式适配、样式冲突修复、所有标签颜色自定义,响应式适配手机端。" tags="页面" %}

时间线3(自定义标签)

{% timeline date="2026-01-15" title="功能测试完成" description="模糊、折叠、Notice、时间线 四类短代码全部测试通过,效果完美符合预期。" tags="测试" %}

五、混合用法测试(短代码相互搭配)

{% notice tip %}
{% blur 混合效果测试:通知框内嵌套模糊文字,双重效果正常生效 ✔️ %}
{% endnotice %}

{% fold 点击展开查看混合内容 %}
{% notice info %}折叠面板内嵌套通知框,多短代码混用无冲突,完美兼容~{% endnotice %}
{% blur 折叠+模糊+通知框 三重混用测试成功! %}
{% endfold %}

✅ 所有短代码测试完毕

全部功能均正常生效,无语法错误、无样式冲突,完美适配你的 Gridea-Next 主题!

1被你发现啦~1


$\ \ \ \ \ $ $\ \ \ \ \ $ & $\ \ \ \ \ [![](https://cdn.luogu.com.cn/upload/usericon/1861389.png?xossprocess=image/circle,r100/format,png)](/user/1861389)[[![](https://cdn.luogu.com.cn/upload/usericon/1861389.png?x-oss-process=image/circle,r_100/format,png)](/user/1861389) [{\textbf {\textsf {\color{fe4c61}_ruyingsuixing_}}} $ ](https://www.luogu.com.cn/user/1861389)$; ;;;;;;;\ \ \ \ [[{\textbf {\textsf {\color{3498db}at_coder}}} $](https://www.luogu.com.cn/user/1006023)

欢迎来到 _ruyingsuixing_ 的个人中心\color{orange} \text{\huge欢迎来到 } \color{red}\text{\Huge \_ruyingsuixing\_ } \color{blue} \text {\huge 的个人中心}

@_ruyingsuixing_的详细主页\color{green} \text{\Large @\_ruyingsuixing\_的详细主页}

edit it\color{FFC116} \texttt{edit\ it} 戳我!\color{FFC116} \boxed{ \color{E74C3C} \text{\large戳我!}}

次访问我的人好!你是第位客人。

_ruyingsuixing_\color{#FE4356}\Large\textrm{\_ruyingsuixing\_}

#1620655\color{gray}\texttt{\#1620655}$\quad\footnotesize\color{red}\boxed{\textrm{学}} \ ](https://www.luogu.com.cn/team/109931)[](https://www.luogu.com.cn/team/109931)[\footnotesize\color{grey}\boxed{\textrm{言}}\ ](https://www.luogu.com.cn/user/1620655/article)[](https://www.luogu.com.cn/user/1620655/article)[\footnotesize\color{cyan}\boxed{\textrm{测}}\ ](https://www.luogu.com.cn/user/1620655/practice)[](https://www.luogu.com.cn/user/1620655/practice)[\footnotesize\color{94d66d}{\boxed{\textrm{私(用于互关)}}}$

; ⁣ ⁣1 ⁣ ⁣, ⁣ ⁣ ⁣ ⁣, ⁣\fcolorbox{whi}{yellow}{\color{yellow}{;}}\!\!\fcolorbox{black}{blue}{\color{blue}{1\!\!,\!\!\!}}\fcolorbox{black}{red}{\color{red}{\!,\!}} CCF评级:NULL 级\text{CCF\,评级:\color{52c41a}NULL 级}

江南蒟蒻团成立时间: 2025-07-28 \text{江南蒟蒻团\color{gray}成立时间: 2025-07-28 }\color{white}\small{刷题!}

精美博客\normalsize\text{\color{0E1D69}{精美博客}}大工具箱\kern{0.6em}\normalsize\text{\color{0E1D69}\quad大工具箱}

洛谷排名\normalsize\text{洛谷排名}题解格式\kern{1.7em}\normalsize\text{{题解格式}}

大事祭\normalsize\text{大事祭}粉丝数量\kern{1.6em}\normalsize\text{\quad粉丝数量}

第一篇题解\normalsize\text{第一篇题解}Gの娱乐\kern{-0.4em}\normalsize\text{\quad Gの娱乐}

壶关要求\normalsize\text{壶关要求}留下评论\kern{1.7em}\normalsize\text{留下评论}

\kern{3.em}\color{grey}\tiny{↑都可以点喔↑}

 给岁月以OI, \color{red}『\ \text{给岁月以OI,}\ 』

 而不是给OI以岁月。 \color{orange}『\ \text{而不是给OI以岁月。}\ 』

QAQOI使IOIAKME\small\texttt{\color{#FA4129}本}\huge\texttt{\color{#FE9019}人}_{\small\texttt{\color{#FFE304}的}^{\large\texttt{\color{#FFEC01}萌\color{#FFF900}新}\small\texttt{\color{#FCFB03}Q\color{#F8FB07}A\color{#F1FB0B}Q}}}^{\large\texttt{\color{#FFB511}是}{\small\texttt{\color{#FFDC07}刚\color{#FFEF00}学}\large\texttt{\color{#FFF600}O\color{#FFFA00}I}}}\huge\texttt{\color{#E6F911}但\color{#92E82F}是}^{\large\texttt{\color{#39D54B}即}{\small\texttt{\color{#03C767}使}}}_{\normalsize\text{\color{#07C964}是\color{#00C789}这\color{#00C7A5}样}}\texttt{\color{#00CBC6}我\color{#00D0EB}也}^{\small\texttt{\color{#00D0F2}要}\normalsize\texttt{\color{#00D0F6}用}\texttt{\color{#03BEF4}蒟}_{\texttt{\color{#04AAEF}蒻}\large\texttt{\color{#078DE4}的}}}_{\scriptsize\texttt{\color{#01CDF6}声\color{#03C2F5}音\color{#04B4F2}大\color{#04A7EE}声\color{#0791E6}喊\color{#0A7BDD}出}}\mathcal{\color{#125BCD}IOI\color{#3D2AB5}AK\color{#A011AD}ME}

      \color{#0aa}\cancel{\ \ \ \textrm{\textit{\textbf{{\Large\color{#0af}到 }}}}^\textrm{\textit{\textbf{{\small\color{#e99100}此}}}}_\textrm{\textit{\textbf{\large\color{#778891}一}}}\textrm{\textit{\textbf{\LARGE\color{#9c1}游}}}\circlearrowleft\ \ }

ด้้้้้็้้้็็็็็้้้้้็็็็็้้้้้้็็็็็้้้้้็็็็็้้้้้้็็็็็้้้้้็็็็็้้้้้้็็็็็้้้้้็็็็็้้้้้้็
   i  欢迎来到我的主页 \color{#00B8D4} \rule{2pt}{44pt} \color{#E5F8FB} \rule[24pt]{190pt}{20pt} \color{#e8e8e8}\rule{0.5pt}{44pt} \color{#f5f5f5}\rule{0.5pt}{44pt} \color{#fafafa}\rule{0.5pt}{44pt} \kern{-190pt}\kern{-1.5pt} \color{#bfbfbf}\rule[0pt]{190pt}{0pt}\kern{-190pt} \color{#d6d6d6}\rule[-0.5pt]{190pt}{0pt}\kern{-190pt} \color{#ececec}\rule[-1pt]{190pt}{0pt}\kern{-190pt} \color{#f8f8f8}\rule[-1.5pt]{190pt}{0pt}\kern{-190pt} \color{black} \raisebox{24pt}{ \raisebox{6pt}{ \kern{-1pt} \color{#00B8D4}\large{\kern{2pt}\bf{i}\kern{5.5pt}} \raisebox{1.5pt}{ \color{#404040}\footnotesize \kern{-4pt}\sf\bf{欢迎来到我的主页} }}}\kern{-200pt}.
小秘密:\kern{4pt}\raisebox{10pt}{\footnotesize\sf{小秘密:}}
您是神犇 \def\w{130pt} \def\h{18pt} \color{#E4E7E8} \rule[3pt]{0.1pt}{\h}\kern{-0.5pt} \rule[21pt]{\w}{0pt} \rule[3pt]{0.1pt}{\h}\kern{-\w} \color{#0067C0} \rule[3pt]{\w}{0.5pt}\kern{-\w} \color{#616161} \raisebox{10.2pt} {\scriptsize\sf\kern{5pt}您是神犇 }

        i  警告 此人太蒻了,请小心          i  提醒 近墨者黑          ×  请勿 膜拜我            应该 电摇嘲讽并踩爆这个蒟蒻  % w, h, fillcol, bordercol \newcommand\BorderRect[4]{ \color{#3}\rule{#1}{#2}\kern{-#1} \color{#4}\rule{0.5px}{#2}\kern{-0.5px} \rule{#1}{0px}\rule{0.5px}{#2}\kern{-0.5px} \kern{-#1}\rule[#2]{#1}{0px} } % w, h, title, subtitle, fillcol, iconch ,iconcol \newcommand\BasicInfoBarFather[8]{ \BorderRect{#1}{#2}{#5}{ghostwhite} \kern{-#1} \raisebox{#2}{ \raisebox{-26pt}{ \color{black}\kern{-4px} \raisebox{7px}{ \color{#7}\Huge{∙}\kern{-1px} } \raisebox{10.6px}{ \kern{-20.2px} \color{white}\scriptsize\textbf{#6} } \kern{-7px}\footnotesize \raisebox{10.2px}{\textbf{\textsf{\color{#8}#3}}}\kern{2px} \raisebox{10.2px}{\textsf{#4}} } } } \def\BasicInfoBarColorFill{#F4F4F4}\def\BasicInfoBarColorIcon{#0078D4} \def\BasicWarnBarColorFill{#FFF4CE}\def\BasicWarnBarColorIcon{#9D5D00} \def\BasicOkBarColorFill{#DFF6DD}\def\BasicOkBarColorIcon{#0F7B0F} \def\BasicErrBarColorFill{#FDE7E9}\def\BasicErrBarColorIcon{#C42B1C} \newcommand\BasicInfoBar[5]{ \BasicInfoBarFather{#1}{#2}{#3}{#4} {\BasicInfoBarColorFill}{i}{\BasicInfoBarColorIcon}{\BasicInfoBarColorIcon} } \newcommand\BasicWarnBar[5]{ \BasicInfoBarFather{#1}{#2}{#3}{#4} {\BasicWarnBarColorFill}{i}{\BasicWarnBarColorIcon}{\BasicWarnBarColorIcon} } \newcommand\BasicOkBar[5]{ \BasicInfoBarFather{#1}{#2}{#3}{#4} {\BasicOkBarColorFill} {\tiny\kern{-2px}\raisebox{0.8px}{√}} {\BasicOkBarColorIcon}{\BasicOkBarColorIcon} } \newcommand\BasicErrBar[5]{ \BasicInfoBarFather{#1}{#2}{#3}{#4} {\BasicErrBarColorFill} {\kern{-2px}\raisebox{0.6px}{×}} {\BasicErrBarColorIcon}{\BasicErrBarColorIcon} } \BasicWarnBar{200px}{26px}{警告}{此人太蒻了,请小心}{#000000}\\ \BasicInfoBar{200px}{26px}{提醒}{近墨者黑}{#000000}\\ \BasicErrBar{200px}{26px}{请勿}{膜拜我}{#000000}\\ \BasicOkBar{200px}{26px}{应该}{电摇嘲讽并踩爆这个蒟蒻}{#000000}\\
My UID =1620655=(114514+114514)×(114+514)+(1145×14+((114)×51×4+(11/(451)×4)))\not =1620655 = \color{white}(114514+114514) \times (11-4+5-1-4)+(1145 \times 14+((11-4) \times 51 \times 4+(11/(45-1) \times 4)))
Ctrl+A有惊喜。

\begin{array}{c} \rule{100pt}{20pt}\\[-18.5pt]\color{white}鼠标悬停在这里\end{array}


反馈\bold{\text{反馈}}

如果你认为某个同学有问题,欢迎向洛谷反馈,以帮助更多的同学。\small\text{如果你认为某个同学有问题,欢迎向洛谷反馈,以帮助更多的同学。}

举报用户:_ruyingsuixing_\colorbox{#3bb4f2}{\color{white}举报用户:\_ruyingsuixing\_}

请具体说明理由,以增加反馈的可信度。\small\text{请具体说明理由,以增加反馈的可信度。}

 此人太菜了,连红题都做不出来                                                    \color{#dedede}\boxed{\color{black}\text{ 此人太菜了,连红题都做不出来~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~}}

 取消                        |                       已知悉~\small\color{#0e90d2}\text{取消~~~~~~~~~~~~~~~~~~~~~~~~}\color{#dedede}\text{|}~~~~~~~~~~~~~~~~~~~~~~~\small\color{#0e90d2}\text{已知悉}

提示\bold{\text{提示}}

举报成功,感谢您的反馈,这位蒟蒻会马上封禁!\small\text{举报成功,感谢您的反馈,这位蒟蒻会马上封禁!}

                                                                   确定\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \small\color{#0e90d2}\text{确定}


 你瞎举报什么东西呢,小心我棕了你!!!这位蒟蒻可是很积极的kkksc03 吉祥物 IAKIOI-13-32 25:61 ——————————–举报 回复\Huge\text{ }{\normalsize\color{#0e90d2}\boxed{\Huge ^{\colorbox{#f8f8f8}{\normalsize\color{#999999}\text{@ }\color{#9D3DCF}\text{kkksc03 }\colorbox{#9D3DCF}{\color{white}\text{吉祥物}}\color{#999999}\text{ IAKIOI-13-32 25:61 }\color{#f8f8f8}\text{--------------------------------}\color{#999999}\color{#999999}\texttt{举报 回复}}} _{\colorbox{white}{\normalsize\color{black}\text{你瞎举报什么东西呢,小心我棕了你!!!这位蒟蒻可是很积极的}}}}}

_ruyingsuixing_ \Large\bold{\color{#8E44AD}\_ruyingsuixing\_\ \color{black}的运势}

§  §\Huge\color{#E74C3C}\textbf{§} \bold{\ 大吉\ }\textbf{§}

你已经在洛谷连续打卡了  天\scriptsize\text{你已经在洛谷连续打卡了 }\normalsize\infty\scriptsize\text{ 天}

I\Huge\color{white}\colorbox{red}{I}A\Huge\color{White}\colorbox{orange}{A}K\Huge\color{White}\colorbox{yellow}{K}I\Huge\color{White}\colorbox{green}{I}O\Huge\color{White}\colorbox{pink}{O}I\Huge\color{White}\colorbox{blue}{I}!\Huge\color{White}\colorbox{purple}{!}

回到用户

\color{#3498db}\rule{114514pt}{1919810pt}

你居然能刷到这里!送你有用的东西:


[文本内容]()

使用 Gridea 之后,你会惊叹:可以,写博客的那个劲儿又回来了!

使用 Gridea 之后,你会有:可以,写博客的那个劲儿又回来了!

订阅