A friendly Pelican theme
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
snapshots
static
templates
LICENSE
README.md
preview.PNG

README.md

jojo

A friendly Pelican theme - Live Demo here!

snapshot

Who's using jojo?

quick start

$ git clone https://github.com/dokelung/jojo.git
$ cd jojo/examples
$ git clone https://github.com/getpelican/pelican-plugins.git
$ cd pelican-plugins
$ git clone https://github.com/burakkose/just_table.git
$ cd ..
$ pelican content -o output -s exconf.py
$ cd output
$ python -m pelican.server

open your browser and goto http://localhost:8000, that's all!

features

requirements

Followings are my dev environments:

  • python: 3.6.0
  • pip: 9.0.1
  • pelican: 3.7.1
  • beautifulsoup4: 4.5.3
  • uikit2

Require pelican plugins:

  • tipue_search: need beautifulsoup4
  • just_table
  • representative_image: need beautifulsoup4

pelican basic settings

Open pelicanconf.py to modify your settings:

basic settings

See examples:

AUTHOR = 'jojo'
SITENAME = 'jojo'
SITEURL = 'http://localhost:8000'
DEFAULT_PAGINATION = 10

templates

To fully enable all features of jojo, please specify DIRECT_TEMPLATES as followings:

DIRECT_TEMPLATES = ('index', 'categories', 'tags', 'archives', 'search')

paths

Actually, you don't have to fully follow the settings below, but I recommand you to follow them:

# content path
PATH = 'content'

# specify plugins
PLUGIN_PATHS = ['pelican-plugins']
PLUGINS = ['tipue_search', 'just_table', "representative_image"]

# just table settings
JTABLE_TEMPLATE = """
<table class="uk-table uk-table-striped">
    {% if caption %}
    <caption> {{ caption }} </caption>
    {% endif %}
    {% if th != 0 %}
    <thead>
    <tr>
        {% if ai == 1 %}
        <th> No. </th>
        {% endif %}
        {% for head in heads %}
        <th>{{ head }}</th>
        {% endfor %}
    </tr>
    </thead>
    {% endif %}
    <tbody>
        {% for body in bodies %}
        <tr>
            {% if ai == 1 %}
            <td> {{ loop.index }} </td>
            {% endif %}
            {% for entry in body %}
            <td>{{ entry }}</td>
            {% endfor %}
        </tr>
        {% endfor %}
    </tbody>
</table>
"""

# static
STATIC_PATHS = ['images', 'articles']

# articles
ARTICLE_PATHS = ['articles']
ARTICLE_URL = 'category/{category}/{slug}/'
ARTICLE_SAVE_AS = 'category/{category}/{slug}/index.html'

# pages
PAGE_URL = 'pages/{slug}/'
PAGE_SAVE_AS = 'pages/{slug}/index.html'

THEME = 'path/to/jojo' # specify your own path to jojo

core settings of jojo

Open pelicanconf.py to modify your settings and remember to put all photos under content/images and just specify their base names in following settings:

site icon

SHORTCUT_ICON = 'jojo.jpg'

snapshot

settings of right side panels

jojo lets user set serveral panels in the right column, including:

  1. a page view panel (set by PAGEVIEW_URL)
  2. an author panel (set by AUTHOR_INFO)
  3. a newest articles panel (set by NEWEST_ARTICLES)
  4. several user defined simple panel (set by SIMPLE_PANELS)
  5. a related links panel (set by RELATED_LINKS)

page view panel

# PAGEVIEW_URL = "your pageview image url fetched by http://www.free-counter.jp/"

author panel

SOCIAL = {
    'style': {
        'size': 'medium', # small, medium, large
        'hover': True,    # True, False
        'button': False,  # True, False
    },
    # for SOCIAL, jojo supports uk-icon in uikit2
    # but jojo only recover following icons' color
    'icons': (
        ('envelope-square', '#'),
        ('facebook-square', '#'),
        ('github-square', '#'),
        ('google-plus-square', '#'),
        # ('linkedin-square', '#'),
        # ('skype', '#'),
        # ('twitter-square', '#'),
        # ('weixin', '#'),
    )
}

AUTHOR_INFO = {
    'id': AUTHOR,
    'photo': 'jojo.jpg',
    'intro_keywords': (
        ('a cute dog', '#'),
        ('a charming blogger', '#'),
    ),
    'intro': [
        'Hi, my name is jojo, I am a cute dog!',
        '你好,我是 jojo,一隻可愛的小狗。'
    ],
    'url': os.path.join(SITEURL, 'pages', 'about-me'),
    'social': SOCIAL,
}
  • SOCIAL is a variable used in AUTHOR to specify your social network:
  • style: modify it to adjust the appearence of social icons
  • icons: specify the social icons you want with format (ICON_NAME, URL)
  • AUTHOR_INFO
  • id: usually equal to AUTHOR
  • photo: photo of author (place this image under content/images)
  • intro_keywords: tuple of tuples, each item represents a hyper link specified by format (TEXT, URL)
  • intro: list of strings to describe author
  • url: the url of about-me page
  • social: dictionary used to specify social networks

snapshot

newest articles panel

NEWEST_ARTICLES = 10  # set 0 to hide this panel
  • NEWEST_ARTICLES: an integer to specify the number of newest articles listed in newest articles panel.

snapshot

user specified simple panels

SIMPLE_PANELS = (
    {
        'badge': {
            'string': 'Love',
            # type can be specified as '' or 'success' or 'warning' or 'danger'
            # by default, '' is blue, 'success' is green, 'warning' is orange and 'danger' is red
            # please reference to uikit2
            'type': 'danger',
        },
        'title': 'My Favorite Food',
        'photo': 'food.jpg',
        'content': 'I really love it!',
        'link': ('Where to eat it?', '#'),
    },
)
  • SIMPLE_PANELS: a variable to set user specified simple panel
  • badge: a dictionary
    • string: panel badge name
    • type: used to specify badge color
  • title: panel name
  • photo: pnael photo
  • content: string to describe panel
  • link: a tuple with format (LINK_TITLE, URL)

snapshot

related links panel

jojo supports a related links with Accordion effect:

RELATED_LINKS = (
    ('Pelican', 'http://getpelican.com/'),
    ('Python.org', 'http://python.org/'),
    ('Jinja2', 'http://jinja.pocoo.org/'),
    ('mg', 'https://github.com/lucachr/pelican-mg'),
)
  • RELATED_LINKS: tuple of tuples, each element specify a related link with format (LINK_NAME, URL)

snapshot

settings of left side buttons

jojo supports button tools in the left side column, including:

  1. a series of buttons to share your page to social networks (set by SHARE_BUTTONS)
  2. a series of buttons for going to previous/next page and/or to top/bottom of the current page
SHARE_BUTTONS = True
CONTROL_BUTTONS = True
  • SHARE_BUTTONS: a boolean value
  • CONTROL_BUTTONS: a boolean value

snapshot

top elements

jojo has a top navigator and a related links panel

top navigator

NAV = {
    'sitename': SITENAME,
    'navitems': (
        {
            'primary': ('About me', AUTHOR_INFO['url']),
        },
        {
            'primary': ('Category', os.path.join(SITEURL, 'categories.html')),
            'secondary': (
                {'type':'header', 'name':'Programming'},
                {'link':('python', os.path.join(SITEURL, 'category', 'python.html')) },
                {'type':'divider'},
                {'link':('misc', os.path.join(SITEURL, 'category', 'misc.html'))},
            )
        },
        {
            'primary': ('Archives', os.path.join(SITEURL, 'archives.html')),
        },
    ),
    'tipue_search': True,
}
  • sitename: the logo name of the site
  • navitems: tuple of dictionaries, each element represents a menu item of navigator
  • primary: first class menu item with format (ITEM_NAME, URL)
  • secondary: the items of submenu, tuple of dictionaries
  • tipue_search: a bool value, set True to turn on site search engine

snapshot

location panel

LOCATION = True
  • LOCATION: a bool value, set True to enable location bar

snapshot

settings of footer

FOOTER = {
    'year': 2017,
    'author': AUTHOR,
    'license': {
        'name': 'The MIT License',
        'link': 'https://opensource.org/licenses/MIT',
    }
}

snapshot

comment system

# DISQUS_SITENAME = "your disqus shortname"
# DISQUS_CONFIG = True
  • DISQUS_SITENAME: specify your disqus shortname here to enable disqus comments system
  • DISQUS_CONFIG: set True to set disqus page identifier and page url for disqus to find thread and load content

Google analytics

# GOOGLE_ANALYTICS = "your google analytics number"
  • GOOGLE_ANALYTICS: specify google analytics number of your site here