This project is based on hugo-PaperMod which is a fork of hugo-paper. The goal of the project is to make a replica theme that works under Pelican site generator.
A fast and responsive theme built for the Pelican site generator. It is styled using Tailwind CSS. It supports dark mode and built in search function.
Live-Demo at https://aleylara.github.io/Papyrus/
The theme requires the pelican-search, pelican-neighbors, pelican-readtime and pelican-toc plugins. First three plugins can be installed using pip. Pelican-toc will be installed manually. We will also need stork and beautifulsoup4 as dependencies.
$ pip install pelican-search
$ pip install pelican-neighbors
$ pip install pelican-readtimeCreate two directories themes and pelican-plugins inside the root level of your project. Clone the Papyrus theme inside the themes directory that you created.
$ cd myBlog
$ mkdir themes
$ cd themes
$ git clone https://github.com/aleylara/Papyrus.gitNow clone the pelican-toc plugin repo (not available via pip) into your pelican-plugins directory and install beautifulsoup4 that is required by this plugin.
$ mkdir pelican-plugins
$ cd pelican-plugins
$ git clone https://github.com/ingwinlu/pelican-toc.git
$ pip install beautifulsoup4Papyrus theme is already setup for your search functionality. However you will still need to have the stork package installed in your operating system. Verify stork is in your path by stork -h otherwise go ahead and install it.
# Install using Homebrew
$ brew install stork-search/stork-tap/stork
# Install using the Rust toolchain and install Stork with Cargo
$ cargo install stork-search --lockedThis is the pelicanconf.py settings file for the demo site, please change values to meet your needs.
AUTHOR = 'Author'
SITENAME = 'Papyrus'
SITEURL = 'http://127.0.0.1:8000/'
TIMEZONE = 'Australia/Sydney'
DEFAULT_LANG = 'en'
SUBTITLE = 'Papyrus'
SUBTEXT = '''A fast and responsive theme built for the
<a href="https://blog.getpelican.com/">Pelican</a> site generator.<br>
The theme is inspired by <a href="https://github.com/adityatelange/hugo-PaperMod">Hugo-PaperMod</a>.
It is styled using <a href="https://tailwindcss.com/">Tailwind CSS</a>.
It supports dark mode and built in search function.
'''
COPYRIGHT = '©2022'
PATH = 'content'
THEME = 'themes/Papyrus'
THEME_STATIC_PATHS = ['static']
PLUGIN_PATHS = ['pelican-plugins']
PLUGINS = ['readtime', 'search', 'neighbors', 'pelican-toc']
STATIC_PATHS = [
'images',
'images/favicon.ico',
'extra/robots.txt',
]
EXTRA_PATH_METADATA = {
'extra/robots.txt': {'path': 'robots.txt'},
'images/favicon.ico': {'path': 'favicon.ico'},
}
DISPLAY_PAGES_ON_MENU = True
DIRECT_TEMPLATES = (('index', 'search', 'tags', 'categories', 'archives',))
PAGINATED_TEMPLATES = {'index': None, 'tag': None, 'category': None, 'author': None, 'archives': 24,}
# Site search plugin
SEARCH_MODE = "output"
SEARCH_HTML_SELECTOR = "main"
# Table of Content Plugin
TOC = {
'TOC_HEADERS' : '^h[1-3]', # What headers should be included in
# the generated toc
# Expected format is a regular expression
'TOC_RUN' : 'true', # Default value for toc generation,
# if it does not evaluate
# to 'true' no toc will be generated
'TOC_INCLUDE_TITLE': 'false', # If 'true' include title in toc
}
# Feed generation is usually not desired when developing
FEED_ALL_ATOM = 'feeds/all.atom.xml'
CATEGORY_FEED_ATOM = None
TRANSLATION_FEED_ATOM = None
AUTHOR_FEED_ATOM = None
AUTHOR_FEED_RSS = None
RSS_FEED_SUMMARY_ONLY = True
# Social widgets
SOCIAL = (
('github', 'https://github.com/aleylara/Papyrus/'),
('twitter', 'https://twitter.com/'),
)
# Article share widgets
SHARE = (
("twitter", "https://twitter.com/intent/tweet/?text=Features&url="),
("linkedin", "https://www.linkedin.com/sharing/share-offsite/?url="),
("reddit", "https://reddit.com/submit?url="),
("facebook", "https://facebook.com/sharer/sharer.php?u="),
("whatsapp", "https://api.whatsapp.com/send?text=Features - "),
("telegram", "https://telegram.me/share/url?text=Features&url="),
)
DEFAULT_PAGINATION = 8
# Uncomment following line if you want document-relative URLs when developing
#RELATIVE_URLS = True
# DISQUS_SITENAME = ''
# GOOGLE_ANALYTICS = ''A sample article header is below. Adding a Summary field is highly recommended. It substitutes as the article description and gets added into html <meta name="description" content="...">. Summaries are also used in blog's home page. They help to keep similar height article previews without titles, images or code blocks.
Title: Installation
Date: 2021-12-14
Tags: CSS, Markdown, Python, AI
Category: Software
Summary: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.Articles created inside directory named pages will have a separate static page and a direct link similar to the About page in the demo.
You can now run the development server and visit http://127.0.0.1:8000/
cd myBlog
$ pelican --autoreload --listen --ignore-cacheFinal project directory structure should look similar to this.
$ (pelican) ➜ myProject tree
├── myBlog
│ ├── content
│ │ ├── extra
│ │ │ └── robots.txt
│ │ ├── images
│ │ │ ├── favicon.ico
│ │ │ └── camera.png
│ │ ├── pages
│ │ │ ├── about.md
│ │ │ └── events.md
│ │ ├── Hardware
│ │ │ ├── article-one.md
│ │ │ └── article-two.md
│ │ └── Software
│ │ ├── article-three.md
│ │ └── article-four.md
│ ├── Makefile
│ ├── output
│ │
│ ├── pelicanconf.py
│ ├── pelican-plugins
│ │ └── pelican-toc
│ │
│ ├── publishconf.py
│ ├── tasks.py
│ └── themes
│ └── Papyrus
└── venvImages can be placed on page by adding a custom class names such as image-left, image-right, image-center in your markdown.
Similarly, placed images can be given a size using custom classes image-thumbnail, image-small, image-medium andimage-large.
You can use <img/> tags along with the custom image classes straight in your Markdown.
<img src="{static}/images/screenshot.png" alt="screenshot" class="image-left image-medium" />
<img src="{static}/images/screenshot.png" alt="screenshot" class="image-right image-thumbnail" />
Alternatively you could use inline styling.
<img src="{static}/images/screenshot.png" alt="screenshot" style="width:200px;" />In order to have a responsive video thumbnail, the <iframe> tags must be wrapped inside the <div class="aspect-w-16 aspect-h-9"></div> in your markdown file.
<div class="aspect-w-16 aspect-h-9">
<iframe width="736" height="414" src="https://www.youtube.com/embed/TmWIrBPE6Bc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>If you would like to make any local changes, tailwindcss configuration files are included with the theme. First go into the Papyrus directory and install missing packages with npm install.
Then run the development server that watches for your changed tailwind classes inside the templates folder and updates main.css on the go.
# Initial installation of packages
$ cd themes/Papyrus
$ npm install
# JIT compiled main.css
$ npm run dev
Settings file now has the placeholders for your robots.txt and favicon.ico files.
Please note these files are not included and they are required to be added by you.
├── content
│ ├── extra
│ │ └── robots.txt
│ ├── images
│ │ ├── favicon.ico
│ │ └── camera.pngIf you are updating from an older version, please be sure to have your pelicanconf.py updated with EXTRA_PATH_METADATA and STATIC_PATHS as seen in sample settings above.