# Header, footer và số trang

Thêm nội dung đầu và cuối trang, đặt lề riêng, ẩn trên trang bìa và chèn số trang tự động.

Tên tài liệu ở đầu trang, thông tin liên hệ ở cuối trang hay dòng “1 / 3” trên một bản báo cáo đều có thể đặt trong **Header** và **Footer**. Bạn chỉ cần soạn một lần; Tembuilder sẽ lặp lại nội dung đó trên các tờ PDF có bật phần tương ứng.

Header và Footer nằm dưới **Global** trong Structure. Nội dung được dùng chung, còn từng page có thể chọn hiển thị hoặc ẩn, chẳng hạn bỏ cả hai ở trang bìa và giữ lại ở phần nội dung.

## 1. Thêm Header hoặc Footer

Trong **Structure**, mở **Global** rồi chọn **Add global element → Header** hoặc **Footer**. Nếu phần đó đã có sẵn, chọn trực tiếp trong danh sách để chỉnh sửa.

Nút bật/tắt bên cạnh mỗi mục điều khiển việc sử dụng Header hoặc Footer ở cấp Global. Tắt mục này sẽ ẩn phần đó trên toàn tài liệu nhưng vẫn giữ nội dung đã soạn.

Thao tác thêm mới nằm ở variant gốc. Nếu đang chọn một variant khác và không thấy Add global element, hãy chuyển về bản gốc để thêm.

<figure class="doc-sim hf-illustration" aria-label="Structure → Global → Add global element → Header hoặc Footer">
<div class="sim-stage"><div class="hf-add-scene"><div class="sim-panel hf-tree"><div class="sim-panel-title">STRUCTURE</div><div class="sim-tree-row">⌄ Global <small>1/2</small></div><div class="hf-tree-item">▤ Footer <span class="hf-toggle" aria-label="On"></span></div><div class="hf-add-row"><span class="sim-control sim-focus">＋ Add global element</span><div class="hf-menu">▤ Header</div></div></div><div class="hf-repeat"><small>Header / Footer</small><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>INVOICE</small></div><div class="hf-paper-body"><strong>INVOICE</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div><div class="hf-paper-footer"><span>tembuilder.com</span><b>1 / 3</b></div></div></div></div></div>
<figcaption>Structure → Global → Add global element → Header hoặc Footer</figcaption>
</figure>

## 2. Chỉnh nội dung lặp lại

Chọn **Header** hoặc **Footer** để mở các tab **HTML**, **CSS**, **Props** và **Config**.

Với mẫu có sẵn, bạn có thể bắt đầu từ **Props** để đổi tên công ty, website hoặc nhãn đang được dùng. Ví dụ, mẫu hóa đơn có prop `footerWebsite`; sửa giá trị này để đổi địa chỉ website ở cuối trang.

Dùng **HTML** để thay nội dung hoặc cách sắp xếp các thành phần, và **CSS** để chỉnh cách trình bày. Trong HTML của Header/Footer, `{{ props.tenProp }}` đọc prop của chính phần đang chọn; `{{ global.props.tenProp }}` đọc prop ở Global.

<figure class="doc-sim hf-illustration" aria-label="Global → Footer → Props → footerWebsite">
<div class="sim-stage"><div class="hf-path">Global <span>→</span> Footer <span>→</span> Props</div><div class="sim-panel"><div class="sim-tabs"><span>HTML</span><span>CSS</span><span class="sim-active">Props</span><span>Config</span></div><div class="hf-prop"><small class="sim-label">FOOTER</small><div class="sim-prop-card"><div class="sim-prop-name"><b>footerWebsite</b><small>Text</small></div><div class="sim-prop-value"><small class="sim-label">VALUE</small><span class="sim-input sim-focus">tembuilder.com</span><span class="sim-embed">{{ props.footerWebsite }}</span></div></div></div><div class="hf-footer-preview"><b>Tembuilder</b><span>tembuilder.com</span><small>1 / 3</small></div></div></div>
<figcaption>Global → Footer → Props → footerWebsite</figcaption>
</figure>

## 3. Đặt lề cho Header và Footer

Mở **Header → Config → Margin** hoặc **Footer → Config → Margin**. Bật lề rồi nhập bốn cạnh theo đơn vị **mm**. Phần **Background** bên dưới dùng để đặt nền cho Header hoặc Footer đó.

Lề của Header/Footer độc lập với **Content margin**. Muốn logo ở đầu trang thẳng hàng với bảng bên dưới, hãy đặt Left/Right của Header bằng Left/Right của vùng nội dung.

Chiều cao Header/Footer được tính theo nội dung, bao gồm lề riêng của nó. **Content margin → Top/Bottom** tạo khoảng cách giữa vùng này và nội dung chính. Vì vậy, muốn nới khoảng cách sau Header, chỉnh Content margin Top; muốn logo thụt vào trong Header, chỉnh lề hoặc CSS của Header.

<figure class="doc-sim hf-illustration" aria-label="Lề Header/Footer và Content margin được thiết lập riêng">
<div class="sim-stage"><div class="hf-path">Global <span>→</span> Header <span>→</span> Config</div><div class="hf-margin-scene"><div class="sim-panel"><div class="sim-tabs"><span>Props</span><span class="sim-active">Config</span></div><div class="hf-margin-card"><div class="hf-setting"><strong>Margin · mm</strong><span class="hf-toggle" aria-label="On"></span></div><div class="hf-setting"><span>Top</span><span class="sim-input">4</span></div><div class="hf-setting"><span>Left</span><span class="sim-input sim-focus">14</span></div><div class="hf-setting"><span>Right</span><span class="sim-input">14</span></div><div class="hf-setting"><span>Bottom</span><span class="sim-input">4</span></div></div></div><div class="hf-band-page"><div class="hf-band-header">Header<small>Margin</small></div><div class="hf-band-gap">Content margin · Top</div><div class="hf-band-content">Nội dung các section<i></i><i></i><i></i></div><div class="hf-band-footer">Footer</div></div></div></div>
<figcaption>Lề Header/Footer và Content margin được thiết lập riêng</figcaption>
</figure>

## 4. Ẩn trên trang bìa hoặc một page cụ thể

Chọn page trong **Structure → Config → Layout**, rồi tắt **Header** hoặc **Footer**. Ví dụ, page **Cover** có thể tắt cả hai trong khi page **Invoice** vẫn hiển thị.

Nội dung chung ở Global được giữ nguyên. Khi cần hiển thị lại trên page này, bật lại mục tương ứng trong Layout.

Nếu thấy trạng thái **off globally**, hãy bật Header/Footer ở Global trước; tùy chọn theo page không thể bật một phần đang bị tắt ở cấp Global.

Để một tờ bìa có cấu hình khác phần nội dung, hãy đặt bìa thành một page riêng trong Structure.

<figure class="doc-sim hf-illustration" aria-label="Tắt Header/Footer cho page bìa, giữ nguyên ở phần nội dung">
<div class="sim-stage"><div class="hf-path">Structure <span>→</span> Cover <span>→</span> Config</div><div class="hf-page-scene"><div class="sim-panel"><div class="sim-tabs"><span class="sim-active">Config</span></div><div class="hf-page-card"><strong>Layout</strong><div class="hf-setting"><span>Header</span><span class="hf-toggle hf-off sim-focus" aria-label="Off"></span></div><div class="hf-setting"><span>Footer</span><span class="hf-toggle hf-off" aria-label="Off"></span></div></div></div><div class="hf-page-pair"><div><small>Cover · Off</small><div class="hf-paper"><div class="hf-paper-body"><strong>INVOICE</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div></div></div><div><small>Invoice · On</small><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>INVOICE</small></div><div class="hf-paper-body"><strong>INVOICE</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div><div class="hf-paper-footer"><span>tembuilder.com</span><b>2 / 3</b></div></div></div></div></div></div>
<figcaption>Tắt Header/Footer cho page bìa, giữ nguyên ở phần nội dung</figcaption>
</figure>

## 5. Chèn số trang tự động

Trong HTML của Footer hoặc Header, chèn:

```handlebars
<span>{{ global.props.page_number }} / {{ global.props.total_pages }}</span>
```

Hai giá trị này có sẵn trong **Global Props** và do hệ thống điền khi tạo tài liệu:

| Giá trị | Nội dung |
| --- | --- |
| `global.props.page_number` | Số thứ tự của tờ PDF hiện tại. |
| `global.props.total_pages` | Tổng số tờ PDF của tài liệu. |

Bạn không cần tạo thêm prop để lưu số trang. Ví dụ trên sẽ hiển thị `1 / 3`, `2 / 3`, `3 / 3` với một tài liệu ba tờ.

Số trang tính theo **tờ PDF**, không theo số page trong Structure. Một page có nhiều nội dung có thể tạo nhiều tờ, mỗi tờ vẫn có số riêng. Việc ẩn Header/Footer trên trang bìa không loại tờ bìa khỏi tổng số trang.

<figure class="doc-sim hf-illustration" aria-label="Giá trị hệ thống hiển thị số tờ hiện tại và tổng số tờ PDF">
<div class="sim-stage"><div class="hf-path">Global <span>→</span> Footer <span>→</span> HTML</div><div class="sim-panel"><div class="sim-tabs"><span class="sim-active">HTML</span><span>CSS</span><span>Props</span><span>Config</span></div><div class="hf-number-source sim-focus"><code>{{ global.props.page_number }} /<br />{{ global.props.total_pages }}</code></div><div class="hf-number-pages"><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>INVOICE</small></div><div class="hf-paper-body"><strong>INVOICE</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div><div class="hf-paper-footer"><span>tembuilder.com</span><b>1 / 3</b></div></div><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>INVOICE</small></div><div class="hf-paper-body"><strong>INVOICE</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div><div class="hf-paper-footer"><span>tembuilder.com</span><b>2 / 3</b></div></div><div class="hf-paper"><div class="hf-paper-header">Tembuilder <small>INVOICE</small></div><div class="hf-paper-body"><strong>INVOICE</strong><span>TB-2026-0042</span><i></i><i></i><i></i></div><div class="hf-paper-footer"><span>tembuilder.com</span><b>3 / 3</b></div></div></div></div></div>
<figcaption>Giá trị hệ thống hiển thị số tờ hiện tại và tổng số tờ PDF</figcaption>
</figure>