TaoLer/view/taoler/index/article/news/detail.html
2022-08-02 21:13:36 +08:00

294 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{extend name="public/base" /}
{block name="title"}{$article.title}-{$sysInfo.webname}{/block}
{block name="keywords"}{$article.tags ?: $article.title}{/block}
{block name="description"}{$article.title},{$article.description ?? ''}{/block}
{block name="ogtitle"}<meta property="og:title" content="{$article.title}-{$sysInfo.webname}">{/block}
{block name="ogdescription"}<meta property="og:description" content="{$article.title},{$article.description ?? ''}" />{/block}
{block name="meta"}
<meta property="article:published_time" content="{$article.create_time|date='c'}"/>
<meta property="bytedance:published_time" content="{$article.create_time|date='c'}" />
<meta property="bytedance:updated_time" content="{$article.update_time|date='c'}" />
{/block}
{block name="link"}<link rel="stylesheet" href="{$Request.domain}/static/res/css/plyr.css" charset="utf-8">{/block}
{block name="column"}<div class="layui-hide-xs">{include file="/public/column" /}</div>{/block}
{block name="content"}
<div class="layui-container">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12 content detail">
<div class="fly-panel detail-box">
{//标题}
<h1 style="color:{$article.title_color ?? '#333'}; margin:10px 5px 15px 5px;" align="center">{$article.title}</h1>
{//作者}
<div class="detail-about" align="center">
<div class="detail-hits" style="left:-30px;">
<span>{$article.cate.catename} /</span>
<span>{$article.user.name} /</span>
<span class="post-time" style="padding-top: 5px;" data="{$article.create_time}">{$article.create_time}</span>
<span>/ <i class="iconfont" title="浏览">&#xe60b;</i> {$pv}</span>
</div>
</div>
<hr style="margin-bottom: 25px">
{// 内容}
<div class="detail-body photos" style="font-size: 18px;line-height: 200%;" id="content">{$article.content|raw}</div>
<div style="margin-top: 25px;">本文链接:<a href="{$Request.domain}{$Request.url}">{$Request.domain}{$Request.url}</a></div>
<div style="margin-top: 15px">
<h2>关键词</h2>
<div class="layui-btn-container" style="padding-top: 15px;">
{volist name="tags" id="vo" }
<a href="{$vo.url}"><span class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">{$vo.tag}</span></a>
{/volist}
</div>
</div>
<div style="margin: 20px 0px 15px 0px; color: rgb(130, 125, 125);">
<p>{$sysInfo.state}</p>
</div>
</div>
</div>
{//帖子管理}
{if (($article.upzip !== '') || session('?user_name'))}
<div class="detail-assist">
{notempty name="$article.upzip"}
<button type="button" class="layui-btn layui-btn-xs" id="zip-download"><i class="layui-icon layui-icon-download-circle"></i>{:lang('download files')}: {$article.downloads}次</button>
{/notempty}
<div class="fly-admin-box" data-id="{$article.id}">
{if ($user.auth ?? '')}
{if($article.is_top == 0)}
<span class="layui-btn layui-btn-xs jie-admin" type="set" field="top" rank="1" style="background-color:#ccc;" title="置顶"></span>
{else /}
<span class="layui-btn layui-btn-xs jie-admin" type="set" field="top" rank="0" title="取消置顶"></span>
{/if}
{if($article.is_hot == 0)}
<span class="layui-btn layui-btn-xs jie-admin" type="set" field="hot" rank="1" style="background-color:#ccc;" title="加精"></span>
{else /}
<span class="layui-btn layui-btn-xs jie-admin" type="set" field="hot" rank="0" title="取消加精"></span>
{/if}
{if($article.is_reply == 1)}
<span class="layui-btn layui-btn-xs jie-admin" type="set" field="reply" rank="0" title="禁评"></span>
{else /}
<span class="layui-btn layui-btn-xs jie-admin" type="set" field="reply" rank="1" style="background-color:#ccc;" title="可评"></span>
{/if}
<span id="color">{:lang('title color')}</span>
<span class="layui-btn layui-btn-xs jie-admin" type="del" title="删除"><i class="layui-icon layui-icon-delete"></i></span>
{/if}
{if(session('user_name')==$article.user.name || ($user.auth ?? ''))}
<a class="layui-btn layui-btn-xs" href="{$Request.domain}{:url('article/edit',['id'=>$article.id])}" title="编辑"><i class="layui-icon layui-icon-edit"></i></a>
{/if}
</div>
</div>
{/if}
</div>
<!--底部栏-->
<div class="site-tree-mobile-detail-bottom layui-hide-md">
<div id="LAY_jieAdmin1" data-id="{$article['id']}"></div>
</div>
</div>
{include file="public/menu" /}
{/block}
{block name="script"}
{:hook('taonyeditor')}
<script>
var collectionFind = "{:url('Collection/find')}",
collection = "{:url('collection/')}",
articleJieset = "{:url('Article/jieset')}",
articleDelete = "{:url('Article/delete')}",
commentJiedaZan = "{:url('Comment/jiedaZan')}",
commentJiedaCai = "{:url('Comment/jiedaCai')}",
commentGetDa = "{:url('Comment/getDa')}",
commentUpdateDa = "{:url('Comment/updateDa')}",
commentJiedaDelete = "{:url('Comment/jiedaDelete')}",
langCollection = "{:lang('collection')}",
langCancelCollection = "{:lang('cancel collection')}";
layui.use(['fly', 'face','colorpicker','plyr', 'laypage'], function(){
var $ = layui.jquery
,form = layui.form
,fly = layui.fly
,colorpicker = layui.colorpicker
,plyr = layui.plyr
,laytpl = layui.laytpl
,uid = layui.cache.user.uid
,laypage = layui.laypage;
//如果你是采用模版自带的编辑器,你需要开启以下语句来解析。
var taonystatus = "{:hook('taonystatus')}";
// 编辑器插件启用状态
var isShow = taonystatus ? false : true;
if(isShow) {
$('.detail-body').each(function(){
var othis = $(this), html = othis.html();
othis.html(fly.content(html));
});
}
//tpl模板给发布时间赋值
$('div.detail-hits').children('span.post-time').each(function(){
var othis = $(this), html = othis.html();
var string = laytpl('{{ d.time }}').render({
//time: html
time: othis.attr('data')
});
var posttime = layui.util.timeAgo(string, 1);
othis.text(posttime);
//console.log(othis.attr('data'));
});
//预定义颜色项
colorpicker.render({
elem: '#color'
,color: '#393d49'
,predefine: true // 开启预定义颜色
,size: 'xs'
,done: function(color){
//改变标题颜色
$('h1').css("color", color);
var id = "{$article.id}";
$.ajax({
type:'post',
url:"{:url('Article/titleColor')}",
data:{id: id,title_color: color},
dataType:'json',
success:function(data){
if(data.code == 0){
layer.msg(data.msg,{icon:6,time:2000
});
} else {
layer.open({content:data.msg,icon:5,adim:6});
}
}
});
}
});
//评论需要登陆
form.on('submit(user-comment)',function (data){
var index = layer.load(1);
var filed = data.field;
if (uid == -1) {
layer.msg('请先登陆',{icon:5,time:2000},function(){
location.href = "{:url('login/index')}";
});
} else {
$.ajax({
type: "post",
url: "{:url('article/comment')}",
data: filed,
dataType: "json",
success:function (data) {
if (data.code == 0) {
layer.msg(data.msg,{icon:6,time:2000},function () {
location.reload(true);
});
}else {
layer.open({title:'评论失败',content:data.msg,icon:5,anim:6});
}
}
});
}
return false;
});
//执行一个laypage实例
laypage.render({
elem: 'pages' //注意,这里的 test1 是 ID不用加 # 号
,count: "{$article.comments_count}" //数据总数,从服务端得到
,limit: 10
,curr : {$page}
//获取起始页
,jump: function(obj, first){
//首次不执行
if(!first){
var page = obj.curr;
var url = "{:url('article/detail',['id'=>$article.id])}";
var id = "{$article.id}";
$.post("{:url('article/detail')}",{"id":id,"page":page},function(){
window.location.href = url + '?page=' + page + '#flyReply';
});
}
}
});
//下载
$('#zip-download').click(function (){
var id = "{$article.id}";
$.ajax({
type:"post",
url:"{:url('article/download')}",
data:{id:id},
success:function (data) {
location.href = "{:url('article/download',['id'=>$article.id])}";
}
});
});
plyr.setup();
});
</script>
<script type="text/javascript">
// 点击图片放大
$(function(){
$(".photos").on("click","img",function(){
var _this = $(this);
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
});
function imgShow(outerdiv, innerdiv, bigimg, _this){
var src = _this.attr("src");
$(bigimg).attr("src", src);
$("<img/>").attr("src", src).on("load",function(){
var windowW = $(window).width();
var windowH = $(window).height();
var realWidth = this.width;
var realHeight = this.height;
var imgWidth, imgHeight;
var scale = 0.8;
if(realHeight>windowH*scale) {
//判断图片高度
imgHeight = windowH*scale;
imgWidth = imgHeight/realHeight*realWidth;
if(imgWidth>windowW*scale) {
//如宽度扔大于窗口宽度
imgWidth = windowW*scale;
}
} else if(realWidth>windowW*scale) {
imgWidth = windowW*scale;
imgHeight = imgWidth/realWidth*realHeight;
} else {
//如果图片真实高度和宽度都符合要求,高宽不变
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigimg).css("width",imgWidth);
var w = (windowW-imgWidth)/2;
var h = (windowH-imgHeight)/2;
$(innerdiv).css({"top":h, "left":w});
$(outerdiv).fadeIn("fast");
});
$(outerdiv).click(function(){
//再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
}
</script>
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
{:hook('markdownhook')}
{volist name="push_js" id="vo"}
{$vo.jscode|raw}
{/volist}
{/block}