首页
/ 我的第一个自定义主题

我的第一个自定义主题

2026-04-16 08:43:49作者：裴锟轩Denise
cleaver
30-second slideshows for hackers
项目地址：https://gitcode.com/gh_mirrors/cl/cleaver

--

主题开发很简单

  • 步骤1：创建模板文件
  • 步骤2：定义样式规则
  • 步骤3：应用到演示文稿

使用以下命令生成并预览演示文稿：
```bash
cleaver demo.md
open demo.html

常见问题

Q: 主题文件不生效怎么办？
A: 检查主题路径是否正确，确保Markdown文件中的theme配置指向正确的主题目录；验证主题文件名是否符合规范。

Q: 如何调试Mustache模板变量？
A: 使用cleaver --debug命令运行，在控制台查看可用的模板变量和数据结构。

Q: 自定义样式被默认样式覆盖？
A: 增加选择器特异性（如使用!important），或在style.css中重新定义完整选择器路径。

高级定制技巧

模板变量系统应用

Cleaver提供丰富的模板变量，可实现动态内容展示：

<!-- 在layout.mustache中使用演示文稿元数据 -->
<meta name="author" content="{{author}}">
<meta name="description" content="{{description}}">

<!-- 在template.mustache中使用幻灯片特定数据 -->
<section class="slide {{class}}" data-slide-number="{{id}}">
  {{#if title}}<h1>{{title}}</h1>{{/if}}
  {{{content}}}
</section>

常用变量包括：

  • {{title}} - 演示文稿标题
  • {{author}} - 作者信息
  • {{slides}} - 幻灯片数据数组
  • {{id}} - 当前幻灯片编号

响应式设计实现

为确保在不同设备上的良好显示，实现响应式布局：

/* 大屏幕样式 */
.slide-content {
  font-size: 1.2rem;
  line-height: 1.6;
}

/* 平板设备适配 */
@media (max-width: 768px) {
  .slide-content {
    padding: 30px;
    font-size: 1rem;
  }
}

/* 移动设备适配 */
@media (max-width: 480px) {
  .slide-content {
    padding: 15px;
    font-size: 0.9rem;
  }
}

交互功能开发

通过script.js实现幻灯片控制功能：

document.addEventListener('DOMContentLoaded', () => {
  const slides = document.querySelectorAll('.slide');
  let currentSlide = 0;
  
  // 显示当前幻灯片
  function showSlide(index) {
    slides.forEach((slide, i) => {
      slide.style.display = i === index ? 'flex' : 'none';
    });
  }
  
  // 键盘导航
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') {
      currentSlide = Math.min(currentSlide + 1, slides.length - 1);
      showSlide(currentSlide);
    } else if (e.key === 'ArrowLeft') {
      currentSlide = Math.max(currentSlide - 1, 0);
      showSlide(currentSlide);
    }
  });
  
  // 初始化显示第一张幻灯片
  showSlide(currentSlide);
});

常见问题

Q: 如何实现幻灯片过渡动画？
A: 使用CSS transitions或animations，配合JavaScript控制幻灯片切换时的类名变化。

Q: 如何在主题中引入外部资源？
A: 在layout.mustache的<head>部分添加外部资源链接，或使用相对路径引用本地资源。

Q: 如何支持代码高亮功能？
A: 引入Prism.js等代码高亮库，在script.js中初始化，并在style.css中添加相应样式。

主题开发工作流与最佳实践

主题开发流程

主题开发应遵循以下工作流程，确保效率和质量：

  1. 需求分析：明确主题应用场景和视觉风格需求
  2. 结构设计：规划模板结构和样式体系
  3. 增量开发：先实现基础功能，再添加高级特性
  4. 多环境测试：在不同浏览器和设备上验证效果
  5. 文档完善：编写主题使用说明和定制指南

性能优化策略

为确保演示文稿流畅运行，采用以下优化措施：

  • CSS优化：合并样式规则，避免冗余选择器
  • JavaScript精简：只包含必要功能，避免不必要的DOM操作
  • 资源压缩：使用工具压缩CSS和JavaScript文件
  • 延迟加载：非关键资源采用异步加载方式

兼容性处理

为确保主题在各种环境下正常工作：

  • 使用CSS前缀工具自动添加浏览器前缀
  • 提供旧浏览器回退样式
  • 测试主流浏览器（Chrome、Firefox、Safari、Edge）兼容性
  • 考虑移动设备触摸交互支持

主题开发检查清单

  • [ ] 核心模板文件完整（layout.mustache和template.mustache）
  • [ ] 样式表包含响应式设计规则
  • [ ] 交互脚本实现基本导航功能
  • [ ] 测试在至少两种不同屏幕尺寸上的显示效果
  • [ ] 代码通过HTML/CSS/JavaScript验证工具检查
  • [ ] 包含主题使用说明文档

项目实战：打造技术演示专用主题

需求分析与设计规划

为技术分享创建专用主题，需要重点优化代码展示效果和技术概念呈现方式。设计要点包括：

  • 深色背景减少视觉疲劳
  • 语法高亮代码块
  • 代码行号显示
  • 关键概念强调样式
  • 简洁的导航控制

完整主题实现

目录结构：

tech-presentation-theme/
├── style.css
├── template.mustache
├── layout.mustache
└── script.js

layout.mustache：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{title}}</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css">
  <link rel="stylesheet" href="{{theme}}/style.css">
</head>
<body>
  <div class="slides-container">
    {{#slides}}
      {{> slide}}
    {{/slides}}
  </div>
  <nav class="slide-navigation">
    <button class="nav-prev">←</button>
    <span class="slide-counter">{{current}}/{{total}}</span>
    <button class="nav-next">→</button>
  </nav>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
  <script src="{{theme}}/script.js"></script>
</body>
</html>

template.mustache：

<section class="slide {{class}}" id="slide-{{id}}">
  <div class="slide-content">
    {{#if title}}<h1 class="slide-title">{{title}}</h1>{{/if}}
    {{{content}}}
    {{#if notes}}
      <div class="slide-notes">{{notes}}</div>
    {{/if}}
  </div>
</section>

style.css：

/* 基础样式 */
:root {
  --primary-color: #2c3e50;
  --accent-color: #3498db;
  --text-color: #ecf0f1;
  --code-bg-color: #1e293b;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--primary-color);
  color: var(--text-color);
}

/* 幻灯片样式 */
.slides-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  padding: 40px;
  display: none;
  align-items: center;
  justify-content: center;
}

.slide.active {
  display: flex;
}

.slide-content {
  max-width: 1000px;
  width: 100%;
  padding: 20px;
}

.slide-title {
  margin-bottom: 30px;
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 10px;
}

/* 代码块样式 */
pre[class*="language-"] {
  background: var(--code-bg-color) !important;
  border-radius: 8px;
  padding: 15px !important;
  margin: 20px 0;
  font-size: 0.9rem;
}

/* 导航控制 */
.slide-navigation {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 15px;
  align-items: center;
}

.nav-prev, .nav-next {
  background: var(--accent-color);
  border: none;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
}

.slide-counter {
  background: rgba(0,0,0,0.5);
  padding: 5px 10px;
  border-radius: 10px;
}

script.js：

document.addEventListener('DOMContentLoaded', () => {
  const slides = document.querySelectorAll('.slide');
  const prevButton = document.querySelector('.nav-prev');
  const nextButton = document.querySelector('.nav-next');
  const counter = document.querySelector('.slide-counter');
  let currentSlide = 0;
  const totalSlides = slides.length;

  // 更新幻灯片计数器
  function updateCounter() {
    counter.textContent = `${currentSlide + 1}/${totalSlides}`;
  }

  // 显示指定幻灯片
  function showSlide(index) {
    // 移除所有幻灯片的active类
    slides.forEach(slide => slide.classList.remove('active'));
    // 为当前幻灯片添加active类
    slides[index].classList.add('active');
    // 更新计数器
    updateCounter();
  }

  // 上一张幻灯片
  function prevSlide() {
    currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
    showSlide(currentSlide);
  }

  // 下一张幻灯片
  function nextSlide() {
    currentSlide = (currentSlide + 1) % totalSlides;
    showSlide(currentSlide);
  }

  // 事件监听
  prevButton.addEventListener('click', prevSlide);
  nextButton.addEventListener('click', nextSlide);

  // 键盘导航
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight' || e.key === ' ') {
      nextSlide();
    } else if (e.key === 'ArrowLeft') {
      prevSlide();
    }
  });

  // 初始化显示第一张幻灯片
  showSlide(currentSlide);
});

主题使用示例

创建技术演示Markdown文件tech-talk.md：

title: JavaScript性能优化技巧
author: 技术分享团队
output: tech-presentation.html
theme: ./themes/tech-presentation-theme

# JavaScript性能优化技巧

--

## 为什么性能很重要？

- 用户体验提升
- 搜索引擎排名优势
- 移动设备电池寿命延长
- 降低服务器成本

--

## 代码优化示例

```javascript
// 未优化代码
function processData(data) {
  let result = [];
  for (let i = 0; i < data.length; i++) {
    if (data[i].status === 'active') {
      result.push(data[i].id);
    }
  }
  return result;
}

// 优化后
function processData(data) {
  const result = [];
  const { length } = data;
  for (let i = 0; i < length; i++) {
    const item = data[i];
    if (item.status === 'active') {
      result.push(item.id);
    }
  }
  return result;
}

--

优化关键点

  1. 减少属性查找 - 缓存对象属性和数组长度
  2. 避免全局变量 - 使用局部变量提高访问速度
  3. 优化循环结构 - 减少循环内操作
  4. 使用适当的数据结构 - 选择高效的数据类型

--

Q&A

感谢聆听！

提问与交流环节


生成演示文稿：
```bash
cleaver tech-talk.md
cleaver
30-second slideshows for hackers
项目地址：https://gitcode.com/gh_mirrors/cl/cleaver
登录后查看全文

相关内容推荐

1 Typora-Latex-Theme 中实现"第X章"格式的二级标题样式2 HonKit 项目教程3 reveal-ck 项目教程4 CasaOS自定义应用安装失败？3个步骤帮你快速解决！5 3天精通PPTist：从零开始的终极指南6 Logback日志级别过滤的优雅实现方案7 PSLab Android应用第三方库许可界面的优化实践8 Angular Material 3 中按钮颜色主题的自定义实现9 Scramble项目在解析第三方模型扩展时遇到的类型转换问题及解决方案10 Metamagic 项目技术文档
热门项目推荐
相关项目推荐

热门内容推荐

1 build-your-own-x 探索指南：从零构建编程技能体系2 技术实践新范式：build-your-own-x项目的系统构建与能力跃迁指南3 build-your-own-x 开源学习项目一站式指南4 【亲测免费】 开源项目 `build-your-own-x` 使用指南5 【亲测免费】 探索科技之旅：《Build Your Own X》项目详解6 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用7 从零打造智能家居系统：用build-your-own-x实现家庭自动化

最新内容推荐

Qwen Code安全认证手把手最佳实践：从痛点分析到企业级解决方案DDrawCompat：解决经典游戏现代系统兼容性难题的技术方案GoPDF解决PDF生成难题：从数据报表到安全文档的全流程指南旧Mac设备复活指南：OpenCore Legacy Patcher实现系统兼容性突破从入门到精通：mootdx通达信数据接口全攻略眼动交互开发指南：现代前端框架集成方案与实践5步精通LeagueAkari：英雄联盟数据查询与工具应用指南Navicat 试用期重置解决方案：从原理到实践3步打造智能音乐中枢：Xiaomusic让小爱音箱焕发新生NocoDB：企业级低代码数据库平台的技术架构与实施指南

项目优选

收起
docsdocs
OpenHarmony documentation | OpenHarmony开发者文档
Dockerfile
668
4.3 K
kernelkernel
deepin linux kernel
C
28
16
pytorchpytorch
Ascend Extension for PyTorch
Python
511
621
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
398
297
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
943
879
RuoYi-Vue3RuoYi-Vue3
🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统
Vue
1.56 K
905
flutter_flutterflutter_flutter
暂无简介
Dart
917
222
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！
C
1.07 K
558
MindSpeed-LLMMindSpeed-LLM
昇腾LLM分布式训练框架
Python
142
169
cangjie_runtimecangjie_runtime
仓颉编程语言运行时与标准库。
Cangjie
163
924