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

<meta name="robots" content="noai, noimageai">

<script>
  // Navigation: Apply accent color based on the current path
  document.addEventListener('DOMContentLoaded', function() {
    const path = window.location.pathname;
    const style = document.createElement('style');
    document.head.appendChild(style);

    // Reset all menu items to white color
    style.innerHTML = `
      .nav-blog a, .nav-about a, .nav-keywords a, .nav-timeline a,  .nav-datenschutz a {
        color: white !important;
      }
    `;

    // Apply accent color based on the current path
    if (path === '/') {
      style.innerHTML += `
        .nav-blog a {
          color: var(--accent) !important;
        }
      `;
    } else if (path.includes('/about')) {
      style.innerHTML += `
        .nav-about a {
          color: var(--accent) !important;
        }
      `;
    } else if (path.includes('/tags')) {
      style.innerHTML += `
        .nav-keywords a {
          color: var(--accent) !important;
        }
      `;  
    } else if (path.includes('/timeline')) {
      style.innerHTML += `
        .nav-timeline a {
          color: var(--accent) !important;
        }
      `;
    } else if (path.includes('/datenschutz')) {
      style.innerHTML += `
        .nav-datenschutz a {
          color: var(--accent) !important;
        }
      `;
    }
  });
</script>

<script>
  // home title
  document.addEventListener('DOMContentLoaded', function() {
    var header = document.querySelector('.bo-home-header__title');
    if (header) {
      header.innerHTML = 'supportnet.ch<span class="line-break"></span>&lt;it & more&gt;<span class="line-break"></span>blog';
    }
  });
</script>

<script>
  // home text
  document.addEventListener('DOMContentLoaded', function() {
    var description = document.querySelector('.bo-home-header__description');
    if (description) {
      description.innerHTML = '<strong>News aus einem dynamischen Bereich der IT</strong>, Projekte bei PopNet Informatik & Kaformatik Software Entwicklung, sowie über eigene <strong>Hobbys</strong>.<span class="line-break"></span>Peter Portmann hat den Tätigkeitsschwerpunkt<span class="line-break"></span>von der Zahnmedizin zur IT verlagert.<span class="line-break"></span>Weitere Info siehe hier: <a href="/about" style="color: white;"><strong>[about]</strong></a>';
    }
  });
</script>

<style>
// allways 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>
// line break for homepage text
.line-break::after {
    content: "";
    display: block;
}

// hide unused items
//.bo-logo {display: none;}
//.bo-post-author {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;}
</style>

Code Injection allgemein, Footer

<script>
  // hide hero image on tag pages
  document.addEventListener("DOMContentLoaded", function () {
    if (window.location.href.includes('/tag/')) {
      const elements = document.querySelectorAll('.bo-generic-hero__media');

      elements.forEach(function (element) {
        // Hide the element
        element.style.display = 'none';

        // Create a spacer element
        const spacer = document.createElement('div');
        spacer.style.transition = 'height 0.3s ease'; // Smooth transition for height changes

        // Function to set spacer height based on window width
        function setSpacerHeight() {
          spacer.style.height = window.innerWidth < 720 ? '30px' : '0px';
        }

        // Set initial spacer height
        setSpacerHeight();

        // Update spacer height on window resize with a debounce for performance
        let resizeTimeout;
        window.addEventListener('resize', function () {
          clearTimeout(resizeTimeout);
          resizeTimeout = setTimeout(setSpacerHeight, 100); // Delay for smoother updates
        });

        // Insert the spacer after the element
        element.parentNode.insertBefore(spacer, element.nextSibling);
      });
    }
  });
</script>


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

Code Injection in einem Beitrag/Post

Bilder als 'wide' darstellen

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>

Bilder mit manueller Breite darstellen

<script>
// set image width to number in filename that is followed by "vw"
// "image-50vw.jpg"
  document.addEventListener("DOMContentLoaded", function() {
    const images = document.querySelectorAll('.kg-card.kg-image-card img');
    images.forEach(img => {
      const src = img.getAttribute('src');
      const match = src.match(/(\d+)vw/);
      if (match) {
        const vw = match[1];
        img.style.width = `${vw}vw`;
        img.style.height = 'auto';
      }
    });
  });
</script>

Bilder einstellen in einem Skript

• normal, nicht kg-width-full > kg-width-wide
• "image_nw.jpg" > normal
• "image_vw50.jpg" > img.style.width = '${vw}vw'

<script>
document.addEventListener("DOMContentLoaded", function() {
  const images = document.querySelectorAll('.kg-card.kg-image-card img');
  images.forEach(img => {
    const src = img.getAttribute('src');
    const parentFigure = img.closest('figure.kg-card.kg-image-card');

    if (!parentFigure) {
      return;
    }

    // Check for "vw" in the filename: "image_vw50.jpg"
    const vwMatch = src.match(/vw(\d+)/);
    if (vwMatch) {
      const vw = vwMatch[1];
      img.style.width = `${vw}vw`;
      img.style.height = 'auto';
    } 
    // Check for "nw" in the filename: "image_nw.jpg"
    else if (src.includes('nw')) {
      // Do nothing
    } 
    // If neither "vw" nor "nw" is present, set to wide if not full.
    else if (!parentFigure.classList.contains('kg-width-full')) {
      parentFigure.classList.add('kg-width-wide');
    }
  });
});
</script>

Tabelle linksbündig

<div class="bo-table-container">
TABELLE
</div>

<style>
/* Alle Tabellen linksbündig ausrichten */
table {
    margin-left: 0 !important;
    margin-right: auto !important; /* Stellt sicher, dass kein margin-right vorhanden ist */
    text-align: left !important;
}

/* Inhalte in Tabellenzellen (th, td) linksbündig ausrichten */
table th,
table td {
    text-align: left !important;
}
</style>

yaml