网站下方放公众号部分页脚的HTML代码公布如下
<!-- ==== Flarum Custom Footer: Friend Links + WeChat ====
Paste into Admin → Appearance → Custom Footer
-->
<footer id="flarum-footer" class="fl-footer" role="contentinfo" aria-label="站点页脚">
<div class="fl-footer__container">
<!-- 品牌/简介 -->
<section class="fl-footer__brand" itemscope itemtype="https://schema.org/Organization">
<div class="fl-footer__logo" aria-hidden="true">
<!-- 简洁的 SVG 标志,可替换 -->
<svg viewBox="0 0 48 48" width="40" height="40" aria-hidden="true">
<circle cx="24" cy="24" r="22" fill="currentColor" opacity="0.1"></circle>
<path d="M12 30h24v2H12zm0-7h24v2H12zm0-7h24v2H12z" fill="currentColor"></path>
</svg>
</div>
<div>
<h2 class="fl-footer__title" itemprop="name">STA</h2>
<p class="fl-footer__desc" itemprop="description">
第一个属于东油人自己的技术博客,欢迎各位大佬入住
</p>
</div>
</section>
<!-- 友链 -->
<nav class="fl-footer__links" aria-label="友情链接">
<h3 class="fl-footer__heading">友情链接</h3>
<ul class="fl-footer__linklist">
<li><a href="https://www.luotianyi.hk" target="_blank" rel="noopener nofollow">眰恦的小星球</a></li>
<!-- 按需增减 -->
</ul>
</nav>
<!-- 公众号 -->
<section class="fl-footer__wechat" aria-label="微信公众号">
<h3 class="fl-footer__heading">关注我们</h3>
<div class="fl-footer__wechat-card">
<img
src="https://www.stalab.fun/assets/files/2025-08-23/1755919282-121980-8fed4128b472f04aa0957d8ed7b4c2d.jpg"
alt="微信公众号二维码"
class="fl-footer__qrcode"
loading="lazy"
decoding="async"
/>
<div class="fl-footer__wechat-text">
<p class="fl-footer__wechat-name">公众号:STA LAB</p>
<p class="fl-footer__wechat-tip">扫码二维码关注公众号,获取最新信息与活动。</p>
</div>
</div>
</section>
</div>
<div class="fl-footer__meta">
<p class="fl-footer__copyright">
© <span id="fl-footer-year"></span> STA LAB · All rights reserved.
</p>
<p class="fl-footer__icp">
<a href="https://beian.miit.gov.cn" target="_blank" rel="noopener">赣ICP备2024049538号-1</a>
<!-- 如在国内需展示公安备案,可在此补充:<a href="你的公网安备链接">粤公网安备 XXXXXXXXXXXXX 号</a> -->
</p>
</div>
</footer>
<style>
/* ==== Scoped styles for #flarum-footer ==== */
#flarum-footer.fl-footer {
--fl-fg: var(--text-color, #222);
--fl-bg: var(--body-bg, #fff);
--fl-muted: rgba(0,0,0,.6);
--fl-border: rgba(0,0,0,.1);
--fl-accent: var(--primary-color, #4f46e5);
--fl-radius: 14px;
color: var(--fl-fg);
background: var(--fl-bg);
border-top: 1px solid var(--fl-border);
margin-top: 2rem;
padding: 2rem 1rem 1rem;
font-size: 14px;
line-height: 1.6;
}
/* 深色模式适配(若主题已有变量会自动取用) */
@media (prefers-color-scheme: dark) {
#flarum-footer.fl-footer {
--fl-fg: var(--text-color, #eaeaea);
--fl-bg: var(--body-bg, #0b0b0b);
--fl-muted: rgba(255,255,255,.65);
--fl-border: rgba(255,255,255,.12);
}
}
#flarum-footer .fl-footer__container {
max-width: 1080px;
margin: 0 auto;
display: grid;
gap: 1.25rem;
grid-template-columns: 1.2fr 1fr 1fr;
align-items: start;
}
/* brand */
#flarum-footer .fl-footer__brand {
display: grid;
grid-template-columns: auto 1fr;
gap: .75rem 1rem;
align-items: center;
}
#flarum-footer .fl-footer__logo {
color: var(--fl-accent);
}
#flarum-footer .fl-footer__title {
margin: 0;
font-size: 16px;
font-weight: 700;
}
#flarum-footer .fl-footer__desc {
margin: .25rem 0 0;
color: var(--fl-muted);
}
/* headings */
#flarum-footer .fl-footer__heading {
margin: 0 0 .75rem;
font-size: 15px;
font-weight: 700;
}
/* link list */
#flarum-footer .fl-footer__linklist {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: .35rem;
}
#flarum-footer .fl-footer__linklist a {
text-decoration: none;
color: var(--fl-fg);
border-bottom: 1px dashed transparent;
}
#flarum-footer .fl-footer__linklist a:hover,
#flarum-footer .fl-footer__linklist a:focus-visible {
color: var(--fl-accent);
border-bottom-color: var(--fl-accent);
outline: none;
}
/* wechat card */
#flarum-footer .fl-footer__wechat-card {
display: grid;
grid-template-columns: 92px 1fr;
gap: .75rem;
align-items: center;
padding: .75rem;
border: 1px solid var(--fl-border);
border-radius: var(--fl-radius);
}
#flarum-footer .fl-footer__qrcode {
width: 92px; height: 92px; object-fit: cover; border-radius: 8px;
}
#flarum-footer .fl-footer__wechat-name {
margin: 0 0 .25rem;
font-weight: 600;
}
#flarum-footer .fl-footer__wechat-tip {
margin: 0; color: var(--fl-muted);
}
/* meta row */
#flarum-footer .fl-footer__meta {
max-width: 1080px;
margin: 1rem auto 0;
padding-top: 1rem;
border-top: 1px dashed var(--fl-border);
display: flex;
flex-wrap: wrap;
gap: .75rem 1.25rem;
justify-content: space-between;
color: var(--fl-muted);
font-size: 12.5px;
}
#flarum-footer .fl-footer__meta a { color: inherit; }
/* responsive */
@media (max-width: 900px) {
#flarum-footer .fl-footer__container {
grid-template-columns: 1fr 1fr;
}
#flarum-footer .fl-footer__brand {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
#flarum-footer .fl-footer__container {
grid-template-columns: 1fr;
}
#flarum-footer .fl-footer__wechat-card {
grid-template-columns: 72px 1fr;
}
#flarum-footer .fl-footer__qrcode { width: 72px; height: 72px; }
}
</style>
<script>
// 动态年份
(function () {
var el = document.getElementById('fl-footer-year');
if (el) el.textContent = new Date().getFullYear();
})();
</script>