A spectre is haunting Europe. This is its website's theme. 👻 Ghost theme for websites and blogs affiliated with Die Linke.
Live Demo | Download |
---|
Screenshots of inesschwerdtner.eu, where the new theme version is rolled out already.
Page | Desktop | Mobile |
---|---|---|
Homepage Dunkelrot | ||
Homepage Dunkelgrün | ||
Blog | ||
Blogpost |
Ghost uses a simple templating language called Handlebars for its themes.
We've documented our default theme pretty heavily so that it should be fairly easy to work out what's going on just by reading the code and the comments. Once you feel comfortable with how everything works, we also have full theme API documentation which explains every possible Handlebars helper and template.
The main files are:
default.hbs
- The parent template file, which includes your global header/footerhome.hbs
- The homepageindex.hbs
- The main template to generate a list of postspost.hbs
- The template used to render individual postspage.hbs
- Used for individual pagestag.hbs
- Used for tag archives, eg. "all posts tagged withnews
"author.hbs
- Used for author archives, eg. "all posts written by Jamie"
One neat trick is that you can also create custom one-off templates by adding the slug of a page to a template file. For example:
page-about.hbs
- Custom template for an/about/
pagetag-news.hbs
- Custom template for/tag/news/
archiveauthor-ines.hbs
- Custom template for/author/ines/
archive
This website offers a onepager homepage as well as a blog. You'll need to update your routes in order to make the homepage work.
This is how your routes.yaml file could look like:
routes:
/:
template: page
data: page.start
/en/:
template: page
data: page.start-en
/sitemap/:
template: sitemap
content_type: text/html
collections:
/blog/:
permalink: /blog/{slug}/
template: home
filter: 'tag:-hash-en+tag:-hash-pressemitteilung'
/en/blog/:
permalink: /en/blog/{slug}/
template: home
filter: 'tag:hash-en+tag:-hash-pressemitteilung'
/presse/mitteilungen/:
permalink: /presse/mitteilungen/{year}/{slug}/
template: index
filter: 'tag:hash-pressemitteilung'
taxonomies:
tag: /tag/{slug}/
author: /autor_in/{slug}/
As you can see in the routes file, this theme supports posts and pages in multiple languages.
If you usually blog in German, but you want to publish a post in English, simply tag the post with the internal tag #en
. Posts with this internal tag won't be displayed in the posts archive on yourdomain.tld/blog/
, but under yourdomain.tld/en/blog/
.
To publish a page in another language, simply note its slug and create an additional route in the routes.yaml
file. The example above features an additional homepage in English. While the German home page's slug is start
, the english page's slug is start-en
. It will then be displayed under yourdomain.tld/en/
. It's as easy as that.
This Theme allows privacy-friendly and GDPR-compliant YouTube video embeds using light-yt.js by Amit Agarwal.
- Copy the YouTube video ID (if the video URL is
https://www.youtube.com/watch?v=dQw4w9WgXcQ
, the ID isdQw4w9WgXcQ
) - Inside the editor, insert an HTML block where you want to place the video
- Paste the following code into the HTML block and replace
VideoID
with the ID you copied:<div class="youtube-player" data-id="VideoID"></div>
(=><div class="youtube-player" data-id="dQw4w9WgXcQ"></div>
)
Spectre styles are compiled using Gulp/PostCSS to polyfill future CSS spec. You'll need Node, Yarn and Gulp installed globally. After that, from the theme's root directory:
# install dependencies
yarn install
# run development server
yarn dev
Now you can edit /assets/css/
files, which will be compiled to /assets/built/
automatically.
The zip
Gulp task packages the theme files into dist/<theme-name>.zip
, which you can then upload to your site.
# create .zip file
yarn zip
- Autoprefixer - Don't worry about writing browser prefixes of any kind, it's all done automatically with support for the latest 2 major versions of every browser.
Critical CSS served inline. Execute yarn critical
to re-generate.
Sprectre uses inline SVG icons, included via Handlebars partials. You can find all icons inside /partials/icons
. To use an icon just include the name of the relevant file, eg. To include the SVG icon in /partials/icons/rss.hbs
- use {{> "icons/rss"}}
.
You can add your own SVG icons in the same manner.
Spectre supports Font Awesome icons as well. Head over to their website to find the icons you need.
Copyright (c) 2013-2023 Ghost Foundation; 2023 Jannis Hutt. This theme is based on Ghost Foundation's theme Source and released under the MIT license.