图片预览

通过内置 @vuepress/plugin-photo-swipe, 点击页面正文内的图片会进入浏览模式。

禁用功能

如果你不需要此功能，请在主题选项中设置 plugins.photoSwipe: false:

.vuepress/theme.ts

import { 
hopeTheme
 } from "vuepress-theme-hope";

export default 
hopeTheme
({
  
plugins
: {
    
photoSwipe
: false,
  },
});

如果你想在特定页面中禁用它，你可以在页面的 frontmatter 中设置 photoSwipe: false。

---
photoSwipe: false
---

如果你想要排除特定图片，你可以为图片添加 no-view 属性:

<img src="https://vuejs.org/images/logo.png" no-view />

浏览模式

在浏览模式中，你可以:

• 左右滑动按顺序浏览页面内其他的图片
• 查看图片的描述
• 对图片进行缩放
• 全屏浏览图片
• 下载图片
• 分享图片

提示

• 除了点击右上角的 "×" 退出浏览模式外，在上下滚动超过一定距离后，会自动退出图片浏览模式
• 在移动端，或使用 PC 触控板，你可以使用平移、缩放手势在浏览模式中平移、缩放图片

自定义配置

vuepress-theme-hope 将主题选项中的 plugins.photoSwipe 选项作为插件选项提供给 @vuepress/plugin-photo-swipe。

你可以查看 photo-swipe 插件文档 来进行高级配置。

演示