开源Panorama全景图插件

AI摘要:Panorama插件为Typecho博客系统添加全景图展示功能,支持Markdown图片转换和交互式浏览。兼容Typecho图片索引管理,提供尺寸、自动加载、旋转和指南针配置。基于Pannellum库,支持CDN加载资源。安装简单,使用编辑器按钮或手动短代码插入,参数丰富可定制。

经过了周末的调整,现在插件终于可以和大家见面了。Panorama 插件为 Typecho 博客系统添加全景图展示功能,支持将多张图片转换为可交互的全景图。

功能特点

  • 支持将Markdown图片转换为全景图(等距柱状投影和立方体贴图)
  • 兼容Typecho的图片索引管理机制
  • 支持直接链接和引用链接两种格式
  • 可配置全景图尺寸、自动加载、自动旋转和显示指南针
  • 基于Pannellum全景图库,提供流畅的全景图浏览体验
  • CDN支持:使用CDN加载Pannellum资源,减少服务器负载

安装方法

  1. 将整个Panorama文件夹上传到Typecho的usr/plugins/目录下
  2. 登录Typecho后台,进入"控制台" -> "插件"
  3. 找到"全景图插件",点击"启用"
  4. 在插件设置中配置默认参数

插件参数设置

2025-11-06T10:59:17.png

使用方法

后台示例

Panorama

前台展示效果

方法一:使用编辑器按钮

  1. 在文章编辑页面,正常插入图片(使用Typecho自带的图片上传功能)
  2. 选中生成的Markdown图片代码,如:![图片描述](图片URL)
  3. 点击编辑器工具栏中的"📷"按钮
  4. 在弹出的对话框中确认图片信息,点击"确认转换"
  5. 图片将被转换为全景图短代码:[panorama src="图片URL" alt="图片描述"]

方法二:手动编写短代码

你也可以直接在文章中手动插入全景图短代码:

[panorama src="图片URL" alt="图片描述"]

短代码参数说明

  • type:必选参数,指定全景图的类型,默认为"equirectangular"
    "equirectangular":等距柱状投影
    "cubemap":立方体贴图
  • src:必选参数,指定全景图的URL
  • alt:可选参数,指定图片的描述文本
  • width:可选参数,指定全景图的宽度,默认为100%
  • height:可选参数,指定全景图的高度,默认为400px
  • autoload:可选参数,是否自动加载,默认为true
  • compass:可选参数,是否显示指南针,默认为true
  • autorotate:可选参数,自动旋转速度,默认为0(不旋转)
    -2:逆时针慢速
    -1:逆时针快速
    0:不旋转
    1:顺时针快速
    2:顺时针慢速

插件设置

基本设置

  • 资源加载范围:选择在哪些页面加载全景图所需的CSS和JavaScript资源
    全局加载(所有页面):在所有页面都加载资源
    仅正文页面(文章和独立页面):只在文章和独立页面加载资源
  • 全景图宽度:设置全景图的默认宽度,可以使用百分比或具体像素值
  • 全景图高度:设置全景图的默认高度,建议使用像素值
  • 自动加载:设置是否自动加载全景图
  • 自动旋转:设置全景图的自动旋转速度,默认为0(不旋转)
  • 显示指南针:设置是否显示指南针,默认为true

资源加载设置

  • CSS CDN地址:设置Pannellum CSS文件的CDN地址(默认使用cdnjs.cloudflare.com)
  • JavaScript CDN地址:设置Pannellum JavaScript文件的CDN地址(默认使用cdnjs.cloudflare.com)

注意事项

  1. 确保全景图是等距柱状投影格式的图片
  2. 大尺寸全景图可能需要考虑性能优化
  3. 移动端需要测试触摸交互体验
  4. 全景图建议使用高分辨率的图片以获得更好的显示效果
  5. 插件会根据配置的资源加载范围在相应页面头部加载Pannellum资源
  6. 如果在非配置加载范围的页面中使用全景图短代码,全景图可能无法正常显示

代码仓库

https://github.com/wangdaodao/TypechoPlugins

如果使用过程中遇到问题,请留言或者在issues中留言。

后续

后续准备开源的插件如下:

名称描述
AMapPlugin高德地图插件
AMapRoutePlugin高德地图路径规划插件
AdminImagePreviewTypecho 后台图片附件预览插件
AdminStyleTypecho 后台样式修改插件
FlowChart基于 flowchart.js 封装的 Typecho 流程图插件

还有一个压轴插件,准备春节的时候送给大家,目前正在测试中,大家可以期待一下。

已有 27 条评论

  1. 旺东 旺东 [路⼈]
    回复

    这插件好啊,可惜我不是Typecho

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

      这个原理比较简单,可以看看源码,或者看下Panorama的文档

      1. 旺东 旺东 [路⼈]
        回复

        看了下确实方便https://pannellum.org/

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

          代码引入,按照规则配置好就行

  2. seo seo [路⼈]
    回复

    不错,高端大气

  3. 回复

    不错,ZBLOGCMS是不是更好用?

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

      没用过这个系统,不过听说过

  4. 老孙 老孙 [路⼈]
    回复

    不错不错~~

    后台图片附件预览这个我之前也搞过

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

      是吗,我看论坛上有人卖这种插件。
      我自己研究了下,就是在后台挂一个js然后动态的插dom应该就能预览了,后面准备把这个插件也放出来。

      1. 老孙 老孙 [路⼈]
        回复

        现在还有人卖这插件啊?牛的

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

          是啊,我在官方论坛看的,我寻思这也要卖钱,干脆我写一个开源算了…

  5. LL LL [路⼈]
    回复

    你好,全局使用后文章插入,会转换成

    标签,短代码不识别怎么处理?

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

      有没有使用别的插件,例如短代码之类的,主题这块用的是什么主题?发一下博客地址吧

      1. LL LL [路⼈]
        回复

        解决了!插件都使用了 Widget_Abstract_Contents::contentEx 钩子,且后加载的插件会覆盖前一个插件的处理结果。修改 AISummary 插件的 customContent 方法,支持钩子链式调用即可。

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

          这块建议给AISummary插件提一个PR,因为我看好多插件都会用到Widget_Abstract_Contents::contentEx

      2. LL LL [路⼈]
        回复

        关了AISummary插件就好了,可否适配这个AI摘要插件?

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

          可以看https://wangdaodao.com/about.html,后面我把那个插件的修改源码也放出来吧

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

          是他那个插件的问题,我也使用了,不过需要那个插件做下处理,他里面有自定义的摘要有截断处理,我也用了AISummary插件,不过我改了AISummary插件的源码。

          1. LL LL [路⼈]
            回复

            是的,感谢!

  6. 回复

    厉害厉害,可惜我没用过Typecho

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

      哈哈,这个移植不难

  7. 灰常记忆 灰常记忆 [路⼈]
    回复

    前些年在油管上看到许多全景的视频 图片 国内有些东西还是慢一点

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

      是啊,我本来想看看设备双十一买一台呢,太贵了打住吧

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

    这个太高端了Σ(¯□¯||)
    我只能看看啦!

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

      说实话,我没装备,基本上也不会怎么用,完全就是开源出来让大家用😃

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

        所以说,你就是国产赛博大善人(ಡωಡ)

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

          后面准备把一些不错的插件,但是没人维护的也收集起来,让这些代码能够继续发热

添加新评论