针对default主题,扩展CFBlog,添加自定义参数,以扩展更多功能
前置说明
此内容是针对default主题做的变动,目录为themes/default,如果你用的其他主题,则以下内容无效。当前已经更新了4个主题了(default,default2.0,yinwang,JustNews)。
首先感谢大佬的无私奉献,让我可以白嫖到这么好的博客程序。大佬的开源项目地址:https://github.com/gdtool/cloudflare-workers-blog
在使用过程中,还是遇到了一些问题,以及可以优化的地方:比如:
- 不支持html标签,如video、iframe等
- 主页链接无法通过workers进行配置
添加html标签支持
通过研究发现,当前大佬用的md编辑器是Editor.md(github | 官网),这是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。在示例代码中发现识别和解析html标签的示例正好可以解决此类问题。
操作方法
在themes/default/admin目录下的edit.html和index.html分别都有Editormd编辑器的配置,所以可以简单粗暴的在editormd配置中添加对应的htmlDecode
配置项即可支持html标签。代码如下:
var mdEditor = editormd("content", {
//width : "90%",
height : 640,
path : "https://cdn.jsdelivr.net/npm/editor.md@1.5.0/lib/",
appendMarkdown : location.pathname.startsWith('/admin/edit/')? articleJson.contentMD: "# MarkDown" , //编辑器赋值,编辑页使用文章内容,新建页使用默认值
saveHTMLToTextarea : true,
mode : "markdown",
tex : true,
tocm : true,
htmlDecode : true, // Decode all html tags & attributes
//htmlDecode : "style,script,iframe,sub,sup|*" // Filter tags, and all attributes
codeFold : true
});
添加自定义参数
对于第2个问题,如果是想扩充链接,最简单的方式是直接修改/themes/default/index.html文件,但是每次想调整,都得进行commit操作,比较麻烦,故按照大佬的思路,将其作为一个cf workers中的一个配置项即可。
考虑到以后大佬可能会继续迭代更新,所以不打算直接在opt常量中添加配置,而是新建一个myOpt常量,以便后续能方便同步大佬的更新。
操作方法
首先解释一下配置是如何替换,直接看/themes/default/index.html文件源码,可以发现配置项都是通过<!--{opt.配置项}-->
来做为占位符,然后在cf workers中进行替换,直接搜索opt.配置项
就能看到替换的代码了。在页面访问时,均会对这些变量做替换。
了解了原理以后,改起来就比较方便了。
1. 在页面中添加占位符
修改themes/default/admin目录下的edit.html和index.html的editormd编辑器配置为:
//2021年1月2日 自定义参数
//var mdEditor = editormd("content", {
// //width : "90%",
// height : 640,
// path : "https://cdn.jsdelivr.net/npm/editor.md@1.5.0/lib/",
// appendMarkdown : articleJson.contentMD, //编辑器赋值
// saveHTMLToTextarea : true,
// mode : "markdown",
// tex : true,
// tocm : true,
// codeFold : true
// });
var mdEditor = editormd("content", <!--{ myOpt.mdEditorConfig }-->); //【注意:这里需要去掉{}里的空格】
修改/themes/default/index.html的链接为:
<!--使用下面的方式代替了
<aside id="meta-2" class="widget widget_meta"><p class="widget-title">链接</p>
<ul>
<li><a href="/admin/">管理站点</a></li>
</ul>
</aside>
-->
<!--{ myOpt.links }--> <!--【注意:这里需要去掉{}里的空格】-->
然后将修改提交到git项目上。
2. 在workers中新建自定义常量
在cf workers中的OPT后面新建一个常量myOPT
OPT={
//....原有配置
}
//自定义配置
const myOPT = {
// links-主页链接
// mdEditorConfig-编辑页md编辑器配置,支持解析html,方便支持视图、新标签页跳转等
"links":`
<aside id="meta-2" class="widget widget_meta"><p class="widget-title">链接</p>
<ul>
<li><a href="/admin/">管理站点</a></li>
<li><a href="https://console.leancloud.app/" target="_blank">管理评论</a></li>
</ul>
</aside>
`,
"mdEditorConfig":`
{
//width : "90%",
height : 640,
path : "https://cdn.jsdelivr.net/npm/editor.md@1.5.0/lib/",
appendMarkdown : location.pathname.startsWith('/admin/edit/')? articleJson.contentMD: "# MarkDown" , //编辑器赋值,编辑页使用文章内容,新建页使用默认值
saveHTMLToTextarea : true,
mode : "markdown",//markdown,gfm,
tex : true,
tocm : true,
codeFold : true,
htmlDecode : true // Decode all html tags & attributes
// Filter tags/attributes expression : tagName,tagName,...|attrName,attrName,...
//htmlDecode : "style,script,iframe,sub,sup|on*" // Filter tags, and all on* attributes
//htmlDecode : "style,script,iframe,sub,sup|*" // Filter tags, and all attributes
//htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
}`,
}
添加常量替换代码
在workers中直接按Ctrl+F,然后点击左侧箭头从查找切换替换。
替换原字符串为:
.r("opt.otherCodeE",OPT.otherCodeE),
目标字符串为:
.r("opt.otherCodeE",OPT.otherCodeE);for(var k in myOPT){e=e.r("myOPT."+k, myOPT[k])};
然后保存部署即可。
结尾
至此,修改均已完成,如果不生效,在cf的域名-》缓存->配置->点击”清除所有内容”进行缓存清除,操作完毕后,在cf blog中按Ctrl+F5进行多次强制刷新一下页面即可。
当然也可以直接在域名->概述,开启“开发模式”,这样cf不会使用静态资源缓存,可以放心调试了,3小时后自动关闭。