docs(site): update site pages for v0.1.5 theme features

- Update version references to 0.1.5 across demo/docs/index
- Add instance-level theme APIs to docs.html
- Add external theme following, theme inheritance docs
- Update index.html feature description
This commit is contained in:
2026-07-24 09:57:11 +08:00
parent 517dc34435
commit d41da3c204
3 changed files with 30 additions and 10 deletions
+2 -2
View File
@@ -313,9 +313,9 @@
'', '',
'| 名称 | 值 |', '| 名称 | 值 |',
'| --- | --- |', '| --- | --- |',
'| 版本 | 0.1.4 |', '| 版本 | 0.1.5 |',
'| 依赖 | 零 |', '| 依赖 | 零 |',
'| 测试 | 469+ |', '| 测试 | 499+ |',
'', '',
'## 新增语法', '## 新增语法',
'', '',
+27 -7
View File
@@ -175,7 +175,7 @@
<header class="docs-header"> <header class="docs-header">
<h1><span class="grad">文档</span></h1> <h1><span class="grad">文档</span></h1>
<p class="sub">MetonaEditor v0.1.4 完整 API、配置与使用指南</p> <p class="sub">MetonaEditor v0.1.5 完整 API、配置与使用指南</p>
</header> </header>
<div class="container"> <div class="container">
@@ -554,20 +554,40 @@ editor<span class="c-punc">.</span><span class="c-fn">exportHTML</span><span cla
<section id="themes"> <section id="themes">
<h2>主题系统</h2> <h2>主题系统</h2>
<pre><span class="c-com">// 切换主题</span> <pre><span class="c-com">// 全局切换主题</span>
MeEditor<span class="c-punc">.</span><span class="c-fn">setTheme</span><span class="c-punc">(</span><span class="c-str">'light'</span><span class="c-punc">);</span> <span class="c-com">// 亮色</span> MeEditor<span class="c-punc">.</span><span class="c-fn">setTheme</span><span class="c-punc">(</span><span class="c-str">'light'</span><span class="c-punc">);</span> <span class="c-com">// 亮色</span>
MeEditor<span class="c-punc">.</span><span class="c-fn">setTheme</span><span class="c-punc">(</span><span class="c-str">'dark'</span><span class="c-punc">);</span> <span class="c-com">// 暗色</span> MeEditor<span class="c-punc">.</span><span class="c-fn">setTheme</span><span class="c-punc">(</span><span class="c-str">'dark'</span><span class="c-punc">);</span> <span class="c-com">// 暗色</span>
MeEditor<span class="c-punc">.</span><span class="c-fn">setTheme</span><span class="c-punc">(</span><span class="c-str">'warm'</span><span class="c-punc">);</span> <span class="c-com">// 暖色</span> MeEditor<span class="c-punc">.</span><span class="c-fn">setTheme</span><span class="c-punc">(</span><span class="c-str">'warm'</span><span class="c-punc">);</span> <span class="c-com">// 暖色</span>
MeEditor<span class="c-punc">.</span><span class="c-fn">setTheme</span><span class="c-punc">(</span><span class="c-str">'auto'</span><span class="c-punc">);</span> <span class="c-com">// 自动(默认)</span> MeEditor<span class="c-punc">.</span><span class="c-fn">setTheme</span><span class="c-punc">(</span><span class="c-str">'auto'</span><span class="c-punc">);</span> <span class="c-com">// 自动(默认)</span>
<span class="c-com">// 注册自定义主题</span> <span class="c-com">// 实例级主题(v0.1.5,每个编辑器独立)</span>
editor<span class="c-punc">.</span><span class="c-fn">setTheme</span><span class="c-punc">(</span><span class="c-str">'dark'</span><span class="c-punc">);</span>
editor<span class="c-punc">.</span><span class="c-fn">getTheme</span><span class="c-punc">();</span> <span class="c-com">// 'dark'</span>
editor<span class="c-punc">.</span><span class="c-fn">on</span><span class="c-punc">(</span><span class="c-str">'themeChange'</span><span class="c-punc">,</span> <span class="c-punc">({</span> theme <span class="c-punc">})</span> <span class="c-punc">=></span> <span class="c-punc">{});</span>
<span class="c-com">// 注册自定义主题(v0.1.5: 支持继承)</span>
<span class="c-kw">import</span> <span class="c-punc">{</span> themeUtils <span class="c-punc">}</span> <span class="c-kw">from</span> <span class="c-str">'@metona-team/metona-editor'</span><span class="c-punc">;</span> <span class="c-kw">import</span> <span class="c-punc">{</span> themeUtils <span class="c-punc">}</span> <span class="c-kw">from</span> <span class="c-str">'@metona-team/metona-editor'</span><span class="c-punc">;</span>
themeUtils<span class="c-punc">.</span><span class="c-fn">registerTheme</span><span class="c-punc">(</span><span class="c-str">'ocean'</span><span class="c-punc">,</span> <span class="c-punc">{</span> themeUtils<span class="c-punc">.</span><span class="c-fn">registerTheme</span><span class="c-punc">(</span><span class="c-str">'ocean'</span><span class="c-punc">,</span> <span class="c-punc">{</span>
bg<span class="c-punc">:</span> <span class="c-str">'#001122'</span><span class="c-punc">,</span> text<span class="c-punc">:</span> <span class="c-str">'#aabbcc'</span><span class="c-punc">,</span> accent<span class="c-punc">:</span> <span class="c-str">'#00ddff'</span><span class="c-punc">,</span> extends<span class="c-punc">:</span> <span class="c-str">'dark'</span><span class="c-punc">,</span> <span class="c-com">// 继承 dark 主题</span>
accent<span class="c-punc">:</span> <span class="c-str">'#00ddff'</span><span class="c-punc">,</span>
<span class="c-punc">});</span> <span class="c-punc">});</span>
themeUtils<span class="c-punc">.</span><span class="c-fn">applyTheme</span><span class="c-punc">(</span><span class="c-str">'ocean'</span><span class="c-punc">);</span></pre>
<p>CSS 变量:主题变量限定在 <code>.me-wrapper</code> 元素上,不污染全局样式。支持 <code>@media print</code> 打印样式。</p> <span class="c-com">// 外部主题跟随(v0.1.5</span>
themeUtils<span class="c-punc">.</span><span class="c-fn">followExternalTheme</span><span class="c-punc">(</span>
<span class="c-punc">{</span> element<span class="c-punc">:</span> document<span class="c-punc">.</span>body<span class="c-punc">,</span> attr<span class="c-punc">:</span> <span class="c-str">'data-theme'</span> <span class="c-punc">},</span>
<span class="c-punc">(</span>theme<span class="c-punc">)</span> <span class="c-punc">=></span> editor<span class="c-punc">.</span><span class="c-fn">setTheme</span><span class="c-punc">(</span>theme<span class="c-punc">)</span>
<span class="c-punc">);</span>
<span class="c-com">// 从父容器继承主题</span>
themeUtils<span class="c-punc">.</span><span class="c-fn">adoptFromParent</span><span class="c-punc">(</span>editor<span class="c-punc">.</span>container<span class="c-punc">,</span>
<span class="c-punc">(</span>theme<span class="c-punc">)</span> <span class="c-punc">=></span> editor<span class="c-punc">.</span><span class="c-fn">setTheme</span><span class="c-punc">(</span>theme<span class="c-punc">)</span>
<span class="c-punc">);</span>
<span class="c-com">// CSS 变量导出</span>
themeUtils<span class="c-punc">.</span><span class="c-fn">exportCSSVars</span><span class="c-punc">();</span> <span class="c-com">// { '--md-bg': '#fff', ... }</span>
themeUtils<span class="c-punc">.</span><span class="c-fn">getCSSVariable</span><span class="c-punc">(</span><span class="c-str">'accent'</span><span class="c-punc">);</span> <span class="c-com">// '#3b82f6'</span></pre>
<p>CSS 变量限定在 <code>.me-wrapper</code> 元素上,不污染全局。支持 <code>@media print</code> 打印样式。v0.1.5 新增实例级主题隔离、外部跟随、主题继承。</p>
</section> </section>
<!-- ======== 国际化 ======== --> <!-- ======== 国际化 ======== -->
@@ -598,7 +618,7 @@ i18nUtils<span class="c-punc">.</span><span class="c-fn">formatDate</span><span
<footer> <footer>
<div class="container"> <div class="container">
MetonaEditor v0.1.4 · <a href="https://git.metona.cn/MetonaTeam/MetonaEditor" target="_blank" rel="noopener">源码仓库</a> · MIT License MetonaEditor v0.1.5 · <a href="https://git.metona.cn/MetonaTeam/MetonaEditor" target="_blank" rel="noopener">源码仓库</a> · MIT License
</div> </div>
</footer> </footer>
+1 -1
View File
@@ -482,7 +482,7 @@
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/></svg> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/></svg>
</div> </div>
<h3>主题与国际化</h3> <h3>主题与国际化</h3>
<p>基于 CSS 变量的主题系统,内置亮 / 暗 / 暖色三套主题;中英双语开箱即用,支持 RTL 布局。</p> <p>实例级主题隔离、外部跟随同步、主题继承,内置 4 套预设;中英双语开箱即用,支持 RTL 布局。</p>
</div> </div>
<div class="feature"> <div class="feature">
<div class="feature-icon"> <div class="feature-icon">