mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-14 08:17:37 +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
@@ -16,6 +16,76 @@ Supports math, syntax highlighting, diagrams, speaker notes, and much more!
|
|||||||
- path: github.com/HugoBlox/kit/modules/slides
|
- path: github.com/HugoBlox/kit/modules/slides
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Branding & Customization
|
||||||
|
|
||||||
|
### Logo and Overlays
|
||||||
|
|
||||||
|
Add consistent branding across all slides by configuring `slides.branding` in your site config or slide front matter:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# In hugo.yaml (site-wide) or slide front matter (per-deck)
|
||||||
|
params:
|
||||||
|
slides:
|
||||||
|
branding:
|
||||||
|
logo:
|
||||||
|
filename: "logo.png" # File in assets/media/
|
||||||
|
position: "top-left" # top-left, top-right, bottom-left, bottom-right
|
||||||
|
width: "80px" # Logo width
|
||||||
|
margin: "20px" # Distance from edges
|
||||||
|
title:
|
||||||
|
show: true # Show presentation title overlay
|
||||||
|
text: "Short Title" # Optional: Override auto-detected title
|
||||||
|
position: "bottom-left"
|
||||||
|
author:
|
||||||
|
show: true # Show author name overlay
|
||||||
|
position: "bottom-right"
|
||||||
|
footer:
|
||||||
|
text: "© 2026 Copyright" # Footer text (e.g. copyright)
|
||||||
|
position: "bottom-center" # bottom-center, bottom-left, bottom-right
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
### Hooks System
|
||||||
|
|
||||||
|
Inject custom content into presentations without modifying module files. Create partials in your project's `layouts/_partials/hooks/` directory:
|
||||||
|
|
||||||
|
| Hook | Location | Use Case |
|
||||||
|
|------|----------|----------|
|
||||||
|
| `slide-header/` | Top of presentation | Course code, session info |
|
||||||
|
| `slide-footer/` | Bottom of presentation | Social handles, copyright |
|
||||||
|
| `slide-head-end/` | End of `<head>` | Custom CSS, fonts, analytics |
|
||||||
|
| `slide-body-end/` | End of `<body>` | Custom JS, Reveal.js plugins |
|
||||||
|
|
||||||
|
Example: Create `layouts/_partials/hooks/slide-footer/social.html`:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div style="font-size: 0.5em; opacity: 0.6;">
|
||||||
|
@yourhandle · yoursite.com
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
See `_example.html` files in each hook directory for more examples.
|
||||||
|
|
||||||
|
## Per-Slide Visibility
|
||||||
|
|
||||||
|
Control branding visibility on individual slides using HTML comments:
|
||||||
|
|
||||||
|
- `<!-- no-branding -->`: Hide all branding elements (logo, header, footer)
|
||||||
|
- `<!-- no-header -->`: Hide only the header (and logo)
|
||||||
|
- `<!-- no-footer -->`: Hide only the footer
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- no-branding -->
|
||||||
|
|
||||||
|
## Full Screen Image Slide
|
||||||
|
|
||||||
|
This slide will have no branding overlays.
|
||||||
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
[View the documentation](https://docs.hugoblox.com/content/slides/)
|
[View the documentation](https://docs.hugoblox.com/content/slides/)
|
||||||
@@ -0,0 +1,129 @@
|
|||||||
|
/*
|
||||||
|
* HugoBlox Slides Branding Styles
|
||||||
|
*
|
||||||
|
* Default styles for slide branding elements (logo, overlays, headers/footers).
|
||||||
|
* These styles ensure branding elements don't interfere with slide content.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Logo container */
|
||||||
|
#slide-logo {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 100;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
color: var(--r-main-color, #fff);
|
||||||
|
}
|
||||||
|
|
||||||
|
#slide-logo img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#slide-logo svg {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: 60px;
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Title and author overlays */
|
||||||
|
#slide-title-overlay,
|
||||||
|
#slide-author-overlay,
|
||||||
|
#slide-footer-text-overlay {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 100;
|
||||||
|
pointer-events: none;
|
||||||
|
font-family: var(--r-main-font, inherit);
|
||||||
|
color: var(--r-main-color, #fff);
|
||||||
|
font-size: 0.7em;
|
||||||
|
opacity: 0.8;
|
||||||
|
max-width: 40%;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
#slide-footer-text-overlay {
|
||||||
|
font-size: 0.6em;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header and footer hook containers */
|
||||||
|
.slide-header,
|
||||||
|
.slide-footer {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 100;
|
||||||
|
pointer-events: none;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-header {
|
||||||
|
top: 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-footer {
|
||||||
|
bottom: 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Visibility Control via data-state classes (applied to body by JS) */
|
||||||
|
body.no-branding #slide-logo,
|
||||||
|
body.no-branding #slide-title-overlay,
|
||||||
|
body.no-branding #slide-author-overlay,
|
||||||
|
body.no-branding #slide-footer-text-overlay,
|
||||||
|
body.no-branding .slide-header,
|
||||||
|
body.no-branding .slide-footer {
|
||||||
|
/* biome-ignore lint/complexity/noImportantStyles: Required to override Reveal.js styles */
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.no-header .slide-header,
|
||||||
|
body.no-header #slide-logo,
|
||||||
|
body.no-header #slide-title-overlay {
|
||||||
|
/* biome-ignore lint/complexity/noImportantStyles: Required to override Reveal.js styles */
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.no-footer .slide-footer,
|
||||||
|
body.no-footer #slide-author-overlay,
|
||||||
|
body.no-footer #slide-footer-text-overlay {
|
||||||
|
/* biome-ignore lint/complexity/noImportantStyles: Required to override Reveal.js styles */
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Re-enable pointer events for interactive elements within header/footer */
|
||||||
|
.slide-header a,
|
||||||
|
.slide-header button,
|
||||||
|
.slide-footer a,
|
||||||
|
.slide-footer button {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide branding in print mode for cleaner PDFs */
|
||||||
|
@media print {
|
||||||
|
#slide-logo,
|
||||||
|
#slide-title-overlay,
|
||||||
|
#slide-author-overlay,
|
||||||
|
#slide-footer-text-overlay,
|
||||||
|
.slide-header,
|
||||||
|
.slide-footer {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Respect Reveal.js overview mode */
|
||||||
|
.reveal.overview #slide-logo,
|
||||||
|
.reveal.overview #slide-title-overlay,
|
||||||
|
.reveal.overview #slide-author-overlay,
|
||||||
|
.reveal.overview #slide-footer-text-overlay,
|
||||||
|
.reveal.overview .slide-header,
|
||||||
|
.reveal.overview .slide-footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
@@ -63,6 +63,30 @@ pluginOptions.plugins = enabledPlugins;
|
|||||||
|
|
||||||
Reveal.initialize(pluginOptions);
|
Reveal.initialize(pluginOptions);
|
||||||
|
|
||||||
|
// Handle data-state for branding visibility
|
||||||
|
// Apply classes to body since branding elements are body-level siblings of .reveal
|
||||||
|
const applySlideState = (event) => {
|
||||||
|
const body = document.body;
|
||||||
|
if (!body) return;
|
||||||
|
|
||||||
|
// Remove previous state classes from body
|
||||||
|
body.classList.remove("no-branding", "no-header", "no-footer");
|
||||||
|
|
||||||
|
// Get current slide's data-state
|
||||||
|
const currentSlide = event?.currentSlide || Reveal.getCurrentSlide();
|
||||||
|
if (currentSlide) {
|
||||||
|
const state = currentSlide.getAttribute("data-state");
|
||||||
|
if (state) {
|
||||||
|
state.split(" ").forEach((s) => {
|
||||||
|
body.classList.add(s);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Reveal.on("ready", applySlideState);
|
||||||
|
Reveal.on("slidechanged", applySlideState);
|
||||||
|
|
||||||
// Disable Mermaid by default.
|
// Disable Mermaid by default.
|
||||||
if (typeof slides.diagram === "undefined") {
|
if (typeof slides.diagram === "undefined") {
|
||||||
slides.diagram = false;
|
slides.diagram = false;
|
||||||
|
|||||||
@@ -0,0 +1,157 @@
|
|||||||
|
{{/*
|
||||||
|
Slide Branding Component
|
||||||
|
|
||||||
|
Renders persistent branding elements (logo, title overlay, etc.) that appear
|
||||||
|
across all slides in a presentation.
|
||||||
|
|
||||||
|
Configuration (site.Params.slides.branding or .Params.slides.branding):
|
||||||
|
logo:
|
||||||
|
src: "media/logo.png" # Path to logo image
|
||||||
|
alt: "Organization Logo" # Alt text
|
||||||
|
position: "top-left" # top-left, top-right, bottom-left, bottom-right
|
||||||
|
width: "100px" # Logo width
|
||||||
|
margin: "20px" # Distance from edges
|
||||||
|
title:
|
||||||
|
show: true # Show presentation title
|
||||||
|
position: "bottom-left" # Position of title text
|
||||||
|
author:
|
||||||
|
show: true # Show author/presenter name
|
||||||
|
position: "bottom-right" # Position of author text
|
||||||
|
*/}}
|
||||||
|
|
||||||
|
{{/* Merge page-level config with site-level defaults */}}
|
||||||
|
{{ $site_branding := site.Params.slides.branding | default dict }}
|
||||||
|
{{ $page_branding := .Params.slides.branding | default dict }}
|
||||||
|
{{ $branding := merge $site_branding $page_branding }}
|
||||||
|
|
||||||
|
{{/* Logo rendering */}}
|
||||||
|
{{ with $branding.logo }}
|
||||||
|
{{ if .filename }}
|
||||||
|
{{ $resource_path := printf "media/%s" .filename }}
|
||||||
|
{{ $logo_resource := resources.Get $resource_path }}
|
||||||
|
{{ with $logo_resource }}
|
||||||
|
{{ $position := $branding.logo.position | default "top-left" }}
|
||||||
|
{{ $width := $branding.logo.width | default "80px" }}
|
||||||
|
{{ $margin := $branding.logo.margin | default "20px" }}
|
||||||
|
{{ $alt := $branding.logo.alt | default "Logo" }}
|
||||||
|
|
||||||
|
{{/* Calculate CSS position based on position string */}}
|
||||||
|
{{ $positionCSS := "" }}
|
||||||
|
{{ if eq $position "top-left" }}
|
||||||
|
{{ $positionCSS = printf "top: %s; left: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "top-right" }}
|
||||||
|
{{ $positionCSS = printf "top: %s; right: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "bottom-left" }}
|
||||||
|
{{ $positionCSS = printf "bottom: %s; left: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "bottom-right" }}
|
||||||
|
{{ $positionCSS = printf "bottom: %s; right: %s;" $margin $margin }}
|
||||||
|
{{ else }}
|
||||||
|
{{/* Custom position - expect CSS string */}}
|
||||||
|
{{ $positionCSS = $position }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<div id="slide-logo" style="{{ $positionCSS | safeCSS }} width: {{ $width }};" aria-label="{{ $alt }}">
|
||||||
|
{{/* Inline SVGs to enable currentColor, use img for other formats */}}
|
||||||
|
{{ if strings.HasSuffix .Name ".svg" }}
|
||||||
|
{{ .Content | safeHTML }}
|
||||||
|
{{ else }}
|
||||||
|
<img src="{{ .RelPermalink }}" alt="{{ $alt }}">
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{/* Title overlay (optional) */}}
|
||||||
|
{{ if $branding.title }}
|
||||||
|
{{ with $branding.title }}
|
||||||
|
{{ if .show }}
|
||||||
|
{{ $position := .position | default "bottom-left" }}
|
||||||
|
{{ $margin := .margin | default "20px" }}
|
||||||
|
|
||||||
|
{{ $positionCSS := "" }}
|
||||||
|
{{ if eq $position "top-left" }}
|
||||||
|
{{ $positionCSS = printf "top: %s; left: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "top-right" }}
|
||||||
|
{{ $positionCSS = printf "top: %s; right: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "bottom-left" }}
|
||||||
|
{{ $positionCSS = printf "bottom: %s; left: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "bottom-right" }}
|
||||||
|
{{ $positionCSS = printf "bottom: %s; right: %s;" $margin $margin }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<div id="slide-title-overlay" style="{{ $positionCSS | safeCSS }}">
|
||||||
|
{{ .text | default $.Title }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{/* Author overlay (optional) */}}
|
||||||
|
{{ if $branding.author }}
|
||||||
|
{{ with $branding.author }}
|
||||||
|
{{ if .show }}
|
||||||
|
{{ $position := .position | default "bottom-right" }}
|
||||||
|
{{ $margin := .margin | default "20px" }}
|
||||||
|
|
||||||
|
{{ $positionCSS := "" }}
|
||||||
|
{{ if eq $position "top-left" }}
|
||||||
|
{{ $positionCSS = printf "top: %s; left: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "top-right" }}
|
||||||
|
{{ $positionCSS = printf "top: %s; right: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "bottom-left" }}
|
||||||
|
{{ $positionCSS = printf "bottom: %s; left: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "bottom-right" }}
|
||||||
|
{{ $positionCSS = printf "bottom: %s; right: %s;" $margin $margin }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{/* Get author from page params or first author */}}
|
||||||
|
{{ $author := "" }}
|
||||||
|
{{ with $.Params.authors }}
|
||||||
|
{{ if reflect.IsSlice . }}
|
||||||
|
{{ $author = index . 0 }}
|
||||||
|
{{ else }}
|
||||||
|
{{ $author = . }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ with $.Params.author }}
|
||||||
|
{{ $author = . }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{ if $author }}
|
||||||
|
<div id="slide-author-overlay" style="{{ $positionCSS | safeCSS }}">
|
||||||
|
{{ $author }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{/* Footer text overlay (optional) - e.g. for copyright */}}
|
||||||
|
{{ if $branding.footer }}
|
||||||
|
{{ with $branding.footer }}
|
||||||
|
{{ if .text }}
|
||||||
|
{{ $position := .position | default "bottom-center" }}
|
||||||
|
{{ $margin := .margin | default "20px" }}
|
||||||
|
|
||||||
|
{{ $positionCSS := "" }}
|
||||||
|
{{ if eq $position "top-left" }}
|
||||||
|
{{ $positionCSS = printf "top: %s; left: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "top-right" }}
|
||||||
|
{{ $positionCSS = printf "top: %s; right: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "bottom-left" }}
|
||||||
|
{{ $positionCSS = printf "bottom: %s; left: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "bottom-right" }}
|
||||||
|
{{ $positionCSS = printf "bottom: %s; right: %s;" $margin $margin }}
|
||||||
|
{{ else if eq $position "bottom-center" }}
|
||||||
|
{{ $positionCSS = printf "bottom: %s; left: 50%%; transform: translateX(-50%%);" $margin }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<div id="slide-footer-text-overlay" style="{{ $positionCSS | safeCSS }}">
|
||||||
|
{{ .text | markdownify }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
{{/*
|
||||||
|
Slides Hook Loader - Independent Implementation
|
||||||
|
|
||||||
|
This is a self-contained hook system for the slides module that doesn't
|
||||||
|
depend on the blox module. Users can create partials in their own project's
|
||||||
|
layouts/_partials/hooks/{hook-name}/ directory.
|
||||||
|
|
||||||
|
Usage: {{ partial "functions/slides_get_hook" (dict "hook" "slide-header" "context" .) }}
|
||||||
|
|
||||||
|
Available hooks for slides:
|
||||||
|
- slide-header: Top of presentation (inside .reveal, above .slides)
|
||||||
|
- slide-footer: Bottom of presentation (inside .reveal, below .slides)
|
||||||
|
- slide-head-end: End of <head> tag (for custom CSS/JS)
|
||||||
|
- slide-body-end: End of <body> tag (for custom JS)
|
||||||
|
|
||||||
|
Input: dict with "hook" (string) and "context" (page context)
|
||||||
|
Output: Renders all partials found in the hook directory
|
||||||
|
*/}}
|
||||||
|
|
||||||
|
{{ $loaded := false }}
|
||||||
|
{{ $partial_dir := printf "hooks/%s/" .hook }}
|
||||||
|
{{ $context := .context }}
|
||||||
|
{{ $hook_dir_path := path.Join "layouts/_partials" $partial_dir }}
|
||||||
|
|
||||||
|
{{/* Use try to gracefully handle missing directories */}}
|
||||||
|
{{ with try (os.ReadDir $hook_dir_path) }}
|
||||||
|
{{ with .Value }}
|
||||||
|
{{ range . }}
|
||||||
|
{{ if not .IsDir }}
|
||||||
|
{{ $partial_path := path.Join $partial_dir .Name }}
|
||||||
|
{{ partial $partial_path $context }}
|
||||||
|
{{ $loaded = true }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
{{/* Debug: uncomment to see if hooks are loaded */}}
|
||||||
|
{{/* return $loaded */}}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
{{/*
|
||||||
|
Example Slide Body-End Hook
|
||||||
|
|
||||||
|
This hook allows injecting custom JavaScript at the end of the <body>
|
||||||
|
tag, after Reveal.js has been loaded. Useful for:
|
||||||
|
- Custom Reveal.js plugins
|
||||||
|
- Analytics tracking on slide changes
|
||||||
|
- Custom keyboard shortcuts
|
||||||
|
- Integration with other JS libraries
|
||||||
|
|
||||||
|
To use this hook, create a file at:
|
||||||
|
layouts/_partials/hooks/slide-body-end/your-custom-script.html
|
||||||
|
*/}}
|
||||||
|
|
||||||
|
{{/* Uncomment below to track slide changes with console logging */}}
|
||||||
|
{{/*
|
||||||
|
<script>
|
||||||
|
Reveal.on('slidechanged', event => {
|
||||||
|
console.log('Slide changed to:', event.indexh, event.indexv);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
*/}}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
{{/*
|
||||||
|
Example Slide Footer Hook
|
||||||
|
|
||||||
|
This is an example file showing how to create custom footer content
|
||||||
|
that appears at the bottom of every slide in a presentation.
|
||||||
|
|
||||||
|
To use this hook, create a file at:
|
||||||
|
layouts/_partials/hooks/slide-footer/your-custom-footer.html
|
||||||
|
|
||||||
|
The content will be rendered inside a <div class="slide-footer"> container.
|
||||||
|
|
||||||
|
Example usage: show social media handle or contact info
|
||||||
|
*/}}
|
||||||
|
|
||||||
|
{{/* Uncomment below to show author's social handle in footer */}}
|
||||||
|
{{/*
|
||||||
|
<div style="font-size: 0.5em; color: rgba(255,255,255,0.5); padding: 10px; text-align: right; width: 100%;">
|
||||||
|
@yourhandle
|
||||||
|
</div>
|
||||||
|
*/}}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
{{/*
|
||||||
|
Example Slide Head-End Hook
|
||||||
|
|
||||||
|
This hook allows injecting custom CSS or JavaScript into the <head>
|
||||||
|
section of the presentation. Useful for:
|
||||||
|
- Custom fonts
|
||||||
|
- Additional CSS frameworks
|
||||||
|
- Analytics scripts
|
||||||
|
- Custom Reveal.js configurations
|
||||||
|
|
||||||
|
To use this hook, create a file at:
|
||||||
|
layouts/_partials/hooks/slide-head-end/your-custom-head.html
|
||||||
|
*/}}
|
||||||
|
|
||||||
|
{{/* Uncomment below to add custom font */}}
|
||||||
|
{{/*
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
.reveal pre code {
|
||||||
|
font-family: 'Fira Code', monospace;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
*/}}
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
{{/*
|
||||||
|
Example Slide Header Hook
|
||||||
|
|
||||||
|
This is an example file showing how to create custom header content
|
||||||
|
that appears at the top of every slide in a presentation.
|
||||||
|
|
||||||
|
To use this hook, create a file at:
|
||||||
|
layouts/_partials/hooks/slide-header/your-custom-header.html
|
||||||
|
|
||||||
|
The content will be rendered inside a <div class="slide-header"> container.
|
||||||
|
|
||||||
|
Available context variables:
|
||||||
|
.Title - Presentation title
|
||||||
|
.Params - All front matter parameters
|
||||||
|
.Params.authors - List of authors
|
||||||
|
.Params.course - Course code/name
|
||||||
|
.Params.venue - Event venue
|
||||||
|
.Date - Presentation date
|
||||||
|
|
||||||
|
Example usage:
|
||||||
|
*/}}
|
||||||
|
|
||||||
|
{{/* Uncomment below to show course code in header */}}
|
||||||
|
{{/*
|
||||||
|
{{ with .Params.course }}
|
||||||
|
<div style="font-size: 0.6em; color: rgba(255,255,255,0.6); padding: 10px;">
|
||||||
|
{{ . }}{{ with $.Params.lecture_number }} · Lecture {{ . }}{{ end }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
*/}}
|
||||||
@@ -26,7 +26,20 @@
|
|||||||
{{/* Each `<section>` defines a new slide. */}}
|
{{/* Each `<section>` defines a new slide. */}}
|
||||||
{{/* Only begin new slide `<section>` if not already added by custom `slide` shortcode. */}}
|
{{/* Only begin new slide `<section>` if not already added by custom `slide` shortcode. */}}
|
||||||
{{ if not (in . "data-noprocess") }}
|
{{ if not (in . "data-noprocess") }}
|
||||||
<section{{ if $isHidden }} data-visibility="hidden"{{ end }}>
|
|
||||||
|
{{/* Parse visibility comments */}}
|
||||||
|
{{ $state := slice }}
|
||||||
|
{{ if in . "<!-- no-branding -->" }}
|
||||||
|
{{ $state = $state | append "no-branding" }}
|
||||||
|
{{ end }}
|
||||||
|
{{ if in . "<!-- no-header -->" }}
|
||||||
|
{{ $state = $state | append "no-header" }}
|
||||||
|
{{ end }}
|
||||||
|
{{ if in . "<!-- no-footer -->" }}
|
||||||
|
{{ $state = $state | append "no-footer" }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
|
<section{{ if $isHidden }} data-visibility="hidden"{{ end }} {{ if gt (len $state) 0 }}data-state="{{ delimit $state " " }}"{{ end }}>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ $slideContent | safeHTML }}
|
{{ $slideContent | safeHTML }}
|
||||||
</section>
|
</section>
|
||||||
@@ -35,4 +48,21 @@
|
|||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{/* Branding elements - placed inside .reveal but outside .slides to be persistent and fixed */}}
|
||||||
|
|
||||||
|
{{/* Branding overlay (logo, title, author) */}}
|
||||||
|
{{ $pageContext := index . 0 }}
|
||||||
|
{{ partial "components/slide-branding" $pageContext }}
|
||||||
|
|
||||||
|
{{/* Hook: slide-header */}}
|
||||||
|
<div class="slide-header">
|
||||||
|
{{ partial "functions/slides_get_hook" (dict "hook" "slide-header" "context" $pageContext) }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{/* Hook: slide-footer */}}
|
||||||
|
<div class="slide-footer">
|
||||||
|
{{ partial "functions/slides_get_hook" (dict "hook" "slide-footer" "context" $pageContext) }}
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -1,5 +1,23 @@
|
|||||||
{{/*
|
{{/*
|
||||||
Present Baseof - Presentation output only
|
Present Baseof - Presentation output only
|
||||||
|
|
||||||
|
Hook Points Available:
|
||||||
|
- slide-head-end: End of <head> for custom CSS/JS
|
||||||
|
- slide-header: Top of presentation (inside .reveal wrapper)
|
||||||
|
- slide-footer: Bottom of presentation (inside .reveal wrapper)
|
||||||
|
- slide-body-end: End of <body> for custom JS
|
||||||
|
|
||||||
|
Branding Configuration (site.Params.slides.branding or page front matter):
|
||||||
|
logo:
|
||||||
|
src: "media/logo.png"
|
||||||
|
position: "top-left" # top-left, top-right, bottom-left, bottom-right
|
||||||
|
width: "100px"
|
||||||
|
title:
|
||||||
|
show: true
|
||||||
|
position: "bottom-left"
|
||||||
|
author:
|
||||||
|
show: true
|
||||||
|
position: "bottom-right"
|
||||||
*/}}
|
*/}}
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
@@ -38,6 +56,13 @@
|
|||||||
{{- $theme := $.Param "slides.theme" | default "black" -}}
|
{{- $theme := $.Param "slides.theme" | default "black" -}}
|
||||||
<link rel="stylesheet" href="{{ $cdn_url_reveal }}/dist/theme/{{ $theme }}.min.css">
|
<link rel="stylesheet" href="{{ $cdn_url_reveal }}/dist/theme/{{ $theme }}.min.css">
|
||||||
|
|
||||||
|
{{/* Load branding CSS */}}
|
||||||
|
{{ $branding_css := resources.Get "css/slides-branding.css" }}
|
||||||
|
{{ with $branding_css }}
|
||||||
|
{{ $branding_css = . | minify | fingerprint }}
|
||||||
|
<link rel="stylesheet" href="{{ $branding_css.RelPermalink }}">
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
{{/* Hugo Chroma Syntax Highlighter */}}
|
{{/* Hugo Chroma Syntax Highlighter */}}
|
||||||
{{ $hl_theme := $.Param "slides.highlight_style" | default "dracula" }}
|
{{ $hl_theme := $.Param "slides.highlight_style" | default "dracula" }}
|
||||||
{{ $hl_theme_path := printf "css/libs/chroma/%s.css" $hl_theme }}
|
{{ $hl_theme_path := printf "css/libs/chroma/%s.css" $hl_theme }}
|
||||||
@@ -58,6 +83,10 @@
|
|||||||
document.head.appendChild(link);
|
document.head.appendChild(link);
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
{{/* Hook: slide-head-end - Custom CSS/JS injection point */}}
|
||||||
|
{{ partial "functions/slides_get_hook" (dict "hook" "slide-head-end" "context" .) }}
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@@ -80,7 +109,8 @@
|
|||||||
{{ $slidejs := resources.Get "js/hugoblox-slides.js" | js.Build (dict "params" (dict "slides" $.Params.slides )) | fingerprint }}
|
{{ $slidejs := resources.Get "js/hugoblox-slides.js" | js.Build (dict "params" (dict "slides" $.Params.slides )) | fingerprint }}
|
||||||
<script src="{{ $slidejs.RelPermalink }}"></script>
|
<script src="{{ $slidejs.RelPermalink }}"></script>
|
||||||
|
|
||||||
{{ partial "functions/get_hook" (dict "hook" "body-end" "context" .) }}
|
{{/* Hook: slide-body-end - End of body for custom JS */}}
|
||||||
|
{{ partial "functions/slides_get_hook" (dict "hook" "slide-body-end" "context" .) }}
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Markdown</title><path fill="currentColor" d="M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z"/></svg>
|
||||||
|
After Width: | Height: | Size: 421 B |
@@ -1 +0,0 @@
|
|||||||
<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><path d="M0 104L87 158L175 125L262 131L349 163L436 163L524 168L611 174L698 136L785 104L873 125L960 147L960 0L873 0L785 0L698 0L611 0L524 0L436 0L349 0L262 0L175 0L87 0L0 0Z" fill="#003223"></path><path d="M0 185L87 195L175 212L262 217L349 206L436 239L524 233L611 222L698 185L785 147L873 190L960 190L960 145L873 123L785 102L698 134L611 172L524 166L436 161L349 161L262 129L175 123L87 156L0 102Z" fill="#013b2d"></path><path d="M0 228L87 249L175 287L262 309L349 303L436 336L524 298L611 282L698 260L785 255L873 287L960 255L960 188L873 188L785 145L698 183L611 220L524 231L436 237L349 204L262 215L175 210L87 193L0 183Z" fill="#014537"></path><path d="M0 357L87 395L175 347L262 368L349 428L436 449L524 363L611 390L698 352L785 379L873 368L960 401L960 253L873 285L785 253L698 258L611 280L524 296L436 334L349 301L262 307L175 285L87 247L0 226Z" fill="#024f42"></path><path d="M0 541L87 541L175 541L262 541L349 541L436 541L524 541L611 541L698 541L785 541L873 541L960 541L960 399L873 366L785 377L698 350L611 388L524 361L436 447L349 426L262 366L175 345L87 393L0 355Z" fill="#02594e"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -5,16 +5,45 @@ date: 2024-01-01
|
|||||||
type: slides
|
type: slides
|
||||||
summary: "A quick tour of recent research highlights: multimodal LLMs, efficient training, and responsible AI."
|
summary: "A quick tour of recent research highlights: multimodal LLMs, efficient training, and responsible AI."
|
||||||
slides:
|
slides:
|
||||||
theme: black
|
theme: black # Options: black, white, league, beige, sky, night, serif, simple, solarized
|
||||||
highlight_style: dracula
|
highlight_style: dracula # Code syntax highlighting theme
|
||||||
diagram: true # Enable Mermaid diagrams
|
diagram: true # Enable Mermaid diagrams for flowcharts, etc.
|
||||||
reveal_options:
|
reveal_options:
|
||||||
controls: true
|
controls: true # Show navigation arrows
|
||||||
progress: true
|
progress: true # Show progress bar
|
||||||
slideNumber: true
|
slideNumber: true # Show slide numbers
|
||||||
hash: true
|
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)
|
||||||
|
# margin: "20px" # Distance from edge (optional, default: 20px)
|
||||||
|
|
||||||
|
# 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
|
||||||
|
# text: "Short Title" # Optional: override the page title with custom text
|
||||||
|
# margin: "20px" # Distance from edge (optional)
|
||||||
|
|
||||||
|
# AUTHOR OVERLAY: Show author name on every slide
|
||||||
|
# author:
|
||||||
|
# show: true
|
||||||
|
# position: "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 -->
|
||||||
# Example Talk
|
# Example Talk
|
||||||
### Dr. Alex Johnson · Meta AI
|
### Dr. Alex Johnson · Meta AI
|
||||||
|
|
||||||
@@ -319,3 +348,138 @@ This slide won't appear in the presentation but remains in source for reference.
|
|||||||
|
|
||||||
Note:
|
Note:
|
||||||
Thank you for your attention! Feel free to reach out with questions or contributions.
|
Thank you for your attention! Feel free to reach out with questions or contributions.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 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!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Get Started
|
||||||
|
|
||||||
|
1. Copy this example's front matter as a starting point
|
||||||
|
2. Replace logo with yours in `assets/media/`
|
||||||
|
3. Customize positions and text
|
||||||
|
4. Use `<!-- no-branding -->` for special slides
|
||||||
|
|
||||||
|
**Pro tip:** Set site-wide defaults in `config/_default/params.yaml` under `slides.branding`!
|
||||||
|
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Markdown</title><path fill="currentColor" d="M22.27 19.385H1.73A1.73 1.73 0 010 17.655V6.345a1.73 1.73 0 011.73-1.73h20.54A1.73 1.73 0 0124 6.345v11.308a1.73 1.73 0 01-1.73 1.731zM5.769 15.923v-4.5l2.308 2.885 2.307-2.885v4.5h2.308V8.078h-2.308l-2.307 2.885-2.308-2.885H3.46v7.847zM21.232 12h-2.309V8.077h-2.307V12h-2.308l3.461 4.039z"/></svg>
|
||||||
|
After Width: | Height: | Size: 421 B |
@@ -8,16 +8,36 @@ venue: "Hugo Blox Tutorial"
|
|||||||
featured: true
|
featured: true
|
||||||
type: slides
|
type: slides
|
||||||
slides:
|
slides:
|
||||||
theme: black
|
theme: black # Options: black, white, league, beige, sky, night, serif, simple, solarized
|
||||||
highlight_style: dracula
|
highlight_style: dracula # Code syntax highlighting theme
|
||||||
diagram: true
|
diagram: true # Enable Mermaid diagrams for flowcharts, etc.
|
||||||
reveal_options:
|
reveal_options:
|
||||||
controls: true
|
controls: true # Show navigation arrows
|
||||||
progress: true
|
progress: true # Show progress bar
|
||||||
slideNumber: true
|
slideNumber: true # Show slide numbers
|
||||||
hash: true
|
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
|
# Markdown Slides
|
||||||
|
|
||||||
### Write in Markdown. Present Anywhere.
|
### Write in Markdown. Present Anywhere.
|
||||||
@@ -164,3 +184,127 @@ Use `{{</* slide background-color="#hex" */>}}`
|
|||||||
- Docs: [docs.hugoblox.com](https://docs.hugoblox.com)
|
- Docs: [docs.hugoblox.com](https://docs.hugoblox.com)
|
||||||
|
|
||||||
*Built with Markdown Slides*
|
*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