马黑黑 发表于 2025-9-27 08:23

帖宝文档

<style>
        .artBox { font-size: 18px; }
        .artBox > p { margin: 10px 0; line-height: 30px; }
        .artBox > p:last-child { text-align: right; padding-right: 100px; }
        txt-red { color: red; }
        txt-blue { color: blue; }
</style>

<div id="prevBox"></div>
<div class="artBox">
        <h3>帖宝文档</h3>
        <p>帖宝是一款用来制作HTML帖子、写HTML文章的Web小工具,利用浏览器普遍支持的 indexedDB 数据库保存和管理数据,支持帖子、文章预览,支持文章管理,支持无网络环境下运行。下面是简要说明。</p>
        <h4>(一)运行帖宝</h4>
        <p>可以将帖宝上传到自己的空间,例如像下面这样的链接:</p>
        <blockquote><a href="http://mhh.52qingyin.cn/api/tiebao/tiebao.html" title="在新页面打开帖宝" target="_blank">tiebao.html</a></blockquote>
        <p>也可以将帖宝保存为本地 .html 文档,例如 tiebao.html,若此,即使计算机没有连接网络也可以使用现代浏览器打开和使用帖宝,需使用本地音频、图片等数据时可按如下示例获得本地资源的路径链接:</p>
        <blockquote><mark>d:\MP3\05\永远.mp3</mark> → <mark>d:///MP3/05/永远.mp3</mark></blockquote>
        <p>简言之,帖宝是一个Web页,只需要一个现代浏览器就可以运行。</p>
        <p>【附】帖宝下载地址 :访问 <a href="http://gxblk.ysepan.com/">马黑永硕网盘</a>,在“网络相关”目录可以找到帖宝。</p>
        <h4>(二)新建文章</h5>
        <p>点击帖宝主界面“新建”按钮,帖宝进入新建状态,此时会重置此前的工作环境。新建的文档需要一个标题,可在编辑界面的右上方标题文本框输入标题,缺省状态下标题名称为“未命名”,编辑当前文章过程中任何时候均可修改标题,以后打开以往文章同样可以修改随时文章标题。</p>
        <p>注意:首次运行帖宝,进入的是新建文章状态,以后再运行帖宝,会进入上一次退出帖宝时的操作状态。</p>
        <h4>(三)打开文章</h4>
        <p>“打开”按钮被点击后帖宝将进入文章列表界面,该界面浮于编辑界面上方。在文章列表界面,可以查找此前保存过的文章,找到对应文章后可以进行相关的文章管理工作,其中,点击文章标题可以打开该文章,并回到编辑文章界面;若放弃打开以往文章或其它操作,可点击文章列表界面右上角的“关闭”按钮退出文章列表回到文章编辑界面。</p>
        <h4>(四)保存文章</h4>
        <p>任何时候都可以点击“保存”按钮对正在编辑的文档进行存盘。存盘的对象包含文章标题、文章正文内容、文章更新时间等。保存过的文章正在编辑时点击“新建”或“打开”按钮也会触发保存机制,其目的是避免所做的工作无端丢失。</p>
        <h4>(五)文章预览</h4>
        <p>点击“预览”按钮可以查看正在编辑的文章的实际效果。帖宝在预览文章的同时也执行保存操作。</p>
        <p>“关闭预览”按钮在预览界面的底部,点击它返回编辑界面。如果不小心关闭了预览窗口,帖宝标签页同时也被关闭,此时可马上按“Ctrl+Shift+T”组合键重回帖宝编辑界面。</p>
        <h4>(六)删除文章</h4>
        <p>帖宝提供两个删除存档文章的操作入口:</p>
        <p>其一:在编辑界面右下方有一个“删除”按钮,点击它,对正在编辑的已存盘的文章进行删除操作,操作会有一个询问,帖宝会根据用户的选择决定是否删除文章。</p>
        <p>其二:在文章列表界面,每一个文章链接都提供有删除小按钮,在文章标题的正前方,鼠标指针移动到文章标题时会显现,点击标签前的小叉叉按钮,帖宝同样会询问是否删除此文章,并按用户的决定指令执行操作。</p>
        <p>如果需要删除整个数据库数据,可通过浏览器进行高级操作:在帖宝页面,按 F12 进入 DevTools 界面,该工具界面一般布置在浏览器的底部或右侧,找到“应用程序”(英文状态名称为 Application,没有看到的话可点一下“+”或“»”号),找到 indexedDB,找到其下的 WritingAPPDB,这个是帖宝创建的数据库,点击它,其右侧会出现“删除数据库”链接,点击该链接然后按向导操作。注意:必须打开帖宝再按 F12 然后进行相关操作,该操作界面只针对特定帖宝副本进行数据库删除工作,其它副本的帖宝所使用的数据不受本次操作影响。</p>
        <p>删除整个数据库会彻底清除所有数据,一切重来。</p>
        <h4>(七)导入导出数据</h4>
        <p>在文章列表界面,可以将当前全部文章导出备份,所导出的数据以 “帖宝_年_月_日.json” 的命名格式创建文档,自动下载到浏览器上一回下载存储的目录。导出的数据可以导入到各个帖宝运行环境,导入操作也需要在文章列表界面完成,按向导操作即可。.json 文档可以使用文本编辑器打开、编辑,编辑时应保证文档结构不被破坏,否则将会出现导入失败的情况。</p>
        <h4>(八)检索文章</h4>
        <p>查找文章在文章列表界面操作:在检索文本框中输入关键词,帖宝会将文章列表中的内容(含文章标题、更新日期时间)与关键词不相匹配的过滤掉,保留匹配的文章条目并做相应统计。关键词当前版本不针对文章内容,实际上它只对应于文章列表中的条目文本,如标题、更新日期和时间等。</p>
        <h4>(九)行列统计</h4>
        <p>文章编辑界面底部的状态栏左边提供有当前输入光标所在编辑器的行、列信息,这里,行指段落行而非自然行,亦即,自动折行的视为同一行;列从 0 开始,光标处在段落行的开头视为第 0 列。行列信息可能有助于编辑与查错。</p>
        <h4>(十)其它</h4>
        <p>帖宝属于单文件,没有任何第三方资源依赖,追求的是简洁易用。其定位为做HTML帖子、写HTML文章,希望能帮到喜欢制作音画作品、写HTML文章的朋友。</p>
        <p>初始界面配色是我喜欢的风格,拿到副本后可以自行修改CSS代码部分的 :root 选择器的几个变量,--menu* 配置工具条背景和前景色设置、--editor* 配置的是编辑框背景和前景色。若需要修改更多,可详细研究CSS代码和HTML代码的对应关系再着手操作。</p>
        <p>未尽事宜欢迎交流。</p>
        <p>马黑黑 2025年9月27日</p>
</div>

梦江南 发表于 2025-9-27 09:03

试过了,好用。谢谢黑黑老师无私分享。{:4_187:}

马黑黑 发表于 2025-9-27 09:05

梦江南 发表于 2025-9-27 09:03
试过了,好用。谢谢黑黑老师无私分享。

{:4_191:}

红影 发表于 2025-9-27 13:57

这是黑黑带来的大福利呢,存帖子太方便了。
感谢黑黑{:4_199:}

杨帆 发表于 2025-9-27 14:50

《帖宝》是马老师一首打造的精品工程,为广大音画贴制作爱好者带来了福音,马老师您辛苦了{:4_191:}

马黑黑 发表于 2025-9-27 18:39

杨帆 发表于 2025-9-27 14:50
《帖宝》是马老师一首打造的精品工程,为广大音画贴制作爱好者带来了福音,马老师您辛苦了

精品工程,严重了,这是个小工具

马黑黑 发表于 2025-9-27 18:39

红影 发表于 2025-9-27 13:57
这是黑黑带来的大福利呢,存帖子太方便了。
感谢黑黑

{:4_190:}

小辣椒 发表于 2025-9-27 23:01

现在我脑子生锈了,对新鲜的事物都感觉肯定学不会,哎。。。。好无语

小辣椒 发表于 2025-9-27 23:02

梦江南 发表于 2025-9-27 09:03
试过了,好用。谢谢黑黑老师无私分享。

哇塞,阿姨速度的,我都感觉还莫名其妙的,你已经尝试过了,这学习精神真佩服{:4_199:}

红影 发表于 2025-9-27 23:50

马黑黑 发表于 2025-9-27 18:39


再次感谢黑黑,这个太赞了{:4_199:}

马黑黑 发表于 2025-9-28 12:25

红影 发表于 2025-9-27 23:50
再次感谢黑黑,这个太赞了

阔气阔气

花飞飞 发表于 2025-9-28 12:30

开始用了,以为序号是横着排列的,没想到左边开始竖着排的{:4_173:}
还有,最先做的序号最小,这个岂不是每多一个作品,全部都要改一次序号。。

马黑黑 发表于 2025-9-28 12:31

花飞飞 发表于 2025-9-28 12:30
开始用了,以为序号是横着排列的,没想到左边开始竖着排的
还有,最先做的序号最小,这个岂不是 ...

这是利用简单的CSS多列功能,酱紫的序号还是挺有特色的
页: [1]
查看完整版本: 帖宝文档