03-定制PPT主题

最新推荐文章于 2024-05-27 09:44:40 发布

isscollege

最新推荐文章于 2024-05-27 09:44:40 发布

阅读量498

点赞数 1

分类专栏：教你用代码玩转PPT

本文链接：https://blog.csdn.net/isscollege/article/details/103187519

版权

本文详细介绍了如何使用Marp插件定制PPT主题，包括创建CSS文件、定义主题名称、设置全局样式、控制标题样式、配置页脚、处理图片、代码样式以及页码设置等步骤，旨在创建个性化且具有极客风格的PPT。

摘要由CSDN通过智能技术生成

定制PPT主题

1 概述

默认的PPT主题非常单调，如果想制作极客范的PPT，我们需要定制PPT主题。Marp插件预览和导出PPT使用的主题是通过CSS样式文件控制的，就MarkDown而言，其渲染的预览效果也是由CSS样式控制，因此，如果想精确控制PPT的样式，就需要定制CSS样式表文件。

Marp插件可以设置其预览和导出时所使用的CSS文件，我们在前面讲述VS Code安装Marp插件时，讲述过如何设置这个文件的位置。

下面我们将重点讲述主题CSS的编写过程。

2 定制PPT主题

2.1 打开项目工作文件夹

我们事先创建一个code-4-ppt2文件夹，并在VS Code中打开此文件夹，以此作为PPT主题定制项目的工作目录，并在该文件夹下创建一个子文件名叫custom-theme2作为主题存放文件夹，并将制作PPT主题需要的素材拷贝到此处（主要是图片）。

此时的项目结构如下：

在这里插入图片描述

2.2 创建CSS文件

我们在custom-theme2文件夹下创建一个名为iss-basic-theme-demo.css的css文件，我们定制的主题将存放到此文件中：

在这里插入图片描述

注意：我们的css文件和图片在同一级目录下

2.3 定义主题名称

我们首先需要在iss-basic-theme-demo.css文件中定义主题名称，以便在md文件中指定具体的主题。

marp插件会在CSS注释中搜索指令定义，定义主题名称的指令是@theme

因此我们的css第一行应该像下面这样：

/* @theme iss-basic-theme-demo */

这里iss-basic-theme-demo就是在md文档中所引用的主题名称。

2.4 PPT的全局设置

我们需要设置PPT的全局信息，比如，PPT宽度，高度，字体，字号等等，在Marp生成PPT时，每页PPT都由<section>元素包围，因此在设置CSS样式时，我们需要对section的样式进行控制，下面的代码设置了高分16：9的PPT样式设置：

/* @theme iss-basic-theme */


/* section对应每页ppt的全局设置 */
section {
 	position:relative;
    width: 1920px;
    height: 1080px;
    font-size: 40pt;
    padding: 0;
    font-family: 'Microsoft YaHei';
  }

说明：

line 6：每页PPT中的元素均采用相对定位
line 7~8：PPT宽度为1920px，高度为1080px，均为像素，这里的设置刚好是16：9的ppt，如果不设置PPT的宽度和高度，默认的尺寸是1280 X 720，如果你想使用经典的4：3比例的PPT，你需要像下面这样设置：
```
section {
  width: 960px;
  height: 720px;
}
```
line 9：font-size用于设置字体，这里可以使用像素，但是使用pt表示磅，这样可以直接参考Office软件的字体大小。当然也支持如下单位：in（英寸）、cm（厘米）、mm（毫米）、px（像素）
line10：设置padding为0，可以在后面精确控制位置
line11：这里设置的是微软雅黑字体

2.5 设置PPT首页和致谢页面

我们的PPT首页和致谢页面风格相同，区别就是首页中含有课程副标题，我们使用h1作为首页PPT章节名称的显示，下面的代码控制了H1的显示样式：

    /* 一级标题显示为ppt首页标题，或者尾页致谢部分的标题，一级标题下的正文显示为副标题*/
    h1  {
    
      background: url(./custom-theme2/perface-with-logo.png)  -10px -90px;
      margin: 0;
      padding:0;
      line-height: 1080px;
      
     
      font-size: 60pt;
      color:  #fff;
      text-align: center;
    }

说明：

line 4：设置背景logo，此处路径在预览和导出时会相对于md文档的路径，不是直接相对于主题css的路径，注意转换
line10~12：设置章节名称为60磅，字体颜色以及文本居中对齐

2.6 配置主题位置

我们在前面的章节中已经介绍了如何设置主题位置，为了保持操作的连贯性，我们在这里还是做简单的说明，在设置了PPT的风格之后，我就需要预览课程标题的显示，因此，在预览之前，我们需要设置主题位置，点击设置->user->Marp for vs Code->markdown marp themes，新增主题位置，添加我们所使用的主题样式表文件位置即可，但是一定要注意：最好使用绝对路径

在这里插入图片描述

2.7 新建Markdown文件，预览主题效果

我们在项目文件夹code-4-ppt2下面新建一个名为《主题预览PPT.md》文件，并在文件中添加如下代码：

---
marp: true
theme: iss-basic-theme-demo
headingDivider: [1,2,3,4,5,6]
---

# 如何制作PPT主题

说明：

line 3指定的主题名称需要和iss-basic-theme-demo.css文件中@theme指令中设置的名字相一致
line 4行指定了在H1~H6处自动分隔为一页新PPT
line 7使用H1设置了PPT课程名称，我们重点预览此处样式是否达到预期效果

点击marp图标进入预览模式：

在这里插入图片描述

预览效果：

在这里插入图片描述

2.8 控制课程副标题样式

我们约定使用1号标题作为课程名，而1号标题下的正文作为副标题，我们先为课程副标题设置样式，为之编写样式规则：

/*一级标题下的正文显示为副标题 */
    h1 ~ p  {
    position:absolute;
    right:400px;
    bottom:350px;

    font-size: 30pt;
    color: #fff;
    text-align: right;
    }

说明：

line 2：h1 ~ p匹配h1之后的段落
这里使用绝对定位将副标题设置到课程标题下方。

我们在md文档中添加一个副标题，然后进行效果预览：

md文档中的代码：

# 如何制作PPT主题

MarkDown入门系列

效果预览：

在这里插入图片描述

2.9 PPT目录页

PPT通常需要一个目录页，简述本次讲解的课程目标，我们为目录页单独定义一个样式，为其设置背景，其中的strong部分作为课程目标的标题，目录页中的列表作为讲解的目标列表。

css中的代码如下：

 /* ppt 课程目标页（目录页）背景*/
    section.content {
      background: url(./custom-theme2/contents.png)  no-repeat -150px 80px;
  
    }    

     

     /* ppt 课程目标页（目录页）加粗内容显示为目标标题 */
    section.content strong {
    position:absolute;
    top: 170px;
    left:800px;
    
    font-size: 70pt;
    color:  #fff;

  }

      /* ppt 课程目标页（目录页）目标列表*/
  section.content  li {
    
    position:relative;
    top: 320px;
    margin-left: 350px;
   
    font-size: 50pt;
    color:  rgb(56, 56, 56);
    text-align: left;
  }

说明：

line 2：section.content这种写法在html表示中会在section标签中添加class=content属性，每页ppt是一个section元素，通过class=content将区分出该页ppt有一组特殊的样式
line 3：我们为class为content的ppt设置了背景图片
line 10：设置了ppt目录标题的位置、字号、字体大小和文本颜色
line 21：作为目录下的列表内容设置了位置、字号、文本颜色、文本对齐

我们需要在md文档中添加目录页ppt，测试效果：


---

<!-- _class: content -->

**本章目标**

1. 概述
2. 制作主题

代码说明：

line 2：我们使用空行+虚线（—）来另起一页PPT
使用html注释添加局部指令_class，该指令用于指定css中class为content的部分所匹配的样式
line 6：加粗部分显示目录名
line 8：列表部分显示PPT讲解的各个目标

预览效果：

在这里插入图片描述
如果预览效果没有更新，需要重新启动VS Code，CSS的内容可能不会及时更新

2.10 节标题

我们约定H2作为节标题，H2随后的正文将不做显示，H2节标题的样式设置如下：

    /* H2标题自动生成分节内容*/
  h2{
  
    margin:0;
    padding-top:100px;
    padding-left:50px;
    background: url(./custom-theme2/section-2.png)  -187px 1px;
    line-height: 1080px;

    color:#330033;
    font-size: 50pt;
  }

说明：

h2同样设置了背景图片
h2占据了整个PPT高度
通过内边距控制节标题正文的位置

我们在 md文档中添加内容，以便预览节标题效果：

## 1 概述

预览效果：

在这里插入图片描述

2.11 普通PPT页面标题

我们使用h3~h6生成普通PPT页的标题，普通PPT页面标题下面设置了用图片作为背景的分隔线，我们同时需要控制标题高度即行高，标题文本颜色和字号，标题起始位置。

样式控制代码如下：

      /* H3,H4，H5,H6 生成当前页ppt的标题 */
  h3,h4,h5,h6{
    
    margin:0;
    padding-top:10px;
    padding-left:50px;
    background: url(./custom-theme2/line-1.png) repeat-x 0px 100px;
    line-height: 100px;

    color:#330033;
    font-size: 50pt;
  }

md文件中的代码：

### 1.1 制定主题的原则

效果预览：

在这里插入图片描述

2.12 ppt正文

对于普通PPT而言，标题下方通常的内容就是正文，我们使用下面的样式控制正文样式：

  /* PPT正文 */
  p{
    margin-left:50px;
    margin-right:50px;
    color:#000;
    font-size: 30pt;

  }

说明：

这里设置了正文左边距，字号和文本颜色，我们没有指定字体，会使用PPT全局设置中的微软雅黑字体。

md文档中的代码：

### 1.1 制定主题的原则
默认的PPT主题非常单调，如果想制作极客范的PPT，我们需要定制PPT主题。Marp插件预览和导出PPT使用的主题是通过CSS样式文件控制的，就MarkDown而言，其渲染的预览效果也是由CSS样式控制，因此，如果想精确控制PPT的样式，就需要定制CSS样式表文件。

Marp插件可以设置其预览和导出时所使用的CSS文件，我们在前面讲述VS Code安装Marp插件时，讲述过如何设置这个文件的位置。

下面我们将重点讲述主题CSS的编写过程。

效果预览：

在这里插入图片描述

2.13 ppt页脚

我们可以为普通PPT设置页脚信息，用来显示版权等内容，我们通过绝对定位将页脚定位到PPT的底部，通过padding-left控制文本起始位置，line-height控制页脚高度。

对应的CSS代码如下：

    /* 页脚版权信息 */
    footer {
      position: absolute;
      left: 0px;
      bottom: 0px;
      padding-left: 100px;
      line-height: 110px;
      width: 1920px;
      text-align: left;
      background: url(./custom-theme2/footer.png)  no-repeat -180px 0px;
    }

md使用页脚需要在ppt标题下面，通过html注释，在注释加入footer指令，并设置文本内容：

<!--  footer: '版权所有     北京软通动力教育科技有限公司' -->

页脚只需要设置一次，其后的ppt都会自动带有页脚，如果需要取消页脚，则需要在标题下面插入下面的代码：

<!--  footer: '' -->

设置了页脚之后的md文档应该类似下面这样：

### 1.1 制定主题的原则
<!--  footer: '版权所有     北京软通动力教育科技有限公司' -->
默认的PPT主题非常单调，如果想制作极客范的PPT，我们需要定制PPT主题。Marp插件预览和导出PPT使用的主题是通过CSS样式文件控制的，就MarkDown而言，其渲染的预览效果也是由CSS样式控制，因此，如果想精确控制PPT的样式，就需要定制CSS样式表文件。

Marp插件可以设置其预览和导出时所使用的CSS文件，我们在前面讲述VS Code安装Marp插件时，讲述过如何设置这个文件的位置。

下面我们将重点讲述主题CSS的编写过程。

预览效果：

在这里插入图片描述

2.14 PPT中的列表显示

在ppt中列表比较常见，下面的css代码设置了PPT正文中出现列表的情形：

ul li{
    margin-left:100px;
    color:#000;
    font-size: 40pt;

  }
  ol li{
    margin-left:100px;
    color:#000;
    font-size: 40pt;

  }

我们在md文档分别加入有序列表和无序列表来测试效果：

### 1.2 主题要素
1. ppt首页
2. 课程名称
3. 副标题

- 正文
- 列表
- 图片

预览效果：

在这里插入图片描述

2.15 图片控制

在ppt中插入的图片，我们的主题默认将图片宽度按90%进行了缩放：

  img{  
      width:90%;
    }

如果图片在默认情况下显示不完整，需要自己按照上一章介绍的方法调整图片。

md文件中的代码：

### 1.3 打开项目工作文件夹

我们事先创建一个code-4-ppt2文件夹，并在VS Code中打开此文件夹，以此作为PPT主题定制项目的工作目录，并在该文件夹下创建一个子文件名叫custom-theme2作为主题存放文件夹，并将制作PPT主题需要的素材拷贝到此处（主要是图片）。

![create-proj](images/create-proj.png)

显示效果预览：
在这里插入图片描述

2.16 代码样式

作为技术ppt，会经常在正文中出现代码，marp在处理代码时使用的html类似下面的结构：

<pre><code><span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">HelloWorld</span>{</span>
<span class="hljs-keyword">int</span> i = <span class="hljs-number">0</span>;

<span class="hljs-function"><span class="hljs-keyword">public</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">void</span> <span class="hljs-title">main</span><span class="hljs-params">(<span class="hljs-keyword">String</span> args[])</span></span>{
System.out.<span class="hljs-built_in">println</span>(<span class="hljs-string">"Hello World!"</span>);
}

}</code></pre>

你会发现md中的代码会使用pre和code标签包围，因此，控制代码的样式，你只需要控制pre和code即可。

Node

如果你不清楚md文档中的元素到底对应html中的什么标签，你可以先使用marp导出html的功能，查看html源代码，就会得出上面看到的代码，从而为你提供样式控制的线索。

下面是代码的样式控制：

    pre{
    border:solid 1px rgb(0, 176, 240);
    margin:50px;
    padding-left:10px;
    padding-bottom:10px;
    line-height: 0.3em;
    }

    code{
      color:rgb(0, 0, 153);
      font-size: 16pt;
      font-family: Arial, Helvetica, sans-serif; 

    }

说明：

line 2：我们先为代码设置了边框
line4~5：我们这里控制了代码左侧和下面到边框的距离
line 6：控制了代码的行高，使用相对单位em，使用字体高度的0.3倍、
line 12：控制代码使用的字体

md文档中的内容：

### 1.4 编写代码

我们在md文件中插入如下代码：

```
/* section对应每页ppt的全局设置 */
section {
    position:relative;
    width: 1920px;
    height: 1080px;
    font-size: 40pt;
    padding: 0;
    font-family: 'Microsoft YaHei';
 }
```

---
Hello World重现江湖：

```
public class HelloWorld{
    int i = 0;

    public static void main(String args[]){
        System.out.println("Hello World!");
    }

}

预览效果：
在这里插入图片描述

在这里插入图片描述

2.17 页码设置

基本的PPT格式我们都已经考虑到了，接下来的任务是为PPT添加页码，在marp中页码是通过一个伪类控制的：

   section::after {
      position: absolute;
      left: 1200px;
      bottom: 40px;
      font-size: 15pt;
      content: '第' attr(data-marpit-pagination) '页/共 'attr(data-marpit-pagination-total) '页';
    }

说明：

line 1：页码样式通过section标签附加after伪类来控制
line 2~4：我们使用绝对定位，控制页码显示位置
line 5：控制页码字号
line 6：控制页码显示内容，当前页通过属性attr(data-marpit-pagination)取得，总页数通过attr(data-marpit-pagination-total)取得

如果需要使PPT使用页码，我们需要在md文件头部加入全局指令paginate: true。

修改后的md头部如下：

---
marp: true
theme: iss-basic-theme-demo
headingDivider: [1,2,3,4,5,6]
paginate: true
---

此时PPT会自动出现页码信息，预览效果：

在这里插入图片描述

当然，有些页面不需要显示页码信息，比如PPT的首页和致谢页面就需要取消页码显示，此时可以通过局部指令来临时取消，可以通过下面的代码：

<!-- _paginate: false -->

2.18 致谢页面

致谢页面和PPT首页的区别就是没有副标题，因此对于致谢页面的样式不必重新设计主题，只是在md文档中，使用1号标题，并取消页脚和页码即可：

# THANK YOU
<!-- _paginate: false -->
<!-- footer: '' -->

预览效果：

在这里插入图片描述

3 总结

至此，我们完成了PPT常规主题的设置，后面你就可以使用该主题，编写属于你自己风格的PPT。我们《教你用代码玩转PPT》的学习也全部结束了，恭喜你。

isscollege

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
03-定制PPT主题

定制PPT主题1 概述默认的PPT主题非常单调，如果想制作极客范的PPT，我们需要定制PPT主题。Marp插件预览和导出PPT使用的主题是通过CSS样式文件控制的，就MarkDown而言，其渲染的预览效果也是由CSS样式控制，因此，如果想精确控制PPT的样式，就需要定制CSS样式表文件。Marp插件可以设置其预览和导出时所使用的CSS文件，我们在前面讲述VS Code安装Marp插件时，讲述...
复制链接

扫一扫