图片缩放 for Publish

为你的文档中的图片添加类似 medium.com 的图片缩放功能。

该脚本允许图片缩放到视口的全宽，以便用户可以将图片扩展到容器宽度之外。

用户可以继续滚动，图片将会回到其原始位置。

要将其安装到您的 Publish 包中，请将其作为依赖项添加到您的 Package.swift 清单中

let package = Package(
  dependencies: [
    .package(
      name: "ImageZoom",
      url: "https://github.com/markbattistella/image-zoom-publish-plugin",
      from: "1.1.0"
	)
  ],
  targets: [
    .target(dependencies: ["ImageZoom"])
  ]
)

您需要将两个 JavaScript 项目添加到您的 <footer> 中。

注入脚本的最佳方式是将其添加到您的 .footer 元素中

extension Node where Context == HTML.BodyContext {
  static func footer(for site: Website) -> Node {
    return .footer(
      ...
      .raw("<script src='zoom-image.js'></script>"),
      .raw("<script>mediumZoom('[data-zoomable="true"]', { margin: 20, background: '#FFF' });</script>")
      ...
    )
  }
}

在脚本配置中，您可以设置类似 medium.com 的缩放。

mediumZoom('[data-zoomable="true"]', {
	margin: 20,
	background: '#FFF'
})

第一行是强制性的，否则图片将无法注册脚本。

您可以更改 margin 和 background。

margin 是指图片放大到全视图时想要内嵌的距离，单位为像素。

background 是图片位于其上的覆盖层的颜色。 处理它的最佳方法是使用 CSS 变量并为亮暗模式触发它。

例如

::root {
  --background-colour: rgb( 255, 255, 255 );
}

@media all and (prefers-color-scheme: dark) {
	::root {
	  --background-colour: rgb( 0, 0, 0 );
	}
}

mediumZoom('[data-zoomable="true"]', {
	margin: 20,
	background: 'var(--background-colour)'
})

然后，该插件可以在任何发布管道中使用，如下所示

import ImageZoom

try DeliciousRecipes().publish(using: [
  .installPlugin(.zoomImage())
])

默认情况下，它将显示图像标题，但是如果您希望将它们隐藏在图像下方，请按如下方式安装插件

import ExtraComponents

try DeliciousRecipes().publish(using: [
  .installPlugin(.zoomImage(showCaption: false))
])

编写 Markdown 文档时，您可以像平常一样添加图像。 这将自动转换为接受缩放属性。

![My image](/my-awesome-image.jpg)

如果您想禁用特定图像的缩放，请在图像 URL 之后添加 nozoom 属性

![My image - this wont zoom](/my-awesome-image.jpg nozoom)

它不区分大小写，因此任何变体都应有效：NOZOOM、noZoom、NoZoom，甚至 nOZooM

我已经关闭了 Issues，如果您希望添加/更改代码库，请创建一个 Pull Request。

这样，每个人都可以允许这些组件增长，并成为最好的，而不是等待我来编写它。

1. 克隆存储库：git clone https://github.com/markbattistella/image-zoom-publish-plugin.git
2. 创建您的功能分支：git checkout -b my-feature
3. 提交您的更改：git commit -am 'Add some feature'
4. 推送到分支：git push origin my-new-feature
5. 提交拉取请求