tzMaker初级教程
本帖最后由 马黑黑 于 2025-10-22 12:52 编辑 <br /><br /><style>.artBox { font-size: 18px; margin: 20px auto; max-width: 1200px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
</style>
<div class="artBox">
<p>tzMaker意为做帖，tz是帖子汉语拼音首字母，maker制作者，后面通称为tz。顾名思义，tz是个做帖工具，一旦入门，使用者会爱不释手。本篇是初级教程。</p>
<p>音画帖的代码制作分为三个步骤：</p>
<h3>第一步 ：制定CSS样式</h3>
<p>CSS是 Cascading Style Sheets 的缩写，意为层叠样式表，相当于帖子的设计图纸。它需要一个 <style> ... </style> 标签作为载体，所设计的各种样式都放在该标签里面。tz 提供一个配套的CSS资源文档，可以在该标签中导入，然后再根据需要建立若干其它样式，也可以不建立。下面是示例：</p>
<div class="codebox" data-title="CSS样式代码:">
<style>
<txt-green>/* 导入tz配套的CSS文档 */</txt-green>
@import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
<txt-green>/* 如果需要，接着写其它CSS代码，例如下面一行是制定一张图片标签的尺寸等 */</txt-green>
.mypic { position: absolute; left: 100px; top: 100px; width: 220px; height: 460px; }
</style>
</div>
<p>先说明一下代码注释：CSS代码的注释用 <mark>/* 注释文本 */</mark> 表示，HTML代码则用 <mark><!-- 注释文本 --></mark> 这样的结构，JS支持两种注释方式，第一种专门针对单行注释，用 <mark>// 单行注释文本</mark> 表示，第二种注释方式单行、多行注释都可以用，写成 <mark>// 单行或多行注释</mark>。注释一般用在必要的地方，作用是做标记或提供说明，方便理解与维护。</p>
<p>接着分析一下上述CSS代码：上面的代码只有两句，第一句（行3）导入tz配套CSS文档；第二句（行5）写一个CSS类选择器 .mypic，制定将来通过 <txt-red>class="mypic"</txt-red> 属性设置使用该选择器的HTML标签的定位方式、左边值和上边值、宽高尺寸，还可以制定更多。</p>
<h3>第二步 ：创建HTML代码</h3>
<p>如果说CSS是图纸，那么，HTML就是房子，它长啥样由CSS样式定义。HTML代码由一系列HTML标签有机组成，做帖用到的首先是 <div> ... </div> 标签，用它来做帖子的容器，帖子的其它内容都放在这个 div 标签省略号处。标签又称元素，也叫节点，容器标签即容器元素或容器节点一般统一叫做父元素，其下的标签或元素或节点一般统一叫做子元素。看例子加以理解：</p>
<div class="codebox" data-title="HTML代码:">
<div class="pa">
<img class="mypic" src="图片地址" title="我的图片" alt="" />
</div>
</div>
<p>分析一下上面的HTML代码：第1和第3行代码是一个 div 标签，是帖子容器元素，相对于它里面包裹的各类元素（若有）而言，它是父元素。该元素使用了一个 class 属性，class="pa"，"pa" 对应于CSS的一个类选择器，.pa { ... }，放在导入的CSS文档 tz.e.css 里面。这里，.pa { ... } 是CSS图纸，它制定帖子容器的样式，而帖子容器的 div 使用 class="pa" 表明帖子容器按这个图纸建造——这就是CSS和HTML的对应关系。第二行代码是一个 <img> 图片标签，包裹在 div 元素里面，它是 div 的儿子（之一），所以是子元素，如果代码中的图片地址指向正确的图片资源，那么，这个图片就显示在帖子（容器）里面；这个 img 标签也有 class 属性，表示它所使用的图纸是 .mypic 选择器，就是前面CSS代码制定的那个 .mypic { ... }。</p>
<h3>第三步 ：使用JS操控帖子</h3>
<p>JS全称叫JavaScript，是嵌入式的web页脚本语言，早期负责网页交互工作，现在已经是全能管家：CSS和HTML共同创建出来的网页它都能管。tz就是使用JS开发，利用JS的强大管控能力，为做帖创建了若干指令，使用这些tz指令，我们可以轻松地给帖子添加音频、视频、图片，做音频播放按钮和音频可控进度条等等。上代码：</p>
<div class="codebox" data-title="帖子JS代码:">
<script type="module">
<txt-green>// 导入tz模块</txt-green>
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.js';
const tz = TZ.TZ('pa'); <txt-green>// 创建tz帖笔（pa是帖子容器标识，对应于容器标签的id或class）</txt-green>
<txt-green>// 现在可以用 tz 笔给帖子容器添加各种元素了，下面是添加音频标签</txt-green>
tz.add('audio', 'aud', '', {src: '音频地址'});
</script>
</div>
<p>上面就是JS代码，JS代码放在 <script> ... </script> 标签中，该标签因为要导入模块，所以有 type="module" 属性，这个不能少。上例JS代码中的行3，导入 tz 模块，地址要准确有效；行4创建帖笔对象并授权给变量 tz，这样就可以使用 tz.e.js 模块开放的全部指令做各类事情，比如加音频、视频、图片等等。作为入门，仅需要熟悉少量几个tz指令，下面逐一介绍：</p>
<p><strong>（一）add 指令：add('标签名', 'id名', '类名', { 配置 })</strong></p>
<p>add 意为添加，就是要往帖子容器里添加什么，注意 <mark>add()</mark> 是基本结构，小括号里面有四个参数，每一个参数都是向指令传递信息，指令接收到合法的信息后就可以完成交给它的任务。第一个参数是<txt-red>'标签名'</txt-red>，是要添加的元素的名称，例如 'div' 或 'img' 或 'video'，想添加什么标签就写对应的标签英文名称，都要求写在小角引号里面；第二个参数是<txt-red>'id名'</txt-red>，元素可以拥有唯一的身份证号，id 就是元素的身份证号，通常由字母加下划线、数字组成，例如帖子容器是 'pa'或别的、图片可以是 'mypic'或你想定义的。如果不需要id，在 add() 指令中用空值表示，写成 <mark>''</mark> 即可（但要注意所创建的元素如果后续元素与之有依赖关系，那得有id）；第三个参数是<txt-red>'类名'</txt-red>，如果事先为它设计有CSS选择器（图纸），比如 .mydiv，那就写上 'mydiv'，注意不要CSS选择器开头的那个标记 <mark>.</mark> 即小角点号；第四个参数是配置参数，写在花括号 <mark> { ... }</mark> 里面，结构有点特别，还是举例说明容易理解：</p>
<div class="codebox" data-title="{配置}代码演示：">
<txt-green>// 添加一个图片，附上图片地址和其它必要属性</txt-green>
tz.add('img', '', 'mypic', <txt-red>{</txt-red> <txt-blue>src: '图片地址', alt: '', title: '我的图片'</txt-blue> <txt-red>}</txt-red>);
</div>
<p>配置内容如果很多，可以分行写（这里顺便把相应说明写在注释里）：</p>
<div class="codebox" data-title="分行写配置代码:">
<txt-green>// 添加一个图片，附上图片地址和其它必要属性</txt-green>
tz.add('img', '', 'mypic', <txt-red>{</txt-red>
<txt-blue>src</txt-blue>: '图片地址', <txt-green>// src 是图片标签的地址属性</txt-green>
<txt-blue>alt</txt-blue>: '', <txt-green>// alt 是图片标签必须属性，图片失效时显示的文字替代</txt-green>
<txt-blue>title</txt-blue>: '我的图片', <txt-green>// 鼠标移动到图片弹出的提示语，非必须</txt-green>
<txt-blue>style</txt-blue>: 'border: 1px solid red;' <txt-green>// 给图片添加个内联CSS样式（非必须），这里设置了红色边框</txt-green>
<txt-red>}</txt-red>);
</div>
<p>花括号 <mark>{}</mark> 功能很多，在JS中可以用来装载配置数据，数据由一个个的 <mark>键名: '键值'</mark> 组成，称为键值对，键名在前，不用引号（但有短连线符号连接的键名必须有引号），键值需要引号（但纯数值、布尔值不要引号），键名之后用冒号引出键值，每个键值对之间用逗号分隔。这里说的引号、逗号等，都是英文输入状态下的小角符号，不能用汉语输入状态下的全角符号。</p>
<p>不是所有要添加的元素都需要配置，若需要配置也不是什么都得配置，一切根据设计而定。下面的几个示例应该可以帮助理解这一点：</p>
<div class="codebox" data-title="更多的add()指令应用举例:">
<txt-green>// 添加一个已事先设置好CSS样式的div，#flower {} 选择器</txt-green>
tz.add('div','flower');
<txt-green>// 添加一个已事先设置好CSS样式的span标签，.bold {} 选择器</txt-green>
tz.add('span', '', 'flower');
<txt-green>// 添加一个没有id没有class的div，用配置设置内联CSS style样式</txt-green>
tz.add('div', '', '', { style: 'width: 100px; height: 100px; background: tan;' });
</div>
<p><strong>（二）bgprog 指令 ：tz.bgprog()</strong></p>
<p>bg 是 background（背景）的意思，prog 是 progress（进度）的意思，bgprog 就是背景进度条，作为指令，需要加上小括号，写成 <mark>tz.bgprog()</mark>。本指令会以默认的方式创建一个音频播放进度显示条，称作进度条。进度条能不能工作，取决于多种前提，其中之一是帖子音频是否已经加入，所以下方的示例，先添加音频，再添加进度条：</p>
<div class="codebox" data-title="bgprog() 指令代码:">
<txt-green>// 用 add() 指令给帖子加音频标签</txt-green>
tz.add('audio', '', '', { src: '音频地址' };
<txt-green>// 用 bgprog() 指令给帖子添加进度条</txt-green>
tz.prog();
</div>
<p>进度条的位置应该需要调整，但目前学到的指令不够用，我们先用CSS来完成进度条的位置设定：</p>
<div class="codebox" data-title="配套 bgprog() 指令的CSS代码:">
<!-- css代码 --!>
<style>
<txt-green>/* ...其它代码 */</txt-green>
<txt-green>/* 进度条 #prog 选择器 或 .prog 选择器，二者选其一 */</txt-green>
#prog { left: 30px; bottom: 20px; }
.prog { left: 30px; bottom: 20px; }
</style>
</div>
<p>#prog 或 .prog 选择器都将被认可，前者是 tz.bgprog() 指令创建的进度条 id，后者是其class类名。配套CSS文档创建有 .prog {} 选择器，所以帖子中只需要设置位置相关的属性即可，即四个可选用的属性，即 left、right、top、bottom，合理配合使用可以随心所欲安排进度条的位置。</p>
<p><strong>（三）playmp3 指令 ：playmp3()</strong></p>
<p>本指令用来指派某个元素充当音频播放暂停的控制器，例如，假设我们想用一张图片来做小播，那得用 add() 指令给帖子添加图片，紧接着链式使用 playmp3() 指令，这样，图片就成为帖子的小播了——</p>
<div class="codebox" data-title="playmp3() 指令代码:">
<txt-green>// 添加图片并令图片充当小播</txt-green>
tz.add('img', '', 'ma', { src: '图片地址'}).<txt-blue>playmp3()</txt-blue>;
</div>
<p>所添加的图片没有设置 id，类名为 ma，这样所添加的图片就会自动转动，因为配套CSS文档中提供有 .ma {} 选择器，对标播放器而设计。代码中的浅蓝色部分告诉 tz 这个刚加的图片（也可以是其它元素）做小播，就酱简单。</p>
<p><strong>（四）style 指令 ：style('css代码', '可选元素对象')</strong></p>
<p>本指令用来给刚添加的元素设置内联CSS样式，其实就是元素标签的 <mark>style="..."</mark> HTML属性，参数1是CSS代码，必须，参数2指明是哪个元素要添加内联CSS样式，可选，与 add() 指令链式使用时指向明确就不要这个参数。下面的例子在前一个例子基础上加个 style() 指令，用来补充设置小播的位置：</p>
<div class="codebox" data-title="链式使用 playmp3() 指令代码:">
tz.add('img', '', 'ma', { src: '图片地址'}).<txt-blue>playmp3()</txt-blue>.<txt-pink>style('left: 80px; top: 100px;')</txt-pink>;
</div>
<p>style() 指令能快速补充一些CSS设置，适用于少量CSS设置的环节。前面进度条指令也可以这样使用它来设置位置。</p>
<p>掌握好上面的四个tz指令，做简单音画帖绰绰有余。最后，给一个基于tz的音画帖模板，代码中粉红部分应使用自己的数据取代或者修改相应设置：</p>
<div class="codebox">
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.e.css';
<txt-green>/* 帖子容器选择器 */</txt-green>
.pa {
--offsetX: <txt-pink>81px</txt-pink>; <txt-green>/* 帖子偏移量 */</txt-green>
--bg: url('<txt-pink>图片地址</txt-pink>') <txt-pink>center/cover</txt-pink>; <txt-green>/* 帖子背景 */</txt-green>
--ma-size: 10vw; <txt-green>/* 小播尺寸 */</txt-green>
}
</style>
<div class="pa"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.e.js';
const tz = TZ.TZ('pa');
<txt-green>// 添加音频</txt-green>
tz.add('audio', '', '', {
src: '<txt-pink>音频地址</txt-pink>'
});
<txt-green>// 添加视频</txt-green>
tz.add('video', '', 'pd-vid', {
src: '<txt-pink>视频地址</txt-pink>'
});
<txt-green>// 添加图片小播</txt-green>
tz.add('img', '', 'ma', {
src: '<txt-pink>图片地址</txt-pink>'
})
.playmp3()
.style('<txt-pink>bottom: 60px;</txt-pink>');
<txt-green>//添加进度条</txt-green>
tz.bgprog().style('<txt-pink>bottom: 20px;</txt-pink>');
</script>
</div>
<p>学会模板中的几个tz指令不会有太大的难度，但需要通过实践慢慢体会、理解。这几个指令是tz的基础，弄懂它们，其余的指令也将可以逐一掌握。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 更多指令可查阅：
tzMaker指令汇总
谢谢黑黑老师辛苦，先收藏，慢慢学习理解。{:4_187:} 那么多的指令，只能慢慢熟悉了。{:5_117:}
类似AI文生图/视频 和上次那个小白的教程又不一样了{:4_199:} 这个讲解特别详细，看看这个，很多之前不理解的也知道是怎么回事了。
黑黑辛苦了{:4_199:} 这里面很多是可以使用默认的，也可以每一个都展开来另外设置，十分方便。{:4_187:} 红影 发表于 2025-10-22 22:23
这里面很多是可以使用默认的，也可以每一个都展开来另外设置，十分方便。
一般的做法是：先使用默认，不合适就添加一些东东进行调整 红影 发表于 2025-10-22 22:20
这个讲解特别详细，看看这个，很多之前不理解的也知道是怎么回事了。
黑黑辛苦了
初级教程一般都是通俗易懂的。而且这里介绍的指令不多，就四个，当然还应该加全屏指令，简单的，和 bgprog() 指令差不多的设置。 小辣椒 发表于 2025-10-22 22:20
和上次那个小白的教程又不一样了
道理相同。上一回有灌水嫌疑，这个是正宗教程。 寒冬残荷 发表于 2025-10-22 16:11
那么多的指令，只能慢慢熟悉了。
类似AI文生图/视频
四个不多吧？ 梦江南 发表于 2025-10-22 14:34
谢谢黑黑老师辛苦，先收藏，慢慢学习理解。
{:4_190:} 马黑黑 发表于 2025-10-22 22:53
一般的做法是：先使用默认，不合适就添加一些东东进行调整
对的，如果感觉合适，全用默认的话，代码可以简洁到不可思议的程度{:4_173:} 马黑黑 发表于 2025-10-22 22:54
初级教程一般都是通俗易懂的。而且这里介绍的指令不多，就四个，当然还应该加全屏指令，简单的，和 bgpro ...
嗯嗯，这四个是最主要的。 红影 发表于 2025-10-22 23:32
嗯嗯，这四个是最主要的。
应该再加上全屏，tz.fs().style('bottom: 20px'); 红影 发表于 2025-10-22 23:31
对的，如果感觉合适，全用默认的话，代码可以简洁到不可思议的程度
默认的基本不设置位置 马黑黑 发表于 2025-10-22 23:34
应该再加上全屏，tz.fs().style('bottom: 20px');
这个已经成了习惯的存在了{:4_204:} 马黑黑 发表于 2025-10-22 23:34
默认的基本不设置位置
哦，这个还是要自己设置的。 红影 发表于 2025-10-23 22:28
这个已经成了习惯的存在了
挺好用 红影 发表于 2025-10-23 22:29
哦，这个还是要自己设置的。
是的。如果设置了，就得在模块里使用 left、top，那样的话，right、bottom 就不能选用了，所以模块里不设置位置