manifest.js标题幻灯片覆盖 [英] reveal.js title slide override

问题描述

我想在第一个(标题)幻灯片的样式上与其他幻灯片略有不同. 如何使用以下方法为标题"幻灯片创建单独的部分环境:

I would like to style my reveal.js very first (title) slide slightly differently than my other slides. How could I create a separate section environment for "title" slides with:

1. 所有标题和文本都居中吗?
2. 所有内容在中间垂直对齐?

我的默认(内容)幻灯片应左对齐，而不应垂直居中.这意味着在初始化部分Reveal.initialize({... center: false, ...})

My default (content) slides should be left-aligned and not vertically centered. This means that in the init part Reveal.initialize({... center: false, ...})

对于我的自定义 theme.css ，所有标题和段落文本均与text-align: left左对齐.

And for my custom theme.css, all headings and paragraph text are left-aligned with text-align: left.

我希望会有一些<section data-center=true>覆盖选项，但似乎没有.我一直在摆弄div，但我不是很棒的HTML/CSS专家.

I was hoping there would be some <section data-center=true> override option, but there does not seem to be. I have been fiddling with div's, but I am no great HTML/CSS guru.

作为后续问题，如果在幻灯片上使用<h1>，是否可以自动触发此问题?这将使我可以将外部Markdown用于内容而不是其他任何内容.

As a follow up question, could this be automatically triggered if <h1> is used on a slide? That would allow me to use external Markdown for the contents and nothing else.

推荐答案

只需使用一个类为标题幻灯片命名空间

Just use a class to namespace your title slide

<section class="title-slide">
    <h1>Title</h1>
</section>

并以比其他幻灯片更高的特异性对其进行样式设置

and style it with a higher specificity than the other slides

h1 {
    text-align: left;
}

.title-slide h1 {
    text-align: center;
}

这也应该解决您的第二个问题，而不必动态触发任何事情.

This should address your second question as well without having to trigger anything dynamically.

这篇关于manifest.js标题幻灯片覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！