chore: 重写初始提交(清空历史,整理后全量提交)
This commit is contained in:
ywxapp
@@ -0,0 +1,159 @@
|
||||
{extend name="layout" /}
|
||||
{block name="title"}{$article.title} - {$siteConf.site_name|default='博客'}{/block}
|
||||
|
||||
{block name="content"}
|
||||
<div class="fb-layout">
|
||||
<main class="fb-content">
|
||||
<!-- 文章正文 -->
|
||||
<article class="fb-article">
|
||||
<div class="crumb">博文 > <a href="{:url('blog/category', ['id' => $article.cid])}">{$article.category.name|default='默认'}</a></div>
|
||||
<h1>{$article.title}</h1>
|
||||
<div class="post-meta">
|
||||
<a class="author" href="{:url('blog/article/author', ['id' => $article.uid])}">
|
||||
<img src="{$article.user.avatar|default='/static/blog/img/avatar.jpg'}" alt="">
|
||||
{$article.user.nickname|default='佚名'}
|
||||
</a>
|
||||
<span><i class="layui-icon layui-icon-read"></i> {$article.view_count|default=0}</span>
|
||||
<span>{$article.create_text}</span>
|
||||
</div>
|
||||
{if $article.cover_image}
|
||||
<div class="cover"><img src="{$article.cover_image}" alt="{$article.title}"></div>
|
||||
{/if}
|
||||
<div class="content">{$article.content|raw}</div>
|
||||
<div class="action-bar">
|
||||
<button type="button" class="fb-btn like-btn" data-id="{$article.id}"><i class="layui-icon layui-icon-praise"></i> 点赞 (<span id="likeCount">{$article.like_count}</span>)</button>
|
||||
<button type="button" class="fb-btn ghost fav-btn" data-id="{$article.id}"><i class="layui-icon layui-icon-star"></i> 收藏 (<span id="favCount">{$article.favorite_count}</span>)</button>
|
||||
<button type="button" class="fb-btn ghost share-btn"><i class="layui-icon layui-icon-share"></i> 分享</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- 评论区 -->
|
||||
<section class="fb-comments">
|
||||
<p class="ct-title">全部留言 <em id="count">{$article.comment_count}</em></p>
|
||||
|
||||
{if $is_login}
|
||||
<div class="fb-cmt-form">
|
||||
<textarea id="LAY-msg-content" placeholder="既然来了,就说几句吧" style="resize:none;"></textarea>
|
||||
<div style="margin-top:10px;display:flex;align-items:center;gap:10px;">
|
||||
<button class="fb-btn" type="button" id="item-btn">发表留言</button>
|
||||
<span class="reply-tip" id="replyTip" style="display:none;color:var(--theme);"></span>
|
||||
<button class="fb-btn ghost" type="button" id="cancelReply" style="display:none;">取消回复</button>
|
||||
</div>
|
||||
</div>
|
||||
{else /}
|
||||
<div style="padding:10px 0;color:var(--text-3);">请 <a href="{:url('auth/login')}" style="color:var(--theme);">登录</a> 后发表留言</div>
|
||||
{/if}
|
||||
|
||||
<ul class="fb-cmt-list" id="LAY-msg-box" style="list-style:none;margin:0;padding:0;">
|
||||
{volist name="comments" id="comment"}
|
||||
<li class="fb-cmt-item" data-id="{$comment.id}">
|
||||
<img src="{$comment.user.avatar|default='/static/blog/img/portrait.jpg'}" alt="">
|
||||
<div class="ci-body">
|
||||
<p style="margin:0;">
|
||||
<span class="ci-name">{$comment.user.nickname|default='佚名'}</span>
|
||||
<span class="ci-time">{$comment.create_text}</span>
|
||||
{if $is_login}<span class="ci-reply" data-id="{$comment.id}" data-name="{$comment.user.nickname}">回复</span>{/if}
|
||||
</p>
|
||||
<p class="ci-text">{$comment.content}</p>
|
||||
<ul class="fb-cmt-children">
|
||||
{volist name="comment.children" id="child"}
|
||||
<li data-id="{$child.id}">
|
||||
<img src="{$child.user.avatar|default='/static/blog/img/portrait.jpg'}" alt="">
|
||||
<div class="ci-body">
|
||||
<p style="margin:0;">
|
||||
<span class="ci-name">{$child.user.nickname|default='佚名'}</span>
|
||||
<span class="ci-time">{$child.create_text}</span>
|
||||
{if $is_login}<span class="ci-reply" data-id="{$comment.id}" data-name="{$comment.user.nickname}">回复</span>{/if}
|
||||
</p>
|
||||
<p class="ci-text">{$child.content}</p>
|
||||
</div>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
{/volist}
|
||||
</ul>
|
||||
<div class="fb-pager">{$comments|raw}</div>
|
||||
</section>
|
||||
|
||||
<!-- 相关文章推荐 -->
|
||||
{if !empty($relatedArticles)}
|
||||
<section class="fb-related">
|
||||
<p class="ct-title">相关推荐</p>
|
||||
<ul class="fb-related-list">
|
||||
{volist name="relatedArticles" id="ra"}
|
||||
<li><a href="{:url('blog/article/detail', ['id' => $ra.id])}">{$ra.title}</a><span>{$ra.category.name|default=''}</span></li>
|
||||
{/volist}
|
||||
</ul>
|
||||
</section>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
{include file="index/_sidebar" /}
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{block name="script"}
|
||||
<script>
|
||||
layui.use(['layer', 'jquery'], function(){
|
||||
var layer = layui.layer, $ = layui.$;
|
||||
$('.like-btn').click(function(){
|
||||
var id = $(this).data('id');
|
||||
$.post('{:url("interaction/like")}', { article_id: id }, function(res){
|
||||
if(res.code===1){ $('#likeCount').text(res.count); layer.msg(res.msg,{icon:1}); } else { layer.msg(res.msg,{icon:2}); }
|
||||
});
|
||||
});
|
||||
$('.fav-btn').click(function(){
|
||||
var id = $(this).data('id');
|
||||
$.post('{:url("interaction/favorite")}', { article_id: id }, function(res){
|
||||
if(res.code===1){ $('#favCount').text(res.count); layer.msg(res.msg,{icon:1}); } else { layer.msg(res.msg,{icon:2}); }
|
||||
});
|
||||
});
|
||||
$('.share-btn').click(function(){
|
||||
layer.open({ title:'分享文章', content:'<div style="padding:10px;"><input type="text" value="'+window.location.href+'" class="layui-input" readonly></div>', area:['500px','200px'] });
|
||||
$.post('{:url("interaction/share")}', { article_id: {$article.id} });
|
||||
});
|
||||
|
||||
// ===== 留言 / 回复 =====
|
||||
var replyTo = 0;
|
||||
$(document).on('click', '.ci-reply', function(){
|
||||
if(!$('#LAY-msg-content').length){ return; }
|
||||
replyTo = $(this).data('id');
|
||||
var name = $(this).data('name');
|
||||
$('#replyTip').text('回复 @' + name).show();
|
||||
$('#cancelReply').show();
|
||||
$('#LAY-msg-content').attr('placeholder', '回复 @' + name);
|
||||
$('#LAY-msg-content').focus();
|
||||
$('html,body').animate({ scrollTop: $('.fb-cmt-form').offset().top - 20 }, 300);
|
||||
});
|
||||
$('#cancelReply').on('click', function(){
|
||||
replyTo = 0;
|
||||
$('#replyTip').hide().text('');
|
||||
$(this).hide();
|
||||
$('#LAY-msg-content').attr('placeholder', '既然来了,就说几句吧').val('');
|
||||
});
|
||||
$('#item-btn').on('click', function(){
|
||||
var content = $('#LAY-msg-content').val();
|
||||
if(content.replace(/\s/g,'')==''){ layer.msg('请先输入留言内容'); return; }
|
||||
$.post('{:url("comment/add")}', { article_id: {$article.id}, parent_id: replyTo, content: content }, function(res){
|
||||
if(res.code===1){
|
||||
var d = res.data;
|
||||
var avatar = d.user.avatar || '/static/blog/img/portrait.jpg';
|
||||
if(replyTo > 0){
|
||||
var html = '<li data-id="'+d.id+'"><img src="'+avatar+'"><div class="ci-body"><p style="margin:0;"><span class="ci-name">'+d.user.nickname+'</span><span class="ci-time">'+d.create_text+'</span> <span class="ci-reply" data-id="'+replyTo+'" data-name="'+d.user.nickname+'">回复</span></p><p class="ci-text">'+d.content+'</p></div></li>';
|
||||
$('.fb-cmt-item[data-id="'+replyTo+'"] > .ci-body > .fb-cmt-children').prepend(html);
|
||||
} else {
|
||||
var html = '<li class="fb-cmt-item" data-id="'+d.id+'"><img src="'+avatar+'"><div class="ci-body"><p style="margin:0;"><span class="ci-name">'+d.user.nickname+'</span><span class="ci-time">'+d.create_text+'</span> <span class="ci-reply" data-id="'+d.id+'" data-name="'+d.user.nickname+'">回复</span></p><p class="ci-text">'+d.content+'</p><ul class="fb-cmt-children"></ul></div></li>';
|
||||
$('#LAY-msg-box').prepend(html);
|
||||
}
|
||||
$('#LAY-msg-content').val('');
|
||||
$('#count').text((parseInt($('#count').text())||0) + 1);
|
||||
replyTo = 0; $('#replyTip').hide(); $('#cancelReply').hide();
|
||||
layer.msg(res.msg,{icon:1});
|
||||
} else { layer.msg(res.msg,{icon:2}); }
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{/block}
|
||||
Reference in New Issue
Block a user