2016-03-04 6 views
30

Es gibt viele großartige Möglichkeiten, API-Dokumentation für andere Sprachen zu generieren, aber ich muss noch eine Lösung für meine JavaScript-API finden, die ich auf GitHub Pages hosten möchte. Es scheint, dass ich JSDoc3 verwenden kann, aber ich würde ein benutzerdefiniertes Plugin erstellen müssen, das Jekyll Markup ausgibt.Wie kann ich JavaScript-API-Dokumentation für GitHub generieren Seiten

Ich möchte auch die Code-URLs mit GitHub selbst verknüpfen. Ich habe jsdoc-githubify gefunden, die die Ausgabe in den Munge-Modus versetzen, um die Links zu ändern, aber ich würde eine einfachere Option bevorzugen, bei der ich mehr Kontrolle habe.

Muss ich mein eigenes JSDoc-Plugin erstellen, oder gibt es eine bessere Lösung, die ich verpasst habe? Was benutzen Leute dafür?

+0

i ein wenig herum sah, und ich denke, die Ausgabe html Schaben vorwärts der einfachste Weg ist. – dandavis

+0

Ich entschied mich schließlich für die Verwendung von JSDox, die sehr sauberen Abschlag erzeugt, kombiniert mit https://github.com/shinnn/gulp-gh-pages. Sie können sehen, wie ich es hier implementiert https://github.com/edx/edx-ui-toolkit/pull/60, und das Endergebnis hier: http://ui-toolkit.edx.org. Danke für alle Vorschläge. –

Antwort

5

Ich denke, das ist das, was Sie suchen: http://jsdox.org/

jsdox ein einfacher jsdoc 3-Generator ist. Es ruft Dokumentations-Tags, die auf einer Untermenge von jsdoc 3 basieren, aus Ihren Javascript-Dateien ab und generiert Abschriften-Dateien.

+0

Danke, Xavi. Ich schaute mir das kurz an, aber es scheint ein bisschen begrenzt für meinen Geschmack. Ich hatte gehofft, etwas zu erzeugen, das wie die React-Dokumentation aussieht: https://facebook.github.io/react/docs/top-level-api.html. Ich bin mir nicht sicher, welche Werkzeuge sie verwenden. –

+0

Trotz meines vorherigen Kommentars entschied ich mich schließlich für die Verwendung von JSDox *, weil * der erzielte Abschlag so sauber war, dass er leicht zu überdecken war. Sie können sehen, wie ich es hier implementiert https://github.com/edx/edx-ui-toolkit/pull/60, und das Endergebnis hier: http://ui-toolkit.edx.org/. Danke Xavi! –

19

Wenn Sie mit Grunt vertraut sind, können Sie leicht .html docs mit grunt-jsdoc erzeugen.

  • Dokumentieren Sie Ihren Code mit JSDoc.
  • Verwenden Sie grunt-jsdoc, die intern jsdoc verwendet, um Codedokumentation zu generieren.
  • Dies wird auch den Quellcode in HTML ausgeben und in der Dokumentation wird es Links zu Codezeilen für jedes öffentlich zugängliche Mitglied enthalten.
  • Sie können auch Kontrolle über die Links, indem Sie einfach die @link Direktive von JSDoc:
    See {@link https://github.com/onury|My GitHub Profile}.

Siehe ein Gruntfile-Beispiel unten.
Beachten Sie, dass dies alle JSDoc CLI options unterstützt.

grunt.initConfig({ 
    'jsdoc': { 
     dist: { 
      src: ['./src/core/mylib.js'], 
      options: { 
       destination: './doc/html' 
      } 
     } 
    } 
}); 

Und Sie führen diese Aufgabe mit grunt jsdoc. Oder Sie können das Plugin grunt-contrib-watch hinzufügen, um jedes Mal, wenn sich die Datei ändert, automatisch auszuführen.

Vorlagen und Styling:

  • Sie können jederzeit mit der CSS-Datei spielen und es für Ihren eigenen Geschmack zu überschreiben.
  • Oder Sie können docstrap Vorlage für JSDoc3 basierend auf Bootstrap verwenden, die mit grunt-jsdoc verwendet werden können.

Mit Jekyll für die Dokumentation:

Obwohl es nativ unterstützt wird, müssen Sie nicht Jekyll für GitHub Pages verwenden. Jekyll ist eigentlich für statische Webseiten oder Blogs gedacht. Aber es kann Markdown-Dateien nehmen.Also, ich würde zuerst github aromatisierte Markdown-Dateien aus dem Code über jsdoc-to-markdown erstellen (es gibt auch ein Grunt-Plugin grunt-jsdoc2md) dann configure ein Jekyll-Projekt entsprechend.

Beachten Sie jedoch, dass Sie Jekyll installieren und konfigurieren müssen. Hier ist eine gute article und eine sample project um mit zu beginnen.

UPDATE:

Danach beantworten, begann ich an einem Werkzeug arbeiten leicht für die Gebäudedokumentation. Jetzt ist es reif genug, hier zu posten und zu sehen, ob es dir gefällt. Es heißt Docma.

Key Docma Funktionen sind; Es kann beide JSDoc und Markdown Dateien in HTML-Dokumentation analysieren, generiert eine Web-App, extrem konfigurierbar und funktioniert hervorragend mit Github Pages.

Siehe Docma documentation here, die auch mit Docma erstellt und auf GitHub Pages gehostet wird.

Ein Beispiel-Screenshot von Docma erzeugt SPA:

enter image description here

0

Obwohl ich es eine Weile nicht mehr aktualisiert, https://github.com/punkave/dox-foundation ist eine weitere Option. Es erzeugt nur HTML-Dateien, die Sie in Ihren Zweig gh-pages übertragen können.

+0

Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz zur Verfügung zu stellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. - [Aus Bewertung] (/ review/low-quality-posts/18494580) – Marc

1

Ich bin ein Fan von Swagger: https://github.com/swagger-api/swagger-ui & http://swagger.io/.

Es enthält mehr als nur API-Dokumentation, vielleicht ist es für Sie übertrieben, aber es macht eine schöne Arbeit der Dokumentation von APIs.

+0

Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz zur Verfügung zu stellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. - [Aus Bewertung] (/ review/low-quality-posts/18494577) –

2

JSDox ist genau das, was Sie suchen.

+2

Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz zur Verfügung zu stellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. - [Aus Bewertung] (/ review/low-quality-posts/18494575) –

0

versucht, es

  • In GitHub Seiten zu vereinfachen API-Dokumentation zu erzeugen, die Jekyll Markup ausgibt.

    Escape Flüssigkeit Vorlage mit {% raw %} Tag.

    {% raw %} 
        I want to be {{escaped}}. 
    {% endraw %} 
    

    ref: Github/.com/Shopify/flüssig/wiki/Flüssig-for-Designers # raw

    ref: jekyllrb/.com/docs/Github-Seiten/# Projekt-Seiten

    Erstellen Sie zwei Zweig, einen für Master eins für Gh-Seiten, Master-Zweig enthalten Ihre .md-Datei und gh-Seiten enthalten statisch generierte .html-Datei. Im lokalen Computer: $ jekyll build im aktuellen Projektordner wird in ./_site generiert.

    auf GitHub hochladen.

    jekyll

    • Master-Zweig: github/.com/jekyll/jekyll
    • gh-Seiten Zweig: github/.com/jekyll/jekyll/Baum/gh-pages

    fb/reagieren

    • master-Zweig: github/.com/facebook/reagieren/bearbeiten/Master/docs/docs/ref-01-top -level-api.md
    • gh-Seiten Zweig: Github/.com/facebook/reagieren/Blob/gh-Seiten/docs/Top-Level-api.html
  • Seiten URLs verweisen auf das GitHub-Dokument selbst.

    In _layouts Ordnern (HTML-Vorlage) Link hinzufügen "Edit on GitHub" on docs pages dies blog post about it