Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request #3088 from getnikola/navigation_alt_links
Add NAVIGATION_ALT_LINKS
  • Loading branch information
Kwpolska committed May 13, 2018
2 parents 4d95b69 + f2b3520 commit 98de38e
Show file tree
Hide file tree
Showing 19 changed files with 95 additions and 75 deletions.
7 changes: 4 additions & 3 deletions CHANGES.txt
Expand Up @@ -12,11 +12,12 @@ Important compatibility changes not mentioned previously
Features
--------

* Added documentation of post objects to list of template variables
* Add ``NAVIGATION_ALT_LINKS`` option, displayed on the right side in
bootstrap4/bootblog4 (Issue #3030)
* Added documentation of Post objects to list of template variables
(Issue #3003)
* Support featured posts in bootblog4 (Issue #2964)
* Add ``THEME_CONFIG`` setting that themes can use in any way they
like
* Add ``THEME_CONFIG`` setting that themes can use in any way
* Use youtube-nocookie.com for better privacy in ``youtube`` reST
directive and improve the appearance of the player

Expand Down
6 changes: 5 additions & 1 deletion docs/creating-a-theme.rst
Expand Up @@ -355,7 +355,7 @@ all the interesting stuff:
That link which says "Skip to main content" is very important for accessibility, so we will leave it in
place. But below, you can see how it creates the "container" div we see in the Nikola page, and the content is
created by ``html_header()`` which is defined in ``base_header.tmpl`` The actual ``nav`` element is done
by the ``html_navigation_links`` function out of the ``NAVIGATION_LINKS`` option.
by the ``html_navigation_links`` function out of the ``NAVIGATION_LINKS`` and ``NAVIGATION_ALT_LINKS`` options. (Let's put the alt links after regular ones; Bootstrap puts it on the right side, for example.)

So, first, lets change that base template to be more lanyon-like:

Expand Down Expand Up @@ -433,6 +433,10 @@ Another problem is that the contents of the nav element are wrong. They are not
<a class="sidebar-nav-item" href="${url}">${text}</a>
%endfor
${template_hooks['menu']()}
%for url, text in navigation_alt_links[lang]:
<a class="sidebar-nav-item" href="${url}">${text}</a>
%endfor
${template_hooks['menu_alt']()}
</nav>
</%def>
Expand Down
3 changes: 3 additions & 0 deletions docs/manual.rst
Expand Up @@ -1548,6 +1548,9 @@ Navigation Links
it’s set to ``True``, end your links with a ``/``, otherwise end them
with ``/index.html`` — or else they won’t be highlighted when active.

There’s also ``NAVIGATION_ALT_LINKS``. Themes may display this somewhere
else, or not at all. Bootstrap puts it on the right side of the header.

The ``SEARCH_FORM`` option contains the HTML code for a search form based on
duckduckgo.com which should always work, but feel free to change it to
something else.
Expand Down
1 change: 1 addition & 0 deletions docs/template-variables.rst
Expand Up @@ -80,6 +80,7 @@ Name Type Descript
``meta_generator_tag`` bool ``META_GENERATOR_TAG`` setting
``momentjs_locales`` defaultdict<str, str> dictionary of available Moment.js locales
``navigation_links`` TranslatableSetting ``NAVIGATION_LINKS`` setting
``navigation_alt_links`` TranslatableSetting ``NAVIGATION_ALT_LINKS`` setting
``needs_ipython_css`` bool whether or not Jupyter CSS is needed by this site
``posts_sections`` bool ``POSTS_SECTIONS`` setting
``posts_section_are_indexes`` bool ``POSTS_SECTIONS_ARE_INDEXES`` setting
Expand Down
9 changes: 8 additions & 1 deletion nikola/conf.py.in
Expand Up @@ -75,7 +75,7 @@ TRANSLATIONS_PATTERN = '{path}.{lang}.{ext}'
#
# WARNING: Support for submenus is theme-dependent.
# Only one level of submenus is supported.
# WARNING: Some themes, including the default Bootstrap 3 theme,
# WARNING: Some themes, including the default Bootstrap 4 theme,
# may present issues if the menu is too large.
# (in Bootstrap, the navbar can grow too large and cover contents.)
# WARNING: If you link to directories, make sure to follow
Expand All @@ -85,6 +85,13 @@ TRANSLATIONS_PATTERN = '{path}.{lang}.{ext}'

NAVIGATION_LINKS = ${NAVIGATION_LINKS}

# Alternative navigation links. Works the same way NAVIGATION_LINKS does,
# although themes may not always support them. (translatable)
# (Bootstrap 4: right-side of navbar, Bootblog 4: right side of title)
NAVIGATION_ALT_LINKS = {
DEFAULT_LANG: {}
}

# Name of the theme to use.
THEME = ${THEME}

Expand Down
15 changes: 10 additions & 5 deletions nikola/data/themes/base-jinja/templates/base_header.tmpl
Expand Up @@ -30,7 +30,16 @@
{% macro html_navigation_links() %}
<nav id="menu">
<ul>
{% for url, text in navigation_links[lang] %}
{{ html_navigation_links_entries(navigation_links) }}
{{ html_navigation_links_entries(navigation_alt_links) }}
{{ template_hooks['menu']() }}
{{ template_hooks['menu_alt']() }}
</ul>
</nav>
{% endmacro %}

{% macro html_navigation_links_entries(navigation_links_source) %}
{% for url, text in navigation_links_source[lang] %}
{% if isinstance(url, tuple) %}
<li> {{ text }}
<ul>
Expand All @@ -50,10 +59,6 @@
{% endif %}
{% endif %}
{% endfor %}
{{ template_hooks['menu']() }}
{{ template_hooks['menu_alt']() }}
</ul>
</nav>
{% endmacro %}

{% macro html_translation_header() %}
Expand Down
15 changes: 10 additions & 5 deletions nikola/data/themes/base/templates/base_header.tmpl
Expand Up @@ -30,7 +30,16 @@
<%def name="html_navigation_links()">
<nav id="menu">
<ul>
%for url, text in navigation_links[lang]:
${html_navigation_links_entries(navigation_links)}
${html_navigation_links_entries(navigation_alt_links)}
${template_hooks['menu']()}
${template_hooks['menu_alt']()}
</ul>
</nav>
</%def>

<%def name="html_navigation_links_entries(navigation_links_source)">
%for url, text in navigation_links_source[lang]:
% if isinstance(url, tuple):
<li> ${text}
<ul>
Expand All @@ -50,10 +59,6 @@
%endif
% endif
%endfor
${template_hooks['menu']()}
${template_hooks['menu_alt']()}
</ul>
</nav>
</%def>

<%def name="html_translation_header()">
Expand Down
6 changes: 5 additions & 1 deletion nikola/data/themes/bootblog4-jinja/templates/base.tmpl
Expand Up @@ -35,21 +35,25 @@
</a>
</div>
<div class="col-md-3 justify-content-end align-items-center bs-nav-collapsible collapse flex-collapse bootblog4-right-nav">
<nav class="navbar navbar-light bg-white">
<ul class="navbar-nav bootblog4-right-nav">
{{ base.html_navigation_links_entries(navigation_alt_links) }}
{% block belowtitle %}
{% if translations|length > 1 %}
{{ base.html_translations() }}
{% endif %}
{% endblock %}
{% block sourcelink %}{% endblock %}
{{ template_hooks['menu_alt']() }}
</ul></nav>
</div>
</div>
</header>

<nav class="navbar navbar-expand-md navbar-light bg-white static-top">
<div class="collapse navbar-collapse bs-nav-collapsible" id="bs-navbar">
<ul class="navbar-nav nav-fill d-flex w-100">
{{ base.html_navigation_links() }}
{{ base.html_navigation_links_entries(navigation_links) }}
{{ template_hooks['menu']() }}
</ul>
</div><!-- /.navbar-collapse -->
Expand Down
11 changes: 8 additions & 3 deletions nikola/data/themes/bootblog4-jinja/templates/base_helper.tmpl
Expand Up @@ -118,7 +118,11 @@ lang="{{ lang }}">
{% endmacro %}

{% macro html_navigation_links() %}
{% for url, text in navigation_links[lang] %}
{{ html_navigation_links_entries(navigation_links) }}
{% endmacro %}

{% macro html_navigation_links_entries(navigation_links_source) %}
{% for url, text in navigation_links_source[lang] %}
{% if isinstance(url, tuple) %}
<li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ text }}</a>
<div class="dropdown-menu">
Expand All @@ -132,7 +136,6 @@ lang="{{ lang }}">
</div>
{% else %}
{% if rel_link(permalink, url) == "#" %}
{# <a class="p-2 text-white bg-secondary active" href="{{ url }}">{{ text }} <span class="sr-only">{{ messages("(active)", lang) }}</span></a> #}
<li class="nav-item active"><a href="{{ permalink }}" class="nav-link">{{ text }} <span class="sr-only">{{ messages("(active)", lang) }}</span></a>
{% else %}
<li class="nav-item"><a href="{{ url }}" class="nav-link">{{ text }}</a>
Expand All @@ -141,6 +144,8 @@ lang="{{ lang }}">
{% endfor %}
{% endmacro %}



{% macro html_feedlinks() %}
{% if rss_link %}
{{ rss_link }}
Expand All @@ -167,7 +172,7 @@ lang="{{ lang }}">
{% macro html_translations() %}
{% for langname in translations|sort %}
{% if langname != lang %}
<a href="{{ abs_link(_link("root", None, langname)) }}" rel="alternate" hreflang="{{ langname }}" class="p-2 text-secondary">{{ messages("LANGUAGE", langname) }}</a>
<li class="nav-item"><a href="{{ abs_link(_link("root", None, langname)) }}" rel="alternate" hreflang="{{ langname }}" class="nav-link">{{ messages("LANGUAGE", langname) }}</a></li>
{% endif %}
{% endfor %}
{% endmacro %}
22 changes: 0 additions & 22 deletions nikola/data/themes/bootblog4-jinja/templates/ui_helper.tmpl

This file was deleted.

8 changes: 6 additions & 2 deletions nikola/data/themes/bootblog4/assets/css/bootblog.css
Expand Up @@ -169,13 +169,17 @@ article .metadata {
}

.bootblog4-right-nav {
text-align: right;
flex-direction: row;
}

.bootblog4-right-nav .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}

.bootblog4-featured-text {
overflow: auto;
}

/* extend the mobile appearance to `sm`, because otherwise weird things happen */
@media (min-width: 576px) {
.nbb-navbar-toggler {
Expand Down
6 changes: 5 additions & 1 deletion nikola/data/themes/bootblog4/templates/base.tmpl
Expand Up @@ -35,21 +35,25 @@ ${template_hooks['extra_head']()}
</a>
</div>
<div class="col-md-3 justify-content-end align-items-center bs-nav-collapsible collapse flex-collapse bootblog4-right-nav">
<nav class="navbar navbar-light bg-white">
<ul class="navbar-nav bootblog4-right-nav">
${base.html_navigation_links_entries(navigation_alt_links)}
<%block name="belowtitle">
%if len(translations) > 1:
${base.html_translations()}
%endif
</%block>
<%block name="sourcelink"></%block>
${template_hooks['menu_alt']()}
</ul></nav>
</div>
</div>
</header>

<nav class="navbar navbar-expand-md navbar-light bg-white static-top">
<div class="collapse navbar-collapse bs-nav-collapsible" id="bs-navbar">
<ul class="navbar-nav nav-fill d-flex w-100">
${base.html_navigation_links()}
${base.html_navigation_links_entries(navigation_links)}
${template_hooks['menu']()}
</ul>
</div><!-- /.navbar-collapse -->
Expand Down
11 changes: 8 additions & 3 deletions nikola/data/themes/bootblog4/templates/base_helper.tmpl
Expand Up @@ -118,7 +118,11 @@ lang="${lang}">
</%def>

<%def name="html_navigation_links()">
%for url, text in navigation_links[lang]:
${html_navigation_links_entries(navigation_links)}
</%def>

<%def name="html_navigation_links_entries(navigation_links_source)">
%for url, text in navigation_links_source[lang]:
% if isinstance(url, tuple):
<li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${text}</a>
<div class="dropdown-menu">
Expand All @@ -132,7 +136,6 @@ lang="${lang}">
</div>
% else:
% if rel_link(permalink, url) == "#":
##<a class="p-2 text-white bg-secondary active" href="${url}">${text} <span class="sr-only">${messages("(active)", lang)}</span></a>
<li class="nav-item active"><a href="${permalink}" class="nav-link">${text} <span class="sr-only">${messages("(active)", lang)}</span></a>
%else:
<li class="nav-item"><a href="${url}" class="nav-link">${text}</a>
Expand All @@ -141,6 +144,8 @@ lang="${lang}">
%endfor
</%def>



<%def name="html_feedlinks()">
%if rss_link:
${rss_link}
Expand All @@ -167,7 +172,7 @@ lang="${lang}">
<%def name="html_translations()">
%for langname in sorted(translations):
%if langname != lang:
<a href="${abs_link(_link("root", None, langname))}" rel="alternate" hreflang="${langname}" class="p-2 text-secondary">${messages("LANGUAGE", langname)}</a>
<li class="nav-item"><a href="${abs_link(_link("root", None, langname))}" rel="alternate" hreflang="${langname}" class="nav-link">${messages("LANGUAGE", langname)}</a></li>
%endif
%endfor
</%def>
22 changes: 0 additions & 22 deletions nikola/data/themes/bootblog4/templates/ui_helper.tmpl

This file was deleted.

3 changes: 2 additions & 1 deletion nikola/data/themes/bootstrap4-jinja/templates/base.tmpl
Expand Up @@ -30,14 +30,15 @@

<div class="collapse navbar-collapse" id="bs-navbar">
<ul class="navbar-nav mr-auto">
{{ base.html_navigation_links() }}
{{ base.html_navigation_links_entries(navigation_links) }}
{{ template_hooks['menu']() }}
</ul>
{% if search_form %}
{{ search_form }}
{% endif %}

<ul class="navbar-nav navbar-right">
{{ base.html_navigation_links_entries(navigation_alt_links) }}
{% block belowtitle %}
{% if translations|length > 1 %}
<li>{{ base.html_translations() }}</li>
Expand Down
Expand Up @@ -115,7 +115,11 @@ lang="{{ lang }}">
{% endmacro %}

{% macro html_navigation_links() %}
{% for url, text in navigation_links[lang] %}
{{ html_navigation_links_entries(navigation_links) }}
{% endmacro %}

{% macro html_navigation_links_entries(navigation_links_source) %}
{% for url, text in navigation_links_source[lang] %}
{% if isinstance(url, tuple) %}
<li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ text }}</a>
<div class="dropdown-menu">
Expand Down
3 changes: 2 additions & 1 deletion nikola/data/themes/bootstrap4/templates/base.tmpl
Expand Up @@ -30,14 +30,15 @@ ${template_hooks['extra_head']()}

<div class="collapse navbar-collapse" id="bs-navbar">
<ul class="navbar-nav mr-auto">
${base.html_navigation_links()}
${base.html_navigation_links_entries(navigation_links)}
${template_hooks['menu']()}
</ul>
%if search_form:
${search_form}
%endif

<ul class="navbar-nav navbar-right">
${base.html_navigation_links_entries(navigation_alt_links)}
<%block name="belowtitle">
%if len(translations) > 1:
<li>${base.html_translations()}</li>
Expand Down
6 changes: 5 additions & 1 deletion nikola/data/themes/bootstrap4/templates/base_helper.tmpl
Expand Up @@ -115,7 +115,11 @@ lang="${lang}">
</%def>

<%def name="html_navigation_links()">
%for url, text in navigation_links[lang]:
${html_navigation_links_entries(navigation_links)}
</%def>

<%def name="html_navigation_links_entries(navigation_links_source)">
%for url, text in navigation_links_source[lang]:
% if isinstance(url, tuple):
<li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">${text}</a>
<div class="dropdown-menu">
Expand Down

0 comments on commit 98de38e

Please sign in to comment.