mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-14 16:16:47 +00:00
feat(slides): add persistent branding with per-slide visibility control
- Add branding overlays: logo, title, author, and footer text - Use Reveal.js theme CSS variables for automatic color adaptation - Inline SVGs for currentColor support on any theme - Per-slide control via HTML comments: - <!-- no-branding -->: hide all elements - <!-- no-header -->: hide logo + title - <!-- no-footer -->: hide author + footer - Fix body-level CSS selectors for proper visibility - Add comprehensive documentation in example slides
This commit is contained in:
George Cushen committed
1 parent
1352d89867
commit
aa9edea5df
16 files changed
+902
-17
No files matched your search
@@ -8,16 +8,36 @@ venue: "Hugo Blox Tutorial"
|
||||
featured: true
|
||||
type: slides
|
||||
slides:
|
||||
theme: black
|
||||
highlight_style: dracula
|
||||
diagram: true
|
||||
theme: black # Options: black, white, league, beige, sky, night, serif, simple, solarized
|
||||
highlight_style: dracula # Code syntax highlighting theme
|
||||
diagram: true # Enable Mermaid diagrams for flowcharts, etc.
|
||||
reveal_options:
|
||||
controls: true
|
||||
progress: true
|
||||
slideNumber: true
|
||||
hash: true
|
||||
controls: true # Show navigation arrows
|
||||
progress: true # Show progress bar
|
||||
slideNumber: true # Show slide numbers
|
||||
hash: true # Update URL when navigating slides
|
||||
|
||||
# BRANDING: Add logo, title overlay, and footer to your presentation
|
||||
# All settings are optional - remove any you don't need
|
||||
branding:
|
||||
# LOGO: Display your organization's logo
|
||||
logo:
|
||||
filename: "slides-logo.svg" # File in assets/media/ folder (SVG recommended for any theme)
|
||||
position: "top-right" # Options: top-left, top-right, bottom-left, bottom-right
|
||||
width: "50px" # Logo width (height scales automatically)
|
||||
|
||||
# TITLE OVERLAY: Show presentation title on every slide
|
||||
title:
|
||||
show: true # Set to false to hide
|
||||
position: "bottom-left" # Options: top-left, top-right, bottom-left, bottom-right
|
||||
|
||||
# FOOTER TEXT: Display copyright, conference name, etc.
|
||||
footer:
|
||||
text: "© 2026 HugoBlox" # Supports Markdown (e.g., links)
|
||||
position: "bottom-center" # Options: top-left, top-right, bottom-left, bottom-right, bottom-center
|
||||
---
|
||||
|
||||
<!-- no-branding -->
|
||||
# Markdown Slides
|
||||
|
||||
### Write in Markdown. Present Anywhere.
|
||||
@@ -164,3 +184,127 @@ Use `{{</* slide background-color="#hex" */>}}`
|
||||
- Docs: [docs.hugoblox.com](https://docs.hugoblox.com)
|
||||
|
||||
*Built with Markdown Slides*
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Branding Your Slides
|
||||
|
||||
Add your identity to every slide with simple configuration!
|
||||
|
||||
**What you can add:**
|
||||
|
||||
| Element | Position Options |
|
||||
|---------|-----------------|
|
||||
| Logo | top-left, top-right, bottom-left, bottom-right |
|
||||
| Title | Same as above |
|
||||
| Author | Same as above |
|
||||
| Footer Text | Same + bottom-center |
|
||||
|
||||
Edit the `branding:` section in your slide's front matter (top of file).
|
||||
|
||||
---
|
||||
|
||||
## 📁 Adding Your Logo
|
||||
|
||||
1. Place your logo in `assets/media/` folder
|
||||
2. Use SVG format for best results (auto-adapts to any theme!)
|
||||
3. Add to front matter:
|
||||
|
||||
```yaml
|
||||
branding:
|
||||
logo:
|
||||
filename: "your-logo.svg" # Must be in assets/media/
|
||||
position: "top-right"
|
||||
width: "60px"
|
||||
```
|
||||
|
||||
**Tip:** SVGs with `fill="currentColor"` automatically match theme colors!
|
||||
|
||||
---
|
||||
|
||||
## 📝 Title & Author Overlays
|
||||
|
||||
Show presentation title and/or author on every slide:
|
||||
|
||||
```yaml
|
||||
branding:
|
||||
title:
|
||||
show: true
|
||||
position: "bottom-left"
|
||||
text: "Short Title" # Optional: override long page title
|
||||
|
||||
author:
|
||||
show: true
|
||||
position: "bottom-right"
|
||||
```
|
||||
|
||||
Author is auto-detected from page front matter (`author:` or `authors:`).
|
||||
|
||||
---
|
||||
|
||||
## 📄 Footer Text
|
||||
|
||||
Add copyright, conference name, or any persistent text:
|
||||
|
||||
```yaml
|
||||
branding:
|
||||
footer:
|
||||
text: "© 2024 Your Name · ICML 2024"
|
||||
position: "bottom-center"
|
||||
```
|
||||
|
||||
**Tip:** Supports Markdown! Use `[Link](url)` for clickable links.
|
||||
|
||||
---
|
||||
|
||||
<!-- no-branding -->
|
||||
|
||||
## 🔇 Hiding Branding Per-Slide
|
||||
|
||||
Sometimes you want a clean slide (title slides, full-screen images).
|
||||
|
||||
Add this comment at the **start** of your slide content:
|
||||
|
||||
```markdown
|
||||
<!-- no-branding -->
|
||||
## My Clean Slide
|
||||
|
||||
Content here...
|
||||
```
|
||||
|
||||
☝️ **This slide uses `<!-- no-branding -->`** — notice no logo or overlays!
|
||||
|
||||
---
|
||||
|
||||
<!-- no-header -->
|
||||
|
||||
## 🔇 Selective Hiding
|
||||
|
||||
Hide just the header (logo + title):
|
||||
|
||||
```markdown
|
||||
<!-- no-header -->
|
||||
```
|
||||
|
||||
Or just the footer (author + footer text):
|
||||
|
||||
```markdown
|
||||
<!-- no-footer -->
|
||||
```
|
||||
|
||||
☝️ **This slide uses `<!-- no-header -->`** — footer still visible below!
|
||||
|
||||
---
|
||||
|
||||
<!-- no-footer -->
|
||||
|
||||
## ✅ Quick Reference
|
||||
|
||||
| Comment | Hides |
|
||||
|---------|-------|
|
||||
| `<!-- no-branding -->` | Everything (logo, title, author, footer) |
|
||||
| `<!-- no-header -->` | Logo + Title overlay |
|
||||
| `<!-- no-footer -->` | Author + Footer text |
|
||||
|
||||
☝️ **This slide uses `<!-- no-footer -->`** — logo still visible above!
|
||||
|
||||
Reference in new issue
Block a user