226 lines
8.5 KiB
HTML
226 lines
8.5 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.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');
|
||
});
|
||
// 点击顶部搜索图标-点击取消关闭
|
||
$('#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);
|
||
});
|
||
// 英文截断
|
||
// 1. 替换所有 为普通空格（保留连续空格）
|
||
$('.ql-editor').html(function(_, html) {
|
||
return html.replace(/ /g, ' ');
|
||
});
|
||
|
||
// 2. 处理特殊换行情况
|
||
function applySmartWrapping() {
|
||
$('.ql-editor').find('*').contents().filter(function() {
|
||
return this.nodeType === 3 && this.nodeValue.trim().length > 0;
|
||
}).replaceWith(function() {
|
||
return $('<span>').addClass('wrapped-text').text(this.nodeValue);
|
||
});
|
||
|
||
$('.wrapped-text').each(function() {
|
||
const $this = $(this);
|
||
let text = $this.text();
|
||
|
||
// 处理超长连续字符串（20字符以上）
|
||
text = text.replace(/([^\s]{20,})/g, function(match) {
|
||
return match.replace(/(.{10})/g, '$1​');
|
||
});
|
||
|
||
// 保护特定术语不换行
|
||
const protectedTerms = ['launch parameters', 'specific files'];
|
||
protectedTerms.forEach(term => {
|
||
text = text.replace(new RegExp(term, 'gi'), term.replace(/ /g, ' '));
|
||
});
|
||
|
||
$this.html(text);
|
||
});
|
||
}
|
||
|
||
// 初始处理
|
||
applySmartWrapping();
|
||
|
||
// 3. 监听动态内容变化
|
||
if (typeof MutationObserver !== 'undefined') {
|
||
const observer = new MutationObserver(function(mutations) {
|
||
mutations.forEach(function() {
|
||
applySmartWrapping();
|
||
});
|
||
});
|
||
observer.observe($('.ql-editor')[0], {
|
||
childList: true,
|
||
subtree: true,
|
||
characterData: true
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
{/block} |