1 Star 0 Fork 4

Halo/halo-theme-anatole

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
journals.ftl 7.06 KB
一键复制 编辑 原始数据 按行查看 历史
Ryan Wang 提交于 2022-06-02 15:07 +08:00 . feat: add post likes support
<#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>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
CSS
1
https://gitee.com/halo-dev/halo-theme-anatole.git
[email protected]:halo-dev/halo-theme-anatole.git
halo-dev
halo-theme-anatole
halo-theme-anatole
master

搜索帮助