tzMaker发布文章演示

马黑黑 · 发表于 2025-10-26 21:54

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-10-26 21:57 编辑

马黑黑 · 发表于 2025-10-27 12:52

也曾年轻发表于 2025-10-27 12:41
方法不错，但示例中文本段落都没有相应的选择器。

文章容器所使用的CSS选择器是 .article，加入文章段落都是用 p 标签组织，那么，加入选择器：

.article > p { text-indent: 2em; }

马黑黑 · 发表于 2025-10-26 21:56

本帖最后由马黑黑于 2025-10-26 21:57 编辑

参考代码

<style>
@import 'https://638183.freep.cn/638183/web/tz/tz.min.css';
.article { font: bold 20px/28px sans-serif; }
.article > p { margin: 10px 0; }
.txt-mid { text-align: center; }
.center { position: relative; margin: 20px auto; display: block; }
</style>
<div id="myart" class="article"></div>
<script type="module">
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.min.js';
const tz = TZ.TZ('article');
var text = `
<h2 class="txt-mid">秋天的心语</h2>
<p class="txt-mid">作者：雪松</p>
<p class="txt-mid">
<img width="600" src="https://638183.freep.cn/638183/t24/webp/xwjn.webp" alt="" />
</p>
<p>连绵不断的雨丝，如烟飘落，抽取着天地间的温度，应验着那句古老的俗语：“一场秋雨一场寒。”</p>
<p>绿的树，红的花就在这一场场冷酷无情、接连不断的秋雨里，枯萎、凋零，无声地诉说着心中的无奈与悲伤。倒时隐身枯草丛中的几朵小花，生命的倒计时中绽放着灿烂的笑容，一丝淡淡的清香扑鼻而来。令人心头一震，不由赞美生命的伟大。</p>
<p>二0二五年的深秋，被阴冷与灰色主宰。高远瓦蓝的天空总是被黑沉沉的云雾吞没，逶迤连绵的群山隐匿不见，近处的楼房亦是“犹抱琵琶半遮面”。，大街上飞驰而过的车辆睁大红黄的眼睛，努力分辨前行的方向。</p>
<p>于是，一些人开始埋怨天公的不作美，期盼风和日丽、秋阳当头的晴天。其实，埋怨是闲的，期盼也是闲的，自然界的规律岂能随意改变。</p>
<p>走在街上用心观察。美倒是无处不在，无时不有。风中飞舞的枯叶像极了翩翩起舞的彩蝶，给您美的享受；街边的青松着一身绿装，寒风中挺立，像极了保家卫国的士兵，看着令人舒坦。年轻的小伙牵着恋人的手谈笑风生，浑身看不出似毫的冷；年迈的清洁工挥动手里的扫帚，清扫脚下的落叶，眉眼里看不出似毫的烦；腰杆挺直的交警，站立在十字路口，忙而不乱地指挥车辆，也看不出丝亳的烦；孩子们的歌声天真、清翠、悦耳，似毫听不出对天气的烦。</p>
<p>岁岁年年，年年岁岁。季节的复始带来四季的变幻。春天里，我们播种；秋天里，我们收获；夏天里，我们等待；冬天里，我们休养。春天的明媚；夏天的碧绿；秋天的果实；冬天的白雪，那是大自然的杰作，涂抹着我们心田里的风景。</p>
<p>调整好自己的心态，用欣赏与包容去看待世间的一切，你就会有不一样的收获。你便能正确看待春的料峭；夏的酷暑；秋的萧瑟；冬的寒冷。若没有夏日里的炎热，哪有植物铆足劲的生长；若没有冬日里的凛冽，哪有腊梅的怒放。没有掳力前行的一代又一代中国人，哪有今天的盛世中国。</p>
<p>植根现实，踏实走好人生的每一步，定能找到属于自己的诗与远方。</p>
`;
tz.text(text, 'myart');
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=539124821'});
tz.add('img', '','center rot-ani', {
src: 'https://638183.freep.cn/638183/small/hxxb.webp',
style: 'width: 80px'
}).playmp3();
tz.bgprog().style('position: relative; margin: auto; color: plum');
</script>

复制代码

马黑黑 · 发表于 2025-10-26 22:03

核心：使用 text() 指令发布富文本。text() 指令需要两个参数：

其一，text，是要发布的 HTML 代码；
其二，id，是谁要发布富文本，或换言之，在哪个元素上发布富文本。

所以，先声明一个变量用来装载要发布的内容，变量里的内容就像写 HTML 代码一样；接着，使用 tz.text() 指令将富文本发布到指定id的元素上。

然后，可以添加音频播放按钮、音频进度控制条。

就酱。