vuepress 图像放大

最新推荐文章于 2023-12-07 15:24:48 发布
最新推荐文章于 2023-12-07 15:24:48 发布
阅读量1.3k 收藏
点赞数
分类专栏： vue 文章标签： vuepress
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40532650/article/details/115183629
版权

图片放大

参考 @vuepress/plugin-medium-zoom

安装

yarn add -D @vuepress/plugin-medium-zoom
# OR npm install -D @vuepress/plugin-medium-zoom

使用

简单使用

plugins: [
    "@vuepress/plugin-medium-zoom"
],

自定义选项

属性类型默认值描述
marginnumber0放大图像外的空间
backgroundstring#fff叠加的背景
scrollOffsetnumber40要滚动以关闭缩放的像素数
containerstring || HTMLElementobjectnull视图端口以显示放大
templatestring|HTMLTemplateElementnull缩放时显示的模板元素
贝茵斯都
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
让 Vuepress 支持图片放大功能
weixin_34144450的博客
11-06 2202
前两天接触到了 Vuepress，颜值很高，界面简洁，容易上手。于是打算把博客从 hexo 迁移过去。 但是发现图片是不能点击的。Markdown 在渲染的时候连 a 标签都没有添加，不仅不能直接点，也不能放大。然而我的博客中是有很多大图的，所以这个功能是刚需。 我试了下最新版本 1.x alpha 还是没有这个功能。所以直接自己动手了。...
Vue press 支持图片放大功能的实例代码
12-10
介绍 VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。 由 VuePress 生成的每个页面，都具有相应的预渲染静态 HTML，它们能提供出色的加载性能，并且对 SEO 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。 前两天接触到了 Vuepress ，颜值很高，界面简洁，容易上手。于是打算把博客从 hexo 迁移过去。 但是发现图片是不能点击的。 Markdown 在渲染的时候连
vue实现点击图片放大效果
08-29
主要为大家详细介绍了vue实现点击图片放大效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vuepress-login:为VuePress添加用户授权
05-06
Vuepress登录 为VuePress添加用户授权 清除登录状态 例子 以下站点的实时示例 输入任何用户名和密码以获取经验 源代码 请访问 安装插件 为模态对话框安装v-dialogs插件 # npm npm i v-dialogs -D # yarn yarn add -...
vuepress-next：VuePress 2的回购
02-11
vuepress-next 状态：Alpha 使用TypeScript已完全重构了代码库。 一些主要变化： 完全迁移到Vue 3 从vuepress包中提取@vuepress/cli 从@vuepress/core包中提取@vuepress/client 从@vuepress/core包中提取@vue...
浅谈vuepress 踩坑记
08-27
VuePress 是由 Vue.js 作者尤雨溪推出的一款全新的静态网站生成器，它基于 Vue.js 构建，内置了 Webpack 配置，使得开发者能够更专注于内容的编写，而无需关心底层构建过程。VuePress 的核心优势在于其简洁的配置、...
vuepress-----18、图片缩放
最新发布
weixin_44235759的博客
12-07 665
【代码】vuepress-----18、图片缩放。
vuepress在自定义主题中,medium-zoom插件失效的问题解决
CXW1014的专栏
02-01 427
vuepress默认的主题挺不错的，但还是不太满足我的建站要求，所以就自己写了个主题。写完之后发现图片不能点击放大，于是去官网看看有没有相关的插件，果然发现 一个medium-zoom插件.去github仓库看了下这个仓库的描述，说是一个类medium网站中图片放大效果的js库。听起来蛮牛逼的，medium算是国外一个文章质量很高的技术编程类网站。vuepress添加插件还是很简单的，在config.js中添加插件名即可，然后运行看效果。嗯… 为啥不行呢？？难道添加的方式有问题？
VuePress中右侧全局添加侧边栏-实现置顶和置底
itclanCoder
08-10 1938
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言在不久之前,有个前端同学好奇,聊到,我的网站itclanCoder,在手机移动端访问时屏幕右侧出现的侧边栏是怎么做的,同时也支持置顶和置底的操作尽管也知道...
vuepress入门详解（一）vuepress介绍
牛魔王的专栏
05-21 3793
vuepress入门详解 什么是vuepress Vue 作者尤雨溪于 2018 年 4 月 13 日推出基于 Vue、围绕 markdown 生成静态页面的 VuePress 框架。 使用vuepress需要什么基础 0基础也可以使用，就把vuepress当作一个专门写文档并且保存文档的工具，把它当成一本厚厚的书，使用markdown语法写自己的内容，不用担心不会markdown，他不是什么高深的语法， 只是写作格式的一个要求，遵守这个要求我们就能写出一个好看的文档出来。当然你不用任何markdown语
04.配置vuepress插件
刚子的博客
01-19 3521
一个具有强大功能的 vuepress 主题仓库✨​ 在vuepress或者vdoing主题项目中，其实已经内置了一些第三方插件，比如百度统计，第三方搜索，代码块一件复制，评论区等等。想看用了什么插件，看package.json就可以。以下是我的安装的一些依赖 "devDependencies": { "dayjs": "^1.9.7", "inquirer": "^7.1.0", "json2yaml": "^1.1.0", "vuepress": "1.8.0",
实战桌面端markdown编辑器入门Electron
前端慢报
06-20 819
由于好奇Electron技术加上著名的markdown编辑器Typora宣布收费，于是就想借着开源的bytemd实现自己的markdown编辑器，顺便记录下在使用Electron中的踩的一些坑
vuepress（二）：插件
weixin_41897680的博客
04-18 3597
vuepress 常用插件
vue项目 一行js代码搞定点击图片放大缩小
qq_42227041的博客
02-23 2425
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片点击放大缩小</title> <style> div, ul, li, span, img { margin: 0;
vue 从富文本传过来的数据如何渲染,有图片,点击放大效果
weixin_44088739的博客
12-13 7443
(vue,微信公众号) html内容如图所示,"toolDetails.content"是数据,从后台传过来的数据 js 如何从富文本传过来的数据筛选出图片,并且把所有图片地址取出来,运用 最重要一点想用wx.previewImage这个事件,需要引用微信环境,引用js,如以下代码 var script1 = document.createElement("script")...
一步步搭建 VuePress 及优化【插件系列】
weixin_33700350的博客
03-30 2698
介绍 在之前为了搭建 VuePress 的文档，顺带制作了视频教程，如今准备再次搭建一个 VuePress 的项目，一看自己的视频竟然有五个小时，天呐，我只是需要过一遍而已，所以重新整理成文档吧，万一将来又要用呢…… 当然，如果您觉得文字版不够直观，可以前往观看视频版： 【☛ 视频地址 ☚】 ，当时录制完本地测试后觉得声音大小还可以，结果一套录完了才发现声音很小，所以推荐带上耳机。 VuePres...
vue集成vuepress
06-10
如果您想在Vue项目中集成VuePress，可以按照以下步骤进行操作： 1. 安装VuePress 在终端中执行以下命令： ``` npm install -D vuepress ``` 2. 创建并配置VuePress 在Vue项目中创建一个新的文件夹，用于存放VuePress相关的文件，例如： ``` mkdir docs ``` 然后在docs文件夹中创建一个.vuepress文件夹，用于存放VuePress的配置文件和主题等。在.vuepress文件夹下创建一个config.js文件，用于配置VuePress的基本信息，例如： ```javascript module.exports = { title: 'My VuePress Site', description: 'This is my VuePress site', themeConfig: { nav: [ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/' }, { text: 'About', link: '/about/' }, ], sidebar: [ '/', '/guide/', '/about/', ], }, } ``` 3. 配置Vue项目的package.json 在Vue项目的package.json文件中添加以下脚本： ```json { "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } ``` 4. 运行VuePress 在终端中执行以下命令： ``` npm run docs:dev ``` 然后在浏览器中访问http://localhost:8080/即可查看VuePress的网站。如果需要构建静态文件，可以执行以下命令： ``` npm run docs:build ``` VuePress会自动将静态文件生成在docs/.vuepress/dist文件夹中，您可以将其上传到服务器上进行部署。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值