tzMaker发布文章演示
本帖最后由 马黑黑 于 2025-10-26 21:57 编辑 <br /><br /><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-27 12:41
方法不错，但示例中文本段落都没有相应的选择器。
文章容器所使用的CSS选择器是 .article，加入文章段落都是用 p 标签组织，那么，加入选择器：
.article > p { text-indent: 2em; } 本帖最后由 马黑黑 于 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>
核心：使用 text() 指令发布富文本。text() 指令需要两个参数：
其一，text，是要发布的 HTML 代码；
其二，id，是谁要发布富文本，或换言之，在哪个元素上发布富文本。
所以，先声明一个变量用来装载要发布的内容，变量里的内容就像写 HTML 代码一样；接着，使用 tz.text() 指令将富文本发布到指定id的元素上。
然后，可以添加音频播放按钮、音频进度控制条。
就酱。 本帖最后由 偶然~ 于 2025-10-26 22:40 编辑
很好，明天写篇文章试一下效果 感谢马老师带来的精彩，辛苦了，祝你开心幸福、阖家安康！ 哇，使用 text() 指令还可发布文本呢，真好{:4_190:} 这个 .f 版 功能齐全，文字也能发呢。真好{:4_187:} 红影 发表于 2025-10-26 23:01
这个 .f 版 功能齐全，文字也能发呢。真好
之前的版本也都能发 偶然~ 发表于 2025-10-26 22:17
很好，明天写篇文章试一下效果
{:4_191:} 杨帆 发表于 2025-10-26 22:42
哇，使用 text() 指令还可发布文本呢，真好
{:4_190:} 偶然~ 发表于 2025-10-26 22:17
感谢马老师带来的精彩，辛苦了，祝你开心幸福、阖家安康！
{:4_180:} 马黑黑 发表于 2025-10-26 23:04
{:4_176:} 马黑黑 发表于 2025-10-26 23:04
{:4_180:} 马黑黑 发表于 2025-10-26 21:56
参考代码
或许还可以增加首行缩进。 也曾年轻 发表于 2025-10-27 08:07
或许还可以增加首行缩进。
相应选择器加入 text-indent: 2em; 即可，可以在自己的CSS中设置 马黑黑 发表于 2025-10-27 12:30
相应选择器加入 text-indent: 2em; 即可，可以在自己的CSS中设置
方法不错，但示例中文本段落都没有相应的选择器。 马黑黑 发表于 2025-10-27 12:52
文章容器所使用的CSS选择器是 .article，加入文章段落都是用 p 标签组织，那么，加入选择器：
.articl ...
这样用那些带有.txt-mid的标签也会受到影响，应该考虑排除吧。 马黑黑 发表于 2025-10-26 23:03
之前的版本也都能发
这个 .f 版浓缩了，打开看其中的内容特别累，还是看前面的版本更容易看{:4_173:} 马黑黑 发表于 2025-10-26 23:04
{:4_180:}
页:
[1]
2