代码拉取完成,页面将自动刷新
<#include "./module/page-heading.ftl" />
<#include "./module/comment.ftl">
<@layout.extends name="module/layout.ftl">
<@layout.put block="title">日志 - ${blog_title!}</@layout.put>
<@layout.put block="head">
<#include "./module/highlightjs/libs-import.ftl" />
<#include "./module/lightgallery/libs-import.ftl" />
<#include "./module/katex/libs-import.ftl" />
<script src="${theme_base!}/assets/js/vue.min.js"></script>
<script src="${options.comment_internal_plugin_js!'//cdn.jsdelivr.net/gh/halo-dev/halo-comment@latest/dist/halo-comment.min.js'}"></script>
</@layout.put>
<@layout.put block="content">
<@page_heading title="日志" subtitle="${journals.totalElements!} 篇" />
<div class="post-page">
<div class="post animated fadeInDown">
<ul role="list" class="divide-y divide-gray-100" x-data="journals">
<#list journals.content as journal>
<li class="py-5 flex items-start gap-2" x-data="{comment:false}">
<img class="h-12 w-12 rounded-full" src="${user.avatar!}" alt="${user.nickname!}">
<div class="ml-5 flex-1">
<div class="markdown-body !text-sm !text-gray-500">
${journal.content!}
</div>
<div class="flex items-center gap-4 mt-3">
<div class="journal-likes inline-flex items-center cursor-pointer text-gray-400 hover:text-red-700 text-sm transition-all"
x-bind:class="{'text-red-700': liked(${journal.id?c})}"
x-on:click="handleLike(${journal.id?c})">
<i x-show="liked(${journal.id?c})" class="iconify w-3.5 h-3.5"
data-icon="mdi:heart"></i>
<i x-show="!liked(${journal.id?c})" class="iconify w-3.5 h-3.5"
data-icon="mdi:heart-outline"></i>
<span class="ml-1" data-journal-id-likes="${journal.id?c}">
${journal.likes?c}
</span>
</div>
<div class="inline-flex items-center cursor-pointer text-gray-400 hover:text-black text-sm transition-all"
x-on:click="comment = !comment">
<i class="iconify w-3.5 h-3.5" data-icon="mdi:comment-outline"></i>
<span class="ml-1">
${journal.commentCount!0}
</span>
</div>
<div class="sm:hidden inline-flex items-center cursor-pointer text-gray-400 hover:text-black text-sm transition-all">
<i class="iconify w-3.5 h-3.5" data-icon="mdi:calendar-month-outline"></i>
<span class="ml-1">${journal.createTime?string("yyyy-MM-dd HH:mm")}</span>
</div>
</div>
<template x-if="comment">
<div class="mt-2">
<@comment post=journal type="journal"></@comment>
</div>
</template>
</div>
<div class="hidden sm:flex">
<time class="text-gray-400 text-sm">${journal.createTime?string("yyyy-MM-dd HH:mm")}</time>
</div>
</li>
</#list>
</ul>
</div>
</div>
<#if journals.totalPages gt 1>
<@paginationTag method="journals" page="${journals.number}" total="${journals.totalPages}" display="3">
<div class="pagination flex justify-between items-center">
<#if pagination.hasPrev>
<a class="btn" role="navigation" href="${pagination.prevPageFullPath!}">上一页</a>
</#if>
<span class="text-sm">${journals.number+1}/${journals.totalPages!}</span>
<#if pagination.hasNext>
<a class="btn" role="navigation" href="${pagination.nextPageFullPath!}">下一页</a>
</#if>
</div>
</@paginationTag>
</#if>
</@layout.put>
<@layout.put block="footer">
<#include "./module/highlightjs/scripts.ftl" />
<script type="text/javascript">
const markdownBodyNodes = document.getElementsByClassName('markdown-body');
if (markdownBodyNodes) {
for (let i = 0; i < markdownBodyNodes.length; i++) {
const markdownBodyNode = markdownBodyNodes[i];
const imageNodes = markdownBodyNode.querySelectorAll("img")
imageNodes.forEach(function (node) {
if (node) {
node.dataset.src = node.src;
}
})
lightGallery(markdownBodyNode, {
selector: 'img',
})
}
}
document.addEventListener("alpine:init", () => {
Alpine.data("journals", () => ({
likedIds: [],
init() {
this.likedIds = JSON.parse(localStorage.getItem("anatole.likes.journal.ids") || "[]");
},
liked(id) {
return this.likedIds.includes(id);
},
async handleLike(journalId) {
if (this.liked(journalId)) {
return
}
const xhr = new XMLHttpRequest();
xhr.open('POST', "/api/content/journals/" + journalId + "/likes");
xhr.onload = () => {
this.likedIds = [...this.likedIds, journalId];
localStorage.setItem('anatole.likes.journal.ids', JSON.stringify(this.likedIds));
const likesNode = document.querySelector("[data-journal-id-likes=\"" + journalId + "\"]");
const likes = parseInt(likesNode.innerText);
likesNode.innerText = likes + 1;
}
xhr.onerror = function () {
alert("网络请求失败,请稍后再试");
};
xhr.send();
}
}))
})
</script>
</@layout.put>
</@layout.extends>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。