Diese Seite behandelt „erweiterte” Anpassungen für den PDF-Export. Sie bauen auf den regulären Anpassungen auf, die unter Passe das Layout für PDF-Exporte in Confluence Cloud an beschrieben werden.

Kopf- und Fußzeilen

Kopf- und Fußzeilen zu Exporten einzelner Seiten hinzufügen

Beim Export einzelner Seiten kannst du HTML-Kopf- und Fußzeilen nicht direkt über die PDF-Export-Seite hinzufügen. Du kannst aber CSS-Regeln im Feld für das PDF-Stylesheet verwenden (zu finden unter Bereichseinstellungen > Design > PDF-Exportformat), um für den Export einer einzelnen Seite Kopf- und/oder Fußzeilen zu erzeugen.

Definiere für eigene Kopfzeilen eine der folgenden Regeln innerhalb deiner @page-Regel: @top-left, @top-center und @top-right. Mit diesen Regeln legst du den content für die linke Seite, die Mitte bzw. die rechte Seite des Kopfzeilenbereichs deiner Seite fest.

Definiere für eigene Fußzeilen die Regeln @bottom-left, @bottom-center und @bottom-right innerhalb deiner @page-Regel.

Die folgenden Regeln fügen zum Beispiel einen Dokumenttitel in der Mitte der Kopfzeile und eine Seitenzahl in der Mitte der Fußzeile hinzu:

CSS – PDF-Stylesheet

1
@page
2
{
3
    @top-center
4
    {
5
        content: "Document Title Goes Here"; /* This is the content that will appear in the header */
6
        font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
7
        font-size: 8pt;
8
    }
9
    @bottom-center
10
    {
11
        content: "Page " counter(page); /* This is the content that will appear in the footer */
12
        font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
13
        font-size: 8pt;
14
    }
15
    /* Any other page-specific rules */
16
}

Hinweise:

• Die Eigenschaften font-family und font-size stellen sicher, dass der Text der Kopf- und Fußzeile im selben Standard-Schriftstil dargestellt wird wie der Fließtext, basierend auf den Standard-CSS-Regeln.
• Mit dieser Methode ist es nicht möglich, Bilder (die als Anhänge in deiner Confluence-Instanz gespeichert sind) in die Kopf- und Fußzeilen von Exporten einzelner Seiten einzufügen.

Bilder zu Kopf- und Fußzeilen hinzufügen

Um ein Bild in die Kopf- oder Fußzeile einzufügen, füge HTML in die Felder „Kopfzeile” oder „Fußzeile” des PDF-Layouts ein.

Das folgende Beispiel verwendet ein HTML-img-Element mit dem Attribut src, um links in der Kopfzeile ein Bild hinzuzufügen. Das Attribut src verweist auf ein Bild, das an eine Confluence-Seite angehängt ist. Das Bild-Element wird meist innerhalb eines div-Elements platziert.

HTML – PDF-Layout: Kopfzeile

1
<div style="width: 100%; text-align: right; margin-left: 0.5in; font-size: 10px; height: 20px; overflow: hidden;">
2
    <img src="https://confluence.atlassian.com/download/attachments/12346/header-image.png" style="height: 50px;" />
3
</div>

Im Beispiel oben enthält die Kopfzeile ein Bild namens „header-image.png”. Die Zahl „12346” im Attribut src ist die ID der Seite, an die das Bild angehängt ist.

Gehe wie folgt vor, um ein Bild auf deiner Seite oder deinem Live-Dokument einzufügen:

1. Hänge das Bild an eine Confluence-Seite oder ein Live-Dokument an.
2. Öffne die Liste der Anhänge auf dieser Seite bzw. diesem Dokument, klicke dann mit der rechten Maustaste auf das Bild und kopiere dessen Adresse.
3. Füge den Link in das entsprechende src=""-Attribut in deinem PDF-Stylesheet ein, wie oben gezeigt.
4. Bearbeite die Bild-URL so, dass sie relativ ist, indem du den ersten Teil der URL vor /download/... entfernst.

Hinweise:

• Dieses Beispiel verwendet die Inline-CSS-Eigenschaft margin-top im Attribut style, um das Bild um 10 mm vom oberen Seitenrand abzurücken. Das ist praktisch, wenn dein Kopfzeilenbild groß genug ist, um den oberen Seitenrand zu berühren oder darüber hinauszuragen.
• Für Fußzeilen kannst du ebenso die Eigenschaft margin-bottom:XXmm verwenden, um ein Bild um „XX” mm vom unteren Seitenrand abzurücken.
• Sehr große Bilder können in den Textbereich einer Seite übergreifen oder die Position von Text oder anderen Elementen in einer Kopf- oder Fußzeile verändern. In solchen Fällen empfiehlt es sich, die Bildgröße zu verringern und das Bild erneut an deine Confluence-Seite anzuhängen. Wenn du die Bildgröße lieber beibehalten und den Inhalt stattdessen weiter nach unten verschieben möchtest, kannst du das über die Eigenschaft margin-top in der @page-CSS-Regel konfigurieren.
• Standardmäßig wird ein Kopf- oder Fußzeilenbild links auf der Seite ausgerichtet. Du kannst dieses Bild aber mittig oder rechts ausrichten, indem du die Eigenschaft text-align:center oder text-align:right zu deinem Attribut style hinzufügst. Um das Kopfzeilenbild zum Beispiel rechts auszurichten, würde dein Attribut style in etwa so aussehen: style="margin-top:10mm; text-align:right".

Einen dynamischen Titel zur Titelseite hinzufügen

Wenn du eine beliebige Auswahl an Seiten oder Dokumenten aus Confluence exportierst, möchtest du der Titelseite (bzw. dem Deckblatt) vielleicht automatisch einen passenden Titel hinzufügen. Das lässt sich (auf etwas ungewöhnliche Weise) erreichen, indem du den obersten Eintrag aus dem Standard-Inhaltsverzeichnis als Titel verwendest. Diese Methode setzt voraus, dass die exportierten Seiten als Unterseiten der obersten Seite strukturiert sind. Mit anderen Worten: Die zu exportierenden Seiten sollten aus einer Seite (auf der obersten Ebene) und all ihren Unterseiten bestehen. Das Ergebnis ist, dass sich der Titel auf dem Deckblatt je nach der für den Export verwendeten obersten Seite ändert.

Das folgende CSS verschiebt und formatiert den obersten Eintrag des Inhaltsverzeichnisses zur Verwendung als Titel auf dem Deckblatt und deaktiviert die bei diesem Eintrag im Inhaltsverzeichnis normalerweise angezeigte Führungslinie und Seitenzahl.

CSS – PDF-Stylesheet

1
.fsTitlePage {
2
    position: relative;
3
    left: 0px;
4
}
5
/* Turn off the default section numbering for this TOC item */
6
.toclvl0:before {
7
    content: "";
8
    counter-reset: chapter 0; /* Ensure there's a parent element with a counter for this to work */
9
}
10
/* Hide the default page numbering for this TOC item */
11
.toclvl0 .tocnum {
12
    display: none;
13
}
14
/* Move and style this TOC item */
15
.toclvl0 {
16
    position: absolute;
17
    top: 250px;
18
    font-size: 42px;
19
    font-weight: bold;
20
    margin: 72px 0 4px 0;
21
    text-align: center;
22
}