/* ═══════════════════════════════════════════════════════════════════════ THEME TOGGLE JAVASCRIPT Add to Webstudio custom code section ═══════════════════════════════════════════════════════════════════════ */ /* document.addEventListener('DOMContentLoaded', () => { const savedTheme = localStorage.getItem('theme') || 'dark'; document.documentElement.setAttribute('data-theme', savedTheme); }); function toggleTheme() { const root = document.documentElement; const current = root.getAttribute('data-theme'); const next = current === 'light' ? 'dark' : 'light'; root.setAttribute('data-theme', next); localStorage.setItem('theme', next); } */ /* ═══════════════════════════════════════════════════════════════════════ END OF UNIFIED DESIGN TOKENS V4.0 Total: ~210 tokens across 3 layers ═══════════════════════════════════════════════════════════════════════ */

Ghost Template

This ultra-lightweight Ghost template includes minimal styles, focusing on providing the logic to connect to Ghost while allowing custom styling.

Template contents:

Posts page – List of posts, including pagination and search.
Post page – Post template. It will change the post based on the URL.
Author page – Author template. It will change the author based on the URL.
Tag page – Tag template. It will change the tag based on the URL.
Sitemap – Dynamic sitemap outputting static pages, posts, authors, and tags.

Update API Key and URL

These values need to come from your Ghost account.

API Key – Create a Custom Integration by going to your Ghost dashboard > Settings > Integrations (under Advanced) > Add Custom Integration > and copy the Content API Key.
Ghost URL – It looks like this: https://<your account>.ghost.io (be sure to exclude the trailing slash (i.e., don't put a slash at the end).

Copy these values and add them to Webstudio on the Global Root > Settings > and paste them into the corresponding variables.