https://yecnay.net/tags/cloudreve/Recent content in Cloudreve on HomeHugozh-cnMon, 19 Oct 2026 17:12:51 +0800https://yecnay.net/posts/tech/%E4%BF%AE%E6%94%B9cloudreve%E4%B8%ADonlyoffice%E7%9A%84%E5%A4%96%E8%A7%82/Mon, 19 Oct 2026 17:12:51 +0800https://yecnay.net/posts/tech/%E4%BF%AE%E6%94%B9cloudreve%E4%B8%ADonlyoffice%E7%9A%84%E5%A4%96%E8%A7%82/<p>原文件</p> <!-- raw HTML omitted --> <!-- raw HTML omitted --> <p>计划修改的文件</p> <!-- raw HTML omitted --> <!-- raw HTML omitted -->https://yecnay.net/posts/tech/cloudreve-wopi-viewer/Mon, 14 Sep 2026 11:27:51 +0800https://yecnay.net/posts/tech/cloudreve-wopi-viewer/<h1 id="cloudreve-wopi-预览界面定制">Cloudreve WOPI 预览界面定制</h1> <p>Cloudreve v4 通过 WOPI 集成 OnlyOffice / Collabora / Office Online Server 时，页面上会出现 <strong>两个</strong>同名的文件标题。 先判断你要改的是哪一个，再动手 —— 这是本技能里最容易搞错、也最容易白费功夫的地方。</p> <h2 id="1-先分清图层决定能不能改">1. 先分清图层（决定&quot;能不能改&quot;）</h2> <table> <thead> <tr> <th>位置</th> <th>由谁渲染</th> <th>数据来源</th> <th>可否定制</th> </tr> </thead> <tbody> <tr> <td>页面最顶部那条标题栏（文件类型图标 + 文件名 + 右上角全屏/关闭按钮，下方有分隔线）</td> <td><strong>Cloudreve 自己</strong>：<code>src/component/Viewers/ViewerDialog.tsx</code>（被 <code>Wopi.tsx</code> 调用，MUI <code>Dialog</code>）</td> <td>Redux <code>globalState.wopiViewer.file.name</code></td> <td>✅ 后台配置即可</td> </tr> <tr> <td>再下面一行（<code>ONLYOFFICE</code> logo + 文件名；编辑器 iframe 内部）</td> <td><strong>Document Server</strong> 的 WOPI 页（<code>hosting/wopi/...</code>，跑在 iframe 里）</td> <td>WOPI <code>CheckFileInfo.BaseFileName</code>，Cloudreve 后端 <code>service/explorer/viewer.go</code> 返回</td> <td>❌ 见第 6 节</td> </tr> </tbody> </table> <p>关键点：Cloudreve 在这套流程里是 <strong>WOPI host</strong>（<code>pkg/wopi/</code>、<code>routers/controllers/wopi.go</code>），它是把 DS 的 <code>actionUrl</code> 通过一个隐藏表单 <code>#office_form</code> <strong>POST</strong>（带 <code>access_token</code>）提交进 <code>iframe#office_frame</code>，所以：</p>