Share
Så du har skapat ett fantastiskt tema, mall eller webbapplikation. Nu för den tråkiga delen; dokumentationen. Att skriva innehållet blir inte nödvändigtvis så problematiskt, det är mer troligt att du skapar hjälpfilerna som tar upp dyrbar tid. Markdown, en lätt och * verkligen * enkel formateringssyntax kan lösa allt det för dig.
Markdown är skapad av John Gruber och är en vanlig textformateringssyntax som gör det lättare att skapa grundläggande HTML-element.
I stället för att använda HTML-taggar (som relativt sett tar mycket tid att skriva) Markdowns jobb är att komma ur vägen för din tankeprocess, så att du kan fokusera på innehåll. Eftersom syntaxen är så grundläggande är det enkelt att båda skriva och läsa Prissänkning. Senare i den här handledningen går vi igenom stegen för att skapa temadokumentation med Markdown, så du får se hur lätt och snabb det är!
När du har tagit tag i skrivandet Markdown behöver du någon form av analyseringsprogram för att konvertera din Markdown till HTML-markup.
Den ursprungliga Markdown-omvandlaren skapades i Perl, men sedan dess har många applikationer (över flera plattformar) blivit uppåt. Låt oss titta på några av alternativen, både online och köra på ditt eget system.
Dingus är en webbapplikation skapad av samma personer som tog dig med Markdown. Kopiera och klistra in din Markdown-kod enkelt från en textredigerare (eller ange den i textområdet) och med ett klick av en knapp visas din HTML-kod (liksom en förhandsgranskning). Inget snyggt, men ett enkelt sätt att konvertera Markdown till HTML.
MarkdownPad är ett bra Windows-program som gör att du enkelt kan skapa Markdown-filer (och det är gratis!) Det innehåller fantastiska funktioner som snabb HTML-förhandsvisning, enkel formatering med tangentbordsgenvägar, CSS-anpassning, HTML-export och till och med ett "distraktionsfritt" läge.
Mou är en bra, gratis Mac-applikation som låter dig skriva Markdown på ett enkelt och vackert sätt. Det har bra funktioner som anpassad styling, tangentbordsgenvägar, live HTML, HTML-export (med valfri CSS-styling), PDF-export, diktatstöd och mycket mer. För denna handledning kommer vi att använda Mou för att skapa vårt temas dokumentation.
MarkdownNote är en annan bra applikation för att skriva Markdown, och iOS-programmet är perfekt om du vill skriva Markdown på språng. Precis som de andra programmen vi har täckt har det några bra funktioner, inklusive live HTML-förhandsgranskning, tangentbordsgenvägar och Dropbox-synkronisering.
Hittills har vi täckt vad Markdown är och tittade upp några verktyg du kan använda för att skriva Markdown. Låt oss nu skapa temadokumentation för ett obefintligt tema som täcker vad du normalt ska inkludera i dokumentation, Markdown-syntaxen och bästa praxis.
Under följande steg ser vi på Markdown som det gäller våra behov. För en mer djupgående titt på Markdown-syntaxen, kolla Markdown: Ins och Outs över på Nettuts+.
Därför att du vet redan in och ut på temat / mall / webbapplikation, kan det verka lite tråkigt att täcka grunderna. Syftet med en dokumentationsfil är att tjäna som en guide till andra användare och köpare. Ofta finns det installation, anpassning och lite anpassning som användarna behöver veta om - och det är ditt jobb att utbilda dem. Det här är vad vi kanske vill inkludera:
Kom ihåg att dokumentationen ska vara enkel nog för alla med grundläggande kunskaper att förstå, men också täcka hur man byter viktiga filer. Till exempel behöver du inte nödvändigtvis visa hur du ändrar specifika CSS-värden, men du borde visa hur du får åtkomst till dessa filer.
Nu är det dags för de roliga grejerna! Gå vidare och öppna din Markdown editor (jag använder Mou för Mac). Skapa en rubrik för din dokumentationsfil:
#Temdokumentation
Rubrikelement kan skrivas helt enkelt genom att lägga till en till sex # s framför innehållet. I ovanstående exempel använde vi ett # tecken för att skapa en h1 element med texten "Tema Dokumentation". Om du vill skapa en h3 element, du skulle skriva ### Rubrik 3.
Låt oss nu skapa en horisontell regel (
***
En viktig del att lägga till i din dokumentation är en informationsavdelning.
* Tema Namn: * Tema * Författare: * Suhail Dawood * Skapad: * 08/08/2012 * Version: * 1.0.1 *** Tack för ditt köp! Om du har några frågor om det här temat kan du skicka e-post till mig på **[email protected]** eller tweet mig ** @ tutsplus ** ***
Låt oss ta en titt på HTML-ekvivalenten för ovanstående Markdown-kod:
Tema Namn: Tema
Författare: Suhail Dawood
Skapad: 08/08/2012
Version: 1.0.1
Tack för ditt köp! Om du har några frågor om det här temat, kan du skicka e-post till mig på [email protected] eller tweet mig @tutsplus
Bara från att titta på de två olika källorna kan du omedelbart se att Markdown är mycket mer intuitivt att förstå och skapa. I stället för att ständigt behöva lägga till <s och >s, Markdown låter dig fokusera på innehållet. För att betona, lägg till en asterisk före och efter texten (t.ex.. * Emphasized Text *). För att embolden, lägg till två asterisker före och efter texten (t.ex.. ** Emboldened Text **). För att lägga till en radbrytning, lägg bara till två mellanslag vid den punkt som du vill infoga en radbrytning.
Låt oss nu lägga till en lista med innehåll i vår Markdown-fil:
## Innehållsförteckning 1. HTML-struktur 2. CSS-filer 3. Javascript-filer 4. PSD-filer 5. Tematyper 6. Tweaking Javascript 7. Tweaking CSS 8. Webbläsarkompatibilitet ***
Om vi skulle skapa det här i HTML, så är det hur det skulle se ut:
Innehållsförteckning
- HTML-struktur
- CSS-filer
- Javascript-filer
- PSD-filer
- Tema Styles
- Tweaking Javascript
- Tweaking CSS
- Webbläsarkompatibilitet
I stället för att skapa en beställd lista och separata listobjekt, skriv bara 1. Första elementet och fortsätt att lägga till inkrementerade objekt.
Det är viktigt att låta dina användare hur webbplatsens filer läggs ut. Eftersom vi skapar dokumentation för ett tema bör vi beskriva hur HTML-koden för temat är strukturerat. Vi kan beskriva detta med följande kod:
## en. HTML-struktur HTML-strukturen för varje sida är enligt följande: * Meta * Länk till CSS-filer * Header * Logo * Sociala länkar * Navigering * Huvudinnehåll * Innehållsreglage * Artiklar * Sidobar * Sök * Skicka arkiv * Mailing list * Länk till Javascript Filer * Javascript ***
Enkel. För att skapa vår innehållsförteckning, använde vi en beställd lista. I det här avsnittet använde vi kapslade oorderade listor. För att skapa en oorderad lista i Markdown, lägg bara till en asterisk och ett mellanslag före texten (t.ex.. * Föremål 1). För att hysa listobjekt, bara inåt och skapa ett annat listobjekt.
Särskilt i teman är CSS-dokumentation väldigt viktigt. Det är en bra idé att beskriva de olika CSS-filerna som ingår i temat, samt en kort beskrivning av varje fil:
## 2. CSS-filer Det finns 3 CSS-filer i detta tema: * main.css * colors.css * skeleton.css ##### main.css Den här CSS-filen är det huvudsakliga stilarket för temat. Den innehåller alla värden för de olika elementen i temat och standardfärgschemat. ##### colors.css Den här CSS-filen innehåller styling av alla andra färger som ingår i temat. ##### skeleton.css Den här CSS-filen tillåter temat att vara mottagligt, anpassning till olika skärmstorlekar. ***
Se till att du använder rubriker för att skilja olika delar av dokumentationsfilen. En snyggt utlagd dokumentationsfil leder till färre förvirrade användare!
Om ditt tema innehåller Javascript-filer, är det en bra idé att minst beskriva dem i dokumentationen:
## 3. Javascript-filer Det finns 2 Javascript-filer i det här temat: * jquery.js * slider.js ##### jquery.js Detta tema använder jQuery Javascript-biblioteket. ##### slider.js Innehållsreglaget i temat körs på den här Javascript-filen. Det finns några inställningar som kan tweaked, detta kommer att vara täckt i avsnittet Tweaking Javascript. ***
Se till att du inte bara listar, men beskriv filerna i ditt tema. Detta gör det mycket lättare för användaren att förstå innehållet i varje fil och bestämma huruvida de vill röra sig med det eller inte.
Även om det finns en separat sektion för PSD-mallar på ThemeForest, bestämde många författare att de skulle inkludera PSD-filer med sina kodade mallar för att ge användaren friheten att göra designändringar. Om ditt tema har PSD-filer inkluderade kan det vara en bra idé att skissera dem precis som vi har gjort med alla andra filer:
## 4. PSD-filer Innehållet i detta tema är 5 olika PSD-filer: 1. homepage.psd 2. about.psd 3. portfolio.psd 4. blog.psd 5. contact.psd Dessa PSD-filer kommer att vara praktiska om du vill göra några ändras till temat design. Du kan också skapa en ny sidlayout med de befintliga PSD-filerna som en bas för att arbeta med. ***
Det är bästa sättet att namnge dina PSD-filer tydligt (t ex fullbredds-sida.psd) i motsats till vaga namn (t ex mall-003.psd). På så sätt kan användarna hitta vad de behöver utan att behöva öppna varje fil upp.
Mest troligt kommer ditt tema att innehålla ett urval färgscheman för dina användare att välja mellan. Om så är fallet, se till att du beskriver hur det här görs:
## 5. Temaformat Innehållet med detta tema är 10 olika tematyper: 1. Ljus 2. Mörk 3. Grå 4. Grön 5. Röd 6. Orange 7. Blå 8. Lila 9. Brun 10. Mörkblå För att ändra dessa stilar, gå till WordPress-backend, välj ** Alternativ> Styles ** och välj den stil du vill ha. ***
I exemplet ovan har jag listat de olika färgscheman som ingår i temat och visat hur man ska gå om att ändra dem.
Om din kod innehåller Javascript-filer som har anpassningsparametrar (t.ex. ett skjutreglage), skulle det vara en bra idé att visa dina användare hur man manipulerar dessa värden:
## 6. Tweaking Javascript Innehållsreglaget i temat löper av slider.js, och det finns ett par värden som kan ändras för att ändra reglaget och utseendet. ##### Ändra värden I slider.js kan du ändra dessa värden:auto: true* Boolean: animera automatiskt, true eller false *hastighet: 1000* Heltal: Övergångshastighet, i millisekunder *personsökare: sant* Boolean: Visa personsökare, sann eller falsk *nav: false* Booleska: Visa navigering, sann eller falsk * ***
Ovanstående kod beskriver hur en användare kan ändra värden. Om du vill stila kod, lägg i den relevanta texten inom taggar. Applikationer som Mou lägger till styling för dessa element i liveförhandsgranskningen, och du kan också exportera koden för att hålla stylingen. Vi kommer att prata lite om att exportera din dokumentation senare.
CSS-filer anpassas ofta av en användare. De kommer säkert att överväga det om du lägger till en del i dokumentationen som visar hur du får tillgång till CSS-filerna så att de kan redigera dem.
## 7. Tweaking CSS Temat bygger på en responsiv ram, som gör det möjligt att se innehåll optimalt på alla skärmstorlekar. ##### Ändra CSS Starta genom att gå in i WordPress-backend, ** Teman> Tema> Visa källa **. Välj filen * style.css * för att visa och ha möjlighet att redigera koden. Här kan du ändra saker som teckensnitt, storlekar, färger etc. ***
Nu när användaren har tillgång till CSS-filen kan de göra de ändringar som de vill ha.
Det är en bra idé att informera användaren om eventuella problem med webbläsarkompatibilitet:
## 8. Webbläsarkompatibilitet Detta tema fungerar bra (-) eller bra (X) i följande webbläsare: ** IE 6-8 ** - ** IE 9 + ** X ** Chrome ** X ** Firefox ** X ** Safari ** X ** Opera ** X ***
Om du vill expandera på det här avsnittet kan du förklara vilka funktioner av temat som lider i vissa webbläsare.
För att slutföra vår dokumentation lägger vi till ett avsnitt för att låta våra användare veta hur vi kontaktar oss om de har ytterligare frågor. Låt oss lägga till den här koden:
Accentsconagua
