|
1 | 1 | <template> |
2 | 2 | <div> |
3 | 3 | <h1>vue-wordpress</h1> |
4 | | - <p>A collection of vue.js components and mixins for interfacing with the WordPress REST API. For information on how to use vue-wordpress, go to the github site. The most used and useful pieces of this repo are probably methods in the mixin: |
5 | | - <ul> |
6 | | - <li>createWpLoader simplifies pulling data from the WP-REST API with WP loaders. WP loaders support pagination and simplify async fetching of data. Support custom mappers.</li> |
7 | | - <li>mapPosts is a default map function for use with createWpLoader to map the REST-API response for posts into a simpler data format. |
8 | | - <li>getTags is a function that can be used in the map function of a post loader to get all tags associated with a post.</li> |
9 | | - <li>getImageSource is a function that maps simple image sizes to WP-REST mapper properties</li> |
10 | | - <li>getPostRestUrl is a function that will take a url and map it to the corresponding WP-REST API. This can be used to pull posts from the WP-REST API based upon the route in vue-router. For an example see <a href="https://pixelthin.com">Pixelthin.com</a></li> |
11 | | - </ul> |
12 | | - </p> |
| 4 | + <p>A collection of vue.js components and mixins for interfacing with the WordPress REST API. For information on how to use vue-wordpress, go to the github site. The most used and useful pieces of this repo are probably methods in the mixin:</p> |
| 5 | + <ul> |
| 6 | + <li>createWpLoader simplifies pulling data from the WP-REST API with WP loaders. WP loaders support pagination and simplify async fetching of data. Support custom mappers.</li> |
| 7 | + <li>mapPosts is a default map function for use with createWpLoader to map the REST-API response for posts into a simpler data format.</li> |
| 8 | + <li>getTags is a function that can be used in the map function of a post loader to get all tags associated with a post.</li> |
| 9 | + <li>getImageSource is a function that maps simple image sizes to WP-REST mapper properties</li> |
| 10 | + <li> |
| 11 | + getPostRestUrl is a function that will take a url and map it to the corresponding WP-REST API. This can be used to pull posts from the WP-REST API based upon the route in vue-router. For an example see |
| 12 | + <a |
| 13 | + href="https://pixelthin.com" |
| 14 | + >Pixelthin.com</a> |
| 15 | + </li> |
| 16 | + </ul> |
13 | 17 | <h2>Examples:</h2> |
14 | | - <p>Each of the following examples utilizes the wp-mixin and the async-content component. Check out the example source for more information on how to use the mixins. The post visual vue components may also be of use but, if you want to really customize them it may be easier to just use them as a template and create your own components using the mixins. |
15 | | - </p> |
| 18 | + <p>Each of the following examples utilizes the wp-mixin and the async-content component. Check out the example source for more information on how to use the mixins. The post visual vue components may also be of use but, if you want to really customize them it may be easier to just use them as a template and create your own components using the mixins.</p> |
16 | 19 | <div class="flex-container"> |
17 | 20 | <div class="col-sm"> |
18 | 21 | <h4>post-summary</h4> |
19 | | - <!-- In this example, we're just loading one page of results from the WP-REST API. |
20 | | - For an example of loading more than one post, see the single-post section--> |
21 | | - <async-content :loaded="postLoader.pages[0].loaded"> |
| 22 | + <!-- In this example, we're loading the results from the WP-REST API. --> |
| 23 | + <!-- <async-content :loaded="postLoader.pages[0].loaded"> --> |
| 24 | + <div v-for="(pages, index) of postLoader.pages" :key="index"> |
22 | 25 | <div v-for="(post,index) of postLoader.pages[0].content" :key="index"> |
23 | 26 | <post-summary imgSize="thumbnail" :post="post" class="post-summary"></post-summary> |
24 | | - </br> |
| 27 | + <br /> |
25 | 28 | </div> |
26 | | - </async-content> |
27 | | - </div> |
28 | | - <div class="col-sm"> |
29 | | - <h4>single-post</h4> |
30 | | - <!-- In this example we're loading one post at a time and letting the user pull a new on in dynamically |
31 | | - whenever they click a button --> |
32 | | - <div v-for="(page,index) of singlePostLoader.pages" :key="index"> |
33 | | - <async-content :loaded="page.loaded"> |
34 | | - <!-- This post loader only contains one post per page (we set per_page=1 in the post loader query params) --> |
35 | | - <post :post="page.content[0]"></post> |
36 | | - </async-content> |
37 | 29 | </div> |
38 | | - <button type="button" @click="singlePostLoader.loadPage()"> Load Another Post</button> |
39 | | - </div> |
40 | | - <div class="col-lg"> |
41 | | - <h4>all-posts</h4> |
42 | | - <all-posts :loader="allPostLoader"></all-posts> |
| 30 | + <div class="col-sm"> |
| 31 | + <h4>single-post</h4> |
| 32 | + <!-- In this example we're loading one post at a time and letting the user pull a new on in dynamically |
| 33 | + whenever they click a button--> |
| 34 | + <div v-for="(page,index) of singlePostLoader.pages" :key="index"> |
| 35 | + <async-content :loaded="page.loaded"> |
| 36 | + <!-- This post loader only contains one post per page (we set per_page=1 in the post loader query params) --> |
| 37 | + <post :post="page.content[0]"></post> |
| 38 | + </async-content> |
| 39 | + </div> |
| 40 | + <button type="button" @click="singlePostLoader.loadPage()">Load Another Post</button> |
| 41 | + </div> |
| 42 | + <div class="col-lg"> |
| 43 | + <h4>all-posts</h4> |
| 44 | + <all-posts :loader="allPostLoader"></all-posts> |
| 45 | + </div> |
43 | 46 | </div> |
44 | 47 | </div> |
45 | | - |
46 | 48 | </div> |
47 | 49 | </template> |
48 | 50 |
|
@@ -121,13 +123,13 @@ h4 { |
121 | 123 | .col-sm { |
122 | 124 | width: 45%; |
123 | 125 | margin: 2px; |
124 | | - background-color: #CCDCDC; |
| 126 | + background-color: #ccdcdc; |
125 | 127 | min-width: 400px; |
126 | 128 | } |
127 | 129 |
|
128 | 130 | .col-lg { |
129 | 131 | width: 90%; |
130 | 132 | margin: 4px; |
131 | | - background-color: #CCDCDC; |
| 133 | + background-color: #ccdcdc; |
132 | 134 | } |
133 | 135 | </style> |
0 commit comments