Share
Deci, ați creat o temă minunată, un șablon sau o aplicație web. Acum pentru partea obositoare; documentația. Scrierea conținutului nu va fi neapărat problematică, este mai probabil să creați fișiere de ajutor care să ia timp prețios. Markdown, o sintaxă de formatare ușoară și * într-adevăr simplă, poate rezolva toate acestea pentru dvs..
Creat de John Gruber, Markdown este o sintaxă de formatare a textului simplu, ceea ce face mult mai ușor crearea elementelor HTML de bază.
În loc să utilizați etichete HTML (care, relativ vorbind, durează mult pentru a scrie), sarcina lui Markdown este să vă îndepărteze de la modul de gândire, permițându-vă să vă concentrați asupra conținutului. Deoarece sintaxa este atât de fundamentală, este ușor pentru ambele scrie și citit Markdown. Mai târziu, în acest tutorial, vom parcurge pașii de creare a documentației tematice folosind Markdown, astfel veți vedea cât de ușor și rapid este!
Odată ce te-ai ocupat de scrierea lui Markdown, ai nevoie de un fel de aplicație de analiză pentru a-ți transforma Markdown în marcaj HTML.
Convertorul original Markdown a fost creat în Perl, dar de atunci au apărut multe aplicații (pe mai multe platforme). Să ne uităm la câteva opțiuni, atât online, cât și pe propriul dvs. sistem.
Dingus este o aplicație web creată de aceiași oameni care v-au adus Markdown. Trebuie doar să copiați și să inserați codul Markdown de la un editor de text (sau să îl introduceți în zona de text) și cu un clic pe un buton, va apărea codul dvs. HTML (precum și o previzualizare). Nimic fantezist, ci o modalitate simplă de a converti Markdown în HTML.
MarkdownPad este o aplicație Windows excelentă care vă permite să creați cu ușurință fișierele Markdown (și este gratuit!) Acesta include caracteristici minunate cum ar fi previzualizarea instant HTML, formatare ușoară cu comenzi rapide de la tastatură, personalizare CSS, export HTML și chiar și un mod "distraction free".
Mou este o aplicație Mac excelentă, gratuită, care vă permite să scrieți Markdown într-o manieră simplă și frumoasă. Are caracteristici excelente, cum ar fi stil personalizat, comenzi rapide de la tastatură, HTML live, export HTML (cu stil CSS opțional), export PDF, suport dictare și multe altele. Pentru acest tutorial, vom folosi Mou pentru a crea documentația temei noastre.
MarkdownNote este o altă aplicație excelentă pentru a scrie Markdown, iar aplicația iOS este perfectă dacă doriți să scrieți Markdown în deplasare. La fel ca și celelalte aplicații pe care le-am acoperit, au câteva caracteristici extraordinare, inclusiv previzualizarea HTML live, comenzile rapide de la tastatură și sincronizarea Dropbox.
Până acum, am acoperit ceea ce este Markdown și căutam niște instrumente pe care le poți folosi pentru a scrie Markdown. Acum, să creăm o documentație tematică pentru o temă inexistentă, care să includă ceea ce ar trebui să includeți de regulă în documentație, sintaxa Markdown și cele mai bune practici.
În următorii pași vom examina Markdown, pe măsură ce se aplică nevoilor noastre. Pentru o privire mai detaliată la sintaxa Markdown, verificați Markdown: Ins și Outs peste Nettuts+.
pentru că tu deja cunoașteți temele / șabloanele / aplicațiile web din interiorul și out-ul dvs., s-ar părea puțin cam plictisitor să acoperiți elementele de bază. Scopul unui dosar de documentare este de a servi drept ghid pentru alți utilizatori și cumpărători. Deseori, există instalarea, personalizarea și unele modificări implicate pe care utilizatorii vor trebui să știe despre - și este treaba dvs. să le educați. Aș dori să includeți:
Amintiți-vă că documentația ar trebui să fie suficient de simplă pentru oricine care are cunoștințe de bază să înțeleagă, dar să acopere și modul de schimbare a fișierelor importante. De exemplu, nu trebuie neapărat să arătați cum să modificați valorile CSS specifice, dar ar trebui să arătați cum să accesați aceste fișiere.
Acum este momentul pentru lucrurile distractive! Continuați și deschideți editorul Markdown (voi folosi Mou pentru Mac). Creați un antet pentru fișierul de documentare:
# Documentația tematică
Elementele de titlu pot fi scrise pur și simplu adăugând unul până la șase # în fața conținutului. În exemplul de mai sus, am folosit un semn # pentru a crea un h1 element cu textul "Documentație tematică". Dacă doriți să creați un h3 element, ați scrie ### Rubrica 3.
Acum, să creăm o regulă orizontală (
***
O secțiune importantă care trebuie adăugată în documentația dvs. este o secțiune de informații.
* Tema Nume: * Tema * Autor: * Suhail Dawood * Creat: * 08/08/2012 * Versiune: * 1.0.1 *** Vă mulțumim pentru achiziționarea dvs.! Dacă aveți întrebări cu privire la această temă, nu ezitați să trimiteți un e-mail la adresa de e-mail **@mail.com sau tweet me ** @ tutsplus ** ***
Să aruncăm o privire la echivalentul HTML al codului Markdown de mai sus:
Nume temă: Temă
Autor: Suhail Dawood
Creată: 08/08/2012
Versiune: 1.0.1
Multumesc pentru cumparaturile facute! Dacă aveți întrebări despre această temă, nu ezitați să trimiteți un e-mail la adresa mea [email protected] sau tweet-ma @tutsplus
Doar din examinarea celor două surse diferite, puteți vedea imediat că Markdown este mult mai intuitiv de înțeles și de creat. În loc să adăugați în mod constant <și >'s, Markdown vă permite să vă concentrați asupra conținutului. Pentru a accentua, adăugați un asterisc înainte și după text (de ex. * Text accentuat *). Pentru a încuraja, adăugați Două asteriscurile înainte și după text (de ex. ** Text încorporat **). Pentru a adăuga o pauză de linie, adăugați pur și simplu două spații în punctul în care doriți să introduceți o pauză de linie.
Acum, să adăugăm o listă de conținut în fișierul Markdown:
## Cuprins 1. Structura HTML 2. Fișiere CSS 3. Fișiere Javascript 4. Fișiere PSD 5. Stiluri tematice 6. Tweaking Javascript 7. Tweaking CSS 8. Compatibilitate browser ***
Dacă am fi creat acest lucru în HTML, iată cum ar apărea:
Cuprins
- Structura HTML
- Fișiere CSS
- Fișiere Javascript
- Dosare PSD
- Tematica stilurilor
- Optimizați Javascript
- CSS tweaking
- Compatibilitatea browserului
În loc să creați o listă ordonată și elemente separate de listă, scrieți pur și simplu 1. Primul element și continuați să adăugați elemente incrementate.
Este important să permiteți utilizatorilor să afle cum sunt configurate fișierele site-ului. Deoarece creăm documentația pentru o temă, ar trebui să subliniem modul în care codul HTML al temei este structurat. Putem descrie acest lucru cu următorul cod:
## 1. Structura HTML Structura HTML pentru fiecare pagină este următoarea: * Meta * Link la fișierele CSS * Header * Logo * Link-uri sociale * Navigare * Conținut principal * Content Slider * Articole * Bara laterală * Căutați * Arhive postare * Listă de adrese * Link către Javascript Fișiere * Javascript ***
Simplu. Pentru a crea cuprinsul nostru, am folosit o listă ordonată. În această secțiune, am folosit cuibărit liste neordonate. Pentru a crea o listă neordonată în Markdown, trebuie doar să adăugați un asterisc și un spațiu înainte de text (de ex. * Punctul 1). Pentru a aranja elemente de listă, plasați-o în interior și creați un alt element din listă.
În special în teme, documentația CSS este foarte importantă. Este o idee bună să subliniem diferitele fișiere CSS care sunt incluse în temă, precum și o scurtă descriere a fiecărui fișier:
## 2. Fișiere CSS Există 3 fișiere CSS în această temă: * main.css * colors.css * skeleton.css ##### main.css Acest fișier CSS este foaia de stil principală pentru temă. Acesta conține toate valorile pentru diferitele elemente ale temei și schema de culori implicită. ##### colors.css Acest fișier CSS deține stilul tuturor celorlalte scheme de culori care sunt incluse în temă. ##### skeleton.css Acest fișier CSS permite temei să răspundă, adaptându-se dimensiunilor diferite ale ecranului. ***
Asigurați-vă că utilizați titlurile pentru a separa diferite secțiuni ale fișierului de documentație. Un fișier de documentare bine întocmit va conduce la mai puțini utilizatori confuzi!
Dacă tema dvs. include fișiere Javascript, este o idee bună să le prezentați cel puțin în documentație:
## 3. Fișiere Javascript Există 2 fișiere Javascript în această temă: * jquery.js * slider.js ##### jquery.js Această temă utilizează biblioteca jQuery Javascript. ##### slider.js Glisorul de conținut din temă rulează pe acest fișier Javascript. Există câteva setări care pot fi modificate, aceasta va fi inclusă în secțiunea "Tweaking Javascript". ***
Asigurați-vă că nu numai listați, ci descrieți fișierele din tema dvs. Acest lucru va face mult mai ușor pentru utilizatori să înțeleagă conținutul fiecărui fișier și să decidă dacă doresc sau nu să se amestece cu el.
Chiar dacă există o secțiune separată pentru șabloanele PSD pe ThemeForest, mulți autori au decis să includă fișierele PSD cu șabloanele codate pentru a permite utilizatorului libertatea de a face schimbări de proiectare. Dacă tema dvs. include fișierele PSD, ar fi o idee bună să le schițați la fel cum am făcut cu toate celelalte fișiere:
## 4. Fișierele PSD incluse în această temă sunt 5 fișiere PSD diferite: 1. homepage.psd 2. about.psd 3. portfolio.psd 4. blog.psd 5. contact.psd Aceste fișiere PSD vor fi la îndemână dacă doriți să faceți orice modificări ale designului temei. De asemenea, puteți crea un aspect nou al paginii utilizând fișierele PSD existente ca bază pentru care să lucrați. ***
Este cea mai bună metodă de a numi în mod clar fișierele dvs. PSD (de exemplu, full-width-page.psd), spre deosebire de numele vagi (de exemplu, șablon-003.psd). În acest fel, utilizatorii pot găsi ceea ce au nevoie fără a fi nevoiți să deschidă fiecare fișier.
Cel mai probabil, tema dvs. va include o selecție de scheme de culori pentru utilizatorii dvs. de a alege de la. În acest caz, asigurați-vă că descrieți cum se face acest lucru:
## 5. Tematici Stiluri incluse în această temă sunt 10 stiluri tematice diferite: 1. Lumina 2. Dark 3. Gray 4. Green 5. Red 6. Orange 7. Albastru 8. Purple 9. Brown 10. Dark Blue Pentru a schimba aceste stiluri, du-te la backendul WordPress, selectați ** Opțiuni> Stiluri ** și selectați stilul dorit. ***
În exemplul de mai sus, am enumerat diferitele scheme de culori incluse în temă și au arătat cum să le schimbați.
Dacă codul dvs. include fișiere Javascript care au parametri de personalizare (de exemplu, un slider script), ar fi o idee bună să le arătați utilizatorilor cum să manipuleze aceste valori:
## 6. Tweaking Javascript Glisorul de conținut din temă rulează pe slider.js și există câteva valori care pot fi modificate pentru a modifica aspectul cursorului. ##### Schimbarea valorilor În slider.js, puteți modifica aceste valori:auto: adevărat* Boolean: Animați automat, adevărat sau fals *viteza: 1000* Integer: Viteza tranziției, în milisecunde *pager: adevărat* Boolean: Afișați pager, adevărat sau fals *nav: fals* Boolean: Afișați navigația, adevărată sau falsă * ***
Codul de mai sus prezintă modul în care un utilizator poate modifica valorile. Pentru codul de stil, împachetați textul relevant înăuntru Etichete. Aplicații ca Mou adăugați stil pentru aceste elemente în previzualizarea live și puteți exporta și codul pentru a păstra stilul. Vom vorbi puțin despre exportul documentației dvs. mai târziu.
Fișierele CSS sunt foarte des personalizate de un utilizator. Ei vor considera cu siguranță că este util dacă adăugați o secțiune la documentația care arată modul de accesare a fișierelor CSS, astfel încât să le poată edita.
## 7. Tweaking CSS Tema este construită pe un cadru receptiv, care permite ca conținutul să fie văzut optim în toate dimensiunile ecranului. ##### Schimbarea CSS-ului Începeți prin a intra în backend-ul WordPress, ** Teme> Tema> Vizualizare sursă **. Selectați fișierul * style.css * pentru a vizualiza și de a avea posibilitatea de a edita codul. Aici puteți schimba lucruri precum fonturile, dimensiunile, culorile etc. ***
Acum că utilizatorul are acces la fișierul CSS, ei pot face modificările dorite.
Este o idee bună să informați utilizatorul despre orice probleme legate de compatibilitatea browserului:
## 8. Compatibilitatea cu browserul Această temă funcționează bine (-) sau minunat (X) în următoarele browsere: ** IE 6-8 ** - ** IE 9 + ** X ** Chrome ** X ** Firefox ** X ** Safari ** X ** Opera ** X ***
Dacă doriți să extindeți această secțiune, puteți explica ce caracteristici ale temei suferă în anumite browsere.
Pentru a completa documentația noastră, vom adăuga o secțiune pentru a permite utilizatorilor noștri să știe cum să ne contacteze dacă au întrebări suplimentare. Să adăugăm acest cod de cod:
Accentsconagua
