Merge pull request #3088 from getnikola/navigation_alt_links

Add NAVIGATION_ALT_LINKS

CHANGES.txt

@@ -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
 

docs/creating-a-theme.rst

@@ -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:
 
@@ -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>

docs/manual.rst

@@ -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.

docs/template-variables.rst

@@ -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

nikola/conf.py.in

@@ -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
@@ -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}
 

nikola/data/themes/base-jinja/templates/base_header.tmpl

@@ -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>
@@ -50,10 +59,6 @@
             {% endif %}
         {% endif %}
     {% endfor %}
-    {{ template_hooks['menu']() }}
-    {{ template_hooks['menu_alt']() }}
-    </ul>
-    </nav>
 {% endmacro %}
 
 {% macro html_translation_header() %}

nikola/data/themes/base/templates/base_header.tmpl

@@ -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>
@@ -50,10 +59,6 @@
             %endif
         % endif
     %endfor
-    ${template_hooks['menu']()}
-    ${template_hooks['menu_alt']()}
-    </ul>
-    </nav>
 </%def>
 
 <%def name="html_translation_header()">

nikola/data/themes/bootblog4-jinja/templates/base.tmpl

@@ -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 -->

nikola/data/themes/bootblog4-jinja/templates/base_helper.tmpl

@@ -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">
@@ -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>
@@ -141,6 +144,8 @@ lang="{{ lang }}">
     {% endfor %}
 {% endmacro %}
 
+
+
 {% macro html_feedlinks() %}
     {% if rss_link %}
         {{ rss_link }}
@@ -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 %}

nikola/data/themes/bootblog4/assets/css/bootblog.css

@@ -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 {

nikola/data/themes/bootblog4/templates/base.tmpl

@@ -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 -->

nikola/data/themes/bootblog4/templates/base_helper.tmpl

@@ -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">
@@ -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>
@@ -141,6 +144,8 @@ lang="${lang}">
     %endfor
 </%def>
 
+
+
 <%def name="html_feedlinks()">
     %if rss_link:
         ${rss_link}
@@ -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>

nikola/data/themes/bootstrap4-jinja/templates/base.tmpl

@@ -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>

nikola/data/themes/bootstrap4-jinja/templates/base_helper.tmpl

@@ -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">

nikola/data/themes/bootstrap4/templates/base.tmpl

@@ -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>

nikola/data/themes/bootstrap4/templates/base_helper.tmpl

@@ -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">