obsidian核心插件【slide】【幻灯片】如何调整演示时的长和宽?

请仔细说明自己遇到的问题,以下是参考模板。这里不要求非得按模板发帖,但内容中包含相关要素能让大家更好地帮助你。


遇到的问题

我经常需要用手机投屏演示,使用的是官方核心插件slide(不是 advanced slides,它好像不支持手机),核心插件slide默认的长宽是900:700,我想修改成16:9,把700改成540。
请问一下怎么改?

预期的效果

用css 代码片段 修改长宽值。

已尝试的解决方案

在ymal直接 width:540 这样好像不行,核心插件的slide似乎不支持这个。

slide核心插件用的是reveal.js库,配置如下:

this.deck = new Reveal(revealEl, {
    embedded: true,
    keyboardCondition: "focused",
    controlsTutorial: false,
    overview: false
})
this.deck.initialize()

embedded: true 选项表示幻灯片大小按照其容器尺寸决定(参考官方文档),因此应该不存在默认长宽是900:700一说,不过也可以设置尺寸,你试下用 css 修改 .reveal 类的宽高看看有没有效果。

如下图,.reveal 默认宽高都是100%,你可以尝试修改这个值看看效果:

2 个赞

1、用css修改 .reveal 的width 和height 有了新问题,铺不满整个屏幕。

2、核心插件slide默认尺寸确实是 900:700,如下:

用下面的方法,修改没有生效:

body{
--slide-width:960px !important;
--slide-heigth:540px !important;
}

3、修改 .slides 的width 和height,也没生效。

 .slides {
width: 960px !important;
height: 540px !important;
}

4、下面这样修改也不行

.reveal, .slides {
width: 960px !important;
height: 540px !important;
}

请大佬再指导一下,不胜感激!

翻了下 reveal.js 的文档,这两个变量并不是默认宽高,而是在 Scroll View 模式下才会起作用,可以看下这段css(从 reveal.js 官方扒出来的):

只有在 scroll view 模式中才会在父类出现 .reveal-scroll 类,而 obsidian 中该插件在初始化时并不是这个模式,也就是说,这两个变量在 obsidian 中是无效的。

1 个赞

按照你第一点说的,修改 .reveal的长宽应该是有效的,官方默认也是100%,铺满容器的,应该没什么问题呀

具体你在手机上演示时的效果是什么样的呢?能否截图看下

在手机上也没有,刚好铺满整个屏,比手机屏幕要大很多。
播放后横屏何和竖屏是这样显示的:

你是不是有什么样式影响了呀,我这边在手机上看没什么问题呀,你把其他插件和样式都关掉看看呢

我开启安全模式,关闭了所有插件。把其它css代码片段,只保留:

.reveal{
	width: 960px !important;
	height: 540px !important;
}

仍然无法刚好铺满屏。电脑上,只占屏幕的一部分。手机上,屏幕只显示出来整个页面的局部。

不要这段css,这段css会把大小限制成固定的,你应该测试下默认的100%的情况