ghost.io, code injection, yaml

Theme

https://bold.eduardogomez.io/style-guide/
https://bold-docs.eduardogomez.io/basics/install-theme.html

Code Injection allgemein, Header

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const path = window.location.pathname;
    if (path === '/') {
      // CSS for the home page
      const homeStyle = document.createElement('style');
      homeStyle.innerHTML = `
        .nav-blog a {
          color: var(--accent) !important;
        }
      `;
      document.head.appendChild(homeStyle);
    } else if (path.includes('/timeline')) {
      // CSS for the timeline page
      const timelineStyle = document.createElement('style');
      timelineStyle.innerHTML = `
        .nav-timeline a {
          color: var(--accent) !important;
        }
      `;
      document.head.appendChild(timelineStyle);
    }
  });
</script>

<style>
// always dark theme
  :root {
    --accent: #E04F1B;
    --background: #121212;
    --body: #D1D6DB;
    --border: #2D2C2C;
    --featured: #242424;
    --card: #1D1D1D;
    --foreground: #E8E8E8;
    --light-text: #89898A;
    --text-on-accent: #FFFFFF;
    --highlighted: #FEE440;
    --focus: #90CDF4;
    --success: #16A34A;
    --error: #E64141;
    --translucent: rgba(18, 18, 18, 0.5);
</style>

<style>
// hide unused
//.bo-logo {display: none;}
.bo-share {display: none;}
.bo-social-list {display: none;}
.bo-post-card__author {display: none;}
.bo-post-card__content__meta {display: none;}
.bo-author {display: none;}
.nav-sign-up {display: none;}
.bo-theme-switcher {display: none;}
.bo-post-header__meta {display: none;}
//.bo-post-author {display: none;}
</style>

Code Injection allgemein, Footer

<style>
// hide date
.post-card-meta-date { display: none!important  } 
</style>

Code Injection, Seite

Seite 'about'

Seite 'about' ohne logo darstellen, da dieses schon prominent als hero vorhanden.
Menu 'about' als aktives Menu farblich hervorheben.

<style>
.bo-logo {display: none;}
.nav-about a {color: var(--accent) !important;
</style>

Seite 'keywords'

Menu 'keywords' als aktives Menu farblich hervorheben.

<style>
.nav-keywords a {color: var(--accent) !important;}
</style>

Code Injection, Post

Bei drag and drop sind alle Bilder mit Klassen 'kg-card' und 'kg-image card' versehen. Weitere Klassen:
wide:  kg-width-wide
full: kg-width-full

Mit dem folgenden Skript werden alle Bilder mit Klasse 'kg-width-wide' ergänzt ausser diejenigen, welche manuell auf 'kg-width-full' gesetzt sind.

<script>
// set all images to wide without those that are manually set to full
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('figure.kg-card.kg-image-card').forEach(function(element) {
        if (!element.classList.contains('kg-width-full')) {
            element.classList.add('kg-width-wide');
        }
    });
});
</script>

yaml