添加自定义模板帮助

2026-08-19 09:43:28 +08:00 · 2025-04-19 15:24:48 +08:00
parent 11234c8e29
commit 8dfb40662c
6 changed files with 54 additions and 11 deletions
--- a/README.md
+++ b/README.md
@@ -18,7 +18,8 @@
 * 支持自动翻译弹幕、醒目留言到日语，可以在后台配置翻译目标语言
 * 支持标注打赏用户名的读音，可选拼音或日文假名
 * 支持配置自定义表情，不需要开通B站官方表情
-* 支持插件开发
+* 支持[自定义HTML模板](https://github.com/xfgryujk/blivechat/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89HTML%E6%A8%A1%E6%9D%BF)
+* 支持[插件开发](https://github.com/xfgryujk/blivechat/wiki/%E6%8F%92%E4%BB%B6%E7%B3%BB%E7%BB%9F)

 ## 使用方法

@@ -105,7 +106,7 @@

 服务器配置文件在`data/config.ini`，可以配置数据库和允许自动翻译等，编辑后要重启生效

-**自建服务器时强烈建议不使用加载器**，否则可能因为各种原因加载不出来
+**自建服务器时注意要删除loader_url配置**，否则加载不了房间页面

 ## 常用链接

--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "blivechat",
-  "version": "1.10.0-dev",
+  "version": "1.10.0-beta",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -66,8 +66,20 @@ export default {
    emoticonFileTooLarge: 'File size is too large. Max size is 1MB',

    template: 'Custom HTML Templates',
+    templateHelp: 'Help',
+    templateHelpContent: `\
+<p>Custom HTML templates allow complete customization of the room page, including DOM structure and CSS styles.
+  Templates may be developed by third-party authors, and their security and quality are the responsibility of the template author.
+  You can find some published templates on <a target="_blank" href="https://github.com/xfgryujk/blivechat/discussions/categories/%E8%87%AA%E5%AE%9A%E4%B9%89html%E6%A8%A1%E6%9D%BF"
+  >GitHub Discussions</a></p>
+<p>To install a template: Put the extracted template directory into the "data/custom_public/templates" directory, then wait
+  about 10 seconds and refresh the webpage. Alternatively, you can directly enter the template URL to use an online template</p>
+<p>Note: After modifying the template setting, the custom CSS in OBS will not take effect</p>
+<p><a target="_blank" href="https://github.com/xfgryujk/blivechat/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89HTML%E6%A8%A1%E6%9D%BF"
+  >Template Development Documentation</a></p>
+`,
    templateDefaultTitle: 'Default',
-    templateDefaultDescription: 'A YouTube-style template that can be styled with custom CSS. Choose this if you are unfamiliar with custom HTML templates, otherwise your custom CSS will not take effect',
+    templateDefaultDescription: 'A YouTube-style template that can be styled with custom CSS. Choose this if you are unfamiliar with custom HTML templates, otherwise your custom CSS in OBS will not take effect',
    templateCustomUrlTitle: 'Enter template URL',
    templateCustomUrlDescription: 'For templates not listed, you can manually enter the URL provided by the author here',
    author: 'Author: ',
@@ -193,12 +205,12 @@ export default {
  be developed by third-party authors, and the security and quality are the responsibility of the plugin author. You can
  find some published plugins in <a target="_blank" href="https://github.com/xfgryujk/blivechat/discussions/categories/%E6%8F%92%E4%BB%B6"
  >GitHub Discussions</a></p>
-<p>Plugin installation method: Put the extracted plugin directory into the "data/plugins" directory, then restart blivechat</p>
+<p>To install a plugin: Put the extracted plugin directory into the "data/plugins" directory, then restart blivechat</p>
 <p>Notes: Most plugins require enabling the "Relay messages by the server" option and connecting to the room
  in order to receive messages</p>
-<p><a target="_blank" href="https://www.bilibili.com/video/BV1nZ42187TX/">Introducing video</a></p>
-<p><a target="_blank" href="https://github.com/xfgryujk/blivechat/wiki/%E6%8F%92%E4%BB%B6%E7%B3%BB%E7%BB%9F">
-  Plugin development documentation</a></p>
+<p><a target="_blank" href="https://www.bilibili.com/video/BV1nZ42187TX/">Introducing Video</a></p>
+<p><a target="_blank" href="https://github.com/xfgryujk/blivechat/wiki/%E6%8F%92%E4%BB%B6%E7%B3%BB%E7%BB%9F"
+  >Plugin Development Documentation</a></p>
 `,
    author: 'Author: ',
    disabledByServer: 'Administration for plugins is disabled by the server',
--- a/frontend/src/lang/ja.js
+++ b/frontend/src/lang/ja.js
@@ -66,8 +66,20 @@ export default {
    emoticonFileTooLarge: 'ファイルサイズが大きすぎます。最大サイズは1MBです',

    template: 'カスタムHTMLテンプレート',
+    templateHelp: 'ヘルプ',
+    templateHelpContent: `\
+<p>カスタムHTMLテンプレートを使用すると、DOM構造やCSSスタイルを含むフロントエンドページを完全にカスタマイズできます。
+  テンプレートはサードパーティの作者によって開発される場合があり、そのセキュリティと品質はテンプレート作者の責任となります。
+  公開されているテンプレートは<a target="_blank" href="https://github.com/xfgryujk/blivechat/discussions/categories/%E8%87%AA%E5%AE%9A%E4%B9%89html%E6%A8%A1%E6%9D%BF"
+  >GitHub Discussions</a>で入手できます</p>
+<p>テンプレートのインストール方法：解凍したテンプレートディレクトリを「data/custom_public/templates」フォルダに配置し、
+  約10秒待ってからウェブページを更新してください。また、テンプレートURLを直接入力してオンラインテンプレートを使用することもできます</p>
+<p>注意：カスタムテンプレートを変更した場合、OBS内のカスタムCSSは反映されません</p>
+<p><a target="_blank" href="https://github.com/xfgryujk/blivechat/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89HTML%E6%A8%A1%E6%9D%BF"
+  >テンプレート開発ドキュメント</a></p>
+`,
    templateDefaultTitle: 'デフォルト',
-    templateDefaultDescription: 'YouTube風のテンプレートで、カスタムCSSでスタイルを変更できます。カスタムHTMLテンプレートの機能に慣れていない場合はこれを選択してください。そうでない場合、カスタムCSSが適用されない',
+    templateDefaultDescription: 'YouTube風のテンプレートで、カスタムCSSでスタイルを変更できます。カスタムHTMLテンプレートの機能に慣れていない場合はこれを選択してください。そうでない場合、OBS内のカスタムCSSは反映されません',
    templateCustomUrlTitle: 'テンプレートURLを入力',
    templateCustomUrlDescription: 'リストにないテンプレートは、作者が提供するURLをここで手動で入力できます',
    author: '作者：',
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -66,8 +66,18 @@ export default {
    emoticonFileTooLarge: '文件尺寸太大，最大1MB',

    template: '自定义HTML模板',
+    templateHelp: '帮助',
+    templateHelpContent: `\
+<p>自定义HTML模板可以完全自定义房间页面，包括DOM结构、CSS样式。模板可能由第三方作者开发，其安全性和质量由模板作者负责。
+  你可以在<a target="_blank" href="https://github.com/xfgryujk/blivechat/discussions/categories/%E8%87%AA%E5%AE%9A%E4%B9%89html%E6%A8%A1%E6%9D%BF"
+  >GitHub Discussions</a>获取一些已发布的模板</p>
+<p>模板安装方法：把解压后的模板目录放到“data/custom_public/templates”目录，然后等待约10秒后刷新网页。
+  另外你也可以直接输入模板URL来使用在线模板</p>
+<p>注意：修改自定义模板设置后，OBS中的自定义CSS将不会生效</p>
+<p><a target="_blank" href="https://github.com/xfgryujk/blivechat/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89HTML%E6%A8%A1%E6%9D%BF">模板开发文档</a></p>
+`,
    templateDefaultTitle: '默认',
-    templateDefaultDescription: '仿YouTube风格的模板，可以用自定义CSS修改样式。如果你不了解自定义HTML模板的功能，就选择这个，否则自定义CSS不会生效',
+    templateDefaultDescription: '仿YouTube风格的模板，可以用自定义CSS修改样式。如果你不了解自定义HTML模板的功能，就选择这个，否则OBS中的自定义CSS不会生效',
    templateCustomUrlTitle: '输入模板URL',
    templateCustomUrlDescription: '没有列出的模板，也可以在这里手动输入作者提供的URL',
    author: '作者：',
@@ -193,7 +203,7 @@ export default {
  你可以在<a target="_blank" href="https://github.com/xfgryujk/blivechat/discussions/categories/%E6%8F%92%E4%BB%B6"
  >GitHub Discussions</a>获取一些已发布的插件</p>
 <p>插件安装方法：把解压后的插件目录放到“data/plugins”目录，然后重启blivechat</p>
-<p>注意事项：大部分插件需要开启“通过服务器转发消息”，并且连接到房间，才能接收消息</p>
+<p>注意：大部分插件需要开启“通过服务器转发消息”，并且连接到房间，才能接收消息</p>
 <p><a target="_blank" href="https://www.bilibili.com/video/BV1nZ42187TX/">介绍视频</a></p>
 <p><a target="_blank" href="https://github.com/xfgryujk/blivechat/wiki/%E6%8F%92%E4%BB%B6%E7%B3%BB%E7%BB%9F">插件开发文档</a></p>
 `,
--- a/frontend/src/views/Home/TemplateSelect.vue
+++ b/frontend/src/views/Home/TemplateSelect.vue
@@ -1,5 +1,12 @@
 <template>
  <div>
+    <p>
+      <el-button round icon="el-icon-question" @click="isHelpVisible = true">{{$t('home.templateHelp')}}</el-button>
+      <el-dialog :title="$t('home.templateHelp')" :visible.sync="isHelpVisible">
+        <div style="word-break: initial;" v-html="$t('home.templateHelpContent')"></div>
+      </el-dialog>
+    </p>
+
    <el-radio-group :value="selectedIndex" @input="onSelect">
      <el-radio :label="INDEX_DEFAULT" border>
        <div class="card-body">
@@ -66,6 +73,7 @@ export default {
      INDEX_DEFAULT,
      INDEX_CUSTOM,

+      isHelpVisible: false,
      templates: [],
      customUrl: '',
    }