app/template/user_data/reading.twig line 4

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {# 投稿リストの取得 #}
  4. {% set post_list = TabaCMSPostList({ page_count: 10, type_data_key: 'news', category_data_key: app.request.query.get('category_data_key') }) %}
  5. {% set category_list = TabaCMSCategoryList({type_data_key:'news'}) %}
  7. {% block javascript %}
  8.     {{ TabaCMSAsset('script.js','script')|raw }}
  9.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  10.     <script>
  11.         $(document).ready(function() {
  12.             $('.category-button').on('click', function() {
  13.                 var categoryKey = $(this).data('category-key');
  14.                 var url = new URL(window.location.href);
  15.                 url.searchParams.set('category_data_key', categoryKey);
  16.                 window.location.href = url.href;
  17.             });
  18.         });
  19.     </script>
  20. {% endblock javascript %}
  22. {% block stylesheet %}
  23.     {{ TabaCMSAsset('style.css','style')|raw }}
  24.     <style>
  25.         @media (min-width: 769px) {
  26.             .content-container.sp {
  27.                 display: none;
  28.             }
  29.         }
  30.     </style>
  31. {% endblock stylesheet %}
  33. {% set breadcrumbs = [{'name': 'ニュース'}] %}
  35. {% block main %}
  36.     <div class="flex w-[990px] justify-between mx-auto lg:w-full lg:flex-col lg:items-center lg:px-4">
  37.         <div class="w-[720px] text-[#000000] md:w-full mt-[40px] lg:mt-6">
  38.             <p class="flex justify-center text-[34px] md:text-2xl font-extralight">お知らせ</p>
  39.             <p class="text-[16px] font-[250] items-center mt-6 md:mt-4 mb-10 md:mb-8 md:text-[14px]">
  40.                 商品についての情報、お得な情報などをお届けします。
  41.             </p>
  42.             {% for post in post_list %}
  43.                 <a href="{{ post.getURI }}" class="hover flex gap-2.5 justify-between my-14 md:my-10 md:w-full h-[210px] md:mx-auto md:flex-col md:h-[auto]">
  44.                     <div class="w-[320px] md:w-full">
  45.                         <img src="{{ asset(post.thumbnail|no_image_product, 'save_image') }}" class="w-[320px] h-full md:w-full md:h-[225px] object-cover">
  46.                     </div>
  47.                     <div class="w-[364px] font-[250px] flex flex-col gap-2 md:w-full">
  48.                         <h2 class="text-2xl text-[#000000] md:text-lg font-extralight">{{ post.getTitle }}</h2>
  49.                         {% if post.category %}
  50.                             <time datetime={{ post.getPublicDate|date('Y-m-d') }} class="text-[13px] text-[#666666]">
  51.                                 <span>{{ post.getPublicDate|date('Y.m.d') }}更新<span>
  52.                                 <span class="pl-2">{{ post.category.categoryName }}<span>
  53.                             </time>
  54.                         {% endif %}
  55.                         {% set stripped_body = post.body|striptags %}
  56.                         <p class="text-[14px] text-[#666666]">
  57.                             {{ stripped_body|length > 90 ? stripped_body|slice(0, 90) ~ '...' : stripped_body|raw }}
  58.                         </p>
  59.                     </div>
  60.                 </a>
  61.             {% endfor %}
  62.             {% if post_list.totalItemCount > 0 %}
  63.                 {% include "pager.twig" with {'pages':post_list.paginationData} %}
  64.             {% endif %}
  65.         </div>
  66.         <div class="w-[200px] md:w-full flex flex-col mt-1 md:mt-0">
  67.             <div class="text-sm text-[250] text-[#000000] md:p-[30px] md:mt-6 md:bg-[#F6F6F6]">
  68.                 <p>Category :</p>
  69.                 <div class="mt-[10px] text-[#000000] md:font-[400]">
  70.                 {% for category in category_list %}
  71.                     <p>
  72.                         <button class="category-button w-full text-left my-[2px] underline" data-category-key="{{ category.dataKey }}">
  73.                             {{ category.categoryName }} ({{ category.postCount }})
  74.                         </button>
  75.                     </p>
  76.                 {% endfor %}
  77.                 </div>
  78.             </div>
  79.         </div>
  80.     </div>
  81.         {% set breadcrumbs = [{'name': 'お知らせ・読み物'}] %}
  82.         {% include('Block/breadcrumbs.twig') %}
  83. {% endblock %}