Add back Book module templates/enhancements

This really isn't a priority at the moment. In fact, I'm tempted to not even put much effort in styling this as no one really uses the book module that much since it's just as easy to do a custom node type and a custom view.

edit: I'd be willing to entertain patches if someone submits them, but I'm just saying that I personally am not going to spend time on coding it.

I do not know how to make a proper patch to bootstrap, but i use this from bartik in my custom theme. I hope someone use this as base for a proper patch.

templates/book-navigation.html.twig

{#
/**
 * @file
 * Default theme implementation to navigate books.
 *
 * Presented under nodes that are a part of book outlines.
 *
 * Available variables:
 * - tree: The immediate children of the current node rendered as an unordered
 *   list.
 * - current_depth: Depth of the current node within the book outline. Provided
 *   for context.
 * - prev_url: URL to the previous node.
 * - prev_title: Title of the previous node.
 * - parent_url: URL to the parent node.
 * - parent_title: Title of the parent node. Not printed by default. Provided
 *   as an option.
 * - next_url: URL to the next node.
 * - next_title: Title of the next node.
 * - has_links: Flags TRUE whenever the previous, parent or next data has a
 *   value.
 * - book_id: The book ID of the current outline being viewed. Same as the node
 *   ID containing the entire outline. Provided for context.
 * - book_url: The book/node URL of the current outline being viewed. Provided
 *   as an option. Not used by default.
 * - book_title: The book/node title of the current outline being viewed.
 *
 * @see template_preprocess_book_navigation()
 *
 * @ingroup themeable
 */
#}
{% if tree or has_links %}
  <nav role="navigation" aria-labelledby="book-label-{{ book_id }}">
    {{ tree }}
    {% if has_links %}
      <h2 class="visually-hidden">{{ 'Book traversal links for'|t }} {{ book_title }}</h2>
      <ul class="book-pager">
      {% if prev_url %}
        <li class="book-pager__item book-pager__item--previous">
          <a href="{{ prev_url }}" rel="prev" title="{{ 'Go to previous page'|t }}"><b>{{ '‹'|t }}</b> {{ prev_title }}</a>
        </li>
      {% endif %}
      {% if parent_url %}
        <li class="book-pager__item book-pager__item--center">
          <a href="{{ parent_url }}" title="{{ 'Go to parent page'|t }}">{{ 'Up'|t }}</a>
        </li>
      {% endif %}
      {% if next_url %}
        <li class="book-pager__item book-pager__item--next">
          <a href="{{ next_url }}" rel="next" title="{{ 'Go to next page'|t }}">{{ next_title }} <b>{{ '›'|t }}</b></a>
        </li>
      {% endif %}
    </ul>
    {% endif %}
  </nav>
{% endif %}

And add this to style.css:

.book-pager__item--previous {
  text-align: left;
  width: 45%;
}

.book-pager__item--center {
  text-align: center;
  width: 8%;
}

.book-pager__item--next {
  float: right;
  text-align: right;
  width: 45%;
}

.book-pager__item {
  display: inline-block;
  list-style-type: none;
  vertical-align: top;
}

Just stumbled across this and thought I'd share my solution although the issue is a little older for anyone who's still interested:
Actually you just need to add the class "pager" to <ul> and classes "previous" and "next" to the first and last<li> element. Bootstrap 3 has styles for pager list items included, read more on w3schools. The <li> element for the 'Up' link will be centered automatically.
So below your comments in book-navigation.html.twig:

{% if tree or has_links %}
  <nav role="navigation" aria-labelledby="book-label-{{ book_id }}">
    {{ tree }}
    {% if has_links %}
          <h2 class="visually-hidden">{{ 'Book traversal links for'|t }} {{ book_title }}</h2>
          <ul class="pager">
              {% if prev_url %}
                <li class="previous">
                    <a class="btn btn-default" href="{{ prev_url }}" rel="prev" title="{{ 'Go to previous page'|t }}"><b>{{ '‹'|t }}</b> {{ prev_title }}</a>
                </li>
              {% endif %}
              {% if parent_url %}
                <li>
                      <a class="btn btn-default" href="{{ parent_url }}" title="{{ 'Go to parent page'|t }}">{{ 'Up'|t }}</a>
                </li>
              {% endif %}
              {% if next_url %}
                <li class="next">
                      <a class="btn btn-default" href="{{ next_url }}" rel="next" title="{{ 'Go to next page'|t }}">{{ next_title }} <b>{{ '›'|t }}</b></a>
                 </li>
              {% endif %}
            </ul>
    {% endif %}
  </nav>
{% endif %}

But if you want you cann add a class ".book-nav" to your style.css:

.book-nav {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px 0 10px 0;
}

This just adds a border to the top and bottom plus a little padding to help distinguishing between navigation and content.

My sentiments from #2 are still present.

The primary reason: the book module (a very old core module) is still using its own custom theme hooks instead of using other existing, more established, and proper theme hooks with __book_* suggestions (e.g. #2461691: "book_tree" template suggestion should be "menu__book__").

Once it does, then this stuff will be themed "automatically" because this project covers the core components.

Supporting antiquated core modules like this aren't really the primary objective of this project.

If you're site really "needs" this, then it's a simple addition to a sub-theme as pointed out above.

Really? So, there are some "antiquated core" modules in Drupal 8? Can't imagine why they would put "antiquated" code in what is billed as "biggest update in Drupal's history". Since Book is a core module, I'm wondering where the stat came from that suppose to show that "no one really uses the book module". I see lots of sites using the Book module. Bootstrap is such a wonderful theme, I hope you will reconsider making the Bootstrap theme play well with w/D8 core modules, such as Book.

I am not sure what is causing this (theme or module) but this is looking horrible and I couldn't hide from anywhere.

In H2 format there is a "traversal links for" book message displayed. The book navigation links aren't even properly ordered.

https://imgur.com/a/yZ8Fr

The book helper plugin should have been able to remove it but I guess that is obselete for 8.x

@leventdal , create a book-navigation.html.twig template file in your subtheme's template folder and copy and paste the code from #4 into it. This should take care of the "traversal links for" book message displayed. The code adds a class named "visually-hidden" to the h2 tag which should hide the "traversal links ..." being displayed.

@rwilson0429 thanks for the info. I switched to another theme based on bootstrap and created a subtheme off of it. That solved the problem probably it contains this template.

This worked for me. Hope it helps someone.

In a custom module, declare two templates, one for the book page nav, and one for the list of child nodes above it.

/**
 * Implements hook_theme().
 */
function HOOK_theme($existing, $type, $theme, $path) {
  return [
    'book_navigation' => [
      'template' => 'book-navigation',
    ],
    'book_tree' => [
      'template' => 'book-tree',
    ],
  ];
}

Create two files in the module's template directory. I used the book nav template from core, with classes added as @cof6656 suggested. Thanks for that.

{% if tree or has_links %}
  <nav role="navigation" aria-labelledby="book-label-{{ book_id }}">
    {{ tree }}
    {% if has_links %}
      <h2 class="visually-hidden">{{ 'Book traversal links for'|t }} {{ book_title }}</h2>
      <ul class="pager">
      {% if prev_url %}
        <li class="previous">
          <a href="{{ prev_url }}" rel="prev" title="{{ 'Go to previous page'|t }}"><b>{{ '‹'|t }}</b> {{ prev_title }}</a>
        </li>
      {% endif %}
      {% if parent_url %}
        <li>
          <a href="{{ parent_url }}" title="{{ 'Go to parent page'|t }}">{{ 'Up'|t }}</a>
        </li>
      {% endif %}
      {% if next_url %}
        <li class="next">
          <a href="{{ next_url }}" rel="next" title="{{ 'Go to next page'|t }}">{{ next_title }} <b>{{ '›'|t }}</b></a>
        </li>
      {% endif %}
    </ul>
    {% endif %}
  </nav>
{% endif %}

Here's a book tree template, for the child node list.

{% if items %}
  <div class="skilling-book-children-container list-group">
    <h4>{{ 'Inner lessons'|t }}</h4>
    {% for item in items %}
      <a href="{{ item.url }}" class="list-group-item">{{ item.title }}</a>
    {% endfor %}
  </div>
{% endif %}

Come to think of it, this might not work for the book nav block, if it's used for that. Not sure. The template only renders one level of links. I'm using Fancytree for the book nav block.

For full control, copy book-tree.html.twig from the book module's template directory (in core/modules/book/templates) and edit that.

Hello,

Thanks for sharing you code. Here is mine.

{% if tree or has_links %}
  <nav role="navigation" aria-labelledby="book-label-{{ book_id }}">
    {{ tree }}
    {% if has_links %}
      <h4 id="book-label-{{ book_id }}" class="visually-hidden">{{ 'Book traversal links for'|t }} {{ book_title }}</h4>
      <ul class="pager">
        {% if prev_url %}
          <li class="previous">
            <a href="{{ prev_url }}" rel="prev" title="{{ 'Go to previous page'|t }}"><b>{{ '‹'|t }}</b> {{ prev_title }}</a>
          </li>
        {% endif %}
        {% if parent_url %}
          <li>
            <a href="{{ parent_url }}" title="{{ 'Go to parent page'|t }}">{{ 'Up'|t }}</a>
          </li>
        {% endif %}
        {% if next_url %}
          <li class="next">
            <a href="{{ next_url }}" rel="next" title="{{ 'Go to next page'|t }}">{{ next_title }} <b>{{ '›'|t }}</b></a>
          </li>
        {% endif %}
      </ul>
    {% endif %}
  </nav>
{% endif %}

No additional CSS or customization of the book-tree. I have changed the h2 into an h4 as the Bootstrap base theme pager. And added an ID to the h4 to have the "aria-labelledby" on nav working.

@Grimreaper, thanks for sharing your template. @MarkCarver: the book module navigation up to 9 levels deep, something difficult (impossible?) to achieve with views. Perhaps reconsider support for this core module?

See #5

@Grimreaper, thanks, it works like a charm

@ Grimreaper

Thanks for the code, it works perfectly.