CODEWITHSUNDEEP
themespelican
iainH
iainH

Reputation: 1084

How do I use more than one Pelican theme simultaneously?

I want to use a theme cloned from GitHub into my themes directory for almost all pages and articles and automatically-generated pages except for my landing page whose template is not part of the cloned theme and which uses its own particular css..

Currently my working site uses a new template file and related images, js and css files added to the cloned theme. But that's not what I want.

I want to keep separate the landing page's template and related files from the cloned theme but don't understand what settings and / or content file's metadata to use to point to a different theme path just for that one page

i.e. I want to override the THEME settings on just one page.

Settings THEME, CSS_FILE, DIRECT-TEMPLATE and TEMPLATE_PAGES don't seem to be exactly what I want. But maybe they are?

Upvotes: 1

Views: 506

Answers (1)

charlesreid1
charlesreid1

Reputation: 4821

You have a couple of different options. Personally, I'd go with the first method, but I've used all three of these in different situations.

The index.html method

With this method, you create an index.html file that is straight up HTML - exactly how you want your index.html page to look. You can use Jinja variables in it, which is important if you're including CSS that's in your theme (as opposed to using hosted libraries), but mostly, it just looks exactly like you want it to look. A very simple example:

<html>
<head>
<title>My Title</title>
<link href="{{ SITEURL }}/theme/css/mystyles.css" rel="stylesheet" type="text/css">
<body>
<h1>Hello world!</h1>
</body>
</html>

You can then tell Pelican not to render .html files by including this line in your pelicanconfig.py:

READERS = {'html': None}

This will not prevent Jinja from processing Jinja templates in the HTML document.

Finally, because you aren't including any metadata about the HTML file in the HTML file itself (that's what the READERS = {'html': None} business is all about), you have to tell Pelican where to put the final index.html, by setting the TEMPLATE_PAGES variable, also in your pelicanconf.py file:

TEMPLATE_PAGES = {
    'index.html' : 'index.html'
}

Now you can see your page by going to localhost/ in your browser.

If you wanted to put the file at a different location, you can specify any location you want:

TEMPLATE_PAGES = {
    'index.html' : 'mydirectory/mypage.html'
}

which would make your page accessible at localhost/mydirectory/mypage.html.

Include alternate CSS file in Markdown

Since most HTML works verbatim in Markdown posts, you could also modify your landing page Markdown file to include a CSS file at the top, 

Title: My Index
Author: Clark Kent
Date: 2010-12-03 10:20
Category: StackOverflow

<link href="{{ SITEURL }}/theme/css/mystyles.css" rel="stylesheet" type="text/css">

# Hello World

Welcome to the landing page!

Add metadata to control theme

Lastly, you could modify the theme directly to include a metadata attribute that controls what stylesheets the theme uses. For example, let's use the WhichTheme: metadata flag. We'll specify WhichTheme: index for our index Markdown page, and WhichTheme: notindex (or nothing) for all other pages. Then in our theme files, we'll look for the template used to render all pages (usually pages.html), and we'll add a Jinja conditional to check for our new variable, which is accessible at page.WhichTheme:

{% if page.WhichTheme=='index' %}
    <link href="{{ SITEURL }}/theme/css/mystyles.css" rel="stylesheet" type="text/css">
    <h1>{{ page.title }}</h1>
{% else %}
    <h1>{{ page.title }}</h1>
{% endif %}

Upvotes: 2

Related Questions