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

feat(video): 更新视频页面资源路径和动态内容渲染 

- 修改静态资源路径从相对路径改为主题分发路径
- 将硬编码的视频标题和描述替换为动态模板变量
- 实现视频分类筛选功能的动态渲染
- 使用标签库动态加载视频内容列表
- 更新搜索参数名称从tab改为cid以匹配后端接口
- 移除静态视频卡片数据，改用动态内容填充
master
zhangf@suq.cn 2 weeks ago
parent
3c8fc56406
commit
0bda461f87
2 changed files with 20 additions and 166 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      public/themes/dist_static/static/js/video.js
  2. 182
      public/themes/website/1/zh/demo/video.html

4
public/themes/dist_static/static/js/video.js
View File

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

182
public/themes/website/1/zh/demo/video.html
View File

@ -43,10 +43,10 @@
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/swiper@11/swiper-bundle.min.css">
<script type="module" crossorigin src="./static/js/video.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/video.css">
<script type="module" crossorigin src="/themes/dist_static/static/js/video.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/video.css">
</head>
<body>
@ -57,8 +57,8 @@
<main class="main-video" data-header-dark data-nav="服务支持">
<div class="v-page section__wrap">
<div class="v-head">
<h1 class="v-head__title">视频教程</h1>
<p class="v-head__desc">提供相关视频进行培训</p>
<h1 class="v-head__title">{$current_cate.title}</h1>
<p class="v-head__desc">{$current_cate.description}</p>
</div>
<div class="v-toolbar">
@ -70,14 +70,10 @@
</svg>
</button>
<div class="v-filter__dropdown" data-filter-dropdown hidden>
<button type="button" class="v-filter__dropdown-item is-active" data-filter-clear>全部</button>
<button type="button" class="v-filter__dropdown-item">工业控制</button>
<button type="button" class="v-filter__dropdown-item">伺服系统</button>
<button type="button" class="v-filter__dropdown-item">变频器</button>
<button type="button" class="v-filter__dropdown-item">软启动器</button>
<button type="button" class="v-filter__dropdown-item">工业机器人</button>
<button type="button" class="v-filter__dropdown-item">具身机器人部件</button>
<button type="button" class="v-filter__dropdown-item">纺织行业专用</button>
<button type="button" class="v-filter__dropdown-item is-active" data-tab="{$current_cate.id}" data-filter-clear>全部</button>
{volist name="sub_cates" id="vo"}
<button type="button" data-tab="{$vo.id}" class="v-filter__dropdown-item">{$vo.title}</button>
{/volist}
</div>
</div>
<form class="s-search" role="search" data-tab-search>
@ -88,163 +84,21 @@
</div>
<div class="v-grid">
<button type="button" class="v-card">
{hcTaglib:contentPage mainField="*" subField="*" name="hc_content" limit="1" item="vo"}
<button type="button" class="v-card" data-video-src="{$vo.url}">
<div class="v-card__media">
<img class="v-card__cover" src="./static/images/cover-CX4dog1w.png" alt="" width="400" height="225"
<img class="v-card__cover" src="{$vo.thumbnail.url ?? ''}" alt="" width="400" height="225"
loading="lazy" />
<span class="v-card__duration">15:01:59</span>
<span class="v-card__duration">{$vo.description}</span>
<span class="v-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
</div>
<h2 class="v-card__title">睿能伺服调试软件介绍</h2>
<time class="v-card__date" datetime="2026-05-11">2026-05-11</time>
<h2 class="v-card__title">{$vo.title}</h2>
<time class="v-card__date" datetime="{$vo.publish_time}">{$vo.publish_time}</time>
</button>
<button type="button" class="v-card">
<div class="v-card__media">
<img class="v-card__cover" src="./static/images/cover-CX4dog1w.png" alt="" width="400" height="225"
loading="lazy" />
<span class="v-card__duration">15:01:59</span>
<span class="v-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
</div>
<h2 class="v-card__title">睿能横机初级制版课程-简单绘制-绘制纬平针</h2>
<time class="v-card__date" datetime="2026-05-11">2026-05-11</time>
</button>
<button type="button" class="v-card">
<div class="v-card__media">
<img class="v-card__cover" src="./static/images/cover-CX4dog1w.png" alt="" width="400" height="225"
loading="lazy" />
<span class="v-card__duration">15:01:59</span>
<span class="v-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
</div>
<h2 class="v-card__title">睿能横机初级制版课程-系统类-制版软件安装</h2>
<time class="v-card__date" datetime="2026-05-11">2026-05-11</time>
</button>
<button type="button" class="v-card">
<div class="v-card__media">
<img class="v-card__cover" src="./static/images/cover-CX4dog1w.png" alt="" width="400" height="225"
loading="lazy" />
<span class="v-card__duration">15:01:59</span>
<span class="v-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
</div>
<h2 class="v-card__title">睿能横机初级制版课程-系统类-新建</h2>
<time class="v-card__date" datetime="2026-05-11">2026-05-11</time>
</button>
<button type="button" class="v-card">
<div class="v-card__media">
<img class="v-card__cover" src="./static/images/cover-CX4dog1w.png" alt="" width="400" height="225"
loading="lazy" />
<span class="v-card__duration">15:01:59</span>
<span class="v-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
</div>
<h2 class="v-card__title">睿能横机初级制版课程-简单绘制-绘制纬平针</h2>
<time class="v-card__date" datetime="2026-05-11">2026-05-11</time>
</button>
<button type="button" class="v-card">
<div class="v-card__media">
<img class="v-card__cover" src="./static/images/cover-CX4dog1w.png" alt="" width="400" height="225"
loading="lazy" />
<span class="v-card__duration">15:01:59</span>
<span class="v-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
</div>
<h2 class="v-card__title">睿能伺服调试软件介绍</h2>
<time class="v-card__date" datetime="2026-05-11">2026-05-11</time>
</button>
<button type="button" class="v-card">
<div class="v-card__media">
<img class="v-card__cover" src="./static/images/cover-CX4dog1w.png" alt="" width="400" height="225"
loading="lazy" />
<span class="v-card__duration">15:01:59</span>
<span class="v-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
</div>
<h2 class="v-card__title">睿能横机初级制版课程-系统类-制版软件安装</h2>
<time class="v-card__date" datetime="2026-05-11">2026-05-11</time>
</button>
<button type="button" class="v-card">
<div class="v-card__media">
<img class="v-card__cover" src="./static/images/cover-CX4dog1w.png" alt="" width="400" height="225"
loading="lazy" />
<span class="v-card__duration">15:01:59</span>
<span class="v-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
</div>
<h2 class="v-card__title">睿能横机初级制版课程-系统类-新建</h2>
<time class="v-card__date" datetime="2026-05-11">2026-05-11</time>
</button>
<button type="button" class="v-card">
<div class="v-card__media">
<img class="v-card__cover" src="./static/images/cover-CX4dog1w.png" alt="" width="400" height="225"
loading="lazy" />
<span class="v-card__duration">15:01:59</span>
<span class="v-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
</div>
<h2 class="v-card__title">睿能横机初级制版课程-简单绘制-绘制纬平针</h2>
<time class="v-card__date" datetime="2026-05-11">2026-05-11</time>
</button>
<button type="button" class="v-card">
<div class="v-card__media">
<img class="v-card__cover" src="./static/images/cover-CX4dog1w.png" alt="" width="400" height="225"
loading="lazy" />
<span class="v-card__duration">15:01:59</span>
<span class="v-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
</div>
<h2 class="v-card__title">睿能横机初级制版课程-系统类-制版软件安装</h2>
<time class="v-card__date" datetime="2026-05-11">2026-05-11</time>
</button>
<button type="button" class="v-card">
<div class="v-card__media">
<img class="v-card__cover" src="./static/images/cover-CX4dog1w.png" alt="" width="400" height="225"
loading="lazy" />
<span class="v-card__duration">15:01:59</span>
<span class="v-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
</div>
<h2 class="v-card__title">睿能伺服调试软件介绍</h2>
<time class="v-card__date" datetime="2026-05-11">2026-05-11</time>
</button>
<button type="button" class="v-card">
<div class="v-card__media">
<img class="v-card__cover" src="./static/images/cover-CX4dog1w.png" alt="" width="400" height="225"
loading="lazy" />
<span class="v-card__duration">15:01:59</span>
<span class="v-card__play" aria-hidden="true">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2013.5386%2016'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='13.538574'%20height='16.000000'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='多边形%201'%20d='M8.86093%201.45695L15.1085%2012.0297C15.5024%2012.6963%2015.0219%2013.5384%2014.2476%2013.5384L1.75245%2013.5384C0.978149%2013.5384%200.497614%2012.6963%200.891523%2012.0297L7.13907%201.45695C7.52614%200.801924%208.47387%200.801924%208.86093%201.45695Z'%20fill='rgb(255,255,255)'%20fill-rule='evenodd'%20transform='matrix(0,1,-1,0,13.5386,0)'%20/%3e%3c/svg%3e" alt="" width="14" height="16" />
</span>
</div>
<h2 class="v-card__title">睿能横机初级制版课程-系统类-新建</h2>
<time class="v-card__date" datetime="2026-05-11">2026-05-11</time>
</button>
</div>
<nav class="v-pagination" aria-label="分页">
<button type="button" class="v-pagination__btn" aria-label="上一页" disabled>
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2016.51%206.66113'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='16.510010'%20height='6.661133'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='箭头%202'%20d='M0%202.83057L16.0079%202.83057L16.0079%203.83057L0%203.83057L0%202.83057ZM15.3008%203.33057L12.826%200.855694C12.628%200.657704%2012.628%200.346576%2012.826%200.148587C13.024%20-0.0494032%2013.3351%20-0.0494037%2013.5331%200.148586L16.3615%202.97701C16.5595%203.175%2016.5595%203.48613%2016.3615%203.68412L13.5331%206.51255C13.3351%206.71054%2013.024%206.71054%2012.826%206.51255C12.628%206.31456%2012.628%206.00343%2012.826%205.80544L15.3008%203.33057Z'%20fill='rgb(102,102,102)'%20fill-rule='nonzero'%20/%3e%3c/svg%3e" alt="" width="17" height="7" />
</button>
<button type="button" class="v-pagination__page is-active" aria-current="page">1</button>
<button type="button" class="v-pagination__page">2</button>
<button type="button" class="v-pagination__page">3</button>
<button type="button" class="v-pagination__btn v-pagination__btn--next" aria-label="下一页">
<img src="data:image/svg+xml,%3csvg%20viewBox='0%200%2016.51%206.66113'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20width='16.510010'%20height='6.661133'%20fill='none'%20customFrame='%23000000'%3e%3cpath%20id='箭头%202'%20d='M0%202.83057L16.0079%202.83057L16.0079%203.83057L0%203.83057L0%202.83057ZM15.3008%203.33057L12.826%200.855694C12.628%200.657704%2012.628%200.346576%2012.826%200.148587C13.024%20-0.0494032%2013.3351%20-0.0494037%2013.5331%200.148586L16.3615%202.97701C16.5595%203.175%2016.5595%203.48613%2016.3615%203.68412L13.5331%206.51255C13.3351%206.71054%2013.024%206.71054%2012.826%206.51255C12.628%206.31456%2012.628%206.00343%2012.826%205.80544L15.3008%203.33057Z'%20fill='rgb(102,102,102)'%20fill-rule='nonzero'%20/%3e%3c/svg%3e" alt="" width="17" height="7" />
</button>
</nav>
{/hcTaglib:contentPage}
{$hc_content|raw}
</div>
<div class="v-modal" id="v-modal" hidden>

Write Preview
Loading…
Cancel
Save