标准文章STC模板

牛奶电池

前，额，这玩意谁写的来着，算了，补个我的标准STC模板。

<img src="https://img.reimu.net/uploads/2024/04/661b4291842ef.jpg">
（↑这个地方是封面图片，竖图请设定宽度在450，宽版图片在650左右，记得打码）
（巴拉巴拉的梗概介绍文，多写点，因为按照Wordpress的特质，正文内容可能会顶开more代码出现在预览页中）
（↓随后是more代码也就是继续阅读，其将预览页内容和正文内容隔开务必添加）

（正文内容，可以添加制作方资料什么的，相关内容可以用<hr>隔开。）
<hr>
（图片区域，五张图以上，每张图换行隔开，大小参考封面的规定尺寸，然后暴露的图必须打码，但是也别打的跟冬天的东北姑娘一样。由于御所是白背景，如果有些图比较抽象太难打码了可以使用幻影坦克，但是一般推荐自己慢慢修）
<hr>
（这个地方可以放置相关链接，超链接代码可见编辑器中下划线的link按钮随后可以添加结界了，但是每个文章限定添加一个）
<pre> <pre/>

进阶的HTML代码可以参考W3school的标签集。
另外出于安全考虑御所不支持<iframe>代码，也就是不支持外嵌视频和音乐播放器，如果想添加相关内容可以直接超链接，虽然效果不好但是至少能看。

以下是简洁化的代码：
`<img src="">

<img src="">
<hr />
<pre>
<pre/>
`

KN

三次元忙起来了之后，我打码的时候就变懒了QwQ

牛奶电池

我写错代码没人发现……

Yoooo-LXH

贴底浮动目录，

<img id="gsjj" class="aligncenter" src="https://img.reimu.net/uploads/2024/12/6772c9e950a8b.png" alt="故事简介" /> xxx <img id="RW" class="aligncenter" src="https://img.reimu.net/uploads/2024/12/6772c9e931b76.png" alt="人物介绍" /> xxx <img id="CG" class="aligncenter" src="https://img.reimu.net/uploads/2024/12/6772c9e8890e9.png" alt="CG鉴赏" /> xxx <div id="ml" style="position: sticky;bottom: 0px;background-color: #40e0d0;color: white;padding: 1px;text-align: center;text-decoration: none"><a style="color: white;margin: 0 1px" href="#main">回到顶部</a>|<a style="color: white;margin: 0 1px" href="#gsjj">故事简介</a>|<a style="color: white;margin: 0 1px" href="#RW">人物介绍</a>|<a style="color: white;margin: 0 1px" href="#CG">CG鉴赏</a>|<a style="color: white;margin: 0 1px" href="#comments">查看评论</a>|<a style="color: white;margin: 0 1px" href="#reply-title">这就评论</a></div>
其中 href="#ooxx" ooxx 是文章中需要跳转的位置的id。也就是 id="ooxx" 写稿子的时候，自己定义id，注意id需要唯一。
然后就是3个通用的。 href="#main">回到顶部这个是每个文章都有的顶部。
href="#comments">查看评论< 评论区
href="#reply-title">这就评论< 最下面回复评论的位置。当然这个感觉可以不用。

Yoooo-LXH

效果如图，为什么不设置在顶部呢？这样在评论区的时候，也可以点到目录
因为默认跳转到到对应位置。对应位置是贴顶的，上方浮动会挡住。需要再稍微移动一下。（主要还是文章限制太严格了，很多style script 之类的都无法使用！）

Yoooo-LXH

当然目录的背景颜色，字体颜色啥的都可以自己改。
QAQ 8酱要是全局添加个 bootstrap 就更好了。用 bootstrap 的cdn 的link。这样还可以再探索其他花里胡哨的东西。
`
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

背景也可以改成渐变色。例如
青色系
background: linear-gradient(to right, #00bfff, #20b2aa, #4682b4);
绿色系
background: linear-gradient(to right, #32CD32, #3CB371, #2E8B57);
天空蓝
background: linear-gradient(to right, #87CEEB, #00BFFF, #1E90FF);
粉色
background: linear-gradient(to right, #FFB6C1, #FF69B4, #FF1493);

除了用作目录，当然可以可以添加比如入正的按钮。反正都是 a 标签

萌龙少主

Yoooo-LXH 掏出小本本

Yoooo-LXH

现在可以确认使用的新特性-Fancybox 图片展示。
<h3>CG事件</h3> <img decoding="async" src="https://img.reimu.net/uploads/2025/01/6776b17c4ceb2.png"> <img decoding="async" src="https://img.reimu.net/uploads/2025/01/6776b17ccb203.png"> <img decoding="async" src="https://img.reimu.net/uploads/2025/01/6776b17c937d5.png"> <img decoding="async" src="https://img.reimu.net/uploads/2025/01/6776b182da9bf.png">

以上是原本的代码。
想要使用新特性，需要给对应的 img标签套一层a。（所以代码会变得更加冗长。😔）

可以看到，对于每个 <img> 前面加了 <a class="fancybox" data-fancybox="CGs" href="https://xxxx">
其中 <a> 本身是超链接标签，用于提供点击的触发。保持规范还要加上结尾tag </a>
class="fancybox" 用于声明这是一个图片展示框。而不是真的点击就打开图片了。
data-fancybox="CGs" 这个是用来控制图片是否属于一个合集。同一个 rel 里面的图片。可以通过鼠标滚轮切换。
不同的rel 之间则不行。其中 CGs 不能跟其他 id 相同。不然会冲突。
href="" 则是对应图片的链接。因此甚至可以是文章里面的img 的url 是一个常规清晰度的图片。 href 这边换成高清的。