Cách mở tệp html trong sổ ghi chép Jupyter
|
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 Show
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ảnNế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ỉnhCả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 AnalyticsNế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
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
Kiểm tra các liên kết bên ngoài trong cuốn sách của bạnNế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 MarkdownJupyter 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ư
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ô <img src="../images/fun-fish.png" alt="the fun fish!" width="200px"/> trở thành Xem chi tiết Thêm HTML bổ sung vào sách của bạnCó 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: | 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ạnNế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 webJupyter 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ậpKhai 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 Tôi có thể sử dụng HTML trong Jupyter Notebook không?Jupyter Notebook Markdown cho phép bạn sử dụng HTML thô trong các ô Markdown .
Làm cách nào để kết nối Jupyter Notebook với HTML?Phương pháp này đơn giản như nhấp vào Tệp, Tải xuống dưới dạng, HTML (. html) . Sau đó, Jupyter sẽ tải xuống sổ ghi chép dưới dạng tệp HTML tới bất kỳ nơi nào trình duyệt mặc định cho các tệp đã tải xuống.
Làm cách nào để tải tệp HTML bằng Python?Cách tiếp cận. . Nhập mô-đun Mở và tạo tệp Thêm mã html Viết mã vào tập tin Đóng tập tin Mở tệp trong cửa sổ trình duyệt Có Jupyter Notebook dành cho JavaScript không?Jupyter Notebook là tài liệu chứa hỗn hợp mã trực tiếp (Python, R, Julia, JavaScript, v.v.) , hình ảnh hóa và văn bản tường thuật (Markdown). Chúng rất hữu ích để chia nhỏ các khái niệm ở dạng kể chuyện, nơi bạn có thể đưa ra một số ngữ cảnh và hiển thị mã bên dưới cùng với hình ảnh trực quan tương tác. |
