最近浏览各路大佬的网站,发现有些基于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攻击!