Nếu bạn muốn đưa các quy tắc CSS tùy chỉnh hoặc tập lệnh JavaScript vào sách của mình, hãy thêm chúng vào thư mục có tên là
├── _config.yml ├── _toc.yml ├── page1.md └── _static └── myfile.css6 trong thư mục sách của bạn. Bất kỳ tệp nào kết thúc bằng
├── _config.yml ├── _toc.yml ├── page1.md └── _static └── myfile.css7 hoặc
├── _config.yml ├── _toc.yml ├── page1.md └── _static └── myfile.css8 trong thư mục này sẽ tự động được sao chép vào HTML sách dựng sẵn của bạn và được liên kết trong tiêu đề của mỗi trang
Ví dụ: để bao gồm tệp CSS tùy chỉnh
├── _config.yml ├── _toc.yml ├── page1.md └── _static └── myfile.css9 trong thư mục Sách Jupyter với cấu trúc sau
mybook/ ├── _config.yml ├── _toc.yml └── page1.md
Thêm tệp tĩnh tại đây
├── _config.yml ├── _toc.yml ├── page1.md └── _static └── myfile.css
Sau đó, các quy tắc sẽ tự động được áp dụng cho trang web của bạn. Nói chung, các tệp CSS và JS này sẽ được tải sau khi các tệp khác được tải trên trang của bạn, vì vậy chúng sẽ ghi đè lên các quy tắc và hành vi đã có từ trước
Một ví dụ. biện minh cho văn bản
Nếu bạn muốn văn bản trong cuốn sách của mình được căn đều thay vì căn trái, hãy tạo
├── _config.yml ├── _toc.yml ├── page1.md └── _static └── myfile.css9 bên dưới
p { text-align: justify; }1 bằng CSS sau
p { text-align: justify; }
Một ví dụ. lời khuyên tùy chỉnh
Cảnh báo
Tạo kiểu cho lời khuyên tùy chỉnh theo cách này không được hỗ trợ chính thức bởi Jupyter Book hoặc Sphinx, vì vậy hành vi của nó có thể thay đổi bất ngờ. Một cách tiếp cận dài dòng hơn nhưng “ổn định” hơn là sử dụng đối số từ khóa
p { text-align: justify; }2 khi tạo lời khuyên của bạn và xác định các quy tắc CSS cho lớp đó
Hiện tại, việc sử dụng chỉ thị
p { text-align: justify; }3 với tiêu đề sẽ tạo ra một lớp CSS dựa trên tiêu đề của lời khuyên. Ví dụ: tiêu đề nhắc nhở là
p { text-align: justify; }4 sẽ dẫn đến tên lớp là
p { text-align: justify; }5
Bạn có thể tận dụng mẫu này để nhanh chóng tạo lời khuyên tùy chỉnh. Ví dụ: tạo một
p { text-align: justify; }6 bên dưới
p { text-align: justify; }1 bằng CSS sau
.admonition-extra-credit { border-left-color: rgba[0, 246, 16, 1]; } .admonition-extra-credit .admonition-title { background-color: rgba[0, 246, 16, .1]; } .admonition-extra-credit .admonition-title:before { color: rgba[0, 246, 16, 1]; content: '\f19d'; }
sau đó trong cuốn sách của bạn, xác định một lời khuyên như vậy
```{admonition} Extra credit An "extra credit" exercise is presented here. ```
Lời khuyên phải được tạo kiểu theo quy tắc CSS của bạn khi bạn tạo sách của mình
Bật Google Analytics
Nếu bạn có tài khoản Google, bạn có thể sử dụng Google Analytics để thu thập một số thông tin về lưu lượng truy cập vào Sách Jupyter của mình. Với công cụ này, bạn có thể biết có bao nhiêu người đang sử dụng sách của mình, họ đến từ đâu và họ truy cập sách như thế nào, cho dù họ đang sử dụng phiên bản máy tính để bàn hay thiết bị di động, v.v.
Để thêm Google Analytics vào Sách Jupyter của bạn, hãy điều hướng đến Google Analytics, tạo tài khoản Google Analytics mới và tạo thuộc tính mới cho Sách Jupyter của bạn. Các bước tiếp theo tùy thuộc vào phiên bản Google Analytics bạn đang sử dụng
Nếu sử dụng Google Analytics 4 [GA4]
Bạn cũng sẽ phải tạo một luồng được liên kết với tài sản của mình
Chọn tạo luồng web và cung cấp URL của sách Jupyter của bạn
Sao chép Mã đo lường được liên kết với luồng đó. Đây là một mã chữ và số trông giống như
p { text-align: justify; }
8
Nếu sử dụng các phiên bản Google Analytics cũ hơn, chẳng hạn như Google Analytics 3
Bạn sẽ cung cấp URL của Jupyter Book khi bạn tạo thuộc tính của mình
Sao chép “ID theo dõi” phân tích cho thuộc tính của bạn. Đây là một mã số trông giống như
p { text-align: justify; }
9
Dán mã đo lường [GA4] hoặc mã theo dõi [các phiên bản trước của Google Analytics] vào lệnh sau trong tệp cấu hình của bạn
html: google_analytics_id: G-XXXXXXX
Xem thêm
Để biết thêm về Google Analytics, hãy xem tài liệu Google Analytics để biết thêm thông tin
Để sử dụng các dịch vụ phân tích khác, chẳng hạn như Phân tích hợp lý, bạn nên liên kết các thư viện có liên quan thông qua hướng dẫn trong
Kiểm tra các liên kết bên ngoài trong cuốn sách của bạn
Nếu bạn muốn đảm bảo rằng các liên kết bên ngoài sách của mình là hợp lệ, hãy chạy trình kiểm tra liên kết Sphinx với Jupyter Book. Điều này sẽ kiểm tra từng liên kết bên ngoài của bạn và đảm bảo rằng chúng giải quyết
Lưu ý rằng bạn phải đảm bảo mỗi liên kết là đúng mục tiêu, trình kiểm tra liên kết sẽ chỉ đảm bảo rằng nó giải quyết được
Để chạy trình kiểm tra liên kết, hãy sử dụng lệnh sau
jupyter-book build mybookname/ --builder linkcheck
Nó sẽ in trạng thái của từng liên kết trong sách của bạn để bạn có thể giải quyết mọi liên kết không chính xác sau này
Sử dụng HTML thô trong Markdown
Jupyter Notebook Markdown cho phép bạn sử dụng HTML thô trong các ô Markdown. Điều này không được khuyến khích trong hầu hết các trường hợp, vì nó thường sẽ chỉ được chuyển qua quy trình xây dựng dưới dạng văn bản thô và do đó sẽ không phải tuân theo các quy trình như
hiệu chỉnh đường dẫn tương đối
sao chép nội dung vào thư mục bản dựng
nhiều định dạng loại đầu ra [e. g. nó sẽ không hiển thị trong các tệp PDF. ]
Vì vậy, ví dụ, dưới đây chúng tôi thêm
Go Home HTML! [Go Home Markdown!][../intro.md]
và bạn sẽ thấy rằng liên kết HTML bị hỏng
Về Trang chủ HTML
Về nhà Markdown
Mẹo
Lưu ý rằng MyST Markdown hiện có một số tính năng cú pháp mở rộng, có thể cho phép bạn sử dụng các thành phần HTML nhất định theo đúng cách
Ví dụ: thẻ hình ảnh HTML thô
trở thành
Xem chi tiết
Thêm HTML bổ sung vào sách của bạn
Có một vài nơi trong Sách Jupyter nơi bạn có thể thêm HTML tùy ý bổ sung. Trong mọi trường hợp, điều này được thực hiện với giá trị cấu hình trong tệp
.admonition-extra-credit { border-left-color: rgba[0, 246, 16, 1]; } .admonition-extra-credit .admonition-title { background-color: rgba[0, 246, 16, .1]; } .admonition-extra-credit .admonition-title:before { color: rgba[0, 246, 16, 1]; content: '\f19d'; }0 của bạn
HTML bổ sung ở chân trang của bạn
Để thêm HTML bổ sung vào chân trang sách của bạn, hãy sử dụng cấu hình sau
html: extra_footer: |your html
Nội dung của
.admonition-extra-credit { border-left-color: rgba[0, 246, 16, 1]; } .admonition-extra-credit .admonition-title { background-color: rgba[0, 246, 16, .1]; } .admonition-extra-credit .admonition-title:before { color: rgba[0, 246, 16, 1]; content: '\f19d'; }1 sẽ được chèn vào HTML của trang của bạn sau tất cả nội dung chân trang khác
HTML bổ sung vào thanh điều hướng bên trái của bạn
Để thêm HTML bổ sung vào thanh điều hướng bên trái của sách, hãy sử dụng cấu hình sau
├── _config.yml ├── _toc.yml ├── page1.md └── _static └── myfile.css0
Nội dung của
.admonition-extra-credit { border-left-color: rgba[0, 246, 16, 1]; } .admonition-extra-credit .admonition-title { background-color: rgba[0, 246, 16, .1]; } .admonition-extra-credit .admonition-title:before { color: rgba[0, 246, 16, 1]; content: '\f19d'; }2 sẽ được chèn vào HTML của trang của bạn sau tất cả nội dung HTML khác
Thêm giấy phép vào chân trang HTML của bạn
Nếu bạn muốn thêm giấy phép chi tiết hơn cho sách của mình hoặc muốn thêm liên kết đến trang bên ngoài để có giấy phép, cách dễ nhất để làm như vậy là sử dụng chân trang tùy chỉnh cho việc này. Bạn có thể tắt văn bản "bản quyền" được tự động thêm vào mỗi chân trang và thêm bất kỳ HTML chân trang nào bạn muốn
Ví dụ: xem cấu hình này
├── _config.yml ├── _toc.yml ├── page1.md └── _static └── myfile.css1
Lưu ý rằng điều này có thể không hoạt động trong các bản dựng PDF của trang do LaTeX tạo ra
Chỉ định thủ công các tệp/thư mục bổ sung sẽ được đưa vào trang web
Jupyter Book sẽ sao chép bất kỳ tệp nào được liên kết từ bên trong các trang của nó để các liên kết hoạt động trong trang web đã xây dựng. Tuy nhiên, đôi khi bạn muốn đảm bảo rằng các tệp và thư mục được bao gồm trong trang web được tạo của bạn theo cách thủ công. Ví dụ: nếu bạn muốn liên kết với chúng từ bên ngoài tài liệu đã tạo của mình chứ không phải từ bên trong tài liệu đã tạo của bạn
Để chỉ định các mục cần sao chép theo cách thủ công, hãy sử dụng. Bạn có thể định cấu hình cái này với Jupyter Book như vậy
├── _config.yml ├── _toc.yml ├── page1.md └── _static └── myfile.css2
Khi bạn tạo HTML cho sách của mình, Jupyter Book sẽ đảm bảo rằng tất cả các tệp và thư mục bên trong các thư mục được chỉ định trong
.admonition-extra-credit { border-left-color: rgba[0, 246, 16, 1]; } .admonition-extra-credit .admonition-title { background-color: rgba[0, 246, 16, .1]; } .admonition-extra-credit .admonition-title:before { color: rgba[0, 246, 16, 1]; content: '\f19d'; }3 sẽ được sao chép sang trang web đã tạo của bạn
Ví dụ: nếu bạn có cấu trúc thư mục trong sách của mình như vậy
├── _config.yml ├── _toc.yml ├── page1.md └── _static └── myfile.css3
và cấu hình Sách Jupyter sau đây
├── _config.yml ├── _toc.yml ├── page1.md └── _static └── myfile.css4
Sau đó, bộ dữ liệu sẽ có thể truy cập được tại
.admonition-extra-credit { border-left-color: rgba[0, 246, 16, 1]; } .admonition-extra-credit .admonition-title { background-color: rgba[0, 246, 16, .1]; } .admonition-extra-credit .admonition-title:before { color: rgba[0, 246, 16, 1]; content: '\f19d'; }5
Định cấu hình để cải thiện khả năng truy cập
Khai báo ngôn ngữ chính được sử dụng trong sách của bạn sẽ hỗ trợ trình đọc màn hình và công cụ dịch trình duyệt
Có thể định cấu hình ngôn ngữ bằng cách cung cấp mã ngôn ngữ thích hợp cho tùy chọn
.admonition-extra-credit { border-left-color: rgba[0, 246, 16, 1]; } .admonition-extra-credit .admonition-title { background-color: rgba[0, 246, 16, .1]; } .admonition-extra-credit .admonition-title:before { color: rgba[0, 246, 16, 1]; content: '\f19d'; }6, bên dưới cấu hình
.admonition-extra-credit { border-left-color: rgba[0, 246, 16, 1]; } .admonition-extra-credit .admonition-title { background-color: rgba[0, 246, 16, .1]; } .admonition-extra-credit .admonition-title:before { color: rgba[0, 246, 16, 1]; content: '\f19d'; }7 trong tệp
.admonition-extra-credit { border-left-color: rgba[0, 246, 16, 1]; } .admonition-extra-credit .admonition-title { background-color: rgba[0, 246, 16, .1]; } .admonition-extra-credit .admonition-title:before { color: rgba[0, 246, 16, 1]; content: '\f19d'; }0 của bạn
├── _config.yml ├── _toc.yml ├── page1.md └── _static └── myfile.css5
Ví dụ này sẽ đặt ngôn ngữ sách thành tiếng Anh, ngôn ngữ này sẽ được thể hiện trong HTML của sách của bạn dưới dạng
.admonition-extra-credit { border-left-color: rgba[0, 246, 16, 1]; } .admonition-extra-credit .admonition-title { background-color: rgba[0, 246, 16, .1]; } .admonition-extra-credit .admonition-title:before { color: rgba[0, 246, 16, 1]; content: '\f19d'; }9