Header, footer và số trang

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.

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.

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.

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.

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

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

<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:

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.