Gridea 短代码效果测试 ✨

一、模糊遮罩短代码 blur

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

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

二、折叠面板短代码 fold

默认折叠（点击展开）

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

折叠面板嵌套测试

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

一级折叠内容
{% fold 点击展开二级折叠 %}
✅ 二级折叠内容正常显示，功能无问题～
{% endfold %}
百度
{% 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?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)

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

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

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

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

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

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

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

$\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{第一篇题解}$ $\kern{-0.4em}\normalsize\text{\quad Gの娱乐}$

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

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

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

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

\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\ \ }

ด้้้้้็้้้็็็็็้้้้้็็็็็้้้้้้็็็็็้้้้้็็็็็้้้้้้็็็็็้้้้้็็็็็้้้้้้็็็็็้้้้้็็็็็้้้้้้็
$\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}您是神犇 }$

$% 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 $\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{如果你认为某个同学有问题，欢迎向洛谷反馈，以帮助更多的同学。}

\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{确定}$

$\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{你瞎举报什么东西呢，小心我棕了你！！！这位蒟蒻可是很积极的}}}}}$