ฉันจะเพิ่มสารบัญลงในสมุดบันทึก Jupyter / JupyterLab ได้อย่างไร


108

เอกสารประกอบที่http://ipython.org/ipython-doc/stable/interactive/notebook.htmlระบุว่า

คุณสามารถจัดเตรียมโครงสร้างแนวคิดสำหรับเอกสารการคำนวณของคุณโดยรวมโดยใช้หัวเรื่องในระดับต่างๆ มีให้เลือก 6 ระดับตั้งแต่ระดับ 1 (ระดับบนสุด) จนถึงระดับ 6 (ย่อหน้า) สิ่งเหล่านี้สามารถใช้ในการสร้างสารบัญได้ในภายหลังเป็นต้น

อย่างไรก็ตามฉันไม่พบคำแนะนำใด ๆ เกี่ยวกับวิธีใช้ส่วนหัวแบบลำดับชั้นเพื่อสร้างสารบัญดังกล่าว มีวิธีทำไหม?

หมายเหตุ: ฉันสนใจการนำทางประเภทอื่น ๆ โดยใช้ส่วนหัวของโน้ตบุ๊ก ipython ด้วยถ้ามี ตัวอย่างเช่นการกระโดดไปข้างหลังและไปข้างหน้าจากหัวเรื่องเพื่อค้นหาจุดเริ่มต้นของแต่ละส่วนอย่างรวดเร็วหรือซ่อน (พับ) เนื้อหาของทั้งส่วน นี่คือรายการความปรารถนาของฉัน - แต่การนำทางประเภทใดก็ได้ที่น่าสนใจ ขอบคุณ!


ดูคำตอบของ @Nikolay ด้านล่างสำหรับวิธีแก้ปัญหาทั่วไปที่ใช้ได้กับทุกหน้าเว็บ .. นี่คือคำตอบที่ดี
ihightower

เพื่อเสริมโซลูชันโน้ตบุ๊ก Jupyter ที่มีอยู่ฉันได้เพิ่มคำแนะนำ JupyterLabด้านล่าง
joelostblom

คำตอบ:


52

มีipython nbextensionที่สร้างสารบัญสำหรับโน้ตบุ๊ก ดูเหมือนว่าจะให้การนำทางเท่านั้นไม่ใช่การพับส่วน


ขอบคุณฉันถือว่านี่คือสิ่งที่เอกสารอ้างถึง
user2428107

2
สำหรับผู้ที่ต้องการติดตั้งใน jupyter 4 โพสต์นี้อาจช่วยได้
Syrtis Major

9
เพียงแค่อัปเดตสิ่งนี้: ตอนนี้มีส่วนขยาย nbextensions ซึ่งรวมส่วนขยายจำนวนมากเข้าด้วยกันและช่วยให้คุณจัดการได้ผ่านทาง jupyter เอง ฉันคิดว่าตอนนี้เป็นวิธีที่ง่ายที่สุดในการรับ ToC2 และยังมีส่วนขยายอื่น ๆ ที่เกี่ยวข้องเช่นการพับส่วน อยู่ที่github.com/ipython-contrib/jupyter_contrib_nbextensions
user2428107

94

คุณสามารถเพิ่ม TOC ด้วยตนเองโดยใช้ Markdown และ HTML นี่คือวิธีที่ฉันเพิ่ม:

สร้าง TOC ที่ด้านบนของ Jupyter Notebook:

## TOC:
* [First Bullet Header](#first-bullet)
* [Second Bullet Header](#second-bullet)

เพิ่มจุดยึด html ทั่วทั้งร่างกาย:

## First Bullet Header <a class="anchor" id="first-bullet"></a>

code blocks...

## Second Bullet Header <a class="anchor" id="second-bullet"></a>

code blocks...

อาจไม่ใช่แนวทางที่ดีที่สุด แต่ได้ผล หวังว่านี่จะช่วยได้


15
สิ่งนี้ใช้ไม่ได้กับฉันอีกต่อไป แต่วิธีการที่คล้ายกันนี้ใช้ไม่ได้
joelostblom

2
"แนวทางที่คล้ายกัน" เช่นเดียวกัน: stackoverflow.com/questions/5319754/… tl; dr: ใช้<a name="pookie"></a>สำหรับจุดยึดและสำหรับการใช้ลิงค์:Take me to [pookie](#pookie)
michael

2
สำหรับส่วนหัวทั้งหมดใน markdowns ของคุณโน้ตบุ๊กจะเพิ่มจุดยึดโดยอัตโนมัติ คุณสามารถคลิกที่พิลโครว์ (¶) ทางด้านขวาของหัวเรื่องที่คุณเห็นเมื่อคุณวางเมาส์เหนือพวกเขาเพื่อแสดงจุดยึดในแถบที่อยู่ของเบราว์เซอร์ของคุณ คุณสามารถใช้จุดยึดนี้แทนการเพิ่มจุดยึดด้วยตนเองในส่วนของการทำเครื่องหมายของคุณ สิ่งที่ดีที่สุดคือการทำงานข้ามเซลล์
aaruja

1
ฉันมีสคริปต์นี้add_toc.pyที่เพิ่มเซลล์ markdown ที่ด้านบนพร้อมรายการเนื้อหา ทางออกสำหรับคนไม่ดีหากคุณไม่ต้องการติดตั้งส่วนขยาย
user2148414


18

วิธีการใช้ปลั๊กอินเบราว์เซอร์ที่ให้ภาพรวมของหน้า html ใด ๆ ฉันได้ลองทำสิ่งต่อไปนี้แล้ว:

ทั้งคู่ทำงานได้ดีสำหรับโน้ตบุ๊ก IPython ฉันลังเลที่จะใช้โซลูชันก่อนหน้านี้เนื่องจากดูเหมือนจะไม่เสถียรเล็กน้อยและลงเอยด้วยการใช้ส่วนขยายเหล่านี้


1
มีประโยชน์มาก! แต่ฟังก์ชั่นในตัวบางอย่างจะสมเหตุสมผลมากโดยเฉพาะเมื่อใช้ร่วมกับ markdown
dmeu

13

ฉันเพิ่งสร้างส่วนขยายขนาดเล็กให้กับ Jupyter ชื่อjupyter-navbar jupyter-navbarจะค้นหาส่วนหัวที่เขียนในเซลล์มาร์กดาวน์และแสดงลิงก์ไปยังส่วนหัวเหล่านั้นในแถบด้านข้างตามลำดับชั้น แถบด้านข้างสามารถปรับขนาดและพับได้ ดูภาพหน้าจอด้านล่าง

ติดตั้งง่ายและใช้ประโยชน์จากโค้ด JS และ CSS แบบ 'กำหนดเอง' ที่ดำเนินการเมื่อใดก็ตามที่เปิดโน้ตบุ๊กดังนั้นคุณจึงไม่จำเป็นต้องเรียกใช้ด้วยตนเอง

ป้อนคำอธิบายภาพที่นี่


1
แน่นอนว่ามันง่ายต่อการติดตั้งและซอร์สโค้ดก็เป็นมิตรเช่นกัน โครงการดี!
Carson

13

ตอนนี้มีสองแพ็คเกจที่สามารถใช้จัดการกับส่วนขยายของ Jupyter:

  1. jupyter_contrib_nbextensionsที่ติดตั้งส่วนขยายรวมถึงสารบัญ

  2. jupyter_nbextensions_configuratorที่จัดเตรียมอินเทอร์เฟซผู้ใช้แบบกราฟิกสำหรับการกำหนดค่าที่จะเปิดใช้งาน nbextensions (โหลดโดยอัตโนมัติสำหรับโน้ตบุ๊กทุกเครื่อง) และให้การควบคุมเพื่อกำหนดค่าตัวเลือกของ nbextensions

อัพเดท:

เริ่มจากเวอร์ชันล่าสุดjupyter_contrib_nbextensionsอย่างน้อยcondaคุณก็ไม่จำเป็นต้องติดตั้งjupyter_nbextensions_configuratorเพราะได้รับการติดตั้งพร้อมกับส่วนขยายเหล่านั้น


12

คำแนะนำ JupyterLab ToC

มีคำตอบที่ดีมากมายสำหรับคำถามนี้ แต่มักต้องการการปรับแต่งเพื่อให้ทำงานได้อย่างถูกต้องกับโน้ตบุ๊กใน JupyterLab ฉันเขียนคำตอบนี้เพื่อให้รายละเอียดเกี่ยวกับวิธีที่เป็นไปได้ในการรวม ToC ในสมุดบันทึกขณะทำงานและส่งออกจาก JupyterLab

เป็นแผงด้านข้าง

jupyterlab-tocขยายเพิ่ม TOC เป็นแผงด้านข้างที่หัวจำนวนกระป๋องส่วนการล่มสลายและถูกนำมาใช้สำหรับการเดินเรือ (ดู GIF ด้านล่างสำหรับการสาธิต) ติดตั้งด้วยคำสั่งต่อไปนี้

jupyter labextension install @jupyterlab/toc

ป้อนคำอธิบายภาพที่นี่


ในสมุดบันทึกเป็นเซลล์

ในขณะนี้สามารถทำได้ด้วยตนเองเช่นเดียวกับคำตอบของ Matt Dancho หรือโดยอัตโนมัติผ่านส่วนขยายสมุดบันทึก toc2 jupyter ในอินเทอร์เฟซโน้ตบุ๊กแบบคลาสสิก

ขั้นแรกให้ติดตั้ง toc2 เป็นส่วนหนึ่งของบันเดิล jupyter_contrib_nbextensions :

conda install -c conda-forge jupyter_contrib_nbextensions

จากนั้นเปิด JupyterLab ไปที่Help --> Launch Classic Notebookและเปิดสมุดบันทึกที่คุณต้องการเพิ่ม ToC คลิกสัญลักษณ์ toc2 ในแถบเครื่องมือเพื่อเปิดหน้าต่าง ToC แบบลอยขึ้นมา (ดู gif ด้านล่างหากคุณไม่พบ) คลิกไอคอนรูปเฟืองและทำเครื่องหมายที่ช่อง "เพิ่มเซลล์ ToC สมุดบันทึก" บันทึกสมุดบันทึกและเซลล์ ToC จะอยู่ที่นั่นเมื่อคุณเปิดใน JupyterLab เซลล์ที่แทรกเป็นเซลล์ markdown ที่มี html อยู่มันจะไม่อัปเดตโดยอัตโนมัติ

ตัวเลือกเริ่มต้นของ toc2 สามารถกำหนดค่าได้ในแท็บ "Nbextensions" ในหน้าเปิดตัวโน้ตบุ๊กคลาสสิก คุณสามารถเลือกที่จะกำหนดหมายเลขหัวเรื่องและยึด ToC เป็นแถบด้านข้าง (ซึ่งส่วนตัวคิดว่าดูสะอาดกว่า)

ป้อนคำอธิบายภาพที่นี่


ในไฟล์ HTML ที่ส่งออก

nbconvertสามารถใช้เพื่อส่งออกสมุดบันทึกไปยัง HTML ตามกฎของวิธีการจัดรูปแบบ HTML ที่ส่งออก toc2ขยายดังกล่าวข้างต้นจะเพิ่มรูปแบบการส่งออกที่เรียกว่าhtml_tocซึ่งสามารถนำมาใช้โดยตรงด้วยnbconvertจากบรรทัดคำสั่ง (หลังจากที่toc2ขยายได้รับการติดตั้ง):

jupyter nbconvert file.ipynb --to html_toc
# Append `--ExtractOutputPreprocessor.enabled=False`
# to get a single html file instead of a separate directory for images

โปรดจำไว้ว่าสามารถเพิ่มคำสั่งเชลล์ลงในเซลล์สมุดบันทึกได้โดยใส่เครื่องหมายอัศเจรีย์ไว้ล่วงหน้า!ดังนั้นคุณสามารถติดบรรทัดนี้ไว้ในเซลล์สุดท้ายของสมุดบันทึกและมีไฟล์ HTML ที่มี ToC ที่สร้างขึ้นเสมอเมื่อคุณกด "เรียกใช้เซลล์ทั้งหมด" ( หรือผลลัพธ์ที่คุณต้องการnbconvert) วิธีนี้คุณสามารถใช้jupyterlab-tocเพื่อนำทางโน้ตบุ๊กในขณะที่คุณกำลังทำงานและยังคงได้รับ ToC ในเอาต์พุตที่ส่งออกโดยไม่ต้องหันไปใช้อินเทอร์เฟซของโน้ตบุ๊กแบบคลาสสิก (สำหรับคนที่พิถีพิถันในหมู่พวกเรา)

โปรดทราบว่าการกำหนดค่าตัวเลือก toc2 เริ่มต้นตามที่อธิบายไว้ข้างต้นจะไม่เปลี่ยนรูปแบบของnbconver --to html_toc. คุณต้องเปิดสมุดบันทึกในอินเทอร์เฟซสมุดบันทึกแบบคลาสสิกสำหรับข้อมูลเมตาที่จะเขียนลงในไฟล์. ipynb (nbconvert อ่านข้อมูลเมตาเมื่อส่งออก) หรือคุณสามารถเพิ่มข้อมูลเมตาด้วยตนเองผ่านแท็บเครื่องมือของโน้ตบุ๊กของแถบด้านข้าง JupyterLab เช่นบางสิ่งบางอย่าง ชอบ:

    "toc": {
        "number_sections": false,
        "sideBar": true
    }

หากคุณต้องการแนวทางที่ขับเคลื่อนด้วย GUI คุณควรจะสามารถเปิดสมุดบันทึกแบบคลาสสิกและคลิกได้File --> Save as HTML (with ToC) (แม้ว่าฉันจะทราบว่ารายการเมนูนี้ไม่สามารถใช้ได้สำหรับฉันก็ตาม)


gif ด้านบนเชื่อมโยงจากเอกสารประกอบของส่วนขยาย


ฉันชอบทำงานด้วยjupyter labแต่จำเป็นต้องเพิ่ม TOC ลงในเอาต์พุต HTML ของโน้ตบุ๊กขนาดใหญ่ ทำงานได้อย่างไม่มีที่ติ! มีขั้นตอนเพิ่มเติมเพื่อให้ใช้งานได้: 1.เปิดใช้งาน TOC2 เช่นconda install -c conda-forge jupyter_nbextensions_configuratorไปที่http://localhost:8888/nbextensionsยกเลิกการเลือก "ความเข้ากันได้" และเปิดใช้งาน "Toc2" 2.เปิด Classical Notebbok แก้ไขการตั้งค่า TOC ตามความต้องการของคุณและAdd TOC to Cell(ดำเนินการตามที่อธิบายไว้) 3.เปิด.ipynbไฟล์ของคุณและค้นหา"toc"คัดลอกการกำหนดค่า json toc และเพิ่มลงในข้อมูลเมตาโดยใช้แท็บเครื่องมือของห้องทดลอง Jupyter
Alex

ฉันไม่สามารถใช้ส่วนขยาย toc2 ในสมุดบันทึกแบบคลาสสิกเพื่อเพิ่มเซลล์ TOC ได้ อย่างไรก็ตามการส่งออกโน้ตบุ๊กด้วย nbconvert ใช้--to html_tocงานได้ รูปแบบนี้ยอดเยี่ยมและเพิ่ม TOC ที่ดีที่ด้านข้างรวมทั้งหมายเลขหัวเรื่อง
aimfeld

6

บทนำ

ดังที่ @Ian และ @Sergey ได้กล่าวถึงnbextensionsเป็นวิธีง่ายๆ หากต้องการอธิบายคำตอบอย่างละเอียดนี่คือข้อมูลเพิ่มเติมบางส่วน

nbextensions คืออะไร?

nbextensions ประกอบด้วยชุดส่วนขยายที่เพิ่มฟังก์ชันการทำงานให้กับสมุดบันทึก Jupyter ของคุณ

ตัวอย่างเช่นเพื่ออ้างถึงส่วนขยายบางส่วน:

  • สารบัญ

  • ส่วนหัวที่พับได้

ติดตั้ง nbextensions

การติดตั้งสามารถทำได้ผ่าน Conda หรือ PIP

# If conda:
conda install -c conda-forge jupyter_contrib_nbextensions
# or with pip:
pip install jupyter_contrib_nbextensions

คัดลอกไฟล์ js และ css

ในการคัดลอกไฟล์ javascript และ css ของ nbextensions ลงในไดเร็กทอรีการค้นหาของเซิร์ฟเวอร์ jupyter ให้ทำดังต่อไปนี้:

jupyter contrib nbextension install --user

สลับส่วนขยาย

โปรดทราบว่าหากคุณไม่คุ้นเคยกับเทอร์มินัลคุณควรติดตั้งตัวกำหนดค่า nbextensions (ดูหัวข้อถัดไป)

คุณสามารถเปิด / ปิดส่วนขยายที่คุณเลือกได้ ตามที่เอกสารกล่าวถึงคำสั่งทั่วไปคือ:

jupyter nbextension enable <nbextension require path>

ในการเปิดใช้งานส่วนขยาย ToC (สารบัญ) ให้ทำ:

jupyter nbextension enable toc2/main

ติดตั้งอินเทอร์เฟซการกำหนดค่า (ทางเลือก แต่มีประโยชน์)

ตามเอกสารประกอบระบุว่าnbextensions_configuratorมีอินเทอร์เฟซการกำหนดค่าสำหรับ nbextensions

ดูเหมือนว่าต่อไปนี้: ตัวกำหนดค่า nbextensions

ในการติดตั้งหากคุณใช้ conda:

conda install -c conda-forge jupyter_nbextensions_configurator

หากคุณไม่มี Conda หรือไม่ต้องการติดตั้งผ่าน Conda ให้ทำ 2 ขั้นตอนต่อไปนี้:

pip install jupyter_nbextensions_configurator
jupyter nbextensions_configurator enable --user

นี่คือคำตอบที่ยอดเยี่ยมและมีรายละเอียด ผมคิดว่าการเปิดใช้งานtoc2/mainเป็นเช่นเดียวกับการตรวจสอบ "สารบัญ (2)" บนlocalhost: 8888 / ต้น # nbextensions_configurator
flow2k

4

นี่คือแนวทางของฉัน clunky เหมือนเดิมและมีอยู่ในgithub :

ใส่เซลล์สมุดบันทึกแรกเซลล์นำเข้า:

from IPythonTOC import IPythonTOC

toc = IPythonTOC()

ที่ใดที่หนึ่งหลังจากเซลล์นำเข้าใส่ในเซลล์ genTOCEntry แต่ยังไม่เรียกใช้:

''' if you called toc.genTOCMarkdownCell before running this cell, 
the title has been set in the class '''

print toc.genTOCEntry()

ใต้ genTOCEntry cell` ให้สร้างเซลล์ TOC เป็นเซลล์ markdown:

<a id='TOC'></a>

#TOC

ในขณะที่โน้ตบุ๊กได้รับการพัฒนาให้ใส่ genTOCMarkdownCell นี้ก่อนเริ่มส่วนใหม่:

with open('TOCMarkdownCell.txt', 'w') as outfile:

    outfile.write(toc.genTOCMarkdownCell('Introduction'))

!cat TOCMarkdownCell.txt

!rm TOCMarkdownCell.txt

ย้าย genTOCMarkdownCell ลงไปที่จุดในสมุดบันทึกของคุณที่คุณต้องการเริ่มต้นส่วนใหม่และสร้างอาร์กิวเมนต์เป็น genTOCMarkdownCell ชื่อสตริงสำหรับส่วนใหม่ของคุณจากนั้นเรียกใช้ เพิ่มเซลล์ markdown ทันทีและคัดลอกผลลัพธ์จาก genTOCMarkdownCell ลงในเซลล์ markdown ที่เริ่มต้นส่วนใหม่ของคุณ จากนั้นไปที่เซลล์ genTOCEntry ใกล้กับด้านบนของโน้ตบุ๊กแล้วเรียกใช้ ตัวอย่างเช่นหากคุณสร้างอาร์กิวเมนต์เป็น genTOCMarkdownCell ตามที่แสดงด้านบนและเรียกใช้คุณจะได้รับผลลัพธ์นี้เพื่อวางลงในเซลล์มาร์กดาวน์แรกของส่วนที่จัดทำดัชนีใหม่ของคุณ:

<a id='Introduction'></a>

###Introduction

จากนั้นเมื่อคุณไปที่ด้านบนสุดของโน้ตบุ๊กและเรียกใช้ genTocEntry คุณจะได้ผลลัพธ์:

[Introduction](#Introduction)

คัดลอกสตริงลิงก์นี้และวางลงในเซลล์มาร์กดาวน์ TOC ดังนี้:

<a id='TOC'></a>

#TOC

[Introduction](#Introduction)

หลังจากคุณแก้ไขเซลล์ TOC เพื่อแทรกสตริงลิงก์จากนั้นคุณกด shift-enter ลิงก์ไปยังส่วนใหม่ของคุณจะปรากฏในสมุดบันทึกของคุณสารบัญเป็นลิงก์บนเว็บและการคลิกที่เบราว์เซอร์จะเป็นการวางตำแหน่งเบราว์เซอร์ไปยังส่วนใหม่ของคุณ

สิ่งหนึ่งที่ฉันมักลืมคือการคลิกเส้นใน TOC ทำให้เบราว์เซอร์ข้ามไปที่เซลล์นั้น แต่ไม่ได้เลือก ไม่ว่าเซลล์ใดก็ตามที่ทำงานอยู่เมื่อเราคลิกที่ลิงค์ TOC ก็ยังคงทำงานอยู่ดังนั้นลูกศรลงหรือขึ้นหรือ shift-enter จึงหมายถึงเซลล์ที่ยังทำงานอยู่ไม่ใช่เซลล์ที่เราได้รับจากการคลิกที่ลิงค์ TOC


2

ดังที่ Ian ได้ชี้ให้เห็นแล้วว่ามีส่วนขยายของสารบัญโดย minrk สำหรับ IPython Notebook ฉันมีปัญหาในการทำให้มันใช้งานได้และทำให้IPython Notebook เครื่องนี้ซึ่งสร้างไฟล์กึ่งอัตโนมัติสำหรับส่วนขยายสารบัญของ minrk ใน Windows ไม่ใช้คำสั่งหรือลิงก์ 'curl' แต่เขียนไฟล์ * .js และ * .css ลงในไดเร็กทอรี IPython Notebook-profile-ของคุณโดยตรง

มีส่วนหนึ่งในสมุดบันทึกชื่อ'สิ่งที่คุณต้องทำ' - ทำตามและมีสารบัญลอยที่ดี :)

นี่คือเวอร์ชัน html ที่แสดงให้เห็นแล้ว: http://htmlpreview.github.io/?https://github.com/ahambi/140824-TOC/blob/master/A%20floating%20table%20of%20contents.htm

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.