Guides

[即將上線] 部落格重構 Phase 2

Suggest Edits

Introduction

為了支援 SHOPLINE 的部落格重構 Phase 2，對於有開啟 Layout Engine 的店家，需調整代碼以支援以下新功能：

  1. 新增部落格分類頁相關 liquid 檔案
    1. 此異動將由 SHOPLINE 統一為 Layout Engine 店家更新，您無需調整代碼，此處僅列出更新內容
  2. 部落格文章內容頁，麵包屑增加部落格文章所屬分類
  3. 部落格首頁，增加文章分類區塊展示功能
  4. 部落格文章內容頁，增加文章分類區塊展示功能

1.新增部落格分類頁相關 liquid 檔案

(此異動將由 SHOPLINE 統一為 Layout Engine 店家更新，您無需調整代碼，此處僅列出更新內容)

A. 新增 liquid 檔案


B. 調整 Locales

調整多語言文案，以下以繁體中文舉例，開發者自行添加或調整 i18n key: shopline_translations.themes.blog.blog_list_page

範例語言如下：

語言文案
zh-hant.json文章分類
zh-cn.json文章分类
en.jsonAll categories
vi.jsonAll categories

2.部落格文章內容頁，麵包屑增加部落格文章所屬分類

步驟一：更新snippets/blog_breadcrumb.liquid，補充部落格麵包屑文章所屬分類代碼

{% if post.categories[0] %}  
  / <a class="Label" href="{{ post.categories[0].url }}">{{ post.categories\[0].name }}</a>  
{% endif %}

步驟二：麵包屑展示代碼中補充文章所屬分類調整如下圖所示


3.部落格首頁，增加文章分類區塊展示功能

調整templates/posts.liquid文件

步驟一：引入對應樣式與腳本文件

{{ 'section-post-list.css' | asset_source_tag: render_to_top: true }}
{{ 'section-blog-layout.css' | asset_source_tag: render_to_top: true }}
{{ 'post_categories_pannel.js' | asset_source }}

步驟二：調整部落格列表頁面 HTML 元素結構

<div class="post-info-section">
  <div class="post-info-section__left">
    {% include 'post_list' %}
    ...
  </div>
</div>

步驟三：補充部落格分類面板與部落格分類面板控制 HTML 元素

{% include 'post_categories_pannel_toggle' %}
{% include 'post_categories_pannel' %}

步驟四：部落格文章列表頁面調整圖示如下

步驟五：完整代碼範例如下

{{ 'section-post-list.css' | asset_source_tag: render_to_top: true }}
{{ 'section-blog-layout.css' | asset_source_tag: render_to_top: true }}
{{ 'post_categories_pannel.js' | asset_source }}

<div class="block-inner">
  <div class="pd-box">
    <div class="container">
      {% include 'post_categories_pannel_toggle' %}
      <div class="post-info-section">
        <div class="post-info-section__left">
          {% include 'post_list' %}
          <!-- PostList Pagination -->
          {% if paginate.pages > 1 %}
          <div class="text-center">
            <ul class="pagination">
              {% if paginate.previous.is_link %}
              <li>
                <a class="Label" href="{{ paginate.previous.url }}"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
              </li>
              {% endif %}
              {% for part in paginate.parts %}
              <li class="{% if part.page == paginate.current_page %}active{% endif %}"><a class="Label" href="{{ part.handle }}">{{
                  part.title }}</a></li>
              {% endfor %}
              {% if paginate.next.is_link %}
              <li>
                <a class="Label" href="{{ paginate.next.url }}"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
              </li>
              {% endif %}
            </ul>
          </div>
          {% endif %}
           <!-- PostList Pagination End -->
        </div>
        {% include 'post_categories_pannel' %}
      </div>
    </div>
  </div>
</div>

附加說明

以上步驟中代碼均為範例，具體代碼結構、樣式、腳本、實現方式，開發者可自行調整。


4.部落格文章內容頁，增加文章分類區塊展示功能

調整templates/post.liquid文件

步驟一：引入對應樣式與腳本文件

{{ 'section-blog-layout.css' | asset_source_tag: render_to_top: true }}
{{ 'post_categories_pannel.js' | asset_source }}

步驟二：調整部落格列表頁面 HTML 元素結構

<div class="post-info-section">
  <div class="post-info-section__left">
    {% include 'post_list' %}
    ...
  </div>
</div>

步驟三：補充部落格分類面板與部落格分類面板控制 HTML 元素

{% include 'post_categories_pannel_toggle' %}
{% include 'post_categories_pannel' %}

步驟四：部落格文章內容頁調整圖示如下

步驟五：完整代碼範例如下

{{ 'page-post-detail.css' | asset_source_tag }}
{{ 'section-blog-layout.css' | asset_source_tag: render_to_top: true }}
{{ 'post_categories_pannel.js' | asset_source }}

<div class="block-inner">
  <div class="pd-box">
    <div class="container">
      {% include 'post_categories_pannel_toggle' %}
      <div class="post-info-section">
        <div class="post-info-section__left">
          <div class="Post">
            <h1 class="Post-title primary-border-color-after"> {{ post.title }} </h1>
            <div class="Post-date"> {{ post.date }} </div>
            <div class="Post-content {% if shop.features contains 'blog_revamp_admin' %}ck-content{% endif %}">
              {% assign rich_content_body = post.content %}
              {% include 'rich_content' %}
            </div>
            {% share_buttons %} {{ post.url }} {% end_share_buttons %}
          </div>
        </div>
        {% include 'post_categories_pannel' %}
      </div>
    </div>
  </div>
</div>

附加說明

以上步驟中的代碼均為範例，具體代碼結構、樣式、腳本、實現方式，開發者可自行調整。

Updated about 1 month ago