wjd
/
rui-neng
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(header): 动态化网站导航菜单 

- 替换静态导航项为动态生成的内容
- 添加特殊处理逻辑以支持产品和解决方案导航
- 优化下拉菜单样式和内容展示
master
peijunlei 2 weeks ago
parent
f5d119ed74
commit
eb2ffa7856
1 changed files with 40 additions and 149 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 189
      public/themes/website/1/zh/demo/components/header.html

189
public/themes/website/1/zh/demo/components/header.html
View File

@ -163,9 +163,28 @@
</a> </a>
<nav class="site-header__nav" aria-label="主导航"> <nav class="site-header__nav" aria-label="主导航">
<ul> <ul>
<!-- 首页 -->
<li class="site-header__nav-item"><a href="/" class="is-active">首页</a></li>
{hcTaglib:nav cid="47" max-level="2" item="vo" name="hc_header_nav" sort="sort asc"}
{php}
$nav_title = $vo['title'] ?? '';
$nav_href = $vo['href'] ?? '';
$nav_id = (int)($vo['id'] ?? 0);
$nav_cid = (int)($vo['category_id'] ?? 0);
$nav_children = $vo['children'] ?? [];
// 产品 333 / 解决方案 345 走特殊下拉
$nav_is_product = ($nav_cid === 333);
$nav_is_solution = ($nav_cid === 345);
$nav_is_home = ($nav_cid === 36);
// 普通下拉面板样式 class
$nav_mega_map = [
355 => 'support', // 服务支持
361 => 'news', // 新闻动态
365 => 'invest', // 投资者关系
371 => 'about', // 关于睿能
];
$nav_mega_class = $nav_mega_map[$nav_cid] ?? 'support';
{/php}
{if $nav_is_product}
<!-- 产品导航（特殊处理） -->
<li class="site-header__nav-item site-header__nav-item--mega"> <li class="site-header__nav-item site-header__nav-item--mega">
{hcTaglib:category id="333" item="vo" field="*"} {hcTaglib:category id="333" item="vo" field="*"}
<a <a
@ -353,7 +372,8 @@
</div> </div>
</div> </div>
</li> </li>
<!-- 解决方案 -->
{elseif $nav_is_solution /}
<!-- 解决方案（特殊处理） -->
<li class="site-header__nav-item site-header__nav-item--mega"> <li class="site-header__nav-item site-header__nav-item--mega">
<a <a
href="/solution2.html" href="/solution2.html"
@ -403,16 +423,16 @@
</div> </div>
</div> </div>
</li> </li>
<!-- 服务支持 -->
{elseif condition="!empty($nav_children)" /}
<!-- 普通下拉导航 -->
<li class="site-header__nav-item site-header__nav-item--mega"> <li class="site-header__nav-item site-header__nav-item--mega">
<a <a
href="/contact.html"
href="{$nav_href}"
class="site-header__nav-link" class="site-header__nav-link"
data-mega-trigger="support"
aria-expanded="false" aria-expanded="false"
aria-controls="nav-mega-support"
aria-controls="nav-mega-{$nav_id}"
> >
服务支持
{$nav_title}
<span class="site-header__chevron" aria-hidden="true"> <span class="site-header__chevron" aria-hidden="true">
<svg <svg
viewBox="0 0 11.2734 6.90918" viewBox="0 0 11.2734 6.90918"
@ -431,154 +451,25 @@
</svg> </svg>
</span> </span>
</a> </a>
<!-- 服务支持导航下拉面板 -->
<div class="nav-mega" id="nav-mega-support">
<div class="nav-mega" id="nav-mega-{$nav_id}">
<div class="nav-mega__inner"> <div class="nav-mega__inner">
<div class="nav-mega__dropdown-content support">
<div class="nav-mega__dropdown-content {$nav_mega_class}">
<ul class="nav-mega__row"> <ul class="nav-mega__row">
<li><a href="/download.html">下载中心</a></li>
<li><a href="/faq.html">常见问题</a></li>
<li><a href="/video.html">视频教程</a></li>
<li><a href="/announce.html">产品公告</a></li>
<li><a href="/yijianfankui.html">意见反馈</a></li>
{volist name="nav_children" id="child"}
<li><a href="{$child.href ?? ''}">{$child.title}</a></li>
{/volist}
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</li> </li>
<!-- 新闻动态 222-->
<li class="site-header__nav-item site-header__nav-item--mega">
{hcTaglib:category id="361" item="vo" field="*"}
<a
href="{$vo.alias}"
class="site-header__nav-link"
data-mega-trigger="news"
aria-expanded="false"
aria-controls="nav-mega-news"
>
{$vo.title}
<span class="site-header__chevron" aria-hidden="true">
<svg
viewBox="0 0 11.2734 6.90918"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="11.273438"
height="6.909180"
fill="none"
>
<path
id="矢量 2"
d="M0.636719 0.636272L5.63672 5.63627L10.6368 0.63623"
stroke="currentColor"
stroke-width="1.800000"
/>
</svg>
</span>
</a>
{/hcTaglib:category}
<!-- 新闻动态导航下拉面板 -->
<div class="nav-mega" id="nav-mega-news">
<div class="nav-mega__inner">
<div class="nav-mega__dropdown-content news">
<ul class="nav-mega__row">
{hcTaglib:subcategory pid="361" item="vo" sort=""}
<li><a href="{$vo.alias}">{$vo.title}</a></li>
<!-- <li><a href="/news.html">公司新闻</a></li> -->
<!-- <li><a href="/news.html">展会与活动</a></li> -->
{/hcTaglib:subcategory}
</ul>
</div>
</div>
</div>
</li>
<!-- 投资者关系 -->
<li class="site-header__nav-item site-header__nav-item--mega">
<a
href="/investment.html"
class="site-header__nav-link"
data-mega-trigger="invest"
aria-expanded="false"
aria-controls="nav-mega-invest"
>
投资者关系
<span class="site-header__chevron" aria-hidden="true">
<svg
viewBox="0 0 11.2734 6.90918"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="11.273438"
height="6.909180"
fill="none"
>
<path
id="矢量 2"
d="M0.636719 0.636272L5.63672 5.63627L10.6368 0.63623"
stroke="currentColor"
stroke-width="1.800000"
/>
</svg>
</span>
</a>
<!-- 投资者关系导航下拉面板 -->
<div class="nav-mega nav-mega--invest" id="nav-mega-invest">
<div class="nav-mega__inner">
<div class="nav-mega__dropdown-content invest">
<ul class="nav-mega__row">
<li><a href="/investment.html#info">基本信息</a></li>
<li><a href="/investment.html#announce">公司公告</a></li>
<li><a href="/investment.html#stock">股票信息</a></li>
<li><a href="/investment.html#learn">投资知识学习</a></li>
<li><a href="/investment.html#hotline">投资者热线</a></li>
</ul>
</div>
</div>
</div>
</li>
<!-- 关于睿能 -->
<li class="site-header__nav-item site-header__nav-item--mega">
<a
href="/about.html"
class="site-header__nav-link"
data-mega-trigger="about"
aria-expanded="false"
aria-controls="nav-mega-about"
>
关于睿能
<span class="site-header__chevron" aria-hidden="true">
<svg
viewBox="0 0 11.2734 6.90918"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="11.273438"
height="6.909180"
fill="none"
>
<path
id="矢量 2"
d="M0.636719 0.636272L5.63672 5.63627L10.6368 0.63623"
stroke="currentColor"
stroke-width="1.800000"
/>
</svg>
</span>
</a>
<!-- 关于睿能导航下拉面板 -->
<div class="nav-mega" id="nav-mega-about">
<div class="nav-mega__inner">
<div class="nav-mega__dropdown-content about">
<ul class="nav-mega__row">
<li><a href="/about.html#intro">公司简介</a></li>
<li><a href="/about.html#history">发展历史</a></li>
<li><a href="/about.html#culture">企业文化</a></li>
<li><a href="/about.html#global">全球布局</a></li>
<li><a href="/about.html#members">集团成员</a></li>
<li><a href="/about.html#honors">荣誉资质</a></li>
<li><a href="/about.html#csr">社会责任</a></li>
</ul>
</div>
</div>
</div>
{else /}
<!-- 无子级：普通链接 -->
<li class="site-header__nav-item">
<a href="{$nav_href}"{if condition="$nav_is_home"} class="is-active"{/if}>{$nav_title}</a>
</li> </li>
{/if}
{/hcTaglib:nav}
</ul> </ul>
</nav> </nav>
<div class="site-header__actions"> <div class="site-header__actions">

Write Preview
Loading…
Cancel
Save