typecho自定义便签留言板

技巧分享 · 10-17 · 95 人浏览

正如我之前所言,我是一个喜欢追求美好事物的人,现在所用的这套博客模板太过于简洁,这正是我所看重的,同时也是我所遗憾的点,太过于简洁以致于百废待兴。要“装饰”的地方很多,不过这种一点点从无到有的感觉也挺让人充满成就感的。

前面已经魔改新增了微语,相册,关于等几个独立页面板块。其中的留言版块我用的是常规页面,起初并没有想过怎么更改。后面无意看到一个博主的博客用的类似便签的方式展示留言信息,这种让人眼前一亮的展示方式深得我心。我一下子就喜欢上了。无奈,那位博主似乎没有提供对应的插件以及可复用移植的对应js。

秉着自己动手丰衣足食的理念,我决定自己动手,然后在网上查询了很多,都没有符合我所期许的,有的样式复合,功能不符合。有的功能符合,样式差强人意。我想两者结合一下就好了~于是乎,我开始自己动手,先整理一个独立的html留言版页面来试试效果。

留言版(初始版):

image.png

这是最开始,用的系统默认的常规页面,只有留言功能。


单html+js+css实现的便签留言页面效果:

image.png

我所想要的独立页面html的便签留言效果做出来了,便签是可拖拽的,pc端可实现双击临时删除。算是完全契合我的要求了,下面就是植入我的博客,作为单独的留言版块,中间出现了一点小波折。大概是下面几点问题

  1. 便签初始生成要确定位置不能超出指定容器

  2. 通过媒体查询来调整样式适配移动端

  3. 获取当前页面的评论数据动态渲染展示便签



这里涉及到一些typecho的开发,需要有一定的php代码基础,或者说了解typecho。

相关参考文档: typecho文档

        最后的最后,留言版的最终展示效果就是如下啦~   这里不做代码的分享和说明。

        一切有关技术的说明及源码相关解析我会通过csdn博客进行发布,

        博客,只单纯用来记录文字就好了。


image.png


技能
验证码:
Theme: Jasmine by Kent Liao