针对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小时后自动关闭。