Jak utworzyć spis treści w witrynie wiki GitHub?

108

Jeśli zajrzysz tutaj: http://en.wikipedia.org/wiki/Stack_Overflow

Zauważysz, że jest tam mała sekcja „Treść”, jeśli klikniesz jeden z linków, przeniesie Cię do określonej sekcji na stronie.

Jak to zrobić w witrynie wiki GitHub? Z Markdownem czy czymkolwiek innym?

Evan
źródło
3
Powiązany, ale nie dokładny duplikat, który zawiera więcej szczegółów: stackoverflow.com/q/9721944/2291
Jon Adams

Odpowiedzi:

114

Jest to ładnie pokazane w spisie treści ściągawki Markdown .

##### Table of Contents  
[Headers](#headers)  
[Emphasis](#emphasis)  
...snip...    
<a name="headers"/>
## Headers

Jeśli najedziesz kursorem na nagłówek w pliku Markdown GitHub, zobaczysz mały link prosty po lewej stronie, możesz również użyć tego linku. Format tego łącza to <project URL#<header name>. Wszystkie <header name>muszą być małe.

RyPeck
źródło
43
Z pewnością istnieje sposób na automatyczne wygenerowanie go, jak _ _ TOC _ _ MediaWiki?
LB
20
@ LB--: Jeśli edytujesz stronę wiki GitHub i zmienisz menu rozwijane "Styl edycji" na "MediaWiki", możesz po prostu użyć MediaWiki __TOC__bezpośrednio. Oczywiście istnieje podstawowa logika automatycznego generowania. Ale funkcjonalność nie wydaje się być widoczna w ich stylu edycji Markdown. Całkiem niefortunne. Zacznijmy wszyscy wysyłać prośby o dodanie funkcji i może to włączą.
Andrew Janke,
4
Odwołuję się do istniejącej tam „logiki autogeneracji”; wygląda na to, że różne „style edycji” przechodzą przez różne renderery. Mimo wszystko byłoby wspaniale mieć to w wersji MD, ponieważ jest to dość popularne i nie może być trudne do dodania.
Andrew Janke,
6
@AndrewJanke Przyjrzałem się temu dokładniej, wydaje się, że format MarkDown nie obsługuje automatycznego generowania spisów treści i są z tego dumni.
LB
6
Jest jeden haczyk w tworzeniu linków. Muszą być małe. Nie wiedziałem o tym i zastanawiałem się, dlaczego mój TOC nie działa. Użyłem #Headerszamiast #headers. Myślałem, że to pomyłka w twojej odpowiedzi. Być może możesz dodać do swojej odpowiedzi te informacje.
t3chb0t
21

Jednym z możliwych (półautomatycznych) rozwiązań jest rozwiązanie Eugene'a Kalinina github-markdown-toc. To narzędzie w zasadzie przeszukuje twój README.mdplik i wydobywa #nagłówki, aby utworzyć spis treści.

  1. Pobierz skrypt https://github.com/ekalinin/github-markdown-toc
  2. Nakarm swój README.mdscenariusz (jak odnotowano w Eugene'a README.md)

    cat README.md | bash github-markdown-toc

  3. Wytnij i wklej wygenerowany spis treści i umieść go na górze README.mdpliku

Zauważ, że ta bashimplementacja działa tylko na Linuksie (z tego, co mogę powiedzieć).

Na marginesie, istnieje implementacja golang i prawdopodobnie jest więcej kłopotów z rozpoczęciem pracy.

John Tran
źródło
14

https://github.com/jonschlinkert/markdown-toc

  • git clone your-repo.wiki.git(dodaj .wikiprawo przed, .gitaby sklonować wiki
  • npm i -g markdown-toc
  • Wstaw <!-- toc -->(z uwzględnieniem wielkości liter) w markdown swojej wiki
  • markdown-toc -i my-wiki-markdown.md( -ibędzie edytować to na miejscu)
  • Zysk

Aktualizacja: myślę, że może https://github.com/thlorenz/doctoc jest teraz bardziej popularne.

corysimmons
źródło
13

Obecnie nie jest to możliwe przy użyciu składni markdown ( .md). Trwa nieoficjalna dyskusja na temat automatycznego generowania spisu treści spisu treści na renderowanych plikach markdown, takich jak README.mdlista niektórych pomysłów.

Istnieją jednak inne obejścia, takie jak:

kenorb
źródło
1
Tak, zostałem przekonwertowany na asciidoc, głównie ze względu na ToC i linki do nagłówków. Mam dość czekania, aż Markdown nadrobi zaległości.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
8

Jeśli nie jesteś w stanie trzymać się Markdown , możesz zrobić, co poniżej:

  • na GitHub / wiki : przełącz Markdown na MediaWiki . Użyj __TOC__składni. Zobacz przykład .
  • na GitHub / repo : przełącz Markdown na AsciiDoc . Użyj :toc:składni. Zobacz demo .

Jednak korzystając z plików Markdown w GitHub / repo , możesz je pobrać na GitHub Pages, tak jak w Wikipedii

  • gdy Jekyll jest aktywowany, domyślnie generuje strony GitHub przy użyciu Kramdown
  • Kramdown wyposażony Table Of Content. Użyj {:toc}składni. Zobacz wyjaśnienie .
Chetabahana
źródło
6

Visual Studio Code

Jeśli zdarzy ci się używać Visual Studio Code , istnieje łatwe w użyciu rozszerzenie o nazwie Markdown All in One, które może błyskawicznie utworzyć spis treści dla dowolnego pliku .md.

wprowadź opis obrazu tutaj

Wystarczy otworzyć Command Palette ( Ctrl-Shift-P) ->Markdown: Create Table of Contents

Oryginalny md Po automatycznym wstawieniu spisu treści

Automatyczna aktualizacja psuje edytowany spis treści?

Dodatkową wskazówką może być WYŁĄCZENIE „automatycznej aktualizacji spisu treści przy zapisywaniu” za pomocą

  "markdown.extension.toc.updateOnSave": false,

w ustawieniach programu Visual Studio (Paleta poleceń -> Preferencje: Otwórz ustawienia (JSON)).

np8
źródło
2

Ze względu na to, że github ma swój własny sposób generowania atrybutów id = ".." w nagłówkach h1, h2, h3, itd ... w wersji html po przetworzeniu Markdown (na przykład Bitbucket używa trochę innego schematu spowalniania nagłówków tytułów do id = "slug") jest wygodne, aby nie wymyślać na nowo koła i nie używać biblioteki, która dokonała inżynierii wstecznej tego procesu.

Znalazłem jedną całkiem dobrą bibliotekę do tego zadania o nazwie markdown-toc .

Wydaje mi się, że jest to najlepsze rozwiązanie, ponieważ zawsze instalowałem node'a na moim komputerze.

Wystarczy wykonać NPX Przecena-toc -i file.md .

I wygląda na to, że jest to jedno z bardziej popularnych narzędzi do tego zadania - przynajmniej w ekosystemie node.js.

ls
cat <<EOF >> test.md | tee 
## Table of Contents

<!-- toc -->
- old toc 1
- old toc 2
- old toc 3
<!-- tocstop -->

## abc
This is a b c.

## xyz
This is x y z.
EOF
ls
cat test.md
npx markdown-toc -i test.md
cat test.md

wynik:

wprowadź opis obrazu tutaj

zatrzymuje
źródło