应用安全网络安全移动开发【免费下载链接】havenHaven is for people who need a way to protect their personal spaces and possessions without compromising their own privacy, through an Android app and on-device sensors项目地址https://gitcode.com/gh_mirrors/ha/haven点击查看免费下载本文以 docs/preso/css/theme/README.md 为骨架结合 Haven 仓库内嵌的 reveal.js 主题体系源码模板、工具函数、全部 11 个内置主题的 .scss 源文件与编译产物系统讲解如何从零为 reveal.js 演示文稿定制专属 Sass 主题包括依赖环境、四步主题编写范式、settings.scss 全部可覆盖变量、渐变 mixin 原理与实战示例。读完本文你将能复制任意内置主题的 .scss 文件并改造成自己的配色与排版风格。一、背景Haven 仓库里的 reveal.js 演示文稿Haven 是 Guardian Project 与 Freedom of the Press Foundation 联合开发的开源 Android 安全监控应用将手机传感器变为检测异常动静、光线、声音的看门狗。项目 README.md 中提到了配套的Haven App Overview演示文稿docs/preso/目录用于介绍项目起源与目标。该演示文稿由 reveal.js 驱动。从 docs/preso/index.html 可以看到它的最小化用法link relstylesheet hrefcss/reveal.css link relstylesheet hrefcss/theme/white.css ... div classreveal div classslides sectionimg classslideimage src havenpreso-01.jpg//section sectionimg classslideimage src havenpreso-02.jpg//section !-- ... 共 22 张幻灯片havenpreso-01.jpg ~ havenpreso-22.jpg -- /div /div script srcjs/reveal.js/script script Reveal.initialize(); /script它直接引用了css/theme/white.css作为主题。而css/theme/目录下不仅有一份已编译的 CSS 主题还完整保留了 reveal.js 主题开发的全部 Sass 源文件docs/preso/css/theme/source/—— 11 个内置主题的.scss源文件beige、black、blood、league、moon、night、serif、simple、sky、solarized、whitedocs/preso/css/theme/template/—— 三个模板文件mixins.scss、settings.scss、theme.scssdocs/preso/css/theme/*.css—— 与 11 个源文件一一对应的已编译产物每个约 5–6 KB。因此Haven 仓库本身就是学习 reveal.js 主题开发的一份活教材官方文档告诉你怎么写仓库里的源码展示真实世界是怎么写的。二、前置依赖Sass、Grunt 与 reveal.js 开发环境docs/preso/css/theme/README.md首先强调了依赖Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files.主题用Sass编写目的是保持模块化、避免在多个文件中重复选择器。开始开发前需要先安装完整的 reveal.js 开发环境包括 Grunt 依赖随后运行grunt css-themes即可把source/下的.scss自动编译为theme/下的.css。这里有一个需要明确的仓库实际情况Haven 的docs/preso/目录内嵌的是 reveal.js运行时产物js/reveal.js标注版权 2017并没有包含 Gruntfile、package.json 或 node_modules——它们属于 reveal.js 上游工程的构建部分不在本仓库内。因此如果你只想在本仓库内使用主题docs/preso/css/theme/*.css已经是编译好的成品直接像index.html那样link引用即可如果你要修改或新增.scss源文件需要在一个完整的 reveal.js 开发环境中操作克隆 reveal.js 工程、npm install安装 Grunt 依赖然后按 README 的说明执行grunt css-themes重新编译再把生成的 CSS 放回本目录。三、主题文件的标准四步结构核心范式README 给出了每个主题.scss文件必须遵循的四步结构顺序固定Includecss/theme/template/mixins.scss—— 引入共享工具函数Includecss/theme/template/settings.scss—— 声明模板文件第 4 步所期望的一组自定义变量Override—— 覆盖默认主题既可以通过变量覆盖参考settings.scss也可以随意添加选择器与样式Includecss/theme/template/theme.scss—— 引入模板主题文件它根据当前已定义的变量生成最终 CSS。这四步在仓库每个内置主题中都有迹可循。以 docs/preso/css/theme/source/white.scss 为例其骨架与 README 描述完全一致// 第 1 步默认 mixins 与 settings import ../template/mixins; import ../template/settings; // 引入主题专属字体 import url(../../lib/font/source-sans-pro/source-sans-pro.css); // 第 2 步 第 3 步覆盖主题设置 $backgroundColor: #fff; $mainColor: #222; $headingColor: #222; $mainFontSize: 42px; $mainFont: Source Sans Pro, Helvetica, sans-serif; $headingFont: Source Sans Pro, Helvetica, sans-serif; $headingTextShadow: none; $headingLetterSpacing: normal; $headingTextTransform: uppercase; $headingFontWeight: 600; $linkColor: #2a76dd; $linkColorHover: lighten( $linkColor, 15% ); $selectionBackgroundColor: lighten( $linkColor, 25% ); $heading1Size: 2.5em; $heading2Size: 1.6em; $heading3Size: 1.3em; $heading4Size: 1.0em; // 深色幻灯片区块的适配规则 section.has-dark-background { , h1, h2, h3, h4, h5, h6 { color: #fff; } } // 第 4 步主题模板 import ../template/theme;为什么是先引入 settings、再覆盖、最后引入 theme因为 Sass 的变量赋值遵循先声明后使用theme.scss在最后被引入此时前面已经重定义过的变量都会以新值参与渲染而mixins.scss与settings.scss放在最前保证了工具函数与默认变量先就绪。这就是 README 强调每个主题文件按以下顺序做四件事的原因。四、第 1 步mixins.scss —— 共享渐变工具函数docs/preso/css/theme/template/mixins.scss 是整个主题体系的公共基础只提供三个渐变背景 mixin并为每个都输出多种浏览器前缀Mixin用途生成的前缀vertical-gradient( $top, $bottom )垂直方向线性渐变-moz-、-webkit-gradient、-webkit-、-o-、-ms-、无前缀linear-gradienthorizontal-gradient( $top, $bottom )水平方向线性渐变同上radial-gradient( $outer, $inner, $type: circle )径向渐变默认圆形circle-moz-、-webkit-gradient、-webkit-、-o-、-ms-、无前缀radial-gradient以vertical-gradient为例其完整实现为mixin vertical-gradient( $top, $bottom ) { background: $top; background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); background: -o-linear-gradient( top, $top 0%, $bottom 100% ); background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); background: linear-gradient( top, $top 0%, $bottom 100% ); }它是老式多前缀渐变写法的完整示范第一行用纯色兜底不支持渐变的浏览器显示$top随后逐行声明各家前缀版本最后一行是标准写法。这套 mixin 在主题中通常不是直接调用而是被bodyBackground()这个可覆盖的 mixin 间接使用见下文 settings.scss 与内置主题实例。五、第 2 步settings.scss —— 全部可覆盖变量的权威参考docs/preso/css/theme/template/settings.scss 是所有主题的默认值权威来源README 明确指出它是第 3 步变量覆盖的参考手册。完整变量清单如下5.1 全局与正文变量默认值作用$backgroundColor#2b2b2b演示文稿背景色可被bodyBackground()覆盖为图片或渐变$mainFontLato, sans-serif正文/全局字体$mainFontSize40px正文基准字号$mainColor#eee正文/主文本颜色5.2 段落间距变量默认值作用$blockMargin20px文本块之间的垂直间距同时被标题 margin 引用5.3 标题Headings变量默认值作用$headingMargin0 0 $blockMargin 0标题外边距直接复用$blockMargin$headingFontLeague Gothic, Impact, sans-serif标题字体$headingColor#eee标题颜色$headingLineHeight1.2标题行高$headingLetterSpacingnormal标题字间距$headingTextTransformuppercase标题文本变换如大写$headingTextShadownone标题文字阴影$headingFontWeightnormal标题字重$heading1TextShadow$headingTextShadow仅 h1 的阴影独立于其他标题$heading1Size3.77emh1 字号$heading2Size2.11emh2 字号$heading3Size1.55emh3 字号$heading4Size1.00emh4 字号5.4 链接变量默认值作用$linkColor#13DAEC链接颜色同时被进度条、导航控件引用$linkColorHoverlighten( $linkColor, 20% )链接悬停颜色默认自动提亮 20%5.5 文本选区变量默认值作用$selectionBackgroundColor#FF5E99选区背景色$selectionColor#fff选区文字颜色5.6 背景生成钩子mixin bodyBackground() { background: $backgroundColor; }bodyBackground()是一个可以被主题重定义的 mixin默认只输出纯色背景但主题可以通过覆盖它返回背景图片或渐变。比如beige与league都覆盖了它来输出径向渐变见第六节。需要特别指出的是settings.scss中的默认值在theme.scss中被大量引用因此只要在自定义主题的第 3 步重新赋值这些变量模板就会自动生成对应外观无需手写任何选择器。这正是 reveal.js 主题体系配置驱动的核心设计。六、第 3 步Override —— 各内置主题的典型覆盖手法README 的第三步是覆盖。仓库中 11 个内置主题各自展示了不同的覆盖风格是学习变量覆盖与自定义 CSS 的最佳范例6.1 纯变量覆盖 明暗区块适配black / whitedocs/preso/css/theme/source/black.scss 是white的反色版本只做变量覆盖$backgroundColor: #222; $mainColor: #fff; $headingColor: #fff; $mainFontSize: 42px; $mainFont: Source Sans Pro, Helvetica, sans-serif; $headingFontWeight: 600; $linkColor: #42affa; $linkColorHover: lighten( $linkColor, 15% ); $selectionBackgroundColor: lighten( $linkColor, 25% ); $heading1Size: 2.5em; $heading2Size: 1.6em; $heading3Size: 1.3em; $heading4Size: 1.0em;并额外加了浅色区块适配section.has-light-background { , h1, h2, h3, h4, h5, h6 { color: #222; } }white主题则对应提供section.has-dark-background { color: #fff; }。这套机制的价值当幻灯片区块通过data-statehas-dark-background等状态类标记为深色时文字自动反色避免深色图片上的标题不可读。6.2 覆盖bodyBackground()输出渐变beige / league / skydocs/preso/css/theme/source/beige.scss 演示了变量覆盖 mixin 覆盖的完整用法$mainColor: #333; $headingColor: #333; $headingTextShadow: none; $backgroundColor: #f7f3de; $linkColor: #8b743d; $linkColorHover: lighten( $linkColor, 20% ); $selectionBackgroundColor: rgba(79, 64, 28, 0.99); $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, /* ... 多层浮雕阴影 ... */; // 背景生成器覆盖为径向渐变 mixin bodyBackground() { include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) ); }其中$heading1TextShadow被覆盖为多达 11 层阴影的浮雕效果继承自 reveal.js 默认主题bodyBackground()被覆盖为调用radial-gradient()实现米色到白色的径向渐变。league主题league.scssreveal.js 3.0 之前的默认主题做法类似但方向相反深色径向渐变rgba(28,30,32,1)→rgba(85,90,95,1)并单独给 h1 定义了浮雕阴影。sky主题则覆盖为天空蓝渐变#add9e4→#f7fbfc。6.3 自定义字体与全量风格night / serif / simplenight.scss$backgroundColor: #111正文用Open Sans标题用Montserrat并覆盖$headingLetterSpacing: -0.03em、$headingTextTransform: none取消大写链接/选区用琥珀色#e7ad52serif.scss正文与标题均使用Palatino Linotype, Book Antiqua, Palatino, FreeSerif, serif形成衬线复古风格还额外增加了.reveal a { line-height: 1.3em; }规则避免链接被裁切simple.scssLato正文 News Cycle标题纯白背景、纯黑文字强调极简。6.4 引入第三色板与额外 CSSsolarized / blood / moonsolarized.scss 定义了 Solarized 完整 16 色色板变量$base03~$base3、$yellow~$green然后把主题变量全部映射到色板$mainColor: $base1、$headingColor: $base2、$backgroundColor: $base03、$linkColor: $blue、$selectionBackgroundColor: $magenta并设置html * { color-profile: sRGB; rendering-intent: auto; }保证跨设备色彩一致moon.scss 是 Solarized Dark 变体代码结构相同blood.scss 定义了自有色板$blood: #a23、$coal: #222、$codeBackground: #23241f并在引入 theme 模板之后追加了额外 CSS.reveal p { font-weight: 300; text-shadow: 1px 1px $coal; }、.reveal h1~h6 { font-weight: 700; }、.reveal p code { background-color: $codeBackground; border-radius: 7px; }。blood 主题示范了一个关键技巧import ../template/theme之后仍然可以继续写样式。由于 Sass 的 import 是文本拼接theme 模板生成的所有选择器在此后都能被追加覆盖这对微调模板行为非常有用。七、第 4 步theme.scss —— 模板如何生成全部 CSSdocs/preso/css/theme/template/theme.scss 是主题的渲染引擎它把settings.scss中的变量应用到一批固定选择器上。将其与 white.css 编译产物对照可以看到完整的映射关系theme.scss 中的规则生成效果以 white.css 为例body { include bodyBackground(); background-color: $backgroundColor; }body { background: #fff; background-color: #fff; }.reveal { font-family: $mainFont; font-size: $mainFontSize; color: $mainColor; }全局字体/字号/颜色::selection, ::-moz-selectioncolor: #fff; background: #98bdef;white 覆盖后的选区色.reveal h1 ~ h6统一margin、font-family、font-weight、line-height、letter-spacing、text-transform、text-shadow、word-wrap.reveal h1 { font-size: $heading1Size; }等四级h1~h4 字号.reveal pmargin: $blockMargin 0; line-height: 1.3;.reveal img, video, iframemax-width: 95%; max-height: 95%;防止媒体溢出幻灯片.reveal ol, ul, dl内联块、左对齐、左侧缩进嵌套列表依次使用 disc / square / circle.reveal blockquote宽度 70%、居中、半透明白底、阴影.reveal pre/code等宽字体、最大高度 400px、内滚动.reveal table合并边框、thead 分隔线、align属性支持.reveal a/.reveal a:hover链接色$linkColor、悬停色$linkColorHover、0.15s 颜色过渡.reveal section img4px 边框$mainColor、圆角底、阴影.plain类去除边框与阴影.reveal .controls/.reveal .progress导航控件与进度条颜色统一为$linkColor可以直观看出模板把正文、标题、列表、引用、代码、表格、链接、图片、控件、进度条这十大块的外观全部参数化。主题作者只需在第 3 步覆盖变量无需触碰任何选择器即便选择器想微调也能像 blood 主题那样在 import 之后追加规则。编译验证docs/preso/css/theme/white.css第 18–20 行输出body { background: #fff; background-color: #fff; }与theme.scss第 7–10 行及 white 的$backgroundColor: #fff严格对应moon.css中body { background: #002b36; ... }对应 moon 的$backgroundColor: $base03。这套源码——编译产物一一对应的关系就是 Sass 变量体系发挥作用的直接证据。八、实战从零创建一份自定义主题综合上面四步与仓库范例下面以 black.scss 为模板演示创建一个深蓝夜色主题nightblue.scss的完整流程/** * NightBlue theme for reveal.js — 演示如何基于四步范式自建主题 */ // ---- 第 1 步默认 mixins 与 settings ---- import ../template/mixins; import ../template/settings; // ---- 第 23 步引入专属字体并覆盖变量 ---- import url(../../lib/font/source-sans-pro/source-sans-pro.css); $backgroundColor: #0b1d2e; // 深蓝背景 $mainFont: Source Sans Pro, Helvetica, sans-serif; $mainFontSize: 42px; $mainColor: #dbe9f4; // 正文亮色 $headingFont: Source Sans Pro, Helvetica, sans-serif; $headingColor: #ffffff; $headingTextShadow: 0 0 20px rgba(66, 175, 250, .4); // 蓝色辉光 $headingLetterSpacing: normal; $headingTextTransform: uppercase; $headingFontWeight: 600; $heading1Size: 2.5em; $heading2Size: 1.6em; $heading3Size: 1.3em; $heading4Size: 1.0em; $linkColor: #42affa; // 与 black 主题一致的亮蓝链接 $linkColorHover: lighten( $linkColor, 15% ); $selectionBackgroundColor: lighten( $linkColor, 25% ); $selectionColor: #fff; // 浅色区块的文字自动反色 section.has-light-background { , h1, h2, h3, h4, h5, h6 { color: #0b1d2e; } } // ---- 第 4 步主题模板 ---- import ../template/theme; // ---- 可选import 后追加微调blood 主题示范的做法---- .reveal blockquote { border-left: 4px solid $linkColor; padding-left: 20px; }要点回顾四步顺序不可调换settings 必须先于 overridetheme 必须最后引入否则变量在模板渲染时尚未就绪字体路径基于仓库结构lib/font/目录位于docs/preso/下因此从css/theme/source/出发要用../../lib/font/...相对路径追加样式放在 import 之后如需调整模板生成的选择器仿照 blood 主题在文件末尾追加即可。由于本仓库不含 Gruntfile 与 package.json将这份nightblue.scss编译为nightblue.css需要在完整 reveal.js 开发环境npm install后执行grunt css-themes或直接用任意 Sass 编译器sass source/nightblue.scss theme/nightblue.css编译后放入docs/preso/css/theme/。九、在演示文稿中应用与切换主题编译完成后修改 docs/preso/index.html 的link即可切换主题当前项目使用 whitelink relstylesheet hrefcss/reveal.css !-- 切换主题把 white.css 换成自定义的 nightblue.css -- link relstylesheet hrefcss/theme/nightblue.css选择主题时的实用建议深色主题black、night、moon、league、blood适合技术演讲与夜间场景投影仪下对比度更高浅色主题white、beige、sky、serif、simple适合图文密集、强调照片感的演示——Haven 的 Overview 演示以产品截图为主因此选用 white 是合理的默认选择solarized / moon适合长时间阅读与代码展示色板对眼睛友好若幻灯片内容包含深色或浅色图片可配合section.has-dark-background/section.has-light-background类black 与 white 主题内置让文字自动反色。十、常见问题与开发建议改了.scss但页面没变化主题只在grunt css-themes或 Sass 编译时生成 CSS直接改源码不会生效请确认编译后 CSS 已更新且index.html引用的就是编译产物。变量覆盖不生效检查四步顺序。最常见错误是把import ../template/theme放在了变量赋值之前导致模板使用默认值。想复用内置主题的骨架直接复制source/下任一.scss改头部注释与变量值即可无需重写选择器。Haven 仓库内没有构建配置Gruntfile与package.json属于 reveal.js 上游工程不在本仓库中本仓库的主题体系定位是保留源码 提供编译产物修改源码须在完整 reveal.js 开发环境中进行。兼容性写法模板生成的渐变与过渡均带多前缀见mixins.scss与theme.scss中的-webkit-、-moz-、-o-、-ms-自定义样式也建议遵循同样的多前缀习惯。十一、延伸阅读仓库内可继续深入的文件docs/preso/css/theme/README.md —— 本文的直接依据四步范式的官方定义docs/preso/css/theme/template/settings.scss —— 全部可覆盖变量的默认值权威清单docs/preso/css/theme/template/mixins.scss —— 三个渐变 mixin 的多前缀实现docs/preso/css/theme/template/theme.scss —— 主题模板的全部选择器规则docs/preso/css/theme/source/ —— 11 个内置主题的完整 Sass 源码可直接作为自定义起点docs/preso/css/theme/white.css —— 已编译产物可与源码对照验证变量映射docs/preso/index.html —— 演示文稿入口展示主题引用与Reveal.initialize()的最小化用法。赞分享应用安全网络安全移动开发【免费下载链接】havenHaven is for people who need a way to protect their personal spaces and possessions without compromising their own privacy, through an Android app and on-device sensors项目地址https://gitcode.com/gh_mirrors/ha/haven点击查看免费下载相关推荐reveal.js 主题定制指南基于 Sass 模板体系创建与编译自定义主题reveal.js 主题定制指南基于 Sass 模板体系创建与编译自定义主题 本篇指南聚焦 reveal.js 的主题Theme体系围绕 css/the前端Slidev为开发者定制的演示文稿工具Slidev为开发者定制的演示文稿工具 在寻找一种既直观又强大的方式来创建和展示你的想法时你可能已经遇到了许多选择。但是有一种工具将改变你对演示文稿的看法前端开发工具高级配置实战指南3种策略彻底提升yuzu Switch模拟器性能高级配置实战指南3种策略彻底提升yuzu Switch模拟器性能 yuzu作为目前最受欢迎的开源任天堂Switch模拟器让玩家能够在PC上体验Switch平虚拟化图形学逆向工程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考