bulma-clean-theme 0.4.1 → 0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|