跳转到主要内容
Jiewen’blog
开发与定制

页面、主题与富文本定制

适用版本:TinyTale 小程序 3.0.0 / TinyTale 配置插件 2.1.2。

优先使用后台已有配置修改站点资料、轮播、布局和主题偏好。需要改变页面结构、固定文案或渲染能力时,再修改源码并重新发布。

页面和业务入口

主页面内容位于 src/pages/index/components/,详情、登录、个人资料、发布等页面位于 src/subPackages/。导航变更时检查页面注册、路径、返回行为及分享入口,不只修改可见标题。

站点声明位于 src/subPackages/statement/index.vue。当前源码包含示例文案和待替换文字,例如 [具体法院或仲裁机构];上线前按自己的实际站点情况整理内容,不能直接把示例当作已完成的正式声明。该页面不是由后台关于设置自动生成的。

修改主题

页面主题变量集中在 src/styles/theme.scss,原生导航等运行时主题值在 src/theme/tokens.ts,UnoCSS 映射在 uno.config.ts。修改颜色时同时检查这些入口,避免页面已变色但原生导航或弹层仍使用旧值。

保留亮色、暗色及跟随系统的切换逻辑,检查正文、卡片、边框、按钮、空状态和弹层的可读性。站长是否允许用户切换、用户是否已选择偏好,也会影响看到的结果。

修改富文本

应用通过工作区依赖 @tinytale/mp-html 使用本地维护的 mp-html 包,基于上游 2.5.2。当前启用 highlight、style 和 tinytale-theme 插件。

TinyTale 富文本主题源文件为:

packages/mp-html-tinytale/plugins/tinytale-theme/theme.css

修改后,在小程序根目录运行:

pnpm mp-html:build

需要持续联调时,在另一终端运行:

pnpm mp-html:watch

应用直接加载工作区包的 dist/uni-app 生成组件,不要把生成目录当作源文件修改。同步脚本仅处理需要的静态资源,不应据旧教程再向应用复制一套渲染组件。

代码高亮和渲染属性

当前高亮使用 PrismJS 1.29.0 官方语言组件及 VSC Dark Plus 主题。调整语言或主题后通过上述构建命令生成产物;不要加入依赖浏览器 DOM 的 Prism 插件。

文章与瞬间通过 src/components/TinyTaleHtml.vue 包装渲染器。该组件默认启用懒加载;当前文章页接入了加载图与错误图,但未读取后台历史字段 enableReward 作为懒加载开关。若需要控制此行为,应明确传递对应属性并验证。

定制后的验证

用一篇含标题、列表、引用、宽表格、代码块和多尺寸图片的文章测试,再用带图瞬间检查。查看真机上的横向滚动、图片预览、长内容性能、明暗模式和分享效果。

涉及认证、上传或受限阅读时,继续使用现有接口层和会话规则,不要为页面方便而把服务器密钥放入前端或绕过服务端权限。

文档导航