refactor(alpine): restructure components and remove unused utilities for better modularity and maintainability
这个提交包含在：
+53
-62
@@ -1,86 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html
|
||||
xmlns:th="https://www.thymeleaf.org"
|
||||
th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
|
||||
th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, pageType = 'post', terminalUserName = ${post != null and post.owner != null and !#strings.isEmpty(post.owner.name) ? post.owner.name : 'admin'}, content = ~{::content})}"
|
||||
>
|
||||
<th:block th:fragment="content">
|
||||
<!-- 目录组件 -->
|
||||
<div class="post-toc-sticky">
|
||||
<div class="post-toc" x-data="postToc" x-init="init()">
|
||||
<div class="toc-header">
|
||||
<span class="toc-header__icon"><></span>
|
||||
<span class="toc-header__title">Outline</span>
|
||||
<article class="devcm-editor-window devcm-article" x-data="postLineNum" x-init="init()">
|
||||
<div class="devcm-editor-tabs">
|
||||
<div
|
||||
class="devcm-editor-tab devcm-editor-tab--active"
|
||||
th:with="postTabName=${!#strings.isEmpty(post.spec.slug) ? post.spec.slug : post.metadata.name}"
|
||||
>
|
||||
<span th:text="${postTabName}">post</span>
|
||||
<a
|
||||
class="devcm-editor-tab__close"
|
||||
href="/archives"
|
||||
th:aria-label="#{devcm.action.closePostTab}"
|
||||
th:title="#{devcm.action.closePostTab}"
|
||||
>×</a
|
||||
>
|
||||
</div>
|
||||
<ul class="toc-tree">
|
||||
<template x-for="(item, index) in items" :key="index">
|
||||
<li class="toc-item"
|
||||
:class="{'toc-item--active': activeId === item.id}"
|
||||
:style="`padding-left: ${getIndent(item.level)}`"
|
||||
@click="scrollTo(item.id)">
|
||||
<span class="toc-item__toggle toc-item__toggle--empty">▼</span>
|
||||
<span class="toc-item__icon"><></span>
|
||||
<span class="toc-item__tag" x-text="item.tagName"></span>
|
||||
<span class="toc-item__title" x-text="item.title"></span>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post" x-data="postLineNum" x-init="init()">
|
||||
<h1 class="post-title" th:text="'< ' + ${post.spec.title} + ' >'">Post Title</h1>
|
||||
<div class="post-meta">
|
||||
<span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> publishTime </span>
|
||||
<span class="post-separator">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
<span class="post-author" th:text="${post.owner.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>
|
||||
<div class="post-body">
|
||||
<!-- 行数组件 -->
|
||||
|
||||
<div class="post-body devcm-article-body">
|
||||
<div class="post-line-gutter"></div>
|
||||
<div class="post-content">
|
||||
<div th:utext="${post.content.content}">Post Content</div>
|
||||
<div class="post-content devcm-article-content">
|
||||
<div>
|
||||
<h1 class="devcm-article-title" th:text="'< ' + ${post.spec.title} + ' >'">Post Title</h1>
|
||||
<div class="devcm-article-meta">
|
||||
<span th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">publishTime</span>
|
||||
<span th:text="${post.owner.displayName}">Author</span>
|
||||
<a
|
||||
th:each="tag : ${post.tags}"
|
||||
th:href="${tag.status.permalink}"
|
||||
th:title="${tag.spec.displayName}"
|
||||
th:text="'#' + ${tag.spec.displayName}"
|
||||
>
|
||||
#Tag
|
||||
</a>
|
||||
</div>
|
||||
<div th:utext="${post.content.content}">Post Content</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment-wrap" th:if="${haloCommentEnabled}">
|
||||
<h2>评论</h2>
|
||||
<halo:comment
|
||||
group="content.halo.run"
|
||||
kind="Post"
|
||||
th:attr="name=${post.metadata.name}"
|
||||
/>
|
||||
</div>
|
||||
<div class="pagination">
|
||||
<div class="pagination__title">
|
||||
<span class="pagination__title-h">其他文章</span>
|
||||
<hr />
|
||||
</article>
|
||||
|
||||
<section class="comment-wrap devcm-comments" x-data="themeComment()" x-init="init()" th:if="${haloCommentEnabled}">
|
||||
<div class="devcm-comment-titlebar">
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
<span class="devcm-window-dot"></span>
|
||||
<strong th:text="#{devcm.comments.file}">comments.log</strong>
|
||||
</div>
|
||||
<div class="pagination__buttons" th:with="postCursor=${postFinder.cursor(post.metadata?.name)}">
|
||||
<div class="devcm-comment-body">
|
||||
<h2 th:text="#{devcm.comments.title}">## Comments</h2>
|
||||
<halo:comment group="content.halo.run" kind="Post" th:attr="name=${post.metadata.name}" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<nav class="pagination devcm-prev-next" th:with="postCursor=${postFinder.cursor(post.metadata?.name)}">
|
||||
<div class="pagination__buttons">
|
||||
<span th:if="${postCursor.hasPrevious()}" class="button previous">
|
||||
<a th:href="${postCursor.previous?.status?.permalink}">
|
||||
<span class="button__icon">< </span>
|
||||
<span class="button__text" th:text="${postCursor.previous?.spec?.title}">prevPost</span>
|
||||
<span class="button__text" th:text="${postCursor.previous?.spec?.title}">Previous</span>
|
||||
</a>
|
||||
</span>
|
||||
<span th:if="${postCursor.hasNext()}" class="button next">
|
||||
<a th:href="${postCursor.next?.status?.permalink}">
|
||||
<span class="button__text" th:text="${postCursor.next?.spec?.title}">nextPost</span>
|
||||
<span class="button__text" th:text="${postCursor.next?.spec?.title}">Next</span>
|
||||
<span class="button__icon"> ></span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</th:block>
|
||||
</html>
|
||||
|
||||
在新议题中引用
屏蔽一个用户