使用tzMaker发图音文帖方法
<style>.artBox { font-size: 20px; 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发表图文帖时，发现配套的CSS样式缺少了一些基本的图文设计，做文本帖得额外设置对应选择器，不很方便。因此，我在 tz.css 文档中加入了几个相关选择器，供图文帖选用，如下：</p>
<div class="codebox" data-title="文章CSS选择器及其应用">
<txt-green>/* 一、tz.css新增选择器 */</txt-green>
.wz { ... } - 图文帖容器
.tRight { ... } - inline-block对象右对齐
.tMid { ... } - inline-block对象居中
.rMid { ... } - block对象居中
.gMid { ... } - grid布局强制子元素绝对居中
<txt-green>/* 二、HTML代码使用选择器举例： */</txt-green>
<div id="article" class="<txt-blue>wz</txt-blue>">
<h1 class="<txt-blue>tMid</txt-blue>">文章标题</h1>
<p>文章段落一</p>
<p>文章段落二</p>
<p>文章段落三</p>
<p class="<txt-blue>tRight</txt-blue>">年月日盖章</p>
</div>
</div>
<p>以上是伪代码，解释说明之用，不是tzMaker发布图文帖的最终范例。使用上述CSS选择器发图文帖具体做法应如下所示（可以预览效果，但因缺少媒体资源效果不佳）：</p>
<div class="codebox" data-prev="1">
<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.css?v1';
.wz { color: darkred; background: beige; max-width: 1000px; } <txt-green>/* 设置文章容器背景、字体等，可缺省 */</txt-green>
#jdt { height: 80px; } <txt-green>/* 进度条容器，它将配合 .gMid {} 使用，令进度条居中 */</txt-green>
#bfq { height: 40px; } <txt-green>/* 播放器容器，它将配合 .Mid {} 使用，令播放器居中 */</txt-green>
</style>
<div id="wz" class="wz"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js';
const tz = TZ.TZ('pa');
var text = `
<h1 class="tMid">文章标题</h1>
<p class="tMid">作者 ：谁谁谁</p>
<p class="tMid"><img alt="配图" src="<txt-blue>图片地址</txt-blue>" /></p>
<p>文章段落一</p>
<p>文章段落二</p>
<p>文章段落三</p>
<p class="tRight">年月日签章/手印</p>
<div id="bfq" class="tMid"></div>
<div id="jdt" class="gMid"></div>
`;
tz.text(text, 'wz');
tz.add('audio', '', '', {src: '<txt-blue>MP3地址</txt-blue>'});
tz.add('img', '', '', {src: '<txt-blue>小播图片地址</txt-blue>', style: 'width: 80px'}).to(bfq).playmp3();
tz.bgprog().to(jdt);
</script>
</div>
<p>上面的代码分成三部分：</p>
<p>第一部分 ：css（1~6行）</p>
<blockquote>
@import 语句引入配套样式表资源<br>
.wz 是配套样式表资源同名选择器，可以在此做一些个性化设置<br>
.jdt 和 .bfq 是自定义选择器，分别用来装载进度条和播放器
</blockquote>
<p>第二部分 ：html（第八行）</p>
<blockquote>就一个帖子容器标签，id 和 class 同名</blockquote>
<p>第三部分 ：js（10~30行）</p>
<blockquote>
步骤一 ：导入 js 模块、声明制帖对象变量 tz（代码 11、12 行）；<br>
步骤二 ：准备文档结构和内容（代码 14~24行），变量名 text 可以是别的。其中的两个 div 标签用于安排小播和进度条。两个 div 于何位置根据自己的设计选择；<br>
步骤三 ：分别使用对应的tz指令 text()、add()、bgprog() 输出特定内容，text() 指令输出富文本，两个 add() 指令输出音频和小播图片，bgprog() 指令输出进度条。个别指令还有链式调用tz的其它指令，比如 to() 指令，将播放器、进度条放置到对应的 div 元素。<br><br>
当然，小播、进度条不一定非得放在预设的 div 中，像此前演示的那样也未尝不可。怎么安排，取决于个人设计偏好。
</blockquote>
<p>tzMaker模块主攻音画帖，这不等于说它在图文排版方面弱智，一切美好的可能都可能成为可能的存在，一切等候你神圣的召唤。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> tzMaker模块发图文帖也很便捷，正如“一切美好的可能都可能成为可能的存在”{:4_180:} 这说明很利于做文字帖。谢谢黑黑老师辛苦！ tzMaker模块适合做音画，但也能做图文，它是多功能的呢{:4_199:} 红影 发表于 2025-10-27 15:06
tzMaker模块适合做音画，但也能做图文，它是多功能的呢
关键是怎么去挖掘、发现吧 花潮论坛喜欢文字的人不少，以后可以玩这个模板了，可以加音乐的，播放器也是漂亮。黑黑威武{:4_173:} 小辣椒 发表于 2025-10-27 21:58
花潮论坛喜欢文字的人不少，以后可以玩这个模板了，可以加音乐的，播放器也是漂亮。黑黑威武
哪里哪里？还得你来封装一下，@樵歌 等着的 马黑黑 发表于 2025-10-27 18:08
关键是怎么去挖掘、发现吧
黑黑都给设置好了呢，自己没什么需要设计的了。 红影 发表于 2025-10-29 21:52
黑黑都给设置好了呢，自己没什么需要设计的了。
不是酱紫说。tz提供的是实现方法的零碎手段，怎么用是个人的事情
页:
[1]