refactor(alpine): restructure components and remove unused utilities for better modularity and maintainability
这个提交包含在:
+81
-47
@@ -1,63 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = ${site.title}, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = ${site.title}, pageType = 'home', terminalUserName = ${posts != null and posts.items != null and !#lists.isEmpty(posts.items) and posts.items[0].owner != null and !#strings.isEmpty(posts.items[0].owner.name) ? posts.items[0].owner.name : 'admin'}, content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<div class="content">
|
||||
<div class="index-content framed">
|
||||
<h1 class="typed-text" th:text="${theme.config.index.index_notice_title}"></h1>
|
||||
<div th:utext="${theme.config.index.index_notice_content}"></div>
|
||||
<section class="devcm-terminal-window devcm-home-hero">
|
||||
<div class="devcm-window-titlebar">
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
</div>
|
||||
<div class="posts">
|
||||
<div class="post on-list" th:each="post : ${posts.items}">
|
||||
<h1 class="post-title">
|
||||
<a th:text="'< ' + ${post.spec.title} + ' >'" th:href="${post.status.permalink}">Post Title</a>
|
||||
<div class="devcm-hero">
|
||||
<div class="devcm-hero__copy">
|
||||
<div class="devcm-prompt-line">
|
||||
<span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span> <span>./welcome.sh</span>
|
||||
</div>
|
||||
<h1 class="devcm-hero__title typed-text" th:text="${theme.config.index.index_notice_title}">
|
||||
Welcome to DevCM.
|
||||
</h1>
|
||||
<div class="post-meta">
|
||||
<span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">
|
||||
Post CreateTime
|
||||
</span>
|
||||
<span class="post-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="post-author" th:with="contributor = ${post.contributors[0]}" th:text="${contributor.displayName}">
|
||||
Author
|
||||
</span>
|
||||
<span class="post-tags-inline" th:each="tag : ${post.tags}">
|
||||
<a th:href="${tag.status.permalink}"
|
||||
th:title="${tag.spec.displayName}"
|
||||
th:text="'#'+${tag.spec.displayName}"
|
||||
class="post-tag"
|
||||
>#Tag
|
||||
</a>
|
||||
</span>
|
||||
<div class="devcm-hero__subtitle" th:text="#{devcm.home.subtitle}">Development Content Management.</div>
|
||||
<div class="devcm-hero__desc" th:utext="${theme.config.index.index_notice_content}">
|
||||
<span th:text="#{devcm.home.defaultContent}">A Terminal-style Halo theme.</span>
|
||||
</div>
|
||||
<div class="post-content" th:text="${post.status.excerpt}">Post Excerpt...</div>
|
||||
|
||||
<div>
|
||||
<a class="read-more button" th:href="${post.status.permalink}">阅读更多 ></a>
|
||||
<div class="devcm-prompt-line devcm-prompt-line--after-typed">
|
||||
<span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span> <span class="devcm-cursor"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="devcm-ascii-badge" aria-hidden="true">
|
||||
<span class="devcm-ascii-badge__grid"></span>
|
||||
<div class="devcm-ascii-badge__inner">
|
||||
<span class="devcm-ascii-badge__label">DEV.CM</span>
|
||||
<pre>
|
||||
DEV
|
||||
CM</pre
|
||||
>
|
||||
<small>< <span th:text="${#dates.year(#dates.createNow())}">2026</span> /></small>
|
||||
<span class="devcm-ascii-badge__scan"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
|
||||
<div class="pagination__buttons">
|
||||
<span class="button previous" th:if="${posts.hasPrevious()}">
|
||||
<a th:href="@{${posts.prevUrl}}">
|
||||
<span class="button__icon">< </span>
|
||||
<span class="button__text">上一页</span>
|
||||
</section>
|
||||
|
||||
<section class="devcm-editor-window" x-data="{ postsOpen: true }">
|
||||
<div class="devcm-editor-tabs">
|
||||
<div class="devcm-editor-tabs__left">
|
||||
<div class="devcm-editor-tab devcm-editor-tab--active" x-show="postsOpen">
|
||||
<span>posts.md</span>
|
||||
<a
|
||||
href="#"
|
||||
class="devcm-editor-tab__close"
|
||||
role="button"
|
||||
@click.prevent="postsOpen = false"
|
||||
th:aria-label="#{devcm.action.closeTab}"
|
||||
th:title="#{devcm.action.closeTab}"
|
||||
>
|
||||
×
|
||||
</a>
|
||||
</span>
|
||||
<span class="button next" th:if="${posts.hasNext()}">
|
||||
<a th:href="@{${posts.nextUrl}}">
|
||||
<span class="button__text">下一页</span>
|
||||
<span class="button__icon"> ></span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
class="devcm-editor-tab__add"
|
||||
href="/console"
|
||||
th:aria-label="#{devcm.action.newPost}"
|
||||
th:title="#{devcm.action.newPost}"
|
||||
>+</a
|
||||
>
|
||||
</div>
|
||||
<div id="devcm-posts-panel" class="devcm-editor-body devcm-post-list-body" x-show="postsOpen">
|
||||
<div class="devcm-post-stack">
|
||||
<th:block th:each="post,iterStat : ${posts.items}">
|
||||
<th:block th:replace="~{modules/post-card :: post-card(post=${post}, featured=${iterStat.index == 0})}" />
|
||||
</th:block>
|
||||
<div class="devcm-list-footnote" th:if="${posts.items != null}">
|
||||
<span th:text="#{devcm.home.postCount(${#lists.size(posts.items)})}">> Current page has 0 post(s)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
|
||||
<div class="pagination__buttons">
|
||||
<span class="button previous" th:if="${posts.hasPrevious()}">
|
||||
<a th:href="@{${posts.prevUrl}}">
|
||||
<span class="button__icon">< </span>
|
||||
<span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
|
||||
</a>
|
||||
</span>
|
||||
<span class="button next" th:if="${posts.hasNext()}">
|
||||
<a th:href="@{${posts.nextUrl}}">
|
||||
<span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
|
||||
<span class="button__icon"> ></span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</th:block>
|
||||
|
||||
在新议题中引用
屏蔽一个用户