菜单
首页 下载 文档 社区 主题市场 插件市场
登录后台
社区 主题开发文档 主题开发01:从零创建可被 WooCMS 识别的主题包

主题开发01:从零创建可被 WooCMS 识别的主题包

主题开发文档 admin 2026-02-26 18:47 0 条回复

目标

完成一个可被后台「主题中心」识别并可激活的主题最小包。

执行步骤

  1. 创建目录:web/themes/my-theme/1.0.0/
  2. 新增 manifest.json,至少包含 codeversionnamepresets
  3. 新增 layouts/index.tmpl 作为终极回退模板。
  4. presets 中声明模板键并指向 layouts 文件。
  5. 进入后台执行「扫描主题目录」并激活。

验收标准

  • 主题中心可看到 my-theme@1.0.0。
  • 激活成功且前台不报模板错误。
  • 缺少特定模板时可回退到 index.tmpl。

常见误区

manifest 写了 presets 但 layouts 中文件不存在,会导致激活校验失败。

// 在此输入代码
    {
      "hook": "page.render",
      "type": "filter",
      "action": "payload_patch",
      "priority": 30,
      "fail_strategy": "fail_open",
      "params": {
        "set": {
          "plugin_footer_html": "<script>(function(){if(window.__woocmsCodeHighlightMounted){return;}window.__woocmsCodeHighlightMounted=true;function ensureCss(){if(document.getElementById('woocms-hljs-theme')){return;}var link=document.createElement('link');link.id='woocms-hljs-theme';link.rel='stylesheet';link.href='https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/styles/github-dark.min.css';document.head.appendChild(link);}function normalizeBlocks(){document.querySelectorAll('pre.ql-syntax').forEach(function(pre){if(pre.dataset.woocmsWrapped==='1'){return;}var code=document.createElement('code');code.textContent=pre.textContent||'';pre.textContent='';pre.appendChild(code);pre.dataset.woocmsWrapped='1';});}function runHighlight(){if(!window.hljs){return;}normalizeBlocks();document.querySelectorAll('pre code').forEach(function(block){if(block.dataset.woocmsHlDone==='1'){return;}try{window.hljs.highlightElement(block);block.dataset.woocmsHlDone='1';}catch(e){}});}function boot(){ensureCss();if(window.hljs){runHighlight();return;}var existing=document.getElementById('woocms-hljs-lib');if(existing){existing.addEventListener('load',runHighlight,{once:true});return;}var script=document.createElement('script');script.id='woocms-hljs-lib';script.src='https://cdn.jsdelivr.net/npm/highlight.js@11.10.0/lib/highlight.min.js';script.onload=runHighlight;document.head.appendChild(script);}if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',boot);}else{boot();}document.addEventListener('htmx:afterSwap',runHighlight);})();</script>"
        }
      }
    },





全部回复 (0)

暂无回复,欢迎发表第一条回复。

发表回复

支持 Markdown / HTML