Share
Sie haben also ein fantastisches Design, eine Vorlage oder eine Webanwendung erstellt. Nun zum langweiligen Teil; die Dokumentation. Das Schreiben des Inhalts ist nicht unbedingt so problematisch. Es ist wahrscheinlicher, dass die Hilfedateien erstellt werden, was kostbare Zeit in Anspruch nimmt. Markdown, eine einfache und * wirklich * einfache Formatierungssyntax, kann dies alles für Sie lösen.
Markdown wurde von John Gruber erstellt und ist eine einfache Textformatierungssyntax, die das Erstellen grundlegender HTML-Elemente erheblich vereinfacht.
Anstatt HTML-Tags zu verwenden (die relativ viel Zeit zum Schreiben benötigen), besteht die Aufgabe von Markdown darin, Ihren Denkprozessen aus dem Weg zu gehen und sich auf den Inhalt zu konzentrieren. Da die Syntax so einfach ist, ist beides einfach schreiben und lesen Markdown Später in diesem Lernprogramm werden wir die Schritte zur Erstellung der Themendokumentation mit Markdown durchgehen, um zu sehen, wie leicht und schnell es ist!
Wenn Sie mit dem Schreiben von Markdown vertraut sind, benötigen Sie eine Art Parsing-Anwendung, um Markdown in HTML-Markup zu konvertieren.
Der ursprüngliche Markdown-Konverter wurde in Perl erstellt, aber seitdem sind viele Anwendungen (auf mehreren Plattformen) aufgetaucht. Schauen wir uns einige der Optionen an, sowohl online als auch auf Ihrem eigenen System.
Dingus ist eine Webanwendung, die von den gleichen Personen erstellt wurde, die Ihnen Markdown gebracht haben. Kopieren Sie einfach Ihren Markdown-Code aus einem Texteditor (oder geben Sie ihn in den Textbereich ein), und mit einem Klick auf eine Schaltfläche wird Ihr HTML-Code (sowie eine Vorschau) angezeigt. Nichts Besonderes, aber eine einfache Möglichkeit, Markdown in HTML zu konvertieren.
MarkdownPad ist eine großartige Windows-Anwendung, mit der Sie auf einfache Weise Markdown-Dateien erstellen können (und diese ist kostenlos!). Sie enthält beeindruckende Funktionen wie Instant-HTML-Vorschau, einfache Formatierung mit Tastenkombinationen, CSS-Anpassung, HTML-Export und sogar einen Ablenkungsfreien Modus.
Mou ist eine großartige, kostenlose Mac-Anwendung, mit der Sie Markdown auf einfache und schöne Weise schreiben können. Es verfügt über großartige Funktionen wie benutzerdefiniertes Styling, Tastenkombinationen, Live-HTML, HTML-Export (mit optionalem CSS-Styling), PDF-Export, Diktatunterstützung und mehr. Für dieses Lernprogramm verwenden wir Mou, um die Dokumentation zu diesem Thema zu erstellen.
MarkdownNote ist eine weitere großartige Anwendung zum Schreiben von Markdown. Die iOS-Anwendung ist perfekt, wenn Sie Markdown unterwegs schreiben möchten. Genau wie die anderen Anwendungen, die wir behandelt haben, verfügt es über einige großartige Funktionen, einschließlich Live-HTML-Vorschau, Tastenkombinationen und Dropbox-Synchronisierung.
Bis jetzt haben wir uns mit Markdown befasst und einige Werkzeuge nachgeschlagen, mit denen Sie Markdown schreiben können. Lassen Sie uns nun einige Themendokumentationen für ein nicht existierendes Thema erstellen. Dabei wird erläutert, was Sie normalerweise in die Dokumentation, die Markdown-Syntax und bewährte Vorgehensweisen aufnehmen sollten.
In den folgenden Schritten werden wir uns Markdown ansehen, wie es auf unsere Bedürfnisse zutrifft. Weitere Informationen zur Markdown-Syntax finden Sie unter Markdown: Die Ins und Outs auf Nettuts+.
weil Sie Wenn Sie bereits die Ein- und Ausfahrten Ihrer Design- / Vorlagen- / Webanwendung kennen, kann es ein wenig langweilig sein, die Grundlagen zu behandeln. Eine Dokumentationsdatei soll anderen Benutzern und Käufern als Leitfaden dienen. Häufig sind Installation, Anpassung und einige Optimierungsmaßnahmen erforderlich, über die die Benutzer Bescheid wissen müssen - und es ist Ihre Aufgabe, sie zu schulen. Das möchten wir vielleicht einschließen:
Denken Sie daran, dass die Dokumentation für jeden, der über Grundkenntnisse verfügt, einfach genug ist, aber auch, wie wichtige Dateien geändert werden. Beispielsweise müssen Sie nicht unbedingt zeigen, wie bestimmte CSS-Werte geändert werden, sondern Sie müssen zeigen, wie auf diese Dateien zugegriffen werden kann.
Jetzt ist es Zeit für das lustige Zeug! Öffnen Sie Ihren Markdown-Editor (ich verwende Mou for Mac). Erstellen Sie einen Header für Ihre Dokumentationsdatei:
#Themen-Dokumentation
Überschriftenelemente können einfach geschrieben werden, indem vor dem Inhalt eine bis sechs # eingefügt wird. Im obigen Beispiel haben wir ein # -Zeichen verwendet, um ein h1 Element mit dem Text 'Theme Documentation'. Wenn Sie ein erstellen möchten h3 Element, würden Sie schreiben ### Überschrift 3.
Nun erstellen wir eine horizontale Regel (
***
Ein wichtiger Abschnitt, den Sie Ihrer Dokumentation hinzufügen können, ist ein Informationsabschnitt.
* Themenname: * Theme * Autor: * Suhail Dawood * Erstellt: * 08/08/2012 * Version: * 1.0.1 *** Vielen Dank für Ihren Einkauf! Wenn Sie Fragen zu diesem Thema haben, senden Sie mir eine E-Mail an **[email protected]** oder twittern Sie mich ** @ tutsplus ** ***
Schauen wir uns das HTML-Äquivalent des obigen Markdown-Codes an:
Name des Themas: Thema
Autor: Suhail Dawood
Erstellt: 08/08/2012
Ausführung: 1.0.1
Danke für Ihren Einkauf! Wenn Sie Fragen zu diesem Thema haben, senden Sie mir bitte eine E-Mail an [email protected] oder tweete mich @tutsplus
Ein Blick auf die beiden verschiedenen Quellen zeigt, dass Markdown intuitiver zu verstehen und zu erstellen ist. Anstatt ständig hinzufügen zu müssen <und >Mit Markdown können Sie sich auf den Inhalt konzentrieren. Fügen Sie vor und nach dem Text ein Sternchen hinzu (z. *Hervorgehobener Text*). Hinzufügen, um zu ermutigen zwei Sternchen vor und nach dem Text (z. ** Ermutigter Text **). Um einen Zeilenumbruch hinzuzufügen, fügen Sie einfach zwei Leerzeichen an der Stelle ein, an der Sie einen Zeilenumbruch einfügen möchten.
Nun fügen wir eine Liste mit Inhalten in unsere Markdown-Datei ein:
## Inhaltsverzeichnis 1. HTML-Struktur 2. CSS-Dateien 3. Javascript-Dateien 4. PSD-Dateien 5. Designstile 6. Javascript anpassen 7. CSS anpassen 8. Browserkompatibilität ***
Wenn wir dies in HTML erstellen würden, würde es so aussehen:
Inhaltsverzeichnis
- HTML-Struktur
- CSS-Dateien
- Javascript-Dateien
- PSD-Dateien
- Themenstile
- Javascript anpassen
- CSS anpassen
- Browser-Kompatibilität
Anstatt eine geordnete Liste und separate Listenelemente erstellen zu müssen, schreiben Sie einfach 1. Erstes Element und fahren Sie fort, inkrementierte Elemente hinzuzufügen.
Es ist wichtig, dass Sie Ihren Benutzern die Anordnung der Dateien der Site mitteilen. Da wir eine Dokumentation für ein Design erstellen, sollten Sie beschreiben, wie der HTML-Code des Designs strukturiert ist. Wir können dies mit dem folgenden Code beschreiben:
## 1. HTML-Struktur Die HTML-Struktur für jede Seite sieht wie folgt aus: * Meta * Link zu CSS-Dateien * Kopfzeile * Logo * Soziale Links * Navigation * Hauptinhalt * Inhaltsslider * Artikel * Seitenleiste * Suche * Archiv versenden * Mailingliste * Link zu Javascript Dateien * Javascript ***
Einfach. Um unser Inhaltsverzeichnis zu erstellen, haben wir eine geordnete Liste verwendet. In diesem Abschnitt haben wir verwendet verschachtelt ungeordnete Listen. Um eine ungeordnete Liste in Markdown zu erstellen, fügen Sie einfach ein Sternchen und ein Leerzeichen vor dem Text ein (z. * Gegenstand 1). Um Listenelemente zu verschachteln, ziehen Sie einfach nach innen ein und erstellen Sie ein anderes Listenelement.
Die CSS-Dokumentation ist besonders in Themen sehr wichtig. Es empfiehlt sich, die verschiedenen CSS-Dateien, die im Design enthalten sind, sowie eine kurze Beschreibung jeder Datei zu beschreiben:
## 2. CSS-Dateien In diesem Design gibt es 3 CSS-Dateien: * main.css * colors.css * skeleton.css ##### main.css Diese CSS-Datei ist das Haupt-Stylesheet für das Design. Es enthält alle Werte für die verschiedenen Elemente des Themas und das Standardfarbschema. ##### colors.css Diese CSS-Datei enthält das Styling aller anderen Farbschemata, die im Design enthalten sind. ##### skeleton.css Diese CSS-Datei ermöglicht es dem Design, sich an unterschiedliche Bildschirmgrößen anzupassen. ***
Verwenden Sie Überschriften, um verschiedene Abschnitte der Dokumentationsdatei zu trennen. Eine übersichtlich gestaltete Dokumentationsdatei führt zu weniger verwirrten Benutzern!
Wenn Ihr Theme Javascript-Dateien enthält, sollten Sie diese zumindest in der Dokumentation angeben:
##3. Javascript-Dateien In diesem Thema gibt es 2 Javascript-Dateien: * jquery.js * slider.js ##### jquery.js Dieses Thema verwendet die jQuery-Javascript-Bibliothek. ##### slider.js Der Inhaltsschieberegler im Design wird in dieser Javascript-Datei ausgeführt. Es gibt einige Einstellungen, die angepasst werden können. Dies wird im Abschnitt "Optimierung von Javascript" beschrieben. ***
Stellen Sie sicher, dass Sie nicht nur eine Liste auflisten, sondern auch die Dateien in Ihrem Design beschreiben. Dies macht es dem Benutzer viel einfacher, den Inhalt jeder Datei zu verstehen und zu entscheiden, ob er sich damit beschäftigen möchte oder nicht.
Obwohl es einen eigenen Abschnitt für PSD-Vorlagen in ThemeForest gibt, haben sich viele Autoren dafür entschieden, PSD-Dateien in ihre codierten Vorlagen aufzunehmen, um dem Benutzer die Möglichkeit zu geben, Entwurfsänderungen vorzunehmen. Wenn in Ihrem Design PSD-Dateien enthalten sind, empfiehlt es sich, diese genauso wie alle anderen Dateien zu beschreiben:
## 4. PSD-Dateien Dieses Thema enthält 5 verschiedene PSD-Dateien: 1. homepage.psd 2. about.psd 3. portfolio.psd 4. blog.psd 5. contact.psd Diese PSD-Dateien sind praktisch, wenn Sie Dateien erstellen möchten Änderungen am Design des Themas. Sie können auch ein neues Seitenlayout erstellen, das die vorhandenen PSD-Dateien als Basis für die Arbeit verwendet. ***
Es empfiehlt sich, Ihre PSD-Dateien eindeutig zu benennen (z. B. full-width-page.psd), im Gegensatz zu unklaren Namen (z. B. template-003.psd). Auf diese Weise können Benutzer finden, was sie brauchen, ohne jede Datei öffnen zu müssen.
Höchstwahrscheinlich enthält Ihr Design eine Auswahl von Farbschemata, aus der Ihre Benutzer auswählen können. Wenn dies der Fall ist, stellen Sie sicher, dass Sie die Vorgehensweise beschreiben:
## 5. In diesem Thema enthaltene Themenstile umfassen 10 verschiedene Themenstile: 1. Hell 2. Dunkel 3. Grau 4. Grün 5. Rot 6. Orange 7. Blau 8. Lila 9. Braun 10. Dunkelblau Um diese Stile zu ändern, gehen Sie zu Wählen Sie im WordPress-Backend ** Optionen> Stile ** und wählen Sie den gewünschten Stil aus. ***
Im obigen Beispiel habe ich die verschiedenen Farbschemata aufgelistet, die im Design enthalten sind, und gezeigt, wie sie geändert werden können.
Wenn Ihr Code Javascript-Dateien mit Anpassungsparametern enthält (z. B. ein Slider-Skript), sollten Sie Ihren Benutzern zeigen, wie diese Werte geändert werden können:
## 6. Javascript anpassen Der Inhaltsschieberegler im Design läuft von slider.js ab, und es gibt einige Werte, die geändert werden können, um das Erscheinungsbild des Schiebereglers zu ändern. ##### Ändern von Werten In slider.js können Sie diese Werte ändern:auto: wahr* Boolean: Automatisch animieren, wahr oder falsch *Geschwindigkeit: 1000* Integer: Geschwindigkeit des Übergangs in Millisekunden *Pager: wahr* Boolean: Pager anzeigen, wahr oder falsch *nav: falsch* Boolean: Navigation anzeigen, wahr oder falsch * ***
Der obige Code beschreibt, wie ein Benutzer Werte ändern kann. Um den Code zu formatieren, wickeln Sie den entsprechenden Text in ein Stichworte. Anwendungen wie Mou fügen diesen Elementen in der Live-Vorschau ein Styling hinzu. Sie können den Code auch exportieren, um das Styling beizubehalten. Wir werden später noch ein wenig über den Export Ihrer Dokumentation sprechen.
CSS-Dateien werden sehr oft von einem Benutzer angepasst. Sie werden es sicherlich als hilfreich erachten, wenn Sie der Dokumentation einen Abschnitt hinzufügen, der zeigt, wie auf die CSS-Dateien zugegriffen werden kann, damit sie bearbeitet werden können.
## 7. CSS anpassen Das Design basiert auf einem responsiven Framework, das es ermöglicht, Inhalte auf allen Bildschirmgrößen optimal anzuzeigen. ##### Ändern des CSS Beginnen Sie, indem Sie in das WordPress-Backend gehen, ** Themes> Theme> Quelltext anzeigen **. Wählen Sie die * style.css * -Datei aus, um den Code anzuzeigen und bearbeiten zu können. Hier können Sie Dinge wie Schriftarten, Größen, Farben usw. ändern. ***
Nun, da der Benutzer Zugriff auf die CSS-Datei hat, kann er die gewünschten Änderungen vornehmen.
Es empfiehlt sich, den Benutzer über Probleme mit der Browser-Kompatibilität zu informieren:
## 8. Browserkompatibilität Dieses Thema funktioniert in den folgenden Browsern gut (-) oder großartig (X): ** IE 6-8 ** - ** IE 9 + ** X ** Chrome ** X ** Firefox ** X ** Safari ** X ** Opera ** X ***
Wenn Sie diesen Abschnitt erweitern möchten, können Sie erklären, welche Funktionen des Themas in bestimmten Browsern auftreten.
Um unsere Dokumentation zu vervollständigen, fügen wir einen Abschnitt hinzu, in dem unsere Benutzer wissen, wie sie sich bei weiteren Fragen an uns wenden können. Fügen wir diesen Code hinzu:
Accentsconagua
