如何在Jekyll文章或页面背景中添加本地存储的360全景照片

不需要依赖第三方图床、不需要修改全站首页文件，直接通过Markdown混写HTML+简单配置就能实现，全景图可以直接存在你站点自身的images目录下。

具体实现步骤 #

1. 加载依赖文件 #

先把three.js和panolens.js的源码下载到你站点的assets/js目录下，两种加载方式选其一：

• 全局加载：如果你多篇文章都要用到全景功能，打开主题的文章布局文件（一般路径为_layouts/post.html），在</body>标签前加入以下引入代码：

<script src="/assets/js/three.min.js"></script>
<script src="/assets/js/panolens.min.js"></script>

• 单篇加载：如果只有单篇文章需要用全景，直接把上面两行代码写到对应Markdown文章的末尾即可，避免全站加载冗余资源。

2. 文章内嵌入全景模块 #

Markdown原生支持混写HTML，你直接在文章需要展示全景的位置插入以下代码即可，不需要修改其他全局文件：

<!-- 全景展示容器，可自定义尺寸 -->
<div class="panorama-wrap" style="width: 100%; height: 500px; margin: 2rem 0;"></div>

<script>
document.addEventListener('DOMContentLoaded', function(){
  // 替换为你自己存在images目录下的全景图路径
  const panoImage = new PANOLENS.ImagePanorama('/images/你的全景图文件名.jpg');
  const panoViewer = new PANOLENS.Viewer({
    container: document.querySelector('.panorama-wrap'),
    autoRotate: true,
    autoRotateSpeed: 0.3,
    controlBar: true
  });
  panoViewer.add(panoImage);
})
</script>

常用配置调整：

• 要做内嵌展示模块：保持上面的容器样式即可，宽度可以设为100%自适应文章宽度，高度按需求调整数值
• 要做页面全景背景：把容器样式改为position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1;，初始化Viewer的时候新增参数output: 'overlay'，页面的文字内容就会自动浮在全景图层上方
• 同一篇文章插入多个全景：给每个容器设置独立的class或id，分别初始化Viewer实例即可，不会出现冲突

3. （可选）配置可复用短代码 #

如果需要频繁插入全景图，可以做成Jekyll可复用片段，避免重复写大段代码：

1. 新建_includes/panorama.html文件，写入以下内容：

<div class="panorama-wrap" id="pano-{{ include.id }}" style="width: 100%; height: {{ include.height | default: '500px' }}; margin: 2rem 0;"></div>
<script>
document.addEventListener('DOMContentLoaded', function(){
  const panoImg = new PANOLENS.ImagePanorama('{{ include.src }}');
  const viewer = new PANOLENS.Viewer({
    container: document.querySelector('#pano-{{ include.id }}'),
    autoRotate: {{ include.autorotate | default: 'true' }},
    controlBar: true
  });
  viewer.add(panoImg);
})
</script>

2. 后续在任意Markdown文章中，只需要一行Liquid标签就能调用全景模块：

{% include panorama.html id="pano1" src="/images/对应全景图.jpg" height="600px" autorotate="false" %}

你可以按需求传入高度、是否自动旋转等参数，维护效率更高。

实现效果参考：

内容的提问来源于stack exchange，提问作者César Arquero Cabral