Share
Så du har opprettet et fantastisk tema, mal eller webapplikasjon. Nå for den kjedelige delen; dokumentasjonen. Skrive innholdet vil ikke nødvendigvis være så problematisk, det er mer sannsynlig å lage hjelpefiler som vil ta opp dyrebar tid. Markdown, en lett og * veldig * enkel formatering syntaks kan løse alt det for deg.
Markdown er laget av John Gruber, og er en vanlig tekstformatterings syntaks som gjør det enklere å lage grunnleggende HTML-elementer.
I stedet for å bruke HTML-koder (som relativt sett tar mye tid til å skrive) Markdowns jobb er å komme seg ut av tanken din, slik at du kan fokusere på innhold. Fordi syntaksen er så grunnleggende, er det enkelt å begge skrive og lese Markdown. Senere i denne opplæringen, går vi gjennom trinnene for å lage tema dokumentasjon ved hjelp av Markdown, så du får se hvor lett og rask det er!
Når du har fått tak i å skrive Markdown, trenger du en slags parsing-applikasjon for å konvertere Markdown til HTML-oppgradering.
Den opprinnelige Markdown-omformeren ble opprettet i Perl, men siden da har mange applikasjoner (på tvers av flere plattformer) poppet opp. La oss se på noen av alternativene, både online og kjøre på ditt eget system.
Dingus er et webprogram opprettet av de samme personene som tok deg med Markdown. Bare kopier og lim inn Markdown-koden fra en tekstredigerer (eller skriv den inn i tekstområdet), og med et klikk på en knapp vises HTML-koden din (så vel som en forhåndsvisning). Ikke noe fancy, men en enkel måte å konvertere Markdown til HTML.
MarkdownPad er et flott Windows-program som lar deg enkelt lage Markdown-filer (og det er gratis!) Den inneholder fantastiske funksjoner som forhåndsvisning av HTML, enkel formatering med tastatursnarveier, CSS-tilpasning, HTML-eksport og til og med en "distraksjon fri" modus.
Mou er en flott, gratis Mac-applikasjon som lar deg skrive Markdown på en enkel og vakker måte. Den har flotte funksjoner som tilpasset styling, hurtigtastene, live HTML, HTML-eksport (med valgfri CSS-styling), PDF-eksport, diktatstøtte og mer. For denne opplæringen skal vi bruke Mou til å lage dokumentets tema.
MarkdownNote er et annet flott program for å skrive Markdown, og iOS-programmet er perfekt hvis du vil skrive Markdown på farten. På samme måte som de andre programmene vi har dekket, har den noen flotte funksjoner, inkludert live HTML forhåndsvisning, hurtigtastene og synkronisering av Dropbox.
Så langt har vi dekket hva Markdown er og så opp noen verktøy du kan bruke til å skrive Markdown. La oss nå lage temadokumentasjon for et ikke-eksisterende tema som dekker hva du vanligvis bør inkludere i dokumentasjon, Markdown-syntaks og beste praksis.
Under de følgende trinnene ser vi på Markdown som det gjelder våre behov. For en mer grundig titt på Markdown-syntaksen, sjekk Markdown: The Ins og Outs over på Nettuts+.
Fordi du kjenner allerede inn og ut av tema / mal / webapplikasjon, kan det virke litt kjedelig å dekke det grunnleggende. Formålet med en dokumentasjonsfil er å tjene som veiledning til andre brukere og kjøpere. Ofte er det installasjon, tilpasning, og noen tweaking involvert som brukere trenger å vite om - og det er din jobb å utdanne dem. Dette er hva vi kanskje vil inkludere:
Husk at dokumentasjonen skal være enkel nok for alle med grunnleggende kunnskap å forstå, men også dekke hvordan du kan endre viktige filer. For eksempel må du ikke nødvendigvis vise hvordan du endrer bestemte CSS-verdier, men du bør vise hvordan du får tilgang til disse filene.
Nå er det tid for de morsomme tingene! Gå videre og åpne Markdown-editoren din (jeg bruker Mou for Mac). Opprett et overskrift for dokumentasjonsfilen din:
#Tema dokumentasjon
Overskriftselementer kan skrives ved å legge til en til seks # s foran innholdet. I eksemplet ovenfor brukte vi et # tegn for å opprette en h1 element med teksten 'Tema dokumentasjon'. Hvis du vil opprette en h3 element, du vil skrive ### Overskrift 3.
La oss nå lage en horisontal regel (
***
En viktig del å legge til i dokumentasjonen din er en informasjonsseksjon.
* Tema Navn: * Tema * Forfatter: * Suhail Dawood * Opprettet: * 08.08.2012 * Versjon: * 1.0.1 *** Takk for ditt kjøp! Hvis du har spørsmål om dette temaet, kan du sende meg en e-post på **[email protected]** eller tweet meg ** @ tutsplus ** ***
La oss ta en titt på HTML-ekvivalenten til den ovennevnte Markdown-koden:
Tema Navn: Tema
Forfatter: Suhail Dawood
laget: 08.08.2012
Versjon: 1.0.1
Takk for kjøpet! Hvis du har spørsmål om dette temaet, kan du sende meg en e-post på [email protected] eller tweet meg @tutsplus
Bare fra å se på de to forskjellige kildene, kan du umiddelbart se at Markdown er mye mer intuitivt å forstå og skape. I stedet for stadig å legge til <s og >'s, Markdown lar deg fokusere på innholdet. For å understreke, legg til en stjerne før og etter teksten (f.eks. * Emphasized Text *). For å embolden, legg til to asterisker før og etter teksten (f.eks. ** Emboldened Text **). For å legge til en linjeskift, legg ganske enkelt to mellomrom til det punktet du vil sette inn en linjeskift.
La oss nå legge til en liste over innhold i vår Markdown-fil:
## Innholdsfortegnelse 1. HTML-struktur 2. CSS-filer 3. Javascript-filer 4. PSD-filer 5. Temaformater 6. Tweaking Javascript 7. Tweaking CSS 8. Browser Kompatibilitet ***
Hvis vi skulle lage dette i HTML, så ser det ut som det ser ut:
Innholdsfortegnelse
- HTML-struktur
- CSS-filer
- Javascript-filer
- PSD-filer
- Tema stiler
- Tweaking Javascript
- Tweaking CSS
- Nettleserkompatibilitet
I stedet for å måtte opprette en bestilt liste og separate listeposter, skriv bare 1. Første element og fortsett å legge til inkrementerte elementer.
Det er viktig å la brukerne hvordan nettstedets filer legges ut. Siden vi lager dokumentasjon for et tema, bør vi skissere hvordan HTML-koden for temaet er strukturert. Vi kan skissere dette med følgende kode:
##1. HTML-struktur HTML-strukturen for hver side er som følger: * Meta * Link til CSS-filer * Overskrift * Logo * Sosiale linker * Navigasjon * Hovedinnhold * Innholdsoversikt * Artikler * Sidebar * Søk * Postarkiver * Postliste * Link til Javascript Filer * Javascript ***
Enkel. For å lage innholdsfortegnelsen brukte vi en bestilt liste. I denne delen brukte vi nestet uordnede lister. For å lage en uordnet liste i Markdown, legg ganske enkelt til en stjerne og et mellomrom før teksten (f.eks. * Element 1). For å hekke lister, bare innrykk innover og opprett et annet listeelement.
Spesielt i temaer er CSS dokumentasjon veldig viktig. Det er en god idé å skissere de forskjellige CSS-filene som er inkludert i temaet, samt en kort beskrivelse av hver fil:
## 2. CSS-filer Det er 3 CSS-filer i dette temaet: * main.css * colors.css * skeleton.css ##### main.css Denne CSS-filen er det viktigste stilarket for temaet. Den inneholder alle verdiene for de ulike elementene i temaet og standardfargeskjemaet. ##### colors.css Denne CSS-filen inneholder styling av alle de andre fargeskjemaene som er inkludert i temaet. ##### skeleton.css Denne CSS-filen lar temaet være responsivt, tilpasse seg forskjellige skjermstørrelser. ***
Sørg for å bruke overskrifter for å skille forskjellige deler av dokumentasjonsfilen. En pent utlagt dokumentasjonsfil vil føre til færre forvirrede brukere!
Hvis temaet ditt inneholder Javascript-filer, er det en god ide å i det minste beskrive dem i dokumentasjonen:
## 3. Javascript-filer Det er 2 Javascript-filer i dette temaet: * jquery.js * slider.js ##### jquery.js Dette temaet bruker jQuery Javascript-biblioteket. ##### slider.js Innholdskyteren i temaet kjører på denne Javascript-filen. Det er noen innstillinger som kan tweaked, dette vil bli dekket i delen Tweaking Javascript. ***
Pass på at du ikke bare liste, men beskriv filene i temaet ditt. Dette vil gjøre det mye lettere for brukeren å forstå innholdet i hver fil, og avgjøre om de vil rote med det.
Selv om det er en egen seksjon for PSD-maler på ThemeForest, bestemte mange forfattere å inkludere PSD-filer med kodede maler for å gi brukeren friheten til å gjøre designendringer. Hvis temaet ditt inneholder PSD-filer, kan det være lurt å skissere dem akkurat som vi har gjort med alle de andre filene:
## 4. PSD-filer Inkludert i dette temaet er 5 forskjellige PSD-filer: 1. homepage.psd 2. about.psd 3. portfolio.psd 4. blog.psd 5. contact.psd Disse PSD-filene vil være nyttig hvis du vil gjøre noen endrer seg til temaets design. Du kan også opprette et nytt sidelayout ved hjelp av eksisterende PSD-filer som en base for å jobbe med. ***
Det er best å kjenne dine PSD-filer tydelig (for eksempel full bredde-side.psd) i motsetning til vage navn (for eksempel mal-003.psd). På denne måten kan brukerne finne det de trenger uten å måtte åpne hver fil opp.
Mest sannsynlig vil temaet inneholde et utvalg av fargevalg som brukerne kan velge mellom. Hvis dette er tilfelle, må du sørge for at du skisserer hvordan dette gjøres:
## 5. Tema stiler Inkludert med dette temaet er 10 forskjellige temastiler: 1. Lys 2. Mørk 3. Grå 4. Grønn 5. Rød 6. Oransje 7. Blå 8. Lilla 9. Brun 10. Mørkblå For å endre disse stilene, gå til WordPress-backend, velg ** Valg> Stiler ** og velg stilen du vil ha. ***
I eksemplet ovenfor har jeg listet opp de forskjellige fargevalgene som er inkludert i temaet, og viste hvordan man skal gjøre om å endre dem.
Hvis koden din inneholder JavaScript-filer som har tilpasningsparametere (for eksempel et skyvekontroll), vil det være lurt å vise brukerne hvordan du kan manipulere disse verdiene:
## 6. Tweaking Javascript Innholdsskyveren i temaet går av slider.js, og det er et par verdier som kan endres for å endre utseendet på glideren. ##### Endre verdier I slider.js kan du endre disse verdiene:auto: true* Boolean: Animer automatisk, sann eller falsk *fart: 1000* Integer: Overgangshastighet, i millisekunder *personsøker: sant* Boolean: Vis personsøker, sann eller falsk *nav: false* Boolsk: Vis navigasjon, ekte eller falsk * ***
Ovennevnte kode beskriver hvordan en bruker kan endre verdier. For å stil kode, pakk den aktuelle teksten inn tags. Programmer som Mou legger til styling til disse elementene i live forhåndsvisning, og du kan også eksportere koden for å holde stylingen. Vi skal snakke litt om å eksportere dokumentasjonen din senere.
CSS-filer er ofte tilpasset av en bruker. De vil sikkert vurdere det nyttig hvis du legger til en del i dokumentasjonen som viser hvordan du får tilgang til CSS-filene, slik at de kan redigere dem.
## 7. Tweaking CSS Temaet bygger på et responsivt rammeverk som gjør at innholdet kan ses optimalt på alle skjermstørrelser. ##### Endre CSS Start ved å gå inn i WordPress-backend, ** Temaer> Tema> Vis kilde **. Velg * style.css * -filen for å vise og ha muligheten til å redigere koden. Her kan du endre ting som fonter, størrelser, farger, etc. ***
Nå som brukeren har tilgang til CSS-filen, kan de gjøre de endringene de ønsker.
Det er en god ide å varsle brukeren om eventuelle problemer med nettleserens kompatibilitet:
## 8. Nettleserkompatibilitet Dette temaet fungerer bra (-) eller flott (X) i følgende nettlesere: ** IE 6-8 ** - ** IE 9 + ** X ** Chrome ** X ** Firefox ** X ** Safari ** X ** Opera ** X ***
Hvis du ønsker å utvide på denne delen, kan du forklare hvilke funksjoner temaet lider i enkelte nettlesere.
For å fullføre dokumentasjonen legger vi til en seksjon for å la brukerne vite hvordan du kontakter oss hvis de har ytterligere spørsmål. La oss legge til denne koden:
Accentsconagua
