Davide Benesso

Ghost Pro Starter: personalizzazioni

2 minuti

Aggiornato a maggio 2026.

Tutte le modifiche avvengono via Settings → Code injection — nessuna modifica al codice sorgente, nessun problema con gli aggiornamenti futuri.

Site header — colore tema

<meta name="msapplication-TileColor" content="#tuocolore">
<meta name="theme-color" content="#tuocolore">

Imposta il colore della barra del browser su mobile e il tile su Windows. Basta sostituire il valore hex con il proprio colore brand.

Site footer — JavaScript

Tradurre l’interfaccia in italiano

Ghost usa stringhe in inglese hardcoded. Si sostituiscono a runtime con querySelectorAll:

const replaceText = (selector, newText) => {
  document.querySelectorAll(selector).forEach(el => {
    el.textContent = newText;
  });
};
 
replaceText('.single-cta-title', 'Iscriviti gratis per continuare la lettura');
replaceText('button[data-portal="signup"]', 'Iscriviti');
replaceText('button[data-portal="signin"]', 'Accesso');
replaceText('a[data-portal="signin"]', 'Accesso');
replaceText('a[data-portal="signup"]', 'Iscrizione gratuita');

Redirect autore

Il link automatico /author/nome/ può essere reindirizzato a qualsiasi pagina:

document.querySelectorAll('a[href="/author/tuonome/"]').forEach(el => {
  el.setAttribute('href', '/chi-sono/');
});

Tutti i link verso domini esterni si aprono in _blank e ricevono un’icona Font Awesome:

document.querySelectorAll('a').forEach(link => {
  if (link.hostname !== window.location.hostname) {
    link.setAttribute('target', '_blank');
    const icon = document.createElement('i');
    icon.className = 'fas fa-external-link-alt';
    link.appendChild(icon);
  }
});

TOC automatico

Genera un indice dei contenuti dagli h2 presenti e lo inserisce prima del primo titolo, solo nelle pagine post e page:

if (document.body.classList.contains('post-template') ||
    document.body.classList.contains('page-template')) {
  // Raccoglie tutti gli h2 e costruisce il TOC
  // Inserisce <nav class="table-of-contents"> prima del primo h2
}

Site footer — CSS

Rimuove elementi non necessari:

.gh-footer-copyright { display: none; } /* Branding Ghost */
.gh-post-upgrade-cta { display: none; } /* CTA upgrade piano */

Graph View