feat: Hero 背景图完整显示、导航二级菜单、瞬间朋友圈化、友链申请表单 (v1.1.9)
- Hero:背景图 opacity 0.15 -> 1 完整显示(此前近乎透明的背景图是"蒙灰"观感的 主因);标题/副标题/一言按明暗模式补轻投影保证复杂图片上的可读性 - 导航栏二级菜单:桌面端纯 CSS 悬停/聚焦展开(零 JS),带悬停桥防误关、 下拉箭头旋转反馈;移动端菜单以缩进子项形式呈现 - 瞬间页朋友圈化:头像(moment.owner.avatar,缺省回退站点名首字占位)+ 昵称 + 正文 + 九宫格图片 + 时间操作;九宫格遵循微信规则(单图原比例、2/4 图两列、 其余三列) - 友情链接页适配 plugin-links 友链申请:同源表单(POST /links/apply/submit + csrfToken + GET /links/apply/captcha 验证码图,点击刷新),支持名称/链接/ Logo/描述/邮箱/反链/RSS 字段、提交结果与错误提示;插件未开放申请时验证码 加载失败自动隐藏表单;新增 links_apply_form_enabled 开关(默认开启)
This commit is contained in:
@@ -87,6 +87,92 @@ import Layout from "../layouts/Layout.astro";
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
<div
|
||||
class="wi-links__apply"
|
||||
th:if="${theme.config?.links?.links_apply_form_enabled != false}"
|
||||
th:with="applied=${param.applied != null and !#lists.isEmpty(param.applied) and param.applied[0] == 'true'},
|
||||
applyMsg=${param.message != null and !#lists.isEmpty(param.message) ? param.message[0] : null}"
|
||||
>
|
||||
<h2 class="wi-links__apply-title" th:text="'申请友链'">申请友链</h2>
|
||||
<p
|
||||
class="wi-links__apply-result"
|
||||
th:if="${applied}"
|
||||
th:text="'申请已提交,等待站长审核 🌙'"
|
||||
role="status"
|
||||
></p>
|
||||
<p
|
||||
class="wi-links__apply-result wi-links__apply-result--error"
|
||||
th:if="${not applied and applyMsg != null}"
|
||||
th:text="${applyMsg}"
|
||||
role="alert"
|
||||
></p>
|
||||
|
||||
<form
|
||||
class="wi-links__apply-form"
|
||||
method="post"
|
||||
th:action="@{/links/apply/submit}"
|
||||
>
|
||||
<input type="hidden" name="_csrf" th:value="${csrfToken}" />
|
||||
<div class="wi-links__apply-row">
|
||||
<label class="wi-links__apply-field">
|
||||
<span th:text="'站点名称 *'">站点名称 *</span>
|
||||
<input type="text" name="displayName" required maxlength="50" placeholder="你的站点名称" th:attr="value=${param.value != null and !#lists.isEmpty(param.value) ? param.value[0] : ''}" />
|
||||
</label>
|
||||
<label class="wi-links__apply-field">
|
||||
<span th:text="'站点链接 *'">站点链接 *</span>
|
||||
<input type="url" name="url" required placeholder="https://" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="wi-links__apply-row">
|
||||
<label class="wi-links__apply-field">
|
||||
<span th:text="'图标地址'">图标地址</span>
|
||||
<input type="url" name="logo" placeholder="https://" />
|
||||
</label>
|
||||
<label class="wi-links__apply-field">
|
||||
<span th:text="'联系邮箱'">联系邮箱</span>
|
||||
<input type="email" name="email" placeholder="用于通知审核结果" />
|
||||
</label>
|
||||
</div>
|
||||
<label class="wi-links__apply-field">
|
||||
<span th:text="'站点描述'">站点描述</span>
|
||||
<input type="text" name="description" maxlength="120" placeholder="一句话介绍你的站点" />
|
||||
</label>
|
||||
<label class="wi-links__apply-field">
|
||||
<span th:text="'反链页面'">反链页面</span>
|
||||
<input type="url" name="backlink" placeholder="https://" />
|
||||
</label>
|
||||
<label class="wi-links__apply-field">
|
||||
<span th:text="'RSS / Atom 地址(每行一个)'">RSS / Atom 地址(每行一个)</span>
|
||||
<textarea name="feedUrls" rows="2" placeholder="https://"></textarea>
|
||||
</label>
|
||||
<div class="wi-links__apply-row">
|
||||
<label class="wi-links__apply-field">
|
||||
<span th:text="'验证码 *'">验证码 *</span>
|
||||
<input type="text" name="captchaCode" required maxlength="8" autocomplete="off" placeholder="图中五位字符" />
|
||||
</label>
|
||||
<div class="wi-links__apply-captcha">
|
||||
<img
|
||||
class="wi-links__apply-captcha-img"
|
||||
th:src="@{/links/apply/captcha}"
|
||||
alt="验证码"
|
||||
width="120"
|
||||
height="44"
|
||||
loading="lazy"
|
||||
title="点击刷新验证码"
|
||||
onclick="this.src=this.src.split('?')[0]+'?ts='+Date.now()"
|
||||
th:onerror="|this.closest('.wi-links__apply').classList.add('wi-links__apply--unavailable')|"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button class="wi-links__apply-submit" type="submit" th:text="'提交申请'">提交申请</button>
|
||||
</form>
|
||||
<p
|
||||
class="wi-links__apply-unavailable-tip"
|
||||
th:text="'友链申请暂未开放。'"
|
||||
hidden
|
||||
></p>
|
||||
</div>
|
||||
|
||||
<div class="wi-links__comment" th:if="${theme.config?.links?.links_show_comment == true}">
|
||||
<halo:comment group="plugin.halo.run" kind="Plugin" name="PluginLinks"></halo:comment>
|
||||
</div>
|
||||
@@ -189,6 +275,132 @@ import Layout from "../layouts/Layout.astro";
|
||||
margin-top: var(--space-3xl);
|
||||
}
|
||||
|
||||
/* ===== 友链申请表单 ===== */
|
||||
.wi-links__apply {
|
||||
margin-top: var(--space-3xl);
|
||||
padding: var(--space-xl);
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: var(--radius-lg, 16px);
|
||||
background: var(--bg-raised);
|
||||
}
|
||||
|
||||
.wi-links__apply-title {
|
||||
text-align: center;
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.wi-links__apply-result {
|
||||
text-align: center;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--accent);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.wi-links__apply-result--error {
|
||||
color: #e6162d;
|
||||
}
|
||||
|
||||
html.dark .wi-links__apply-result--error {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.wi-links__apply-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.wi-links__apply-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
|
||||
.wi-links__apply-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
.wi-links__apply-field input,
|
||||
.wi-links__apply-field textarea {
|
||||
padding: 0.6rem 0.8rem;
|
||||
border: 1px solid var(--rule);
|
||||
border-radius: 10px;
|
||||
background: var(--bg);
|
||||
color: var(--ink);
|
||||
font-family: inherit;
|
||||
font-size: var(--text-sm);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.wi-links__apply-field input:focus,
|
||||
.wi-links__apply-field textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
|
||||
}
|
||||
|
||||
.wi-links__apply-captcha {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.wi-links__apply-captcha-img {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--rule);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.wi-links__apply-submit {
|
||||
align-self: center;
|
||||
padding: 0.65rem 2.2rem;
|
||||
min-height: 44px;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
|
||||
cursor: pointer;
|
||||
transition: transform var(--duration-fast) var(--ease-out-quart), opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.wi-links__apply-submit:hover {
|
||||
transform: translateY(-1px);
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.wi-links__apply-submit:active {
|
||||
transform: translateY(0) scale(0.98);
|
||||
}
|
||||
|
||||
/* 插件未开放申请时(验证码 404)自动隐藏表单并提示 */
|
||||
.wi-links__apply--unavailable .wi-links__apply-form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wi-links__apply--unavailable .wi-links__apply-unavailable-tip {
|
||||
display: block !important;
|
||||
text-align: center;
|
||||
color: var(--ink-3);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.wi-links__apply-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.wi-links__title {
|
||||
font-size: var(--text-4xl);
|
||||
margin-bottom: var(--space-xs);
|
||||
|
||||
Reference in New Issue
Block a user