235 lines
9.4 KiB
HTML
235 lines
9.4 KiB
HTML
{extend name="public/base" /}
|
||
{block name="title"}
|
||
{notempty name="article.seo_title"}<title>{$article.seo_title}</title>{else /}{__BLOCK__}{/notempty}
|
||
{/block}
|
||
{block name="seo"}
|
||
{notempty name="article.seo_keywords"}
|
||
<meta name="keywords" content="{$article.seo_keywords}" />
|
||
<meta name="description" content="{$article.seo_desc}" />
|
||
{else /}
|
||
{__BLOCK__}
|
||
{/notempty}
|
||
{/block}
|
||
{block name="style"}
|
||
<link rel="stylesheet" href="__CSS__/topic_nas_help-detail.css" />
|
||
{/block}
|
||
{block name="header"}
|
||
<!-- 重置header头为空 -->
|
||
{/block}
|
||
{block name="main"}
|
||
<div class="oricoEGapp">
|
||
<div class="narshelpCenterdetail-app">
|
||
<div class="headtop">
|
||
{eq name=":cookie('think_lang')" value="zh-cn"}
|
||
<a href="{:url('/index/topic/nas/index')}">
|
||
{else/}
|
||
<a>
|
||
{/eq}
|
||
<img src="__IMAGES__/logo.png" class="logoicoimg">
|
||
</a>
|
||
<div style="display: flex;">
|
||
<img src="__IMAGES__/fenlei.png" class="ssicoimg" id="flico">
|
||
<img src="__IMAGES__/sousuo.png" class="ssicoimg" id="ssico" style="margin-right:32px">
|
||
</div>
|
||
</div>
|
||
<!-- 文章内容 -->
|
||
<div class="ql-container">
|
||
<div id="rendered-content" class="nhlp-app-content ql-editor">
|
||
{$article.content|raw|default=''}
|
||
</div>
|
||
</div>
|
||
<!-- 搜索 -->
|
||
<div class="nhlpapp-search">
|
||
<div class="nhlpappshtop">
|
||
<div class="nhlpapp-shdiv">
|
||
<input class="nhlp-ipt" id="search-input" placeholder="{:lang_i18n('请输入搜索关键字,如安装赛博云空间,影视库')}"
|
||
autocomplete="off">
|
||
<img src="__IMAGES__/ssapp.png" class="searchimg">
|
||
</div>
|
||
<span class="closetx">{:lang_i18n('取消')}</span>
|
||
</div>
|
||
<div class="nhlpappline"></div>
|
||
<!-- 下拉搜索框 -->
|
||
<div class="dropdown" id="dropdown"></div>
|
||
</div>
|
||
<!-- 分类文章目录 -->
|
||
<div class="nhlpapp-pagescate" {:style(['display'=> $Request.get.view == 'more' ? 'block' : 'none'])}>
|
||
<div class="nars-hlpdt-ml">
|
||
{notempty name="article_categorys"}
|
||
<div class="nav-tree">
|
||
|
||
|
||
{volist name="article_categorys" id="ac" key="idx"}
|
||
<div class="categoryhelp">
|
||
<div class="categoryhelp-title">
|
||
<div>
|
||
<img src="__IMAGES__/nars-jt.png"
|
||
class="arrow {if condition='$ac.id == $Request.get.cid'}rotate{/if}">
|
||
</div>
|
||
<span>{$ac.name}</span>
|
||
</div>
|
||
<ul class="sub-list" {if condition='$ac.id == $Request.get.cid' }style="display: block;" {/if}>
|
||
{volist name="ac.child" id="ad"}
|
||
<li class="two-mues">
|
||
<a href="#" class="two-a">
|
||
<div><img src="__IMAGES__/nars-jt.png"
|
||
class="arrow {if condition='$ad.id == $Request.get.pid'}rotate{/if}">
|
||
</div>
|
||
<span>{$ad.name}</span>
|
||
</a>
|
||
<ul class="thress-mues">
|
||
{volist name="ad.article" id="ae"}
|
||
<li>
|
||
<a href="{:url('/index/topic/nas/help_detail', ['cid' => $ac.id ,'pid' => $ad.id, 'id' => $ae.id])}"
|
||
style="margin-left:18%;padding: 0.4rem;">{$ae.title}</a>
|
||
</li>
|
||
{/volist}
|
||
</ul>
|
||
</li>
|
||
{/volist}
|
||
{volist name="ac.article" id="ar"}
|
||
<li>
|
||
<a href="{:url('/index/topic/nas/help_detail', ['cid' => $ac.id , 'id' => $ar.id])}"
|
||
style="padding-top: 6px;">
|
||
{$ar.title}
|
||
</a>
|
||
</li>
|
||
{/volist}
|
||
</ul>
|
||
</div>
|
||
{/volist}
|
||
|
||
|
||
|
||
</div>
|
||
{/notempty}
|
||
</div>
|
||
</div>
|
||
<!-- 顶部国家选择-->
|
||
<div class="top-country">
|
||
<div class="mask"></div>
|
||
<div class="action-sheet">
|
||
<div class="menu-title">
|
||
<div class="menu-name">{:lang_i18n('请择地区')}</div>
|
||
<div class="close-icon">
|
||
<img src="__IMAGES__/close.png">
|
||
</div>
|
||
</div>
|
||
<ul>
|
||
{volist name="header_languages" id="la"}
|
||
<li>
|
||
<a href="{$la.lang_url}" target="_blank">
|
||
<img src="{$la.lang_icon}">{$la.country_en_name} - {$la.lang_en_name}
|
||
</a>
|
||
</li>
|
||
{/volist}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/block}
|
||
{block name="script"}
|
||
<script type="text/javascript">
|
||
$(document).ready(function () {
|
||
// 点击顶部分类图标
|
||
$('#flico').click(function () {
|
||
$('.nhlpapp-pagescate').toggle();
|
||
// 检查分类菜单是否显示
|
||
if ($('.nhlpapp-pagescate').is(':visible')) {
|
||
// 如果分类菜单显示，则隐藏文章内容
|
||
$('#rendered-content').hide();
|
||
$('.footer').hide()
|
||
} else {
|
||
// 如果分类菜单隐藏，则显示文章内容
|
||
$('#rendered-content').show();
|
||
$('.footer').show()
|
||
}
|
||
});
|
||
// 点击分类的交互
|
||
$('.categoryhelp-title').click(function () {
|
||
$(this).next('.sub-list').slideToggle();
|
||
$(this).find('.arrow').toggleClass('rotate');
|
||
});
|
||
//分类二三级交互
|
||
$('.two-a').click(function(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation(); // 阻止事件冒泡
|
||
|
||
// 切换当前二级菜单的箭头方向
|
||
$(this).find('.arrow').toggleClass('rotate');
|
||
|
||
// 切换对应的三级菜单显示/隐藏
|
||
$(this).siblings('.thress-mues').slideToggle();
|
||
});
|
||
// 点击顶部搜索图标-点击取消关闭
|
||
$('#ssico').click(function () {
|
||
$('.nhlpapp-pagescate').hide();
|
||
$('.nhlpapp-search').show();
|
||
});
|
||
$('.closetx').click(function () {
|
||
$('.nhlpapp-search').hide();
|
||
});
|
||
// 顶部国家选择
|
||
$('.top-country-toggle').click(function () {
|
||
$(".mask,.action-sheet").show();
|
||
})
|
||
$('.top-country .close-icon').click(function () {
|
||
$(".mask,.action-sheet").hide();
|
||
})
|
||
// 搜索
|
||
var timeout = null;
|
||
$('#search-input').on('focus input', function () {
|
||
clearTimeout(timeout);
|
||
var _this = this;
|
||
timeout = setTimeout(function () {
|
||
var keywords = $(_this).val();
|
||
if (keywords == '') {
|
||
$('#dropdown').hide().html('');
|
||
return;
|
||
}
|
||
$.ajax({
|
||
url: "{:url('/index/topic/nas/help_search')}",
|
||
type: 'POST',
|
||
data: {
|
||
keywords: keywords
|
||
},
|
||
dataType: 'JSON',
|
||
success: function (r) {
|
||
var html = '';
|
||
if (r.code == 0) {
|
||
html = '<ul>'
|
||
$.each(r.data, function (k, v) {
|
||
html += '<li><a class="search-item" href="{:url(\'/index/topic/nas/help_detail\')}?id=' + v.id + '">' + v.title + '</a></li>'
|
||
})
|
||
html += '</ul>'
|
||
}
|
||
$('#dropdown').show().html(html);
|
||
}
|
||
})
|
||
}, 300);
|
||
});
|
||
// 英文截断处理
|
||
// 目标容器：富文本内容所在的元素
|
||
const contentContainer = $('#rendered-content');
|
||
|
||
// 遍历所有包含文本内容的标签（p、h1-h6、strong等）
|
||
contentContainer.find('*').each(function () {
|
||
const $element = $(this);
|
||
const htmlContent = $element.html();
|
||
|
||
// 条件1：排除内容仅为一个 的标签（如<p> </p>）
|
||
if (htmlContent.trim() === ' ') {
|
||
return; // 不处理，继续下一个元素
|
||
}
|
||
|
||
// 条件2：检查是否包含 且有实际文本内容
|
||
if (htmlContent.includes(' ')) {
|
||
// 将所有 替换为普通空格（有效占位符，支持单词完整换行）
|
||
const newContent = htmlContent.replace(/ /g, ' ');
|
||
$element.html(newContent);
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
{/block} |