最近浏览各路大佬的网站,发现有些基于WordPress和在typecho下的有些主题是具有发布类似说说的功能的,但目前使用的VOID主题并没有这个功能，于是想采取一些手段给安排上，毕竟自己动手丰衣足食，最终的成果在顶上的留言板那里。

如果要自己安排，需要自己动手修改主题或编写插件。主题插件都是基于php和mysql的，这个咱不会啊，而且硬上的话有可能会和主题插件冲突，下次更新主题的时候会遇到大麻烦。既然php与mysql走不通，安排网页又不止php、mysql一条路，flask 也可以。而且前几天刚刚整了一个基于flask的API，再加上上次安排botui的经验，完全可以通过API、JavaScript与<iframe>组合的方式把页面外挂在页面上，这样既不用改动主题(顶多在主题设置里面多加入几个JavaScript)，又可以解决pjax的问题(iframe不怕pjax)。

最先安排的是后端的API，有了之前的安排API的经验，这次直接在原来的API上面加上了，什么redis连接都是现成的，直接安排，改几个数据字段。

现在的API后端是这样的

可以到gist上面去看dapi.py

从变量命名风格上就明显看出来是分两次安排的，前几天某人被扒出来之后吃瓜群众去github批判其写的C语言代码，其中一大看点是变量命名风格不统一，好几种命名方法混着用，缩进也不统一。咱的代码缩进是没问题的，常写python的一般都没问题，其他语言用vscode的自动格式化就完了，但变量命名就没法看了，如果以后有人来扒咱写的代码，无论是C C++ matlab Python JavaScript 满屏幕的dog cat 喜剧效果拉满……

下一步就是安排管理后台页面了，这此就直接在原来的学习金句管理后台页面上直接改了，反正这两个功能、数据结构都高度相似。同时把分页功能加上了，同时在后端API上面实现了后端分页，防止数据过多之后管理界面加载缓慢同时找起来又麻烦，分页使用的是keenwon/jqPaginator安排的，这次是vue与jQuery联合使用的，这之前真没想到。

同时还是使用了marked添加markdown语法支持，比较简单，基本的东西都在。

最后安排的是用于嵌套的HTML页面：

可以到gist上面去看fm.html

这个页面没有用分页，而是用点击加载更多的方式，以后可以安排成不用点击，看到底下就自动加载……

其中特别注意的是这里

<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base target="_top" />
    <title>DTS iframe Page</title>

<base target="_top" />是为了点击iframe内部链接时在浏览器跳转而不是在框框里面跳转。

最后一步就是部署了

为了能动态改变<iframe>的高度，需要利用在外部页面的JavaScript脚本监控内部页面实际高度变化，可以利用JavaScript的定时功能这样联合处理。

<iframe src="https://www.dogcraft.top/talk/fm.html" id="tfdog" name="tfd" frameborder="0" height="2000px" width="100%"  style="overflow:visible;"
scrolling="auto" seamless ></iframe>

<script>
    function ResizeDog() {
        if (typeof(tfd)=="object") {
            var h1=tfd.document.body.scrollHeight;
            var h2=tfd.document.documentElement.scrollHeight;
            $("#tfdog").height(Math.max(h1,h2));
        }
        
    }
    setInterval("ResizeDog()", 500);//每500ms检测一次
</script>

跨域问题

在最后往https://dogcraft.top/talk/上面安排的时候遇到了iframe的跨域问题，由于嵌入的iframe在www.dogcraft.top下，直接安排浏览器不让操纵iframe里面的变量，所以没法直接用tfd来获取子页面的高度，在网上看了一些解决方法，都比较麻烦，最终直接在nginx里面配置了一条规则，把嵌入的页面直接改成了https://dogcraft.top/fm.html，这样就没有跨域问题了。

location /fm.html {
            root /var/www/maind/talk/;
        }

最后的问题：


整个API后端与前端JavaScript都没有对用户输入进行任何检查，不要泄露APIkey以防爆数据库与XSS攻击！