HyplusCSS是本站基于GeneratePress的自定义样式的统称，详见Hyplus Snippets。使用组件前请先压缩。

HyplusCSS：src/hl1/hypluscss.css

1 前线组件

本站利用HyplusCSS制作了一系列前线组件模板，可直接置于WP Githuber MD编辑器或“编辑分类”页面taxonomy-description编辑框！

1.1 HyNav式链接群

删除硬编码grid-template-columns属性可恢复响应式设计。

两种子风格（为便于直接使用，此处已取消缩进格式）：

• 普通页面：

<div class="hyplus-nav-container hyplus-unselectable" style="grid-template-columns: 1fr;">
<div class="hyplus-nav-section">
<h3>Title</h3>
<div class="hyplus-nav-links">
<div class="hyplus-nav-group">
<a href="" class="hyplus-nav-link">Link</a>
</div>
</div>
</div>
</div>

• 博文索引：

<div class="hyplus-nav-container hyplus-unselectable" style="grid-template-columns: 1fr; padding-bottom: 16px;">
<div class="hyplus-nav-section">
<div style="font-size: 20px; font-weight: 600; text-align: center; margin: 0 0 12px 0;">Title</div>
<div class="hyplus-nav-links">
<div class="hyplus-nav-group">
<a href="" class="hyplus-nav-link">Link</a>
</div>
</div>
</div>
</div>

1.2 表格

二维表示例：

<table>
<tr>
        <th colspan="2" rowspan="2">样本总数`$$N$$`</th>
        <th colspan="2" rowspan="1">预测值</th>
</tr>
<tr>
    <td style="text-align:center;">Positive</td>
    <td style="text-align:center;">Negative</td>
</tr>
<tr>
        <td rowspan="2" style="text-align:center;"><strong>真实值</strong></td>
        <td style="text-align:center;">Positive</td>
        <td>真正例（True Positive）：实际为Positive、预测成Positive的样本数`$$TP$$`</td>
        <td>假反例（False Negative）：实际为Positive、预测成Negative的样本数`$$FN$$`</td>
</tr>
<tr>
    <td style="text-align:center;">Negative</td>
    <td>假正例（False Positive）：实际为Negative、预测成Positive的样本数`$$FP$$`</td>
    <td>真反例（True Negative）：实际为Negative、预测成Negative的样本数`$$TN$$`</td>
</tr>
</table>

2 其他样式

除了HyplusCSS外，HyNav、Ultimate Buttons亦提供了一系列全站泛用的样式，详见各组件GitHub源码。

HyNav：src/hl1/hynav.html
Ultimate Buttons：src/hl1/ultimate_buttons.php

3 Katex模板

公式块：

\begin{aligned}
P &= \frac{TP}{TP+FP}\\
R &= \frac{TP}{TP+FN}
\end{aligned}