W tym artykule dowiesz się jak dodać drugą wersję widoku bloga na stronie głównej w szablonie Szafir – powiększone kafle z większą ilością tekstu.
Od wersji 2020.3 w standardowym szablonie Szafir dostępne są dwie wersje widoku bloga. Poniższa instrukcja dedykowana jest dla szablonów starszych lub modyfikowanych.
W pierwszej kolejności należy zmodyfikować plik __settings.liquid. Pierwsze dwie linijki w pliku powinny wyglądać następująco:
|
0 1 2 3 |
{% case languageId %} {% when '1' %} |
|
0 1 2 3 4 5 |
{% assign blogOnHomepage = "Blog na stronie głównej" -%} {% assign blogPresentationOnHomepage = "Prezentacja bloga na stronie głównej" -%} {% assign extended = "Rozszerzony" -%} {% assign compact = "Kompaktowy" -%} |
|
0 1 2 3 4 5 |
{% assign blogOnHomepage = "Blog on homepage" -%} {% assign blogPresentationOnHomepage = "Blog presentation on homepage" -%} {% assign extended = "Extended" -%} {% assign compact = "Compact" -%} |
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<fieldset> <legend>{{blogOnHomepage}}</legend> <section> <h3 class="section-title">{{blogPresentationOnHomepage}}</h3> <div class="table"> <div class="trow"> <div class="tcell"> <input type="radio" name="blogPresentationOnHomepage" value="extended" id="blogPresentationOnHomepage-extended" {%="" if="" settings.blogpresentationonhomepage="=" 'extended'="" %}="" checked="" endif=""> <label class="label" for="blogPresentationOnHomepage-extended">{{extended}}</label> </div> <div class="tcell"> <input type="radio" name="blogPresentationOnHomepage" value="compact" id="blogPresentationOnHomepage-compact" {%="" if="" settings.blogpresentationonhomepage="=" 'compact'="" %}="" checked="" endif=""> <label class="label" for="blogPresentationOnHomepage-compact">{{compact}}</label> </div> </div> </div> </section> </fieldset> |
Usuń pierwszą linię kodu i wklej poniższy.
|
0 1 2 |
<div class="blog-posts-slider-lq blog-posts-slider-ui {% if settings.blogPresentationOnHomepage == 'extended' %} extended-ui {% endif -%}"> |
|
0 1 2 3 4 5 6 |
{% if settings.blogPresentationOnHomepage == 'extended' %} <div class="blog-publication-date-ui">{{post.Content}}</div> {% else -%} <time class="blog-publication-date-ui">{{post.PublishedDate}}</time> {% endif -%} |
W dowolnym miejscu wklej poniższy kod.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
.blog-posts-slider-ui.extended-ui .blog-home-ui { border: none; } @media only screen and (min-width: 1280px) { .blog-posts-slider-ui.extended-ui .blog-home-ui { width: calc(33% - 49px); border: none; margin: 40px 80px 0 0; } .blog-posts-slider-ui.extended-ui .blog-home-ui .product-caption-ui { height: auto; } .blog-posts-slider-ui.extended-ui .blog-home-ui .blog-publication-date-ui { height: 50px; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; } .blog-posts-slider-ui.extended-ui .blog-home-ui .latest-blog-post-heading { font-weight: 700; } .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child { width: 100%; margin: 0; padding-bottom: 0; } .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .blog-home-news-ui { width: 45%; height: 213px; margin-right: 4%; float: left; } .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .product-caption-ui { width: 50%; float: left; } .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .latest-blog-post-heading { font-size: 22px; } .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .blog-publication-date-ui { height: auto; font-size: 16px; } .blog-posts-slider-ui.extended-ui .blog-home-ui:first-child .read-more-ui { float: left; } .blog-posts-slider-ui.extended-ui .blog-home-ui:last-child { margin-right: 0; } } |