Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to customize the title page with template-require?

See original GitHub issue

I would like to customize the title page using a template.js file, to add complicated corporate document tables containing a lot of metadata. Also the following pages footers would endure the same treatment (embedding a small table in the footer).

My understanding is that to do this, you have to override the document node in templates.js module.exports, which contains a lot of pre-defined stuff going on in there. I saw this in the source code :

const titlePage = (node) => {
  if (node.getDocumentTitle()) {
    const doc = node.getDocument()
    if (hasTitlePage(doc)) {
      return `<div id="cover" class="title-page">
  <h1>${node.getDocumentTitle()}</h1>
  <h2>${node.getDocument().getAuthor()}</h2>
</div>`
    }
    return `<div class="title-document">
  <h1>${node.getDocumentTitle()}</h1>
</div>`
  }
  return ''
}

Which is then used in the document node:

<body class="article">
${titlePage(node)}
${contentHTML}
${footnotes(node)}

Alongside other things which I would rather not want to touch to, especially if things evolve in this lib’s code in the future, I’d just want to edit that specific part of the document generation.

I tried copying all the contents of the /lib folder to my document directory and then edit from there, but I’m having some trouble with npm and the resolving of all the dependencies. Forking the project does work, except I’m limited to using the alpha3 (with all my f***ing corporate PC problems) and I think it’s not very practical and surely I’m missing something. My understanding of node, npm and other related things is shallow as I don’t work on these technologies.

So my questions are:

Can I edit/override just this const method somehow and how would you proceed to do that?
And how do I customize the footer’s content too by the way?

Issue Analytics

State:
Created 4 years ago
Comments:15 (6 by maintainers)

Top GitHub Comments

1reaction

ThomasPrioulcommented, Nov 20, 2019

so, you need to have a footer that include quite some informations.

I’m actually trying to do a POC at work, that we can get rid of MS Word and all the problems that arise with it, and to promote Asciidoc instead. So I’m trying to mimic what our documents look like at work. I’ve started with one of the most used templates in A4 format: Title page: title_page

Following pages footer: other_page

You can see how much data this table is supposed to contain, and it’s all document metadata that would be a breeze to use with Asciidoctor, I could pass them using attributes in the doc or directly from the CLI…

So far, these tables coming straight from hell are made with MS Word. I let you imagine all the problems related to people using different versions and how MS Word manages its stylesheets inside (a deep auto-generated mess).

So that’s why I want to use tables, or grids or whatever most suitable in modern web development! I am not a web developer so I’m still struggling with some of the basics it seems.

What you need to know is that paged.js polyfill your css properites, or, translate it, so the browser can work with that. We use grid to define the page and flex to define what’s inside the margin-boxes. We never add a table in there ever, so this is a new interresting use case. So, in that case, we need to see how to handle that in paged.js

Alright. Also I’m wondering how the margins are actually calculated with all of this. If I put a high footer content, I expect it to be placed in between the body of the document and the bottom margin. It seems here that with the default template the page numbers are inserted inside the “margin” boxes. I don’t know if I’m making any sense. Here is a photo of the problem I’m trying to describe:

It could work, as long as the size of the bottom boxes resize accordingly on each page and is not of a predefined fixed size. I want the footer to always show correctly and not to bleed out, I want the body to move over to the next page sooner if that’s necessary. But that seems not to really be the case right now. Maybe I’m just not using the right tool for the job. It seems the footnotes actually use the page area and not the margin boxes.

@ThomasPrioul Would you mind sharing a small bit of that HTML so we can think how to get it right? I’ll open an issue on https://gitlab.pagedmedia.org/tools/pagedjs right after

Here are the relevants bits from the previous comments:

<table class="bottom-title-block">
  <col width="8*">
  <col width="2*">
  <tr>
    <td>{description}</td>
    <td>Top R</td>
  </tr>
  <tr>
    <td>Bottom left</td>
    <td>
      <a class="page-count">/</a>
    </td>
  </tr>
</table>

@page {
  margin: 1.5cm;
  size: A4;
  @bottom-center {
    content: element(bottom-title-block); 
  }
}

.page-count::before {
  content: counter(page);
}

.page-count::after {
  content: counter(pages);
}

table.bottom-title-block {
  table-layout: auto;
  display: table; /* This doesn't work because of the paged js styles */
  width: 100%;
}

.bottom-title-block { 
   position: running(bottom-title-block); 
}

/* This should not have to be used */
.pagedjs_page .pagedjs_margin-bottom-center {
}
.pagedjs_page .pagedjs_margin-bottom-center>.pagedjs_margin-content>* {
 display: table !important; /* Used hack to make it work */
}

0reactions

Mogzttercommented, Aug 11, 2022

Please join https://chat.asciidoctor.org or post your question using GitHub Discussion.

Issue tracker is reserved for bug.

Thanks!

Top Results From Across the Web

How to customize the title page with template-require? #128

I would like to customize the title page using a template.js file, to add complicated corporate document tables containing a lot of metadata ......

titles - How to customize my titlepage? - LaTeX Stack Exchange

I am looking for a very complex titlepage and need help customizing my title page. It should match the classicthesis doctoral thesis template....

Chapter 11. Title page customization - Sagehill Enterprises

Assign a custom template for processing a titlepage element. The steps for customizing titlepages are listed here, and are further described in the...

Angular 2 - How Can I Change The Title Of My Page?

This is a Service that allows us to change the title of the page the Angular way, why cant we just set the...

Templating: Custom Elements Basics | Aurelia

An overview of the Aurelia templating engine's custom element functionality basics. Custom Elements are used to add custom components to Aurelia ...