Dessa kan också få brevplattformar med tema rullar. De kan ställas in i föräldern

.

Läs mer om listdelare.

Observera att vi inte använder delare för den här applikationen.

---

Steg 5: CSS

jQuery Mobile tar hand om en stor del av formateringen, men vi behöver naturligtvis fortfarande vårt eget stilark för tweaking. Till exempel, titta på bilderna ovan, vi kan se att handledningssymbolerna måste skjutas upp lite. Dessutom skulle jag vilja använda Tuts + röd för bakgrundsfärgen på rubriken och sidfoten, i stället för standard svart.

Skapa en ny mapp, CSS, och lägg till ett nytt stilark - jag ringer till min: mobile.css. Inom denna fil fixar vi först ikonpositioneringen:

 .ui-li-ikon top: 9px; 

Därefter skapar vi en handfull klasser, uppkallad efter deras respektive handledningssidor. Dessa klasser innehåller någon specifik formatering / färger för webbplatsen. Till exempel har Nettuts + en mörkare grön färg, medan MobileTuts + är gul.

 .tuts bakgrund: # c24e00;  .netuts bakgrund: # 2d6b61;  .psdtuts bakgrund: # af1c00;  .vectortuts bakgrund: # 1e468e;  .aetuts bakgrund: # 4a3c59;  .fototutor bakgrund: # 3798aa;  .cgtuts bakgrund: # 723b4a;  .audiotuts bakgrund: # 4b7e00;  .webdesigntutsplus background: # 0d533f;  .mobiletuts bakgrund: # dba600; 

Det borde vara bra för nu. Det sista steget för index.php är att tillämpa .tuts klass till rubrik och sidfot element. På så sätt, rubrik och sidfot kommer att göra rätt bakgrundsfärg.

 
? 



---

Steg 6: YQL, PHP och Caching

Nu är det dags att gå ifrån layouten och arbeta med funktionaliteten. Var och en av länkarna som vi skapade riktades till site.php? sitename = "sitename". Låt oss fortsätta och skapa den filen nu.

Även om det här är en relativt liten app, borde vi fortfarande sträva efter att följa bästa praxis. I det här fallet betyder det att vi ska hålla så lite PHP i vårt dokument som möjligt. I stället använder vi site.php som en kontrollant av sorter. Den här filen kommer att hantera den ursprungliga logiken och lägger sedan ner i vår HTML-mall.

Tilldela webbplatsens namn

För att hämta det önskade RSS-flödet måste vi först ta namnet på den webbplats som användaren klickade på i början. Om du hänvisar till ett tidigare steg när vi kopplade till site.php, Vi passerade också webbplatsens namn via frågesträngen. Med PHP kan detta enkelt hämtas, med $ _GET [ 'sitename']. Men, om det för något udda skäl inte finns det här värdet? Kanske site.php nås direkt? Vi bör ställa in en standardwebbplats för att kompensera för dessa situationer.

 $ siteName = tomt ($ _ GET ['siteName'])? "nät": $ _GET ['siteName'];

Om $ _GET [ 'sitename'] är tom, ställer vi in ​​"nettutrymmen" till variabeln, $ sitename. Annars blir det lika med namnet på respektive webbplats.

säkerhet

Även om detta är ett litet projekt, låt oss också försöka ställa in en viss säkerhet på plats. För att förhindra att användaren automatiskt tilldelar ett potentiellt farligt värde till sidnamn nyckel, låt oss se till att värdet faktiskt är namnet på en av våra handledningssidor.

 // Förbered array av handledningsplatser $ siteList = array ('netuts,' flashtuts ',' webdesigntutsplus ',' psdtuts ',' vectortuts ',' phototuts ',' mobiletuts ',' cgtuts ',' audiotuts ',' aetuts '); // Om strängen inte är ett sajtnamn, ändras bara till nätnät istället. om (! in_array ($ siteName, $ siteList)) $ siteName = 'netuts'; 

De in_array () funktionen tillåter oss att bestämma om ett värde - i vårt fall, värdet av $ sitename -- är lika med en av föremålen i $ siteList array.

caching

I slutändan använder vi den utmärkta YQL för att utföra våra frågor. Tänk på YQL som ett API för API. I stället för att behöva lära sig tjugo olika API: er, kan YQLs SQL-liknande syntax bara låta dig lära dig. Men även om YQL utför lite caching på egen hand, låt oss också spara RSS feeds till en textfil på vår server. På det sättet kan vi förbättra prestanda en rättvis bit.

Vi börjar med att skapa en ny variabel, $ cache, och gör det lika med platsen för var den cachade filen ska lagras.

 $ cache = dirname (__ FILE__). "/ Cache / sitename $";

Koden ovan pekar på den aktuella katalogen i filen och sedan till en cachemappe och slutligen namnet på den valda webbplatsen.

Jag har bestämt mig för att den här cachade filen ska uppdateras var tredje timme. Som sådan kan vi springa snabbt om uttalande och bestäm den sista gången filen uppdaterades. Om filen inte finns, eller om uppdateringen var längre än tre timmar sedan, frågar vi YQL.

 $ cache = dirname (__ FILE__). "/ Cache / sitename $"; // Återcache var tredje timme om (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL 

YQL är löjligt lätt att arbeta med. I vårt fall använder vi det för ett mycket enkelt syfte: Ta tag i RSS-flödet, i JSON-formuläret, på den webbplats som skickades via frågesträngen via sidnamn. Du kan experimentera med de olika kommandona genom att använda YQL-konsolen.





För att fråga ett RSS-flöde använder vi kommandot: VÄLJ * FRÅN matning VAR url = "sökväg / till / rss / matning".

• Nätter + Foder: http://feeds.feedburner.com/nettuts
• Psdtuts + Feed: http://feeds.feedburner.com/psdtuts
• Vectortuts + Feed: http://feeds.feedburner.com/vectortuts
• etc.

Bygga vägen

För läsbarhetens skull bygger vi upp vår YQL-fråga i avsnitt.

 // YQL-fråga (SELECT * från mat?) // Split för läsbarhet $ path = "http://query.yahooapis.com/v1/public/yql?q="; $ path. = urlencode ("VÄLJ * FRÅN matning VAR url =" http://feeds.feedburner.com/$siteName ""); $ path. = "& format = json";

Nyckeln är den andra delen ovan; När sidan laddades grep vi namnet på webbplatsen från frågesträngen. Nu behöver vi bara infoga den i VÄLJ fråga. Lyckligtvis använder alla tutorials Feedburner! Se till att du urlencode Frågan om att ersätta några specialtecken.

Okej, banan är klar; låt oss använda file_get_contents () att ta tag i matningen!

 $ feed = file_get_contents ($ path, true);

Om vi ​​antar att $ feed är nu lika med den returnerade JSON, kan vi lagra resultaten i en textfil. Låt oss dock först försäkra oss om att data returnerades. Så länge som någonting returneras från frågan, $ Återkoppling> query-> count kommer att vara lika med ett värde som är större än noll. Om det är så öppnar vi den cachade filen, skriver data till filen och slutar stänga den.

 // Om något returnerades cache om (is_object ($ feed) && $ feed-> query-> count) $ cachefile = fopen ($ cache, 'w'); skriva ut ($ cachefile, $ feed); fclose ($ cachefile); 

Det verkar förvirrande, men det är verkligen inte. Funktionen fopen () accepterar två parametrar:

• Filen som ska öppnas: Vi lagrade den här sökvägen i $ cache variabel högst upp på sidan. Observera att om filen inte finns kommer den att skapa filen för dig.
• Åtkomstbehörigheter: Här kan vi ange vilka privilegier som är tillgängliga. w står för "skriv".

Därefter öppnar vi den filen och skriver innehållet i $ feed (den returnerade RSS JSON-data) till filen och stäng den.

Använda den cachade filen

Ovan kontrollerade vi först om den cachade filen var större än tre timmar gammal.

 om (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL 

Men vad händer om det inte var? I så fall kör vi en annan uttalande och ta tag i innehållet i textfilen istället för att använda YQL.

 om (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL?  else  // We already have local cache. Use that instead. $feed = file_get_contents($cache); 

Slutligen kan vi inte göra mycket med JSON RSS-flödet tills vi avkodar det med PHP.

 // Avkod den shizzle $ feed = json_decode ($ feed);

Och det borde göra det för vårt kontrollant! Med logiken ur vägen, låt oss inkludera vår HTML-mall.

 // Inkludera vyn inkluderar ("views / site.tmpl.php");

Här är vår sista site.php. Klicka på bygga ut ikonen för att visa den.

 räkna) $ cachefile = fopen ($ cache, 'wb'); skriva ut ($ cachefile, $ feed); fclose ($ cachefile);  else // Vi har redan lokal cache. Använd det istället. $ feed = file_get_contents ($ cache);  // Avkod det shizzle $ feed = json_decode ($ feed); // Inkludera vyn inkluderar ("views / site.tmpl.php"); 

---

Steg 7: Webbplatsmallen

I slutet av föregående steg laddades vi i vår mall (eller vy). Fortsätt och skapa det visningar mapp och site.tmpl.php fil. Känn dig fri att namnge det du önskar. Därefter lägger vi in ​​vår HTML.

Platser av intresse ovan

• Lägg märke till hur vi följer samma grundläggande layout: rubrik, innehållsområde, sidfot.
• Eftersom denna mall ska användas för varje Tuts + handledningssida måste vi ställa in titeln dynamiskt. Lyckligtvis, om du kommer ihåg, skickades platsnamnet genom frågesträngen och lagrades i $ sitename variabel (som, "nät"). För att aktivera första bokstaven och tillämpa signaturen + Efter namnet kör vi variabeln genom ucwords () (uppger första bokstaven i varje ord i strängen) och lägger till a "+":

• Vi kommer snart att visa antalet kommentarer för varje postning bredvid titeln. Vi kan, igen, använda ThemeRoller att stila det, via data counttheme = "e" attribut.


Filtrering genom foderet

Vid denna tidpunkt har vi tillgång till $ feed objekt som innehåller vårt RSS-flöde. För att dissekera detta objekt kan du heller print_r ($ feed), eller använd YQL-konsolen för en snyggare vy. Vi använder den senare i det här fallet. Kolla in det.





För att ta tag i data för varje inlägg måste vi filtrera igenom: $ Återkoppling> query-> Kristna> objekt. PHP gör det här en film med för varje().

Inom för varje() uttalande kan vi nu nå de önskade värdena med $ Item-> titel, eller $ Item-> kommentarer, som kommer att visa titeln respektive kommentarnumret. Lägg till följande inom

taggar.

 
 fråga-> resultat-> objekt som $ objekt) ?> 
 
 & OrigLink =vägledd> innehåll); ?> "> titel; ?>  
 kommentarer; ?>  
  

I koden ovan bygger vi upp en listobjekt med titeln på inlägget, antalet kommentarer och en länk till article.php Det innehåller också platsnamnet och den permanenta länken (till den ursprungliga artikeln på Tuts + -sidan) i frågesträngen.

När vi visar den uppdaterade sidan i webbläsaren, tada!



Lägg märke till hur kommentarräkningen är i en gul bubbla, och svängs åt höger? Det berodde på att vi tillämpade data counttheme = "e" attribut till den ompaketerade listan. Så passande.

Hmm? Jag tycker att texten är för stor för dessa långa titlar. Ett snabbt besök på Firebug visar att jag kan rikta mig mot h2 taggar med en klass av .ui-li-rubrik. Låt oss återvända till vårt stilark (mobile.css) och lägga till en ny regel:

 .ui-li-heading font-size: 12px; 

Det är bättre.



---

Steg 8: Visa hela posten

Det sista steget är att bygga article.php, som kommer att visa hela inlägget. Som med site.php, article.php kommer att fungera som vår kontrollant, och kommer att fråga den valda artikeln med YQL och ladda den lämpliga vyn.

 query-> resultat> objektet; innefattar ( 'vyer / article.tmpl.php');

Om du har följt efter, bör koden ovan vara lite mer känd för dig. När vi laddade denna sida, från site.php, vi passerade två saker via frågesträngen:

• Sidnamn: Innehåller namnet på den aktuella valda webbplatsen
• Orig länk: En länk till det ursprungliga inlägget på handledningssidan

Skillnaden med YQL-frågan, den här gången är att vi matchar guid (orig länk) med den post som användaren klickade på (eller tryckt). På så sätt returneras exakt ett inlägg. Kolla in det här exemplet YQL-frågan för att få en bättre uppfattning om vad jag menar.



Artikelmall

Längst ner i koden ovan laddade vi mallfilen för artikelns sida: visningar / article.tmpl.php. Vi skapar den filen nu.

   
 
 
  
  
 
 titel; ?> 
 
 beskrivning; ?> 
 
  
  

Ah - så bekant. Vi har redan gått över denna mall. Den enda skillnaden är att den här gången, eftersom det bara finns en post från YQL-frågan som ska visas, behöver vi inte bry oss med en för varje() påstående.


Ostrukturerad artikel sida

Vid denna tidpunkt skulle det själv vara nästa steg att börja tillämpa önskad styling på artikeln. Jag ser inte ett behov av att gå över det i denna handledning, eftersom allt kommer ner till personlig smak. Här är min superminimalversion.


Applicera en typsnitt, linjehöjd, vaddering och bildformatering.

Låsta sidfot

En sista sak: i sidfoten i artikeln länkar vi till den ursprungliga posten på Nettuts +. I sitt nuvarande tillstånd ser läsaren bara det när de når artikelns botten. Låt oss låsa sidfoten till botten av den aktuella vypunkten hela tiden. Vi kan använda uppgifter-positionen Attribut för att uppnå detta.

Det är bättre!

---

Var gjort!

Och med relativt litet arbete har vi framgångsrikt byggt en mobil RSS-läsare för Tuts + -sidorna. Det kan verkligen utökas för att ge ytterligare funktioner, felkontroll och prestandaförbättringar, men det kommer förhoppningsvis att komma igång! Om du vill gaffla projektet och göra det bättre, för all del? do! Tack för att du läser och se till jQuery Mobile-dokumentationen för mer information. Jag har ingen tvekan om att du kommer att stöta på fler jQuery mobila handledning på vår systersida, Mobiletuts+.

Lägg till läsaren på din iPhone-startskärm


Visa demo eller gör det bättre!
Koda