主题开发01:从零创建可被 WooCMS 识别的主题包
主题开发文档
admin
2026-02-26 18:47
0 条回复
目标
完成一个可被后台「主题中心」识别并可激活的主题最小包。
执行步骤
- 创建目录:
web/themes/my-theme/1.0.0/。 - 新增
manifest.json,至少包含code、version、name、presets。 - 新增
layouts/index.tmpl作为终极回退模板。 - 在
presets中声明模板键并指向 layouts 文件。 - 进入后台执行「扫描主题目录」并激活。
验收标准
- 主题中心可看到 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)
暂无回复,欢迎发表第一条回复。