Custom Page

1. Setup

• Yêu cầu: nbdev_install_quarto

2. Website

• Quarto Websites là một nền tảng website builder cung cấp các công cụ để tạo và quản lý website một cách dễ dàng và nhanh chóng. Người dùng có thể tạo ra các trang web chuyên nghiệp, thương mại điện tử và blog chỉ trong vài phút mà không cần có kiến thức về lập trình hoặc thiết kế web. Thật may mắn nbdev được xây dựng trên Quarto, do đó chúng ta có thể dễ dàng sử dụng Quarto trên nbdev.
• Một vài option có sẵn từ để custom website navigation như: Hiển thị sidebar theo cấu trúc hierarchy, giao diện điều hướng page, sub-menus …
  
• Để bắt đầu, bạn hãy mở file config _quarto.yml trong folder nbs để có thể edit.

Top Navigation

• Để custom top navigation, chúng ta sẽ edit ở entry navbar. Ví dụ sau, bạn có thể chỉ định các file .jpynb hoặc một link website nào đó:

website:
  navbar:
    background: primary
    title: My site
    search: true
    left:
      - text: "Home"
        file: index.jpynb
      - talks.jpynb
      - about.jpynb 

• Tạo submenu:

left:
  - text: "More"
    menu:
      - talks.jpynb
      - about.jpynb 

Tip

Chi tiết các option tham khảo here 📓

Side Navigation

• Để custom side navigation, chúng ta sẽ edit ở entry sidebar.

website:
  sidebar:
    style: "docked"
    search: true
    contents:
      - section: "Basics"
        contents:
          - index.jpynb
          - knitr-basics.jpynb
          - jupyter-basics.jpynb
      - section: "Layout"
        contents:
          - markdown-layout.jpynb
          - knitr-layout.jpynb
          - jupyter-layout.jpynb
        
metadata-files: [nbdev.yml]

• lưu ý: Nhớ xóa sidebar.yml trong #metadata-files.

Tip

Chi tiết các option tham khảo here 📓

Favicon

• Hiển thị logo trên tab trình duyệt

website:
  favicon: logo.png

Page Footern

• Custom nội dụng dưới cùng của page

website:
    page-footer: 
    left: "Copyright 2023, Trung Hoang" 
    right: 
      - icon: github
        href: https://github.com/hoangtrung020541/nbdev_beautiful
      - icon: twitter 
        href: https://twitter.com/ 
    background: Gray
    foreground: White
    border: false

Separators

• Tách nội dung giữa các sidebar bằng text: "---"

website:
  sidebar:
    contents:
      - section: "Quick start"
        contents:
          - 03_how_to_use_nbdev.ipynb
          - 04_directives.ipynb
          - 05_create_page.ipynb
          - 06_beautiful_page.ipynb
      - text: "---"
      - section: "Examples"
        contents:
          - 00_card_overview.ipynb
          - 01_card.ipynb
          - 02_desk.ipynb
      - 07_test.ipynb

Sidebar Tools

• Một vài tool nho nhỏ bao gồm icon và href trên sidebar, lấy icon ở đây Bootstrap Icons.

website:
  sidebar:
    tools:
      - icon: facebook
        href: https://www.facebook.com/
      - icon: discord
        href: https://discord.com/
      - icon: twitter
        href: https://twitter.com
      - icon: github
        menu:
          - text: Source Code
            url:  https://github.com/hoangtrung020541/nbdev_beautiful
          - text: Report a Bug
            url:  https://github.com/hoangtrung020541/nbdev_beautiful/issues

Dark Mode

• Bật chế độ cho phép chuyển đổi theme: darkly <-> flatly

format:
  html:
    theme:
      light: flatly
      dark: darkly
    css: styles.css
    toc: true

• Quarto cung cấp 25 themes có sẵn từ Bootswatch

Tìm hiểu thêm tại Quarto - Website Navigation 😁 💨

3. Custom Content

Trong nbdev, chúng ta có thể sử dụng HTML, CSS, Markdown để decore nội dung của page thông qua Markdown cell trong notebook.

Formatting Links

• Test 1 –> [Test 1](07_test.ipynb)
• Test 2 –> <a style="color: red; text-decoration: none;" href="07_test.ipynb">Test 2</a>
• Test 3 –> <a class="link-hover" href="07_test.ipynb">Test 3</a>

Note

Test 1 sử dụng markdown.
Test 2 sử dụng html.
Đối với Test 3 hơi phức tạp, liên quan đến cả html và css nên cần phải sử dụng 
file `styles.css` trong folder `nbs`. Cụ thể chúng ta sẽ tạo `class="link-hover"` ở 
đây, sau đó sẽ set các thuộc tính của class link-hover tại file css như sau:

.link-hover{
    color: #F0266F;
    text-decoration: none;
}

.link-hover:hover{
    color: #686868;
    text-decoration: none;
}

.link-hover:active{
    color: black;
    text-decoration: none;
}

Callout Blocks

Để làm được như vậy, sử dụng markdown syntax như sau:

::: {.callout-note}
    Note that there are five types of callouts, including:
    `note`, `warning`, `important`, `tip`, and `caution`.
:::

::: {.callout-tip}
    This is an example of a callout with a title.
:::

::: {.callout-caution collapse="true"}
    This is an example of a 'folded' caution callout that can be expanded by the user. You can 
    use `collapse="true"` to collapse it by default or `collapse="false"` to make a collapsible
    callout that is expanded by default.
:::