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

我的第一个自定义主题

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 CasaOS自定义应用安装失败？3个步骤帮你快速解决！3 3天精通PPTist：从零开始的终极指南4 HonKit 项目教程5 reveal-ck 项目教程6 解锁手机潜能只需3步？这款工具让华为设备自定义不再复杂7 Logback日志级别过滤的优雅实现方案8 Metamagic 项目技术文档9 解锁华为设备受限难题？3个步骤轻松突破系统封锁10 PSLab Android应用第三方库许可界面的优化实践
热门项目推荐
相关项目推荐

热门内容推荐

1 编程实践项目探索指南：从零构建技术能力体系2 技术解构式学习：从0到1构建你的编程知识体系3 构建自己的技术世界：build-your-own-x项目的实践探索指南4 解锁编程技能的实践之旅：从零构建你的技术世界5 技术实践探索：从零开始构建核心系统的实践指南6 亲手锻造技术引擎：从0到1构建核心系统的实践指南

最新内容推荐

AcFunDown视频下载工具完全指南还在为数字笔记抓狂？这款开源神器让手写批注效率提升300%Windows笔记本电池健康管理全指南：从根源解决电池损耗问题gmx_MMPBSA分子间相互作用索引错误的深度诊断与解决Axure RP 11 本地化方案：Mac中文界面优化与原型设计工具汉化全指南如何高效获取教育资源？这款工具让教材下载效率提升80%视频元数据深度编辑：专业技巧与案例网盘直链下载技术解析与应用指南如何用DeepSeek-R1推理模型提升复杂任务解决能力：完整指南5个突破瓶颈技巧：硬件优化工具让你的电脑性能提升30%

项目优选

收起
docsdocs
暂无描述
Dockerfile
764
4.97 K
ops-transformerops-transformer
本项目是CANN提供的transformer类大模型算子库，实现网络在NPU上加速计算。
C++
857
1.92 K
ops-nnops-nn
本项目是CANN提供的神经网络类计算算子库，实现网络在NPU上加速计算。
C++
678
1.33 K
pytorchpytorch
Ascend Extension for PyTorch
Python
719
876
kernelkernel
deepin linux kernel
C
32
16
kernelkernel
openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。
C
455
437
ops-mathops-math
本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。
C++
1.08 K
1.09 K
MindSpeed-MMMindSpeed-MM
华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。
Python
150
252
cann-learning-hubcann-learning-hub
CANN 学习中心仓，支持在线互动运行、边学边练，提供教程、示例与优化方案，一站式助力昇腾开发者快速上手。
Jupyter Notebook
302
117
MindSpeed-LLMMindSpeed-LLM
昇腾LLM分布式训练框架
Python
178
220