Squarespace für Deutsche Websites

Wer Squarespace für eine deutschsprachige Website einsetzen will, ohne auf die Squarespace Developer Platform zurückzugreifen, den erwartet Gehacke mit CSS und Javascript.  Nur so lassen sich weiterhin die sehr schönen Standard-Templates nutzen.

Squarespace bietet einige Möglichkeiten, Code zu injizieren, um dann deutsche Übersetzungen in die ansonsten ausschließlich englischsprachige Plattform einzubauen. Die notwendigen Anpassungen hierfür fasst dieser Artikel zusammen. Viele davon wurden bereits in unterschiedlichen Blogs vorgestellt (z. B. http://www.davidroessli.com/logs/2013/04/squarespace_l10n/). 

Datumsformatierung

Um eine deutsche Datumsformatierung einzubauen, wird der folgende Code unter "Settings", "Code Injection" in den Footer injiziert: 

<script>
/* List of months in German */
var month = new Array(12);
month[0] = "Januar";
month[1] = "Februar";
month[2] = "März";
month[3] = "April";
month[4] = "Mai";
month[5] = "Juni";
month[6] = "Juli";
month[7] = "August";
month[8] = "September";
month[9] = "Oktober";
month[10]= "November";
month[11]= "Dezember";

Y.use('node', 'node-load', function(Y) {
Y.on('domready', function() {

/* (1) Reformat blog entries published dates */
Y.all('time.published').each(
function() {
var pdate = new Date(this.getAttribute('datetime'));
this.setHTML(pdate.getDate() + ". "
+ month[pdate.getMonth()] + " "
+ pdate.getFullYear());
}
);
/* (2) Replace time since strings with published dates */
Y.all('time.timestamp').each(
function() {
var tdate = new Date(this.getAttribute('datetime'));
this.setHTML(tdate.getDate() + ". "
+ month[tdate.getMonth()] + " "
+ tdate.getFullYear());
}
);
</script>

Zusätzlich können auch die Zeitangaben für Events angepasst werden:

    // same for event-dates
Y.all('.eventlist-meta-date, .event-time .event-meta-heading').each(function() {
var d = new Date(this._node.innerText.split(/–/)[0]);

this.setHTML(d.getDate() + ". "
+ month[d.getMonth()] + " "
+ d.getFullYear())
});

// append "Uhr" to event-times
Y.all('.event-time-24hr').append('&nbsp;Uhr');

Die Uhrzeit kann per Custom-CSS umgeschaltet werden:

time.event-time-24hr {
display:inline;
}

time.event-time-12hr {
display:none;
}

Übersetzungen von Standard-Texten

Im Blog und auch im Event-Modul werden diverse Standard-Texte (z. B. "share", "read more") eingesetzt. Diese lassen sich einfach über die zugehörigen CSS-Klassen selektieren und ersetzen:

    /* Substitute specific strings */
Y.all('.ss-social-button').setHTML('Teilen');
Y.all('.inline-read-more').setHTML('Weiterlesen');
Y.all('.newer-posts').setHTML('Neuere Beiträge');
Y.all('.older-posts').setHTML('Ältere Beiträge');
Y.all('.comments').setHTML('Kommentare');
Y.all('.read-more').setHTML('Weiterlesen');

Hier lassen sich natürlich weitere Übersetzungen nach dem oben zu erkennenden Schema einbauen.

Y.all('.CSS-Klasse').setHTML('Einzusetzender Text');

Google Analytics

Auch für Google Analytics wird im Standard eine amerikanische Einbindung des klassischen Google Analytics Codes verwendet. Hier bietet es sich an, eine in Deutschland sichere Variante mit Anonymize-IP und der neuen analytics.js-API zu nutzen:

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-xxxxxxxxxx', 'domain.de');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');


Vollständiger Code

Custom CSS

Der vollständige Code für das Custom CSS ist:

time.event-time-24hr {
display:inline;
}

time.event-time-12hr {
display:none;
}

Footer Injection

Der vollständige Code für die Code Injection im Footer ist:

<script>
/* List of months in German */
var month = new Array(12);
month[0] = "Januar";
month[1] = "Februar";
month[2] = "März";
month[3] = "April";
month[4] = "Mai";
month[5] = "Juni";
month[6] = "Juli";
month[7] = "August";
month[8] = "September";
month[9] = "Oktober";
month[10]= "November";
month[11]= "Dezember";

Y.use('node', 'node-load', function(Y) {
Y.on('domready', function() {

/* (1) Reformat blog entries published dates */
Y.all('time.published').each(
function() {
var pdate = new Date(this.getAttribute('datetime'));
this.setHTML(pdate.getDate() + ". "
+ month[pdate.getMonth()] + " "
+ pdate.getFullYear());
}
);
/* (2) Replace time since strings with published dates */
Y.all('time.timestamp').each(
function() {
var tdate = new Date(this.getAttribute('datetime'));
this.setHTML(tdate.getDate() + ". "
+ month[tdate.getMonth()] + " "
+ tdate.getFullYear());
}
);

// same for event-dates
Y.all('.eventlist-meta-date, .event-time .event-meta-heading').each(function() {
var d = new Date(this._node.innerText.split(/–/)[0]);
this.setHTML(d.getDate() + ". "
+ month[d.getMonth()] + " "
+ d.getFullYear())
});

// append "Uhr" to event-times
Y.all('.event-time-24hr').append('&nbsp;Uhr');

/* Substitute specific strings */
Y.all('.ss-social-button').setHTML('Teilen');
Y.all('.inline-read-more').setHTML('Weiterlesen');
Y.all('.newer-posts').setHTML('Neuere Beiträge');
Y.all('.older-posts').setHTML('Ältere Beiträge');
Y.all('.comments').setHTML('Kommentare');
});
});

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-xxxxxxxxxx', 'domain.de');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>

Trotz aller Tricks bleibt Squarespace ein amerikanisches System, welches an vielen Stellen nicht besonders gut für deutsche Websites und deutsche Nutzer geeignet ist.