Create templates for the pdf file
This commit is contained in:
parent
03314d4c1c
commit
666a8f643e
|
|
@ -8,118 +8,10 @@
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<section>
|
|
||||||
<h1>{{ title }}</h1>
|
|
||||||
<ul class="list-inline justify-center">
|
|
||||||
<li><a href="https://google.com">Lorem ipsum dolor sit</a></li>
|
|
||||||
<li>Lorem ipsum</li>
|
|
||||||
<li><a href="https://google.com">Lorem ipsum dolor sit</a></li>
|
|
||||||
<li>Lorem ipsum</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{{ content }}
|
{{ content }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
<section>
|
|
||||||
<div class="title">
|
|
||||||
<h2>Lorem</h2>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum.</p></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<div class="title">
|
|
||||||
<h2>Lorem</h2>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
<div class="subtitle">
|
|
||||||
<h3>Lorem ipsum</h3>
|
|
||||||
<p class="underline">
|
|
||||||
<strong>Lorem ipsum</strong>
|
|
||||||
</p>
|
|
||||||
<div class="timeSection">
|
|
||||||
<span>Lorem ipsum</span>
|
|
||||||
<strong>01/1999 - 02/1999</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
|
|
||||||
</ul>
|
|
||||||
<div class="subtitle">
|
|
||||||
<h3>Lorem ipsum</h3>
|
|
||||||
<p class="underline">
|
|
||||||
<strong>Lorem ipsum</strong>
|
|
||||||
</p>
|
|
||||||
<div class="timeSection">
|
|
||||||
<span>Lorem ipsum</span>
|
|
||||||
<strong>01/1999 - 02/1999</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum.</p></li>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
|
|
||||||
</ul>
|
|
||||||
<div class="subtitle">
|
|
||||||
<h3>Lorem ipsum</h3>
|
|
||||||
<p class="underline">
|
|
||||||
<strong>Lorem ipsum</strong>
|
|
||||||
</p>
|
|
||||||
<div class="timeSection">
|
|
||||||
<span>Lorem ipsum</span>
|
|
||||||
<strong>01/1999 - 02/1999</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p></li>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum.</p></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<div class="title">
|
|
||||||
<h2>Lorem</h2>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
<div class="subtitle">
|
|
||||||
<h3>Lorem ipsum 2</h3>
|
|
||||||
<p class="underline">
|
|
||||||
<strong>Lorem ipsum</strong>
|
|
||||||
</p>
|
|
||||||
<div class="timeSection">
|
|
||||||
<span>Lorem ipsum</span>
|
|
||||||
<strong>01/1999 - 02/1999</strong>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section>
|
|
||||||
<div class="title">
|
|
||||||
<h2>Lorem</h2>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
<ul>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p></li>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
|
|
||||||
<li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum.</p></li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
:root {
|
||||||
--accent-color: blue;
|
--accent-color: blue;
|
||||||
|
|
|
||||||
33
src/_includes/partials/components/pdf/section.liquid
Normal file
33
src/_includes/partials/components/pdf/section.liquid
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
<section>
|
||||||
|
{% if section.data.showTitle != false %}
|
||||||
|
<div class="title">
|
||||||
|
<h2>
|
||||||
|
{% if section.data.displayedTitle %}
|
||||||
|
{{ section.data.displayedTitle }}
|
||||||
|
{% else %}
|
||||||
|
{{ section.data.title }}
|
||||||
|
{% endif %}
|
||||||
|
</h2>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% for item in items %}
|
||||||
|
<div class="subtitle">
|
||||||
|
<h3>{{ item.data.title }}</h3>
|
||||||
|
<p class="underline">
|
||||||
|
<strong>{{ item.data.role }}</strong>
|
||||||
|
</p>
|
||||||
|
{% if item.data.dates %}
|
||||||
|
<div class="timeSection">
|
||||||
|
<span>{{ item.data.location }}</span>
|
||||||
|
<strong>{{ item.data.dates.start }} - {{ item.data.dates.end }}</strong>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>{{ item.data.description }}</li>
|
||||||
|
</ul>
|
||||||
|
{% endfor %}
|
||||||
|
</section>
|
||||||
|
|
@ -1,14 +1,27 @@
|
||||||
---
|
---
|
||||||
layout: pdf
|
layout: pdf
|
||||||
title: Test PDF
|
|
||||||
permalink: "pdf.pdf"
|
permalink: "pdf.pdf"
|
||||||
|
eleventyComputed:
|
||||||
|
title: "{{author.firstName}} {{author.name}}, {{author.occupation}}"
|
||||||
|
links:
|
||||||
|
- value: "thomas@amstutz.it"
|
||||||
|
- type: "link"
|
||||||
|
value: "github.com/TheThomaas"
|
||||||
|
- value: "123 123 12 12"
|
||||||
---
|
---
|
||||||
|
|
||||||
<h1>Hello</h1>
|
<section>
|
||||||
|
<h1>{{ title }}</h1>
|
||||||
<p>
|
<ul class="list-inline justify-center">
|
||||||
<img src="https://place-hold.it/400x400">
|
{% for item in links %}
|
||||||
</p>
|
{% if item.type == "link" %}
|
||||||
|
<li><a href="{{item.value}}">{{item.value}}</a></li>
|
||||||
|
{% else %}
|
||||||
|
<li>{{item.value}}</li>
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
The time is {{ "now" | date: "%Y-%m-%d %H:%M" }}
|
The time is {{ "now" | date: "%Y-%m-%d %H:%M" }}
|
||||||
|
|
@ -17,10 +30,7 @@ The time is {{ "now" | date: "%Y-%m-%d %H:%M" }}
|
||||||
|
|
||||||
{% for section in collections.sections %}
|
{% for section in collections.sections %}
|
||||||
{% if section.data.excludeFromPdf != true %}
|
{% if section.data.excludeFromPdf != true %}
|
||||||
{% if section.data.template == 'hero' %}
|
{% assign items = collections[section.data.collection] %}
|
||||||
{% include 'hero' %}
|
{% include 'partials/components/pdf/section' %}
|
||||||
{% else %}
|
|
||||||
{% include 'page' %}
|
|
||||||
{% endif %}
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
Loading…
Reference in a new issue