vuepress在自定义主题中,medium-zoom插件失效的问题解决

最新推荐文章于 2024-05-19 09:46:24 发布
最新推荐文章于 2024-05-19 09:46:24 发布
阅读量445 收藏 1
点赞数 1
文章标签： 前端 vue.js
原文链接：https://tr.zhiyakeji.com/post/7
版权

vuepress在自定义主题中,medium-zoom插件失效的问题解决

vuepress默认的主题挺不错的，但还是不太满足我的建站要求，所以就自己写了个主题。

写完之后发现图片不能点击放大，于是去官网看看有没有相关的插件，果然发现 一个medium-zoom插件.

去github仓库看了下这个仓库的描述，说是一个类medium网站中图片放大效果的js库。

听起来蛮牛逼的，medium算是国外一个文章质量很高的技术编程类网站。

vuepress添加插件还是很简单的，在config.js中添加插件名即可，然后运行看效果。

嗯… 为啥不行呢？？难道添加的方式有问题？ 仔细参照官网上的例子，没问题呀，这么简单怎么可能有问题呢。

又是一阵凸然…

找度娘… 没答案…

找谷歌… 没答案…

心力憔悴, 只能寄希望于github仓库了，仔细看了下medium-zoom库的使用方式，其中有个selector参数引起我的高度注意。

随即去vuepress官网看一下这个参数默认值是多少

在这里插入图片描述

默认值是.theme-default-content :not(a) > img

于是参照这个格式 在config.js配置中添加了

plugins: [
  ['@vuepress/medium-zoom', 
      {
        selector: '.page :not(a) > img',
      }
  ]
]

再次运行果然可以了。

真的是太难了，这么小个问题，百度、谷歌查这么久都没答案，难怪程序员容易掉头发的，百度、谷歌太不给力了。




版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：vuepress在自定义主题中,medium-zoom插件失效的问题解决

showwaychen
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VuePress中右侧全局添加侧边栏-实现置顶和置底
itclanCoder
08-10 1956
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言在不久之前,有个前端同学好奇,聊到,我的网站itclanCoder,在手机移动端访问时屏幕右侧出现的侧边栏是怎么做的,同时也支持置顶和置底的操作尽管也知道...
vue-medium-editor：:writing_hand:Vue 2的MediumEditor组件。演示：
02-06
npm i --save vue2-medium-editor 用法 //app.js import editor from 'vue2-medium-editor' import Vue from 'vue' new Vue { ... components : { 'medium-editor' : editor } } <!-- index.html --> &lt...
vuepress 图像放大
weixin_40532650的博客
03-24 1340
图片放大 参考 @vuepress/plugin-medium-zoom 安装 yarn add -D @vuepress/plugin-medium-zoom # OR npm install -D @vuepress/plugin-medium-zoom 使用 简单使用 plugins: [ "@vuepress/plugin-medium-zoom" ], 自定义选项 属性 类型 默认值 描述 margin number 0 放大图像外的空间 background stri
探索未来阅读新方式：Medium Parser 扩展插件
最新发布
gitblog_00081的博客
05-19 350
探索未来阅读新方式：Medium Parser 扩展插件 项目地址:https://gitcode.com/Xatta-Trone/medium-parser-extension Medium Parser 是一款强大的浏览器扩展，专为帮助用户免费阅读 Medium 平台上会员专享的精彩文章而设计。它巧妙地利用网络缓存数据，去除不必要的脚本，只保留文章的核心——HTML 和 CSS 内容，为你提供...
vuepress建站过程中遇到的一些问题
itclanCoder
09-15 3566
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知...
[详细]vuepress-theme-hope搭建博客
哼
04-25 1842
市面上的博客框架有很多，鉴于vuepress是静态博客框架，可以部署到GitHub Pages而不用自己提供服务器，并且对前端也非常友好，因此我选择了vuepress，主题选用了vuepress-theme-hope。笔者运行自己的博客时感觉打开速度还是比较慢，之后可能会考虑增加CDN优化gh-pages的说明。
Vuepress 快速搭建博客--一款你值得拥有的博客主题
weixin_44002432的博客
05-02 1148
速览 这是一款 Vuepress 主题，集成了博客所需的分类、TAG墙、分页、评论等功能。 主题追求极简，配置上手简单，适配移动端。 预览地址 GitHub地址 博客效果展示： 主题使用 安装主题 创建一个新的项目 my-blog： mkdir my-blog cd my-blog 初始化 yarn 或 npm ： yarn init 或 npm init -y 安装 v...
vue-image-loader-vue加载器/渐进式图像插件，例如Medium。-Vue.js开发
05-27
vue-image-loader Vue渐进式图像加载插件本文位于：https://www.kevindesousa.me/vue-image-loader/安装$ npm install @kevinde vue-image-loader Vue渐进式图像加载插件本文位于：...image-loader/安装$ npm install @...
ember-medium-editor-button：Ember CLI Medium Editor的扩展，可使用MediumButton插件启用自定义按钮
02-05
ember install ember-cli-medium-editor 然后只需运行： ember install ember-medium-editor-button 要满足jshint，请将MediumButton添加到.jshintrc中的predef数组中。 用法 请遵循插件中的使用说明。 该插件...
medium-article：在我的个人博客和Medium中回购文章
02-04
Github在我的中型和个人博客中的文章 我是新加坡的数据分析师。 我写文章分享我在和我的上的学习。 如果您喜欢我的文章，请在上关注我。 也可以就我的文章提供反馈。 :grinning_face_with_smiling_eyes:
medium-zoom：:magnifying_glass_tilted_right::framed_picture:一个JavaScript库，用于缩放图像（如Medium）
02-04
中缩放 一个用于缩放图像（例如中号）JavaScript库 ・ ・ 内容 产品特点 :mobile_phone: 自适应-在移动和台式机上均可扩展 :rocket: 性能轻巧-应该能够达到60 ...npm install medium-zoom # o
Vue press 支持图片放大功能的实例代码
10-17
主要介绍了 Vue press 支持图片放大功能,本文通过代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue2和vu3屏幕显示适配 屏幕等比例缩放？
weixin_67827613的博客
08-03 2966
这个zoom属性在vue2项目没有问题可以正常使用，但是在vue3+ts中使用会报不存在这个属性，所以就要换一种方式使用。zoom这个属性很关键：用于设置或检索对象的缩放比例。
让 Vuepress 支持图片放大功能
SummerGao
04-08 941
只需要安装@vuep...
nuxt3中使用medium-zoom来实现图片点击放大功能
CXW1014的专栏
02-14 467
medium-zoom是一个模仿medium网站中的图片点击放大效果的开源库，源码在。使用简单，扩展性也强。
vuepress踩坑记
weixin_34150830的博客
04-17 2275
vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器，实际上就是一个vue的spa应用，内置webpack，可以用来写文档。恰好最近需要为一些组件写文档，就动手撸了一波，毕竟刚发布，遇到不少坑，最终还是磕磕碰碰的运行起来了，为了避免大家踩同样的坑，特意将搭建的过程记录下来，分享一波。 以下是几个已知的问题 因为util.promisify是在node 8.0之后引入的，...
vuepress入门详解（一）vuepress介绍
牛魔王的专栏
05-21 3821
vuepress入门详解 什么是vuepress Vue 作者尤雨溪于 2018 年 4 月 13 日推出基于 Vue、围绕 markdown 生成静态页面的 VuePress 框架。 使用vuepress需要什么基础 0基础也可以使用，就把vuepress当作一个专门写文档并且保存文档的工具，把它当成一本厚厚的书，使用markdown语法写自己的内容，不用担心不会markdown，他不是什么高深的语法， 只是写作格式的一个要求，遵守这个要求我们就能写出一个好看的文档出来。当然你不用任何markdown语
一步步搭建 VuePress 及优化【插件系列】
weixin_33700350的博客
03-30 2704
介绍 在之前为了搭建 VuePress 的文档，顺带制作了视频教程，如今准备再次搭建一个 VuePress 的项目，一看自己的视频竟然有五个小时，天呐，我只是需要过一遍而已，所以重新整理成文档吧，万一将来又要用呢…… 当然，如果您觉得文字版不够直观，可以前往观看视频版： 【☛ 视频地址 ☚】 ，当时录制完本地测试后觉得声音大小还可以，结果一套录完了才发现声音很小，所以推荐带上耳机。 VuePres...
实战桌面端markdown编辑器入门Electron
前端慢报
06-20 827
由于好奇Electron技术加上著名的markdown编辑器Typora宣布收费，于是就想借着开源的bytemd实现自己的markdown编辑器，顺便记录下在使用Electron中的踩的一些坑
vue2自定义组件的v-model
08-20
在Vue2中，自定义组件的v-model是通过`model`选项来实现的。在组件中，可以使用`model`选项来指定需要传递的`prop`和触发的事件。这样，在使用组件时，我们可以直接使用`v-model`来进行双向绑定。 有两种常见的方式来定义自定义组件的v-model： 1. 默认情况下，v-model会默认传递一个名为`value`的`prop`和一个名为`input`的事件。我们只需要在自定义组件内声明一个`value`的`prop`，然后在组件中使用`this.$emit('input', value)`来触发`input`事件，即可实现双向绑定。示例代码如下： ```vue <template> <div> <p><a @click="click()">add</a></p> <p>CTnum: {{ num }}</p> </div> </template> <script> export default { name: "CT", props: { value: { type: Number, default: 0, }, }, data() { return { num: this.value, }; }, mounted() {}, methods: { click() { this.num++; this.$emit("input", this.num); }, }, }; </script> ``` 2. 如果希望修改默认的`prop`和事件名，可以使用`model`选项。在组件中，我们可以通过在`model`选项中指定`prop`和事件名来自定义v-model的行为。示例代码如下： ```vue <template> <div> <p><a @click="click()">add</a></p> <p>CTnum: {{ num }}</p> </div> </template> <script> export default { name: "CT", model: { prop: 'modelvalue', event: 'change' }, props: { modelvalue: { type: Number, default: 0, }, }, data() { return { num: this.modelvalue, }; }, mounted() {}, methods: { click() { this.num++; this.$emit("change", this.num); }, }, }; </script> ``` 以上是Vue2中自定义组件的v-model的两种常见用法。无论是默认传递的`value`和`input`，还是通过`model`选项自定义的，都可以实现双向绑定的效果。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* *2* [vue2 自定义组件如何使用v-model](https://blog.csdn.net/letianxf/article/details/128429039)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值