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

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

功能特点

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

安装方法

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

插件参数设置

使用方法

后台示例

前台展示效果

方法一：使用编辑器按钮

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中留言。

后续

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

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