Remark: support footer in slides

[larrycai]

so far it is the only page number in the right bottom as the footer for each slide.

I would like to add

• title (slides title)
• version (what release it is)

[utdrmac]

You can put whatever you want in the footer like so:

layout: true
<div class="my-footer"><img src="../../share/images/logo_tiny.png" style="height: 30px;"/>&copy; 2011 - 2017 MyCo, Inc.</div>

But I think you want more programmatical things.

[larrycai]

no, I think it is good enough for, can you show me the complete sample for this? (i just put your line in my slides, it doesn't work)

[utdrmac]

<textarea id="source">

layout: true
<div class="my-footer"><img src="../../share/images/logo_tiny.png" style="height: 30px;"/>&copy; 2011 - 2017 MyCo, Inc.</div>

---
<slide 1>

---
<slide 2>

[szpak]

@larrycai Be aware that some kind of footer may result in lowered the H1 title element. See #402.

[larrycai]

Your sample works, but I still have no clue how to mix this into my slides, see http://www.larrycaiyu.com/codingwithme-k8s/slides.html (real file is slides.md)

I want to have footer in all slides except the first and last one.

I already had layout: true and layout: false

I tried

• add in first page, but it will reset after layout: false, and adding first page is not my intension.
• add extra layout: slide, but it doesn't work

[utdrmac]

I use a special class to hide the footer on pages I don't want it

.hidefooter div.remark-slide-number, .hidefooter div.percona-footer {
    display: none;
}

class: hidefooter

[larrycai]

@szpak Yes, I get same faults as I put the following segment

---
layout: true
<div class="footer-version">v1.0-20171030</div>

In the html, it will not get the correct <h1>

<div class="remark-slide-content hljs-monokai">
     <div class="footer-version">v1.0-20171030</div>
     # Environment

@utdrmac Yes, I got it to disable the page number in first and last page

will figure out how to place the footer in main pages if #402 bug exists

[larrycai]

Ok, hacked work around solution, see https://github.com/larrycai/codingwithme-k8s/commit/940341a561f37463aabfa61778f0e25302eb95eb

• I skip the title in footer since it looks not so nice
• turn version into version image (version.svg)

Use image in footer

  .footer-version {
    background-image: url(image/version.svg);
    background-size: 10%;
    background-repeat: no-repeat;
    background-position: 5% 98%;
  }

And use class foot-version in slide

---
layout: true
class: footer-version

Then it looks as I expected.

Using svg format, so I can manually change the version.svg in file directly, see

+         style="font-style:normal;font-variant:normal;...;">v1.0-20171030</tspan></text>

Again, thank a lot for @utdrmac @szpak