开源两个后台美化插件

AI摘要:本文介绍了两个Typecho后台美化插件:后台图片预览插件和后台样式修改插件。前者通过CSS和JS实现上传附件时的图片预览功能,提升易用性;后者支持通过CSS文件修改后台样式、预设主题、自定义CSS代码,并提供简单配置界面。插件安装和操作方法详细,旨在改善用户体验,丰富网站功能。

上篇文章介绍了 Typecho 的简洁哲学,里面有一条是:需求的有限满足

实际上很多易用性问题,我们都寄希望于第三方开发来完善,这也是官方文档建设再次被提上日程并承诺重视的原因,开放会带来期待中的多样性,造就一个有趣的小生态系统。

这次就基于 Typecho 的后台,来做一些插件来处理后台的易用性。

后台图片预览插件

其实我一直使用默认的编辑器,其中上传附件的时候,只能显示图片名称,但是显示不了图片,这样在插入文章的时候,有时候会插入错误。基于这个易用性,我研究了下发现这块其实可以通过在文章编辑页面插入CSS和JS,然后通过获取li标签的data-url的值,然后JS动态的插入DOM就可以实现图片的预览功能。

最终效果:

后台图片预览插件

主要特性

  • 在附件管理页面直接显示图片预览
  • 在文章编辑页面支持图片预览
  • 固定图片高度(最大120px)和宽度(100%)
  • 上下结构的flex布局,图片在上,文件信息在下
  • 图片懒加载,提升页面加载性能
  • 动态加载,新上传的图片自动添加预览

安装方法

  1. 将插件文件夹上传到 usr/plugins/ 目录
  2. 在 Typecho 后台启用插件

使用说明

  1. 启用插件后,进入 Typecho 后台的"附件管理"页面
  2. 所有图片附件将自动显示预览图
  3. 上传新图片后,预览图会自动添加
  4. 在文章编辑页面也可以使用图片预览功能

技术实现

  • 使用 flex 布局实现上下结构排列
  • 使用 MutationObserver 监听 DOM 变化,实现动态添加预览
  • 图片懒加载技术,优化页面加载性能
  • 响应式设计,适配不同屏幕尺寸

后台样式修改插件

设置界面

后台样式修改插件

功能特点

  • 可以通过CSS文件修改后台样式
  • 支持多种预设主题
  • 支持自定义CSS代码
  • 简单易用的配置界面

安装方法

  1. 将整个AdminStyle文件夹上传到Typecho的usr/plugins/目录下
  2. 登录Typecho后台,进入"控制台" -> "插件"
  3. 找到"AdminStyle"插件,点击"启用"

使用方法

选择预设样式

  1. 在插件配置页面,从"选择样式文件"下拉菜单中选择一个CSS文件
  2. 点击"保存设置"

添加自定义CSS

  1. 在插件配置页面的"自定义CSS"文本框中输入CSS代码
  2. 点击"保存设置"

添加新样式

  1. 在插件的assets/css/目录下创建新的CSS文件
  2. 在插件配置页面刷新,新文件会自动出现在"选择样式文件"下拉菜单中

预设样式

  • default.css: 默认样式空

插件下载地址:https://github.com/wangdaodao/TypechoPlugins


其他插件

另外最近折腾了一个好物插件:

支持物品的新增、编辑、删除、导出;
支持数据缓存设置,优化查询物品速度;

后台设置

管理页面

新增

编辑

整体效果可以看这里:https://wangdaodao.com/goods.html

后面会先让几个朋友试用,如果还可以,后面打算做几个收费的插件来试试,不过价格不会太贵,一顿早餐钱吧!

已有 34 条评论

  1. 皮皮社长 皮皮社长 [路⼈]
    回复

    老王你家的图片灯箱效果真是太帅了,不知是插件还是啥,真想要。哈。

    1. 王叨叨 王叨叨 [作者]
      回复

      没用插件,后面我写一个教程吧,很简单

      1. 皮皮社长 皮皮社长 [路⼈]
        回复

        期待中,哈。

  2. 满心 满心 [路⼈]
    回复

    感谢开源,学习学习

    1. 王叨叨 王叨叨 [作者]
      回复

      😃欢迎使用,如果有更好的插件,也可以分享,让typecho更好一些

  3. 全局变量 全局变量 [路⼈]
    回复

    我都不敢用那个自带的上传图片,之前上传只要2张以上,总有一张一直显示上传中。后来改用编辑器自带的上传,一张一张的上传。

    1. 王叨叨 王叨叨 [作者]
      回复

      可以看看浏览器控制台有没有报错,或者去服务器后台看看日志。我有时候拖拽上传,有时候直接复制图片粘贴上传,你说的我还没遇到过。

      1. 全局变量 全局变量 [路⼈]
        回复

        确实有js报错。不过我看不懂,哈哈,所以就没用那个了

  4. 林海草原 林海草原 [路⼈]
    回复

    等我有足够的精力,我去再安装一个typecho,把插件下载下来去玩一下

    1. 王叨叨 王叨叨 [作者]
      回复

      你现在用的不是typecho吗?

  5. 林海草原 林海草原 [路⼈]
    回复

    看起来比默认的美观不少,搞的我都想再装个typecho玩一下了哈哈哈

    1. 王叨叨 王叨叨 [作者]
      回复

      看了下源码,是wordpress的,哈哈

  6. 黑石 黑石 [朋友]
    回复

    后台图片预览插件,戳到我的心巴了,拿走咯🙂

    1. 王叨叨 王叨叨 [作者]
      回复

      实现原理比较简单

  7. 雨帆 雨帆 [路⼈]
    回复

    感觉 Typecho 就是清水房,不如 WordPress 这种精装修的来得方便。

    1. 王叨叨 王叨叨 [作者]
      回复

      这就和买房一样了,有人喜欢精装修,直接拎包入住,有人喜欢毛坯房,自己设计装修。但是,时间久了,会发现精装修里面总有一些不太满意的地方,例如水电预留的位置,精装修的材料问题,所以我买房子都是买毛坯房,自己根据习惯来装修。

  8. 木竹 木竹 [路⼈]
    回复

    坐等好物 页面开源 哈哈

    1. 王叨叨 王叨叨 [作者]
      回复

      这个估计不会开源了。不过这东西也不难,简单点的,写一个json然后用js加载一下就完事了,没有什么管理后台,反正这东西也不会频繁的调整…
      我这个就是想看看typecho的插件还能怎么折腾,看看我能折腾的上限是什么…

  9. 落花雨记 落花雨记 [朋友]
    回复

    好物插件不错啊,在加几个功能,感觉可以做成商铺了,下载研究研究,哈哈哈

    1. 王叨叨 王叨叨 [作者]
      回复

      哈哈,那个没开源,目前就做显示,商铺还有支付啥的,那功能就复杂了…

      1. 落花雨记 落花雨记 [朋友]
        回复

        支付宝当面付就够了,或者直接跳转自己联系方式也行🙄

        1. 王叨叨 王叨叨 [作者]
          回复

          倒是支持购买链接,点击跳转到淘宝闲鱼之类的地址。后面研究一下支付宝的当面付,他是有sdk的,接入应该不难,但是个人博客估计没什么人会支付吧…

  10. 书签网 书签网 [路⼈]
    回复

    非常实用的插件

    1. 王叨叨 王叨叨 [作者]
      回复

      欢迎支持

  11. 花非花 花非花 [朋友]
    回复

    感觉对于高手来说,typecho可折腾的方面有好多啊;羡慕会写程序的人

    1. 王叨叨 王叨叨 [作者]
      回复

      我也是空闲了学习一下php,不是专业后端,我其实搞前端的…
      typecho对于博客肯定是够用了,只是有些扩展要么写主题要么做插件,整体性能不会有太多变化,写主题里面移植有点麻烦,不如写插件里面,安装配置一下就能用…

      1. 花非花 花非花 [朋友]
        回复

        嗯嗯,的确是,除非主题是自己做的,否则原作者更新的话,之前自己做的个性化修改未必能保留下来

        1. 王叨叨 王叨叨 [作者]
          回复

          所以从产品角度来看,在主题上面修改相当于对标准化产品做了二开,如果标准版升级了,二开的项目代码有可能会和标准版有冲突,导致升级困难。
          而从架构设计上来说,插件是解决能解决这个问题,标准版配合功能扩展插件,二开的功能都通过插件来解决,唯一麻烦的就是标准版的架构设计,需要刚刚好,不多也不少,需要有一个折中,把多了的功能通过配置隐藏掉,少了的功能通过插件来补充。

          1. 花非花 花非花 [朋友]
            回复

            单纯用使用上,插件的确比修改主题要方便,相辅相成吧;一般只做博客的话,好像也用不着太多插件

            1. 王叨叨 王叨叨 [作者]
              回复

              我现在把主题的功能挪到插件上了,还有一些例如我做的物品管理,主题里面实现倒麻烦一些了,还要处理数据库…

  12. 小十 小十 [朋友]
    回复

    好方便啊,特别是我换成Hugo后……你这太方便了……

    1. 王叨叨 王叨叨 [作者]
      回复

      哈哈,要不要再换回来?

      1. 小十 小十 [朋友]
        回复

        哎,暂时折腾不动了,看自己还能忍多久。

        1. 王叨叨 王叨叨 [作者]
          回复

          我看静态博客也有好多插件,不过我没有深入的使用,不太了解。

添加新评论