bulma-clean-theme 0.4.1 → 0.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +84 -0
- data/_includes/rating.html +14 -0
- data/_includes/review.html +27 -0
- data/_layouts/product-category.html +42 -0
- data/_layouts/product.html +61 -0
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9c4e54525ccaa5453251e0c00653935eaf4c7e5b
|
|
4
|
+
data.tar.gz: 9c9e1066d934cf628b54a1d79efeab98a640763c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0903c7ebc75070a369e0cb0b8d31cb20670e8b6a1fbb26f222a84e2f0a62f995511b6e6de10d9eab849f1394caf27f118455a2717f17c3e3e98facac874f1faf
|
|
7
|
+
data.tar.gz: f3ed74f9f6d8f6f76ebe26d09c6a0b8775ffbf9da701f88adfe893d576bce65b5ab1a476d1f23b02c38bc027e005df6fb7d05f47d6604f0b24dafcac1cc273e7
|
data/README.md
CHANGED
|
@@ -17,6 +17,7 @@ This is a clean and simple Jekyll Theme built with the [Bulma](https://bulma.io/
|
|
|
17
17
|
* [Tabs](#tabs)
|
|
18
18
|
* [Google Analytics](#google-analytics)
|
|
19
19
|
* [Footer](#footer)
|
|
20
|
+
* [Products](#products)
|
|
20
21
|
* [Contributing](#contributing)
|
|
21
22
|
* [Development](#development)
|
|
22
23
|
* [Licence](#licence)
|
|
@@ -243,6 +244,89 @@ Then add the name of your yaml file (without the .yml extension) into the footer
|
|
|
243
244
|
footer_menu: example_footer_menu
|
|
244
245
|
```
|
|
245
246
|
|
|
247
|
+
### Products
|
|
248
|
+
|
|
249
|
+
**New in 0.5**
|
|
250
|
+
|
|
251
|
+
Now you can add simple product pages to your site using collections.
|
|
252
|
+
|
|
253
|
+
#### Product pages
|
|
254
|
+
|
|
255
|
+
Start by creating a `_products` directory to hold your product pages and create a new page for each product, such as `product1.md`. In the front matter for this page you can set the standard settings, such as your title, subtitle, description (for meta-description), hero_image, as well as the additional product settings such as price, product_code, image, features and rating.
|
|
256
|
+
|
|
257
|
+
```yml
|
|
258
|
+
---
|
|
259
|
+
title: Product 1 Name
|
|
260
|
+
subtitle: Product 1 tagline here
|
|
261
|
+
description: This is a product description
|
|
262
|
+
hero_image: /img/hero-img.jpg
|
|
263
|
+
product_code: ABC124
|
|
264
|
+
layout: product
|
|
265
|
+
image: https://via.placeholder.com/640x480
|
|
266
|
+
price: £1.99 + VAT
|
|
267
|
+
features:
|
|
268
|
+
- label: Great addition to any home
|
|
269
|
+
icon: fa-location-arrow
|
|
270
|
+
- label: Comes in a range of styles
|
|
271
|
+
icon: fa-grin-stars
|
|
272
|
+
- label: Available in multiple sizes
|
|
273
|
+
icon: fa-fighter-jet
|
|
274
|
+
rating: 3
|
|
275
|
+
---
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
The text you write for the page content will be displayed as the product description.
|
|
279
|
+
|
|
280
|
+
Next, add the following to your `_config.yml` to use collections to process the product pages and output them as individual pages.
|
|
281
|
+
|
|
282
|
+
```yml
|
|
283
|
+
collections:
|
|
284
|
+
products:
|
|
285
|
+
output: true
|
|
286
|
+
layout: product
|
|
287
|
+
image: https://via.placeholder.com/800x600
|
|
288
|
+
show_sidebar: false
|
|
289
|
+
```
|
|
290
|
+
|
|
291
|
+
You can also set default product page values here if you like, such as the layout or image.
|
|
292
|
+
|
|
293
|
+
#### Product Reviews
|
|
294
|
+
|
|
295
|
+
To add reviews to your product page, create a `reviews` directory in the `_data` directory and add a yml file with the name of the product_code from the product page, for example `_data/reviews/ABC124.yml`. Create the reviews using the following format:
|
|
296
|
+
|
|
297
|
+
```yml
|
|
298
|
+
- name: Mr E Xample
|
|
299
|
+
rating: 4
|
|
300
|
+
title: Great product, highly recommended
|
|
301
|
+
date: 01/01/2019
|
|
302
|
+
avatar: https://bulma.io/images/placeholders/128x128.png
|
|
303
|
+
description: >
|
|
304
|
+
The product worked really well. I would recommend this to most people to use. Delivery was quick and reasonable.
|
|
305
|
+
Would recommend this to my friends.
|
|
306
|
+
- name: Mrs R E View
|
|
307
|
+
rating: 5
|
|
308
|
+
title: Nice, really liked this
|
|
309
|
+
date: 02/02/2019
|
|
310
|
+
description: >
|
|
311
|
+
The product worked exactly as described.
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
If you don't want to display an avatar image then a default user icon will be displayed. If you don't want to display a rating then omit it from the yml.
|
|
315
|
+
|
|
316
|
+
#### Product Category Page
|
|
317
|
+
|
|
318
|
+
To create a page listing your products you will need to create a product category page. Create a page, for example `products.md`, with the `layout: product-category` in the frontmatter. You can set the sort order of the products using `sort: title` to sort by the title, or by any setting in your product pages, such as price, rating or any custom frontmatter tags you wish to set.
|
|
319
|
+
|
|
320
|
+
```yml
|
|
321
|
+
---
|
|
322
|
+
title: Products
|
|
323
|
+
subtitle: Check out our range of products
|
|
324
|
+
layout: product-category
|
|
325
|
+
show_sidebar: false
|
|
326
|
+
sort: title
|
|
327
|
+
---
|
|
328
|
+
```
|
|
329
|
+
|
|
246
330
|
## Contributing
|
|
247
331
|
|
|
248
332
|
Bug reports and pull requests are welcome on GitHub at https://github.com/chrisrhymes/bulma-clean-theme. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
|
|
2
|
+
<div class="content {% if include.align %} {{ include.align }} {% else %} has-text-centered {% endif %}">
|
|
3
|
+
{% for num in (1..include.rating) %}
|
|
4
|
+
<span class="icon">
|
|
5
|
+
<i class="fas fa-star"></i>
|
|
6
|
+
</span>
|
|
7
|
+
{% endfor %}
|
|
8
|
+
{% assign remainder = 5 | minus: include.rating %}
|
|
9
|
+
{% for num in (1..remainder) %}
|
|
10
|
+
<span class="icon">
|
|
11
|
+
<i class="far fa-star"></i>
|
|
12
|
+
</span>
|
|
13
|
+
{% endfor %}
|
|
14
|
+
</div>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<article class="media">
|
|
2
|
+
<figure class="media-left">
|
|
3
|
+
{% if review.avatar %}
|
|
4
|
+
<p class="image is-48x48">
|
|
5
|
+
<img src="https://bulma.io/images/placeholders/128x128.png">
|
|
6
|
+
</p>
|
|
7
|
+
{% else %}
|
|
8
|
+
<div class="icon is-large">
|
|
9
|
+
<i class="fas fa-user fa-2x"></i>
|
|
10
|
+
</div>
|
|
11
|
+
{% endif %}
|
|
12
|
+
</figure>
|
|
13
|
+
<div class="media-content">
|
|
14
|
+
<div class="content">
|
|
15
|
+
<p>
|
|
16
|
+
<strong>{{ review.name }}</strong> <small>{{ review.date }}</small>
|
|
17
|
+
<br>
|
|
18
|
+
{{ review.title }}
|
|
19
|
+
<br>
|
|
20
|
+
{{ review.description }}
|
|
21
|
+
</p>
|
|
22
|
+
</div>
|
|
23
|
+
{% if review.rating %}
|
|
24
|
+
{% include rating.html rating=review.rating align="has-text-left" %}
|
|
25
|
+
{% endif %}
|
|
26
|
+
</div>
|
|
27
|
+
</article>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
show_sidebar: false
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
<div class="columns is-multiline">
|
|
7
|
+
|
|
8
|
+
<div class="column is-12">
|
|
9
|
+
{{ page.content }}
|
|
10
|
+
</div>
|
|
11
|
+
|
|
12
|
+
{% assign sorted_products = site.products | sort:page.sort %}
|
|
13
|
+
|
|
14
|
+
{% for product in sorted_products %}
|
|
15
|
+
<div class="column is-4-desktop is-6-tablet">
|
|
16
|
+
|
|
17
|
+
<a href="{{ product.url | prepend: site.baseurl }}">
|
|
18
|
+
|
|
19
|
+
<div class="card">
|
|
20
|
+
|
|
21
|
+
{% if product.image %}
|
|
22
|
+
<div class="card-image">
|
|
23
|
+
<figure class="image is-4by3">
|
|
24
|
+
<img src="{{ product.image }}" alt="{{ product.title }}" />
|
|
25
|
+
</figure>
|
|
26
|
+
</div>
|
|
27
|
+
{% endif %}
|
|
28
|
+
<div class="card-content">
|
|
29
|
+
|
|
30
|
+
<p class="title is-4">{{ product.title }}</h2>
|
|
31
|
+
<p class="subtitle is-4">{{ product.subtitle }}</p>
|
|
32
|
+
<p class="title is-5 has-text-right">{{ product.price }}</p>
|
|
33
|
+
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
</a>
|
|
38
|
+
|
|
39
|
+
</div>
|
|
40
|
+
{% endfor %}
|
|
41
|
+
</div>
|
|
42
|
+
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
---
|
|
2
|
+
layout: default
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<div class="columns is-multiline">
|
|
6
|
+
|
|
7
|
+
<div class="column is-6">
|
|
8
|
+
<figure class="image is-4by3">
|
|
9
|
+
<img src="{{ page.image }}" />
|
|
10
|
+
</figure>
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<div class="column is-6">
|
|
14
|
+
<p class="title is-3">{{ page.title }}</p>
|
|
15
|
+
<p class="subtitle is-3">{{ page.subtitle }}</p>
|
|
16
|
+
<p class="title is-4 has-text-right">{{ page.price }}</p>
|
|
17
|
+
{% if page.product_code %}
|
|
18
|
+
<p class="subtitle is-5 has-text-right">{{ page.product_code }}</p>
|
|
19
|
+
{% endif %}
|
|
20
|
+
|
|
21
|
+
{% if page.rating %}
|
|
22
|
+
{% include rating.html rating=page.rating %}
|
|
23
|
+
{% endif %}
|
|
24
|
+
|
|
25
|
+
{% if page.features %}
|
|
26
|
+
<div class="content">
|
|
27
|
+
{% for feature in page.features %}
|
|
28
|
+
<p>
|
|
29
|
+
<span class="icon">
|
|
30
|
+
{% if feature.icon %}
|
|
31
|
+
<i class="fas {{ feature.icon }}"></i>
|
|
32
|
+
{% else %}
|
|
33
|
+
<i class="fas fa-circle fa-xs"></i>
|
|
34
|
+
{% endif %}
|
|
35
|
+
</span>
|
|
36
|
+
<span>{{ feature.label }}</span></p>
|
|
37
|
+
{% endfor %}
|
|
38
|
+
</div>
|
|
39
|
+
{% endif %}
|
|
40
|
+
</div>
|
|
41
|
+
|
|
42
|
+
<div class="column is-12">
|
|
43
|
+
<p class="title is-4">Description</p>
|
|
44
|
+
<div class="content">
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
{{ content }}
|
|
48
|
+
</div>
|
|
49
|
+
</div>
|
|
50
|
+
|
|
51
|
+
{% if site.data.reviews[page.product_code] %}
|
|
52
|
+
<div class="column is-12">
|
|
53
|
+
<p class="title is-4">Reviews</p>
|
|
54
|
+
{% for review in site.data.reviews[page.product_code] %}
|
|
55
|
+
{% include review.html %}
|
|
56
|
+
{% endfor %}
|
|
57
|
+
</div>
|
|
58
|
+
{% endif %}
|
|
59
|
+
|
|
60
|
+
</div>
|
|
61
|
+
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bulma-clean-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: '0.5'
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- chrisrhymes
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2019-04-
|
|
11
|
+
date: 2019-04-27 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -154,11 +154,15 @@ files:
|
|
|
154
154
|
- _includes/menubar.html
|
|
155
155
|
- _includes/pagination.html
|
|
156
156
|
- _includes/post-card.html
|
|
157
|
+
- _includes/rating.html
|
|
158
|
+
- _includes/review.html
|
|
157
159
|
- _includes/tabs.html
|
|
158
160
|
- _layouts/blog.html
|
|
159
161
|
- _layouts/default.html
|
|
160
162
|
- _layouts/page.html
|
|
161
163
|
- _layouts/post.html
|
|
164
|
+
- _layouts/product-category.html
|
|
165
|
+
- _layouts/product.html
|
|
162
166
|
- _posts/2018-10-11-test3.md
|
|
163
167
|
- _posts/2018-10-12-test2.md
|
|
164
168
|
- _posts/2018-10-13-test.md
|