小白也可以用 tzMaker 做音画帖

马黑黑

这个世界其实不存在小白，你多少懂一点，虽然有可能懂的没有懂王懂的多。本灌水原创标题有标题党标题嫌疑，但只是为了吸睛、增粉，可怜兮兮的说。


酱紫，你得先理解一些做音画帖的代码结构，三个部分：

<!-- ①  css 代码（帖子图纸），用 style 标签组织起来 -->
<style>
    /* css 代码 */
</style>

<!-- ② HTML 代码（帖子实体），例如帖子容器应该是一个 div 标签，该 div 标签里可能会有N多个子标签，例如 img 图片标签 -->
<div id="我的帖子">
    <img src="我的图片地址" alt="" />
</div>

<!-- ③ script 代码（帖子外交）下面的代码是伪代码，展示外交功能如何实现 -->
<script>
    // 我的帖子.点击 = () => 音乐正在播放中吗 ? 让它暂停 : 继续播放；
</script>

嗯嗯，就这三件套。

下面进入正题：怎样使用 tzMaker 做音画帖。

啥是 tzMaker？tz 是“ 帖子”的汉语拼音首字母，Maker 是制造者。这个不懂懂王懂不懂？反正你懂的。

好，现在，第 ① 步里，你使用 tzMaker 的配套 CSS 资源文档路径，像酱紫：

<style>
    @import 'https://638183.freep.cn/638183/web/tz/tz.c.css';
    .pa {
        --offsetX: 81px; /* 帖子偏移量 : 不同的论坛数据不同 */
        --bg: url('背景图片地址') no-repeat center/cover; /* 图片是音画帖的画元素，这个你真懂 */
    }
    // 这里是写可能还需要的其它css代码
</style>

第 ② 步是你的帖子容器 HTML 代码，它和前面三个部件的介绍没有本质区别，但更简单：

<div id="tiezi" class="pa"></div>

class="pa" 这个是帖子容器的类属性值，它表示使用 css 文档资源中定义的一个类别的样纸。

现在应该是第 ③ 步了吧？数学不好，得往前数数，嗯嗯，是第 ③ 步了，帖子外交官出场，script 代码，人人可抄的作业：

<script type="module">
    import TZ from 'https://638183.freep.cn/638183/web/tz/tz.c.js'; // 这个是导入tzMaker 模块
    const tz = TZ.TZ('tiezi'); // tiezi 对应第二步 的 id="tiezi"
   
    // 加个MP3 : 这是音画帖的音元素，这个你也真懂
    tz.add('audio', '', '', {
            src: 'https://music.163.com/song/media/outer/url?id=1403774122'
    });
</script>

呕，音画帖可以发布了，就酱紫简单。

啥？你要加个视频？你在上面第 ③ 步的最后一个分号打个回车键，加入下面的代码：

    tz.add('video', '', 'pd-vid', {
            src: '视频地址'
    });

那个 pd-vid 是啥东东呀？pd，熊猫英文 panda 的缩写，视频来自老熊办公，绝大多数视频Logo在右上方，俺们的图纸师 tz.*.css 对它做了一些加工，你用 pd-vid 来处理它的视频，那个啥啥办公字样就看不到啦。还有处理来自钱库的，qk-vid，你从它那里贷款视频的话，就用这个 qk-vid 名称。这都是 class 名，类名，不过目前就它们俩。

啥？还要加个漂亮的花儿让音频可以控制播放暂停？没问题，酱，你在外交官的代码里在加入下面的代码：

    tz.add('img', '', '', {
        src: '你的漂亮的花朵的地址',
        alt: '',
            title: 'Alt+X'
    }).playmp3();

上面，最重要的首先是 src 后面的东东，它是你的图片；alt 是图片标签必须存在的属性，给它个空值；title 是提示语，鼠标滑动到图片上方会告诉观赏者你按 Alt+X 组合键会控制音乐播放暂停额。同样重要的是后面的 .playmp3()，这是设定你的漂亮的花朵可以控制音乐播放暂停的设定语句。

还有啥？我懂（貌似我也是懂王），你要全屏切换功能，简单着呢，给外交官加一个语句吧：

    tz.fs();

你还想要啥这里不能全都给，你可以去这里看看文档，那里有的你都能要：http://mhh.52qingyin.cn/api/tz/

樵歌

还是云里雾里的，我只能当搬运工

马黑黑

樵歌 发表于 2025-10-14 06:46
还是云里雾里的，我只能当搬运工

这是被服务宠坏的说

叫 @小辣椒 按一楼说明做一个简易模板，你就可以上手了

红影

这个十分完美，也十分全面，可以用最简洁的方式全部使用默认，直接就有帖子出来了。每一项里又都有各种功能的完善，都可以自己调整成想要的样式。这个的太厉害了

红影

黑黑从开始的设想一点点完善，一直到最后的这个完美的版本，太厉害了

红影

要想用到得心应手，还真的需要动手做一下，并一个个都用扩展的方式去实践一下，才能更体会到它的美妙
惭愧，我前面外出了，这么好的东西也没好好学，刚回来，事情也多，还需要好好去学一下才行

马黑黑

红影 发表于 2025-10-15 10:11
要想用到得心应手，还真的需要动手做一下，并一个个都用扩展的方式去实践一下，才能更体会到它的美妙{:4_19 ...

tzMaker的指令到时候会和帖宝捆绑在一起，搞个珠联璧合。届时，新的帖宝或许可以命名为帖宝宝？

马黑黑

红影 发表于 2025-10-15 10:09
黑黑从开始的设想一点点完善，一直到最后的这个完美的版本，太厉害了

这个 .c 版本还不能说完美，它没有歌词同步功能，不过对做一般的帖子已经完全可以应付。.d.trial 已经加入lrc歌词同步，一些细节进一步审核、优化后就相对完整一些了。

d 之后是 e，按规划，e 的扩展方向是支持专辑发布。然后，如果还有啥需要添加的，那就是 f 版了，方向未确定，再然后可能会有 g 版，这应该是整容版了——凡大于 f 的貌似都是整容的效果

小辣椒

马黑黑 发表于 2025-10-14 12:15
这是被服务宠坏的说

叫 @小辣椒 按一楼说明做一个简易模板，你就可以上手了

黑黑太看得起小辣椒了，小辣椒现在脑子一片浆糊的

马黑黑

小辣椒 发表于 2025-10-17 20:47
黑黑太看得起小辣椒了，小辣椒现在脑子一片浆糊的

脑浆其实和浆糊没啥区别的

老谟深虑

            谢谢老师的无私奉献，辛苦了！我是学不会了。

马黑黑

老谟深虑 发表于 2025-10-18 18:39
谢谢老师的无私奉献，辛苦了！我是学不会了。

简单三步，学学就会。关键是指令，重要的也就那么三五个