css 编辑器-使用Reveal.js和Git创建网页教程|Linux中国

bendan520 2023年8月21日 css 0

使用此简单的工作流程创建的研讨会板可在任何浏览器、设备和平台上实现一致的查看。 ——埃里克·D·沙贝尔（Eric D. Schabell）（作者）

无论您是学习者还是班主任，您可能已经认识到使用魔板投影来传播知识的在线研讨会（研讨会）的价值。如果您碰巧听到这样一个逐页、逐章组织良好的教程，您可能会想创建一个这样的网站有多困难。

好吧，让我在这里向您展示使用完全手动的过程来完成这样的教程是多么容易。

介绍

当我开始把学习内容放在网上时，体验并不是很好。我想要的是可重复、一致且易于维护的东西，因为我的内容会随着我教授的技术的发展而变化。

我尝试过许多交付模型，从 Asciidoctor 这样的低级代码生成器到将教程放入单个 PDF 文件中。没有一个能让我满意。当我进行现场研讨会时，我喜欢使用魔术板放映，所以我想知道我是否可以为自己的在线自定进度研讨会体验做同样的事情。

经过一番挖掘，我为创建一个轻松的研讨会网站奠定了基础。当时我已经在使用一个演示文稿生成框架，这对我很有帮助，因为这个框架可以形成网站友好的格式（HTML）。

设置

以下是该项目所需的基本组件。

如果这个列表看起来令人畏惧，这里有一个快速入门的方法，无需将所有内容都一个一个地组合在一起。您可以使用我的模板项目为您提供有关 magic kt 板和项目设置的入门教程。

本文假设您熟悉 Git 并在 Git 平台（例如 GitLab）上托管项目。如果您需要指导或教程，请查看我们的 Git 入门系列。

首先，将模板项目克隆到本地计算机。

$ git clone https://gitlab.com/eschabell/beginners-guide-automated-workshops.git

因此，设置一个新的 GitLab 项目，导出模板项目作为初始导出。

研讨会网站上有一些重要文件。在根目录中，您将找到一个名为 .gitlab-ci.yml 的文件，当您向 master 分支提交更改（要合并到 master 分支的正式拉取请求）时，该文件充当触发器。它可以触发将幻灯片目录的全部内容复制到 GitLab 项目的网站文件夹中。

我将其托管在我的 GitLab 帐户中，名为“beginners-guide-automated-workshops”。部署后，您可以通过导航到以下位置来查看浏览器中幻灯片目录的内容：

https://eschabell.gitlab.io/beginners-guide-automated-workshops

对于您的用户帐户和项目，URL 如下所示：

https://[YOUR_USERNAME].gitlab.io/[YOUR_PROJECT_NAME]

这些是您开始为网站创建内容所需的基本材料。当您推送更改时，他们会手动生成更新的研讨会网站。请注意，默认模板包含几个示例魔术板，这将是您完全签入存储库后的第一个研讨会站点。

研讨会模板生成的结果是一个 receive.js 魔板，它可以在任何浏览器中运行css 编辑器，并且可以手动调整大小，以便几乎任何人、任何地方、在任何设备上查看。

创建一个这样方便、方便的研讨会怎么样？

怎么运行的

有了这些背景信息，您就可以开始探索研讨会的材料并开始将您的内容放在一起。您需要的一切都可以在项目的幻灯片目录中找到；您可以在此处使用reveal.js 在浏览器中创建研讨会幻灯片。

您将用于制作研讨会的文件和目录是：

在您最喜欢的 HTML/CSS 编辑器中打开每个文件并进行如下所述的更改。无论您使用哪个编辑器，我更喜欢 RubyMineIDEcss 编辑器，因为它在本地浏览器中提供页面预览。当我在将内容推送到研讨会站点之前测试我的内容时，这对我很有帮助。

默认.css 文件

文件 css/theme/default.css 是一个基本文件，您可以在其中为您的创意工坊魔法板设置重要的全局设置。值得注意的两个主要项目是所有魔术板的默认字体和背景图像。

在 default.css 中，查看标记为 GLOBALSTYLES 的部分。该行列出了当前的默认字体。

font-family: "Red Hat Display", "Overpass", san-serif;

如果您使用非标准字体类型，则必须在以下行中将其导出（这就是 Overpass 字体类型的作用）：

@import url('SOME_URL');

背景是您创建的每个魔术板的默认图像。它存储在images目录中（见下文），并在下面一行中设置（重点是图像路径）。

background: url("…/…/images/backgrounds/basic.png")

要设置默认背景，只需将此行指向您要使用的图像即可。

图片目录

顾名思义，images 目录用于存储您要在研讨会魔术板上使用的图像。例如，我通常会将显示研讨会主题进度的屏幕截图放在我的个人魔法 kt 板上。

现在，您需要知道的是，您需要将背景图像存储在子目录（backgrounds）中，并将您计划在魔板中使用的图像存储在 images 目录中。

索引.html 文件

现在您已经组织了这两个文件，剩下的时间您可以在 HTML 文件中创建幻影 kt 板，从 index.html 开始。为了开始形成您的研讨会网站，请注意本文档中的以下三个部分。

从头部开始，因为它位于底部。模板项目具有三个占位符行供您更新。

INSERT-YOUR-TITLE-HERE

标题标签包含打开文件时浏览器选项卡中显示的文本。请将其更改为与研讨会标题（或研讨会的一部分）相关的内容，但请记住保持简短，因为选项卡的标题空间有限。描述元标记包含对您的研讨会的简短描述，作者元标记是您应该放置您的姓名的位置（如果您是为其他人编写，则应放置研讨会创建者的姓名）。

现在转到身体部分。您会注意到它分为许多部分标签。正文的开头包含一条注释，指出您正在为每个打开和关闭标记标记的部分创建一个幻像板。

拿出来，制作你的各种幻影kt板，每个幻影kt板都包装有一个部分标签。该模板包含一些神奇的 kt 板来帮助您入门。例如，这是第一个幻影 kt 板。


      
            Beginners guide
            to automated workshops
      
      
            Brought to you by,

            YOUR-NAME

      
      Here are notes: Welcome to the workshop!

这个神奇的 kt 板有两个区域，由 div 标签分隔。用空格分隔标题和作者。

假设您有一些 HTML 的工作知识，您可以尝试多种方法来开发您的研讨会。使用浏览器预览结果确实很方便。某些 IDE 提供对更改的本地查看，但您也可以在将更改推送到存储库之前打开 index.html 文件来查看更改。

一旦您对研讨会感到满意，就可以推动更改，然后等待它们通过持续集成管道。它们将像模板项目一样托管在 .

学过Web开发的人都会知道CSS不是一种编程语言，而是对网页样式的描述。

为了让 CSS 也适用于软件工程技术，程序员想了各种方法让它看起来像一种编程语言。从最早的Less、SASS，到后来的PostCSS，再到最近的CSSinJS，都是为了解决这个问题。

本文中描述的 CSSModule 有所不同。它没有将 CSS 转化为编程语言，但功能很简单，只是添加本地作用域和模块依赖，而这正是 Web 组件最迫切需要的功能。

为此，CSSModules很容易学习，因为它的规则很少定义css，同时又非常有用，可以保证某个组件的样式不会影响其他组件。

零、示例库

我为本教程编写了一个示例库，包括六个演示。通过它们，你可以轻松学习CSSModules。

首先，克隆示例存储库。


$ git clone https://github.com/ruanyf/css-modules-demos.git

之后，安装依赖项。


$ cd css-modules-demos
$ npm install

然后，您可以运行第一个示例。


$ npm run demo01

打开浏览器，访问：8080，查看结果。其他示例的工作原理类似。

1. 本地范围

CSS规则是全局的，任何组件的样式规则对整个页面都有效。

形成局部作用域的唯一方法是使用唯一的类名，该类名不会与其他选择器同名。这就是 CSSModule 的作用。

下面是一个 React 组件 App.js。


import React from 'react';
import style from './App.css';
export default () => {
  return (
    
      Hello World
    
  );
};

里面的代码中定义css，我们将样式文件App.css输入到样式对象中，然后引用style.title来表示一个类。


.title {
  color: red;
}

构建工具会将类名 style.title 编译为哈希字符串。



  Hello World

App.css也同时编译。


._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

这样，类名就变得唯一，并且只对App组件有效。

CSSModules 提供了各种插件来支持不同的重构工具。本文使用Webpack插件，因为它对CSSModules的支持最好，并且易于使用。顺便说一下，如果你想学习Webpack，可以阅读我的教程Webpack-Demos。

以下是此示例的 webpack.config.js。


module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /.css$/,
        loader: "style-loader!css-loader?modules"
      },
    ]
  }
};

里面的代码中，关键一行是style-loader!css-loader?modules，在css-loader前面添加了一个查询参数modules，表示启用了CSSModules功能。

现在，运行这个演示。


$ npm run demo01

打开：8080，可以看到结果，h1标题显示为黄色。

2. 全球范围

CSSModules 允许使用 :global(.className) 语法来声明全局规则。以这种方式声明的任何类都不会被编译成哈希字符串。

App.css 添加了一个全局类。


.title {
  color: red;
}
:global(.title) {
  color: green;
}

App.js 使用通用类表示法，并且还引用全局类。


import React from 'react';
import styles from './App.css';
export default () => {
  return (
    
      Hello World
    
  );
};

运行这个例子。


$ npm run demo02

打开 :8080，您应该会听到 h1 标题显示为红色。

CSSModules还提供了显式的局部作用域句型：local(.className)，相当于.className，所以前面的App.css也可以写成如下形式。


:local(.title) {
  color: red;
}
:global(.title) {
  color: green;
}

三、自定义哈希类名

css-loader 的默认哈希算法是 [hash:base64]，它将把 .title 编译成类似 ._3zyde4l1yATCOkgn-DBWEL 的字符串。

哈希字符串的格式可以在 webpack.config.js 上自定义。


module: {
  loaders: [
    // ...
    {
      test: /.css$/,
      loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
    },
  ]
}

运行这个例子。


$ npm run demo03

你会发现.title被编译成demo03-components-App---title---GpMto。

四、Class的组合

在CSSModules中，一个选择器可以继承另一个选择器的规则，这称为“composition”()。

在App.css中，让.title继承自.className。


.className {
  background-color: blue;
}
.title {
  composes: className;
  color: red;
}

App.js 不需要更改。


import React from 'react';
import style from './App.css';
export default () => {
  return (
    
      Hello World
    
  );
};

运行这个例子。


$ npm run demo04

打开：8080，你会看到金色背景上有蓝色的h1。

App.css 编译为以下代码。


._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}
._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

相应地，h1的类也会被编译成.

5. 输入其他模块

选择器还可以继承其他 CSS 文件的规则。

另一个.css


.className {
  background-color: blue;
}

App.css 可以继承 another.css 的规则。


.title {
  composes: className from './another.css';
  color: red;
}

运行这个例子。


$ npm run demo05

打开：8080，你会看到红底黄色的h1。

6. 输入变量

CSSModules支持使用变量，但是需要安装PostCSS和postcss-modules-values。


$ npm install --save postcss-loader postcss-modules-values

将 postcss-loader 添加到 webpack.config.js。


var values = require('postcss-modules-values');
module.exports = {
  entry: __dirname + '/index.js',
  output: {
    publicPath: '/',
    filename: './bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0', 'react']
        }
      },
      {
        test: /.css$/,
        loader: "style-loader!css-loader?modules!postcss-loader"
      },
    ]
  },
  postcss: [
    values
  ]
};

接下来，在colors.css 上面定义变量。


@value blue: #0c77f8;
@value red: #ff0000;
@value green: #aaf200;

App.css 可以引用这些变量。


@value colors: "./colors.css";
@value blue, red, green from colors;
.title {
  color: red;
  background-color: blue;
}

运行这个例子。


$ npm run demo06

打开：8080，你会看到红底黄色的h1。

（超过）

css 编辑器-使用Reveal.js和Git创建网页教程|Linux中国

Beginners guide

to automated workshops

Hello World

Hello World

Hello World

Hello World

发表评论

发表回复取消回复

Beginners guide

to automated workshops

Hello World

Hello World

Hello World

Hello World

相关文章

发表评论

发表回复 取消回复

发表回复取消回复