Browse Source

fix(faq): 修复FAQ页面静态资源路径和动态内容渲染问题

- 修正静态资源路径从相对路径改为绝对路径 /themes/dist_static/
- 实现FAQ标题和描述的动态渲染,替换硬编码内容为模板变量
- 将固定分类标签替换为动态循环生成的分类按钮
- 集成内容分页标签实现FAQ条目的动态加载
- 修正URL参数名称从tab改为cid以匹配后端逻辑
- 添加内容过滤器去除HTML标签以确保安全显示
master
zhangf@suq.cn 3 weeks ago
parent
commit
2cd4054a43
  1. 4
      public/themes/dist_static/static/js/faq.js
  2. 102
      public/themes/website/1/zh/demo/faq.html

4
public/themes/dist_static/static/js/faq.js

@ -26,13 +26,13 @@ function initTabKeywordsSearch() {
const params = new URLSearchParams(); const params = new URLSearchParams();
const keywords = $(this).find('[name="keywords"]').val().trim(); const keywords = $(this).find('[name="keywords"]').val().trim();
const tabId = getActiveTabId(); const tabId = getActiveTabId();
if (tabId) params.set("tab", tabId);
if (tabId) params.set("cid", tabId);
if (keywords) params.set("keywords", keywords); if (keywords) params.set("keywords", keywords);
const query = params.toString(); const query = params.toString();
window.location.href = query ? `${window.location.pathname}?${query}` : window.location.pathname; window.location.href = query ? `${window.location.pathname}?${query}` : window.location.pathname;
}); });
const searchParams = new URLSearchParams(window.location.search); const searchParams = new URLSearchParams(window.location.search);
const tabParam = searchParams.get("tab");
const tabParam = searchParams.get("cid");
const keywordsParam = searchParams.get("keywords"); const keywordsParam = searchParams.get("keywords");
if (keywordsParam) $("[data-tab-search] [name='keywords']").val(keywordsParam); if (keywordsParam) $("[data-tab-search] [name='keywords']").val(keywordsParam);
if (tabParam) activateTabById(tabParam); if (tabParam) activateTabById(tabParam);

102
public/themes/website/1/zh/demo/faq.html

@ -43,10 +43,10 @@
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<script type="module" crossorigin src="./static/js/faq.js"></script>
<link rel="modulepreload" crossorigin href="./static/js/common.js">
<link rel="stylesheet" crossorigin href="./static/css/common.css">
<link rel="stylesheet" crossorigin href="./static/css/faq.css">
<script type="module" crossorigin src="/themes/dist_static/static/js/faq.js"></script>
<link rel="modulepreload" crossorigin href="/themes/dist_static/static/js/common.js">
<link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/common.css">
<link rel="stylesheet" crossorigin href="/themes/dist_static/static/css/faq.css">
</head> </head>
<body> <body>
@ -57,16 +57,16 @@
<main class="main-faq" data-header-dark data-nav="服务支持"> <main class="main-faq" data-header-dark data-nav="服务支持">
<div class="f-page section__wrap"> <div class="f-page section__wrap">
<div class="f-head"> <div class="f-head">
<h1 class="f-head__title">常见问题</h1>
<p class="f-head__desc">在这里,寻找想要的答案</p>
<h1 class="f-head__title">{$current_cate.title}</h1>
<p class="f-head__desc">{$current_cate.description}</p>
</div> </div>
<div class="f-toolbar"> <div class="f-toolbar">
<div class="f-tabs" role="tablist" aria-label="问题分类"> <div class="f-tabs" role="tablist" aria-label="问题分类">
<button type="button" class="f-tabs__item is-active" role="tab" aria-selected="true">全部</button>
<button type="button" class="f-tabs__item" role="tab" aria-selected="false">产品类</button>
<button type="button" class="f-tabs__item" role="tab" aria-selected="false">服务类</button>
<button type="button" class="f-tabs__item" role="tab" aria-selected="false">维护类</button>
<button type="button" class="f-tabs__item is-active" role="tab" data-tab="{$current_cate.id}" aria-selected="true">全部</button>
{volist name="sub_cates" id="vo"}
<button type="button" class="f-tabs__item" role="tab" data-tab="{$vo.id}" aria-selected="false">{$vo.title}</button>
{/volist}
</div> </div>
<form class="s-search" role="search" data-tab-search> <form class="s-search" role="search" data-tab-search>
<img class="s-search__icon" src="data:image/svg+xml,%3csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='24.000000'%20height='24.000000'%20fill='none'%3e%3crect%20id='搜索'%20width='24.000000'%20height='24.000000'%20x='0.000000'%20y='0.000000'%20fill='rgb(255,255,255)'%20fill-opacity='0'%20/%3e%3cpath%20id='矢量%203'%20d='M15.8481%2017.1208C14.4808%2018.2114%2012.7482%2018.8633%2010.8633%2018.8633C6.44506%2018.8633%202.86328%2015.2816%202.86328%2010.8633C2.86328%206.445%206.44506%202.86328%2010.8633%202.86328C15.2815%202.86328%2018.8633%206.445%2018.8633%2010.8633C18.8633%2012.7482%2018.2114%2014.4808%2017.1208%2015.8481L21.136%2019.8633L19.8633%2021.136L15.8481%2017.1208ZM17.0632%2010.8633C17.0632%207.43908%2014.2874%204.66326%2010.8633%204.66326C7.4392%204.66326%204.66332%207.43908%204.66332%2010.8633C4.66332%2014.2875%207.4392%2017.0633%2010.8633%2017.0633C14.2874%2017.0633%2017.0632%2014.2875%2017.0632%2010.8633Z'%20fill='rgb(175,181,185)'%20fill-rule='evenodd'%20/%3e%3c/svg%3e" alt="" width="24" height="24" /> <img class="s-search__icon" src="data:image/svg+xml,%3csvg%20viewBox='0%200%2024%2024'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='24.000000'%20height='24.000000'%20fill='none'%3e%3crect%20id='搜索'%20width='24.000000'%20height='24.000000'%20x='0.000000'%20y='0.000000'%20fill='rgb(255,255,255)'%20fill-opacity='0'%20/%3e%3cpath%20id='矢量%203'%20d='M15.8481%2017.1208C14.4808%2018.2114%2012.7482%2018.8633%2010.8633%2018.8633C6.44506%2018.8633%202.86328%2015.2816%202.86328%2010.8633C2.86328%206.445%206.44506%202.86328%2010.8633%202.86328C15.2815%202.86328%2018.8633%206.445%2018.8633%2010.8633C18.8633%2012.7482%2018.2114%2014.4808%2017.1208%2015.8481L21.136%2019.8633L19.8633%2021.136L15.8481%2017.1208ZM17.0632%2010.8633C17.0632%207.43908%2014.2874%204.66326%2010.8633%204.66326C7.4392%204.66326%204.66332%207.43908%204.66332%2010.8633C4.66332%2014.2875%207.4392%2017.0633%2010.8633%2017.0633C14.2874%2017.0633%2017.0632%2014.2875%2017.0632%2010.8633Z'%20fill='rgb(175,181,185)'%20fill-rule='evenodd'%20/%3e%3c/svg%3e" alt="" width="24" height="24" />
@ -76,96 +76,24 @@
</div> </div>
<div class="f-list"> <div class="f-list">
{hcTaglib:contentPage mainField="*" subField="*" name="hc_content" limit="10" item="vo"}
<div class="f-item"> <div class="f-item">
<button type="button" class="f-item__trigger" aria-expanded="true"> <button type="button" class="f-item__trigger" aria-expanded="true">
<span class="f-item__q"> <span class="f-item__q">
<span class="f-item__dot" aria-hidden="true"></span> <span class="f-item__dot" aria-hidden="true"></span>
<span class="f-item__title">睿能科技是一家什么样的公司?</span>
<span class="f-item__title">{$vo.title}</span>
</span> </span>
<span class="f-item__icon" aria-hidden="true"></span> <span class="f-item__icon" aria-hidden="true"></span>
</button> </button>
<div class="f-item__panel"> <div class="f-item__panel">
<p class="f-item__a"> <p class="f-item__a">
睿能科技成立于2007年,总部位于福建福州,是一家专注于工业自动化控制产品研发、生产、销售及半导体产品分销的高新技术企业。公司于2017年在上海证券交易所主板上市。经过近二十年的发展,睿能科技已从单一的针织横机电控系统供应商,转型为拥有全栈式技术架构的工业自动化控制产品供应商,业务覆盖全球,旗下拥有20余家子公司及8个海外办事处。
</p>
</div>
</div>
<div class="f-item">
<button type="button" class="f-item__trigger" aria-expanded="false">
<span class="f-item__q">
<span class="f-item__dot" aria-hidden="true"></span>
<span class="f-item__title">睿能科技的主要业务板块有哪些?</span>
</span>
<span class="f-item__icon" aria-hidden="true"></span>
</button>
<div class="f-item__panel">
<p class="f-item__a">
公司业务涵盖工业自动化控制产品与半导体产品分销两大板块,其中工业自动化聚焦控制与驱动技术研发,提供智能化产品与定制化解决方案,服务纺织、机床、3C、机器人、包装印刷等多个行业。
</p>
</div>
</div>
<div class="f-item">
<button type="button" class="f-item__trigger" aria-expanded="false">
<span class="f-item__q">
<span class="f-item__dot" aria-hidden="true"></span>
<span class="f-item__title">睿能科技的产品应用于哪些行业?</span>
</span>
<span class="f-item__icon" aria-hidden="true"></span>
</button>
<div class="f-item__panel">
<p class="f-item__a">
产品广泛应用于纺织缝制、机床与激光加工、3C电子制造、机器人、包装印刷、暖通、冶金、采矿、化工、能源电力、水务环保等领域,助力生产设备效能提升与数字化智能化升级。
</p>
</div>
</div>
<div class="f-item">
<button type="button" class="f-item__trigger" aria-expanded="false">
<span class="f-item__q">
<span class="f-item__dot" aria-hidden="true"></span>
<span class="f-item__title">睿能科技的全球化布局和服务网络如何?</span>
</span>
<span class="f-item__icon" aria-hidden="true"></span>
</button>
<div class="f-item__panel">
<p class="f-item__a">
集团旗下拥有20余家子公司、8个海外办事处,构建覆盖全球的服务网络,可快速响应并高效对接全球客户需求,提供本地化技术支持与售后服务。
</p>
</div>
</div>
<div class="f-item">
<button type="button" class="f-item__trigger" aria-expanded="false">
<span class="f-item__q">
<span class="f-item__dot" aria-hidden="true"></span>
<span class="f-item__title">确定购买前,想先看一下设备的实际效果可以吗?</span>
</span>
<span class="f-item__icon" aria-hidden="true"></span>
</button>
<div class="f-item__panel">
<p class="f-item__a">
可以。您可通过联系我们预约演示或到访展厅/客户现场观摩,了解产品实际运行效果与适配方案。也可先拨打客服热线 400-0898-188 咨询。
</p>
</div>
</div>
<div class="f-item">
<button type="button" class="f-item__trigger" aria-expanded="false">
<span class="f-item__q">
<span class="f-item__dot" aria-hidden="true"></span>
<span class="f-item__title">是否支持分期付款、融资租赁、招投标合作?</span>
</span>
<span class="f-item__icon" aria-hidden="true"></span>
</button>
<div class="f-item__panel">
<p class="f-item__a">
支持。我们可为不同客户提供灵活的商务合作方式,包括分期付款、融资租赁及招投标合作等。具体方案请与商务或销售顾问沟通确认。
{$vo.content|strip_tags}
</p> </p>
</div> </div>
</div> </div>
{/hcTaglib:contentPage}
</div> </div>
{$hc_content|raw}
</div> </div>
</main> </main>
<div class="mask" id="mask"> <div class="mask" id="mask">

Loading…
Cancel
Save