回归传统：tz2026低调出场

马黑黑

tzMaker 指令虽然少之又少，文档也足够详尽，无奈JS零基础的朋友使用起来还是多少有些难度，即便有电饭煲的加持，像小辣椒这么优秀的音画帖高手仍然不能随心所欲。于是决定做一个特殊版本，tz2026，引用资源仅一个声明 var tz = TZ('帖子元素') 加一个指令 tz.start([歌词变量])，歌词帖外加一个LRC歌词声明。看代码和解释：

<script charset="utf-8" refer src="./tz2026.js"></script>
<script>
  var tz = TZ('pa');
  var gc = `纯原生LRC歌词`;
  tz.start(gc);
</script>

这是理想状态下的JS应用。Discuz论坛不支持内联引入JS资源，它得这样：

<script>
  var jsFile = './tz2026.js';
  loadJs(jsFile, tzInit);

  function loadJs(url, callback) {
    const script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.defer = true;
    script.onload = callback;
    document.head.appendChild(script);
  }

  function tzInit() {
    var tz = TZ('pa');
    var gc = `纯原生LRC歌词`;
    tz.start(gc);
  }
</script>

还是相对简单。简单需要一些约定：

1️⃣ CSS配套文档及相关设置

<style>
  @import './tz2026.css'; /* 引入CSS文档 */
  /* 帖子元素相关 : .pa 可以改为别的名称 */
  .pa { --bg: url('https://帖子背景图片地址') no-repeat center/cover; }
  /* 播放控制器 : 约定使用 .player 选择器 */
  .player { bottom: 50px; width: 120px; height: 120px; }
  /* 背景进度条 : 约定使用 .bgprog 选择器 */
  .bgprog { bottom: 20px; }
  /* 全屏按钮 : 约定使用 .btnFs 选择器 */
  .btnFs { left: 30px; top: 30px; color: lightblue; }
  /* 原生LRC歌词 : 约定使用 .lrc 选择器 */
  .lrc { top: 40px; }
</style>

tz2026 支持 SVG 进度条，约定的标签 class 类名为 .svgprog，可以在CSS中使用该选择器设定进度条的位置。对应的 SVG 标签应使用 class="svgprog" 做标识，标签下使用 g 标签包裹三个子元素，举例如下：

<svg class="svgprog" width="200" height="200">
  <g>
    <title>调节进度</title>
    <path id="track" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightblue" stroke-width="8" />
    <path id="prog" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightgreen" stroke-width="8" />
  </g>
</svg>

其中，title 标签用于进度调整指示；两个 path 标签可以是其它的图形（例如 circle、ellipse、rect等），一个 id="track" 或 class="track"，另一个 id="prog" 或 class="prog"，prog 放置在 track 之后。

特别注意：进度条强烈建议只使用一种，用了 SVG 进度条，就不要使用背景进度条（bgprog），反之亦然。

2️⃣ HTML标签结构

<div class="pa">
  <audio src="MP3地址" autoplay loop></audio>
  <video class="pd-vid" src="背景视频地址" autoplay loop muted></video>
  <div class="lrc" data-skip="-0.2">HC</div>
  <div class="player rotate" title="Alt+X"></div>
  <div class="bgprog"></div>
  <div class="btnFs"></div>
</div>

1. 外层标签是帖子标签，有一个 id 或一个 class 就行，这是指令传参依据，id 或 class 名称用引号传参， var tz = TZ('pa')。

2. audio标签不多说，自动播放、循环播放记得设置。

3. 视频背景 video 是熊猫的使用 pd-vid 做 class，千库的用 qk-vid，其它的用 vid，这都是CSS文档封装的样式，你只需使用相同选择器设置必要的设置（如果需要的话）。

4. lrc歌词标签约定使用 class="lrc" 类样式，帖子CSS代码中使用它定义位置即可，歌词颜色什么的都不用管。data-skip 属性用来设置歌句演唱起始时间偏移量，使用小角引号将包裹浮点数值，没有偏移量需求的可以不要此属性。

5. class="player" 标签可以使用图片（img）、视频（video）等标签，请 确保class列表中拥有 player 类名，例如示例代码中的 class="player rotate"，player 不能少，rotate 是动画类选择器；如果使用视频做播放器， class="player vid rotate"，其中：player 必须有，vid 是预定义的视频样式，还需要在CSS中的 .vid{} 选择器设置尺寸、位置等，rotate 或 rot 都是预封装好的旋转动画，一个顺时针、一个逆时针，不需要旋转的就不用它们。

6. 背景进度条，如前已述，约定使用 class="bgprog" 类样式，帖子CSS相应代码应设置位置，可设置 color 属性定义进度指示颜色。若使用 SVG 进度条，则使用类似前面举例的 SVG 标签取代背景进度条标签，记得 CSS 代码用 .svgprog 取代 .bgprog 选择器。

7. 全屏按钮设定 class 类名为 btnFs，其他设置和背景进度条相同。

3️⃣ JS代码

JS代码前面已经做了举例，这里只做一些说明：

发纯音帖帖时，指令 tz.start() 不需要参数、可直接写；若是发歌词帖，则应先声明歌词变量，再在指令中使用歌词变量作为参数书写指令，例如：

// ... 先导代码
var gc = `原生LRC歌词`;
tz.start(gc);
// ... 其它代码

最后，将上述演示代码完整整理如下：

<style>
  @import './tz2026.css';
  .pa { --bg: url('https://帖子背景图片地址') no-repeat center/cover; }
  .player { bottom: 50px; width: 120px; height: 120px; }
  .bgprog { bottom: 20px; }
  .btnFs { left: 30px; top: 30px; color: lightblue; }
  .lrc { top: 40px; }
</style>

<div class="pa">
  <audio src="MP3地址" autoplay loop></audio>
  <video class="pd-vid" src="背景视频地址" autoplay loop muted></video>
  <div class="lrc">HC</div>
  <div class="player" title="Alt+X"></div>
  <div class="bgprog"></div>
  <div class="btnFs"></div>
</div>

<script>
  //var gc = `纯原生LRC歌词`; // 如果是歌词帖
  var jsFile = './tz2026.js';
  loadJs(jsFile, tzInit);

  function loadJs(url, callback) {
    const script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.defer = true;
    script.onload = callback;
    document.head.appendChild(script);
  }

  function tzInit() {
    var tz = TZ('pa');
    tz.start(); 
    //tz.start(gc); //歌词帖用这句
  }
</script>

【注意】

一、实际使用时配套的 CSS 和 JS 文件地址应改为有效的链接。

二、进度条如果希望使用 SVG 实现，应自行设计进度条样式，并将 CSS、HTML 中 bgprog 相关的背景进度代码调删掉。

三、tz2026 本质上和 tzMaker 之前推出的一系列帖子插件差不多，不同的是它脱胎于tzMaker并继承其某些特性。

☪️ 结语

tz2026 把HTML交给使用者，这应该是做帖较容易的部分；CSS有若干封装，仅需设置对应选择器的定位、颜色、背景、尺寸等；JS简化了指令，仅一两个声明和一个指令，代码量大大减少，制帖时不易出错。