app/template/default/Special/index.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  4. {% block javascript %}
  5.     <script>
  6.         $(function () {
  7. const sections = [
  8. 'essay',
  9. 'document',
  10. 'report',
  11. 'guide',
  12. 'philosophy'
  13. ];
  14. sections.forEach(section => {
  15. const posts = $ (`.${section}_post`);
  16. const showMoreButton = $ (`#${section}_show_more`);
  17. let visibleCount = 2;
  18. // 初期表示
  19. posts.slice(0, visibleCount).removeClass('hidden');
  20. showMoreButton.on('click', function () {
  21. visibleCount += 6;
  22. posts.slice(0, visibleCount).removeClass('hidden');
  23. // すべて表示したらボタンを隠す
  24. if (visibleCount >= posts.length) {
  25. showMoreButton.addClass('hidden');
  26. }
  27. });
  28. // 初期状態でボタンを非表示にするか確認
  29. if (visibleCount >= posts.length) {
  30. showMoreButton.addClass('hidden');
  31. }
  32. });
  33. });
  34.     </script>
  35. </script>{% endblock %}{% block main %}
  36. <div class="w-full flex flex-col items-center justify-center font-extralight">
  37.     <div class="w-full pb-20 md:pb-10 flex flex-col items-center border-b border-[#DFDFDF] mt-3">
  38.         <img src="{{asset('assets/img/special/special-top01_pc@2x.webp')}}" alt="" class="w-[max(45.83vw,880px)] mb-20 md:hidden">
  39.         <img src="{{asset('assets/img/special/special-top01_sp@2x.webp')}}" alt="" class="w-[325px] h-auto mb-10 hidden md:block">
  40.         <h1 class="text-[40px] tracking-[11px] md:text-lg">祈りに親しむ</h1>
  41.     </div>
  43.     <!-- Essay Section -->
  44.     <div class="w-full h-fit bg-special-essay bg-cover object-cover bg-top bg-no-repeat">
  45.         <div class="h-fit top-[50%] left-[50%] py-16 md:py-12 m-auto sm:m-0 max-w-[1336px] xxl:px-[10px] w-full flex flex-col items-center">
  46.             <img src="{{asset('assets/img/special/essay.png')}}" alt="" class="mb-5 md:mb-2 md:w-[66px] h-auto">
  47.             <h2 class="text-[28px] mb-20 md:mb-8 md:text-xl tracking-[5.6px]">エッセイ</h2>
  48.             <div class="w-full grid grid-cols-2 md:grid-cols-1 gap-6 md:flex-col">
  49.                 {% for Post in essay_posts %}
  50.                     <div class="bg-white shadow-manaka md:w-full essay_post hidden hover">
  51.                         <a href="{{ path('special_post', {id: Post.ID}) }}">
  52.                             <img src="{{ Post.special_kv_pc.url }}" alt="{{ Post.special_kv_pc.alt }}" class="w-full bg-center sm:h-[170px] h-[310px] object-cover">
  53.                             <div class="pt-6 pb-10 px-8 md:px-6 md:pb-9">
  54.                                 <div class="mb-4 flex items-center justify-between">
  55.                                     <div class="w-fit flex py-[2px] px-2 border border-[#B0B0B0] sm:text-[10px]">
  56.                                         <p class="after:content-['|']">
  57.                                             {% if Post.category is not null %}
  58.                                                 {{ Post.category.name }}
  59.                                             {% endif %}
  60.                                         </p>
  61.                                         <p class="ml-1">
  62.                                             {% if Post.sub_category is not null %}
  63.                                                 {{ Post.sub_category.name }}
  64.                                             {% endif %}
  65.                                         </p>
  66.                                     </div>
  67.                                     <p class="text-sm md:text-xs">{{ Post.post_date|date('Y/m/d') }}</p>
  68.                                 </div>
  69.                                 <h3 class="text-xl mb-5 tracking-[4px] leading-8 md:text-sm">{{ Post.post_title|raw }}</h3>
  70.                                 {% set content = Post.filter_content|striptags %}
  71.                                 <p class="bg-white article-read text-sm md:text-xs tracking-widest leading-loose">{{ content|length > 55 ? content|slice(0,55) ~ '...' : content }}</p>
  72.                             </div>
  73.                         </a>
  74.                     </div>
  75.                 {% endfor %}
  76.             </div>
  77.             <button id="essay_show_more" class="mt-16 md:mt-12 hover gap-8 shadow bg-white border-b-[6px] w-[250px] sm:w-[175px] py-10 md:py-4 flex items-center justify-center border-manakaGray">
  78.                 <p class="text-xl md:text-sm">更に見る</p>
  79.                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" style="color: #7d7d7d;" stroke-width="1.5" stroke="currentColor" class="size-6">
  80.                     <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
  81.                 </svg>
  82.             </button>
  83.         </div>
  84.     </div>
  86.     <!-- Document Section -->
  87.     <div class="w-full h-fit bg-special-document bg-cover object-cover bg-top bg-no-repeat">
  88.         <div class="h-fit top-[50%] left-[50%] py-16 md:py-12 m-auto sm:m-0 max-w-[1336px] xxl:px-[10px] w-full xl:px-3 flex flex-col items-center">
  89.             <img src="{{asset('assets/img/special/document.png')}}" alt="" class="mb-5 w-[42px] h-auto">
  90.             <h2 class="text-[28px] mb-20 md:mb-8 md:text-xl tracking-[5.6px]">ドキュメント</h2>
  91.             <div class="w-full grid grid-cols-2 md:grid-cols-1 gap-6 md:flex-col">
  92.                 {% for Post in document_posts %}
  93.                     <div class="bg-white shadow-manaka md:w-full document_post hidden hover">
  94.                         <a href="{{ path('special_post', {id: Post.ID}) }}">
  95.                             <img src="{{ Post.special_kv_pc.url }}" alt="{{ Post.special_kv_pc.alt }}" class="w-full bg-center sm:h-[170px] h-[310px] object-cover">
  96.                             <div class="pt-6 pb-10 px-8 md:px-6">
  97.                                 <div class="mb-4 flex items-center justify-between">
  98.                                     <div class="w-fit flex py-[2px] px-2 border border-[#B0B0B0] sm:text-[10px]">
  99.                                         <p class="after:content-['|']">
  100.                                             {% if Post.category is not null %}
  101.                                                 {{ Post.category.name }}
  102.                                             {% endif %}
  103.                                         </p>
  104.                                         <p class="ml-1">
  105.                                             {% if Post.sub_category is not null %}
  106.                                                 {{ Post.sub_category.name }}
  107.                                             {% endif %}
  108.                                         </p>
  109.                                     </div>
  110.                                     <p class="text-sm md:text-xs">{{ Post.post_date|date('Y/m/d') }}</p>
  111.                                 </div>
  112.                                 <h3 class="text-xl mb-5 tracking-[4px] leading-8 md:text-sm">{{ Post.post_title|raw }}</h3>
  113.                                 {% set content = Post.filter_content|striptags %}
  114.                                 <p class="bg-white article-read text-sm md:text-xs tracking-widest leading-loose">{{ content|length > 55 ? content|slice(0,55) ~ '...' : content }}</p>
  115.                             </div>
  116.                         </a>
  117.                     </div>
  118.                 {% endfor %}
  119.             </div>
  120.             <button id="document_show_more" class="hover mt-16 md:mt-12 gap-8 shadow bg-white border-b-[6px] w-[250px] sm:w-[175px] py-10 md:py-4 flex items-center justify-center border-manakaGray">
  121.                 <p class="text-xl md:text-sm">更に見る</p>
  122.                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" style="color: #7d7d7d;" stroke-width="1.5" stroke="currentColor" class="size-6">
  123.                     <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
  124.                 </svg>
  125.             </button>
  126.         </div>
  127.     </div>
  129.     <!-- Report Section -->
  130.     <div class="w-full h-fit bg-special-report bg-cover object-cover bg-top bg-no-repeat">
  131.         <div class="h-fit top-[50%] left-[50%] py-16 md:py-12 m-auto sm:m-0 max-w-[1336px] xxl:px-[10px] w-full xl:px-3 flex flex-col items-center">
  132.             <img src="{{asset('assets/img/special/report.png')}}" alt="" class="mb-5 md:w-[65px] h-auto">
  133.             <h2 class="text-[28px] mb-20 md:mb-8 md:text-xl tracking-[5.6px]">レポート</h2>
  134.             <div class="w-full grid grid-cols-2 md:grid-cols-1 gap-6 md:flex-col">
  135.                 {% for Post in report_posts %}
  136.                     <div class="bg-white shadow-manaka md:w-full report_post hidden hover">
  137.                         <a href="{{ path('special_post', {id: Post.ID}) }}">
  138.                             <img src="{{ Post.special_kv_pc.url }}" alt="{{ Post.special_kv_pc.alt }}" class="w-full bg-center sm:h-[170px] h-[310px] object-cover">
  139.                             <div class="pt-6 pb-10 px-8 md:px-6">
  140.                                 <div class="mb-4 flex items-center justify-between">
  141.                                     <div class="w-fit flex py-[2px] px-2 border border-[#B0B0B0] sm:text-[10px]">
  142.                                         <p>
  143.                                             {% if Post.category is not null %}
  144.                                                 {{ Post.category.name }}
  145.                                             {% endif %}
  146.                                         </p>
  147.                                         <p class="{% if Post.sub_category is not null %} before::content-['|'] {% endif %}">
  148.                                             {% if Post.sub_category is not null %}
  149.                                                 {{ Post.sub_category.name }}
  150.                                             {% endif %}
  151.                                         </p>
  152.                                     </div>
  153.                                     <p class="text-sm md:text-xs">{{ Post.post_date|date('Y/m/d') }}</p>
  154.                                 </div>
  155.                                 <h3 class="text-xl mb-5 tracking-[4px] leading-8 md:text-sm">{{ Post.post_title|raw }}</h3>
  156.                                 {% set content = Post.filter_content|striptags %}
  157.                                 <p class="bg-white article-read text-sm md:text-xs tracking-widest leading-loose">{{ content|length > 55 ? content|slice(0,55) ~ '...' : content }}</p>
  158.                             </div>
  159.                         </a>
  160.                     </div>
  161.                 {% endfor %}
  162.             </div>
  163.             <button id="report_show_more" class="hover mt-16 gap-8 shadow bg-white border-b-[6px] w-[250px] py-10 md:py-4 flex items-center justify-center border-manakaGray">
  164.                 <p class="text-xl md:text-sm">更に見る</p>
  165.                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" style="color: #7d7d7d;" stroke-width="1.5" stroke="currentColor" class="size-6">
  166.                     <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
  167.                 </svg>
  168.             </button>
  169.         </div>
  170.     </div>
  172.     <!-- Guide Section -->
  173.     <div class="w-full h-fit bg-special-guide bg-cover object-cover bg-top bg-no-repeat">
  174.         <div class="h-fit top-[50%] left-[50%] py-16 md:py-12 m-auto sm:m-0 max-w-[1336px] w-full xxl:px-[10px] xl:px-3 flex flex-col items-center">
  175.             <img src="{{asset('assets/img/special/guid.png')}}" alt="" class="mb-5 w-10 h-auto">
  176.             <h2 class="text-[28px] mb-20 md:mb-8 md:text-xl tracking-[5.6px]">ガイド</h2>
  177.             <div class="w-full grid grid-cols-2 md:grid-cols-1 gap-6 md:flex-col">
  178.                 {% for Post in guide_posts %}
  179.                     <div class="bg-white shadow-manaka md:w-full guide_post hidden hover">
  180.                         <a href="{{ path('special_post', {id: Post.ID}) }}">
  181.                             <img src="{{ Post.special_kv_pc.url }}" alt="{{ Post.special_kv_pc.alt }}" class="w-full bg-center sm:h-[170px] h-[310px] object-cover">
  182.                             <div class="pt-6 pb-10 px-8 md:px-6">
  183.                                 <div class="mb-4 flex items-center justify-between">
  184.                                     <div class="w-fit flex py-[2px] px-2 border border-[#B0B0B0] sm:text-[10px]">
  185.                                         <p>
  186.                                             {% if Post.category is not null %}
  187.                                                 {{ Post.category.name }}
  188.                                             {% endif %}
  189.                                         </p>
  190.                                         <p class="{% if Post.sub_category is not null %} before:content-['|'] {% endif %}">
  191.                                             {% if Post.sub_category is not null %}
  192.                                                 {{ Post.sub_category.name }}
  193.                                             {% endif %}
  194.                                         </p>
  195.                                     </div>
  196.                                     <p class="text-sm md:text-xs">{{ Post.post_date|date('Y/m/d') }}</p>
  197.                                 </div>
  198.                                 <h3 class="text-xl mb-5 tracking-[4px] leading-8 md:text-sm">{{ Post.post_title|raw }}</h3>
  199.                                 {% set content = Post.filter_content|striptags %}
  200.                                 <p class="bg-white article-read text-sm md:text-xs tracking-widest leading-loose">{{ content|length > 55 ? content|slice(0,55) ~ '...' : content }}</p>
  201.                             </div>
  202.                         </a>
  203.                     </div>
  204.                 {% endfor %}
  205.             </div>
  206.             <button id="guide_show_more" class="hover mt-16 md:mt-12 gap-8 shadow bg-white border-b-[6px] w-[250px] sm:w-[175px] py-10 md:py-4 flex items-center justify-center border-manakaGray">
  207.                 <p class="text-xl md:text-sm">更に見る</p>
  208.                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" style="color: #7d7d7d;" stroke-width="1.5" stroke="currentColor" class="size-6">
  209.                     <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
  210.                 </svg>
  211.             </button>
  212.         </div>
  213.     </div>
  215.     <!-- Philosophy Section -->
  216.     <div class="w-full h-fit bg-special-philosophy bg-cover object-cover bg-top bg-no-repeat">
  217.         <div class="h-fit top-[50%] left-[50%] py-16 md:py-12 m-auto sm:m-0 max-w-[1336px] xxl:px-[10px] w-full xl:px-3 flex flex-col items-center">
  218.             <img src="{{asset('assets/img/special/philosophy.png')}}" alt="" class="mb-5 md:w-14 h-auto">
  219.             <h2 class="text-[28px] mb-20 md:mb-8 md:text-xl tracking-[5.6px]">フィロソフィ</h2>
  220.             <div class="w-full grid grid-cols-2 md:grid-cols-1 gap-6 md:flex-col">
  221.                 {% for Post in philosophy_posts %}
  222.                     <div class="bg-white shadow-manaka md:w-full philosophy_post hidden hover">
  223.                         <a href="{{ path('special_post', {id: Post.ID}) }}">
  224.                             <img src="{{ Post.special_kv_pc.url }}" alt="{{ Post.special_kv_pc.alt }}" class="w-full bg-center md:h-[170px] h-[310px] object-cover">
  225.                             <div class="pt-6 pb-10 px-8 md:px-6">
  226.                                 <div class="mb-4 flex items-center justify-between">
  227.                                     <div class="w-fit flex py-[2px] px-2 border border-[#B0B0B0] sm:text-[10px]">
  228.                                         <p>
  229.                                             {% if Post.category is not null %}
  230.                                                 {{ Post.category.name }}
  231.                                             {% endif %}
  232.                                         </p>
  233.                                         <p class="{% if Post.sub_category is not null %} before:content-['|'] {% endif %}">
  234.                                             {% if Post.sub_category is not null %}
  235.                                                 {{ Post.sub_category.name }}
  236.                                             {% endif %}
  237.                                         </p>
  238.                                     </div>
  239.                                     <p class="text-sm md:text-xs">{{ Post.post_date|date('Y/m/d') }}</p>
  240.                                 </div>
  241.                                 <h3 class="text-xl mb-5 tracking-[4px] leading-8 md:text-sm">{{ Post.post_title|raw }}</h3>
  242.                                 {% set content = Post.filter_content|striptags %}
  243.                                 <p class="bg-white article-read text-sm md:text-xs tracking-widest leading-loose">{{ content|length > 55 ? content|slice(0,55) ~ '...' : content }}</p>
  244.                             </div>
  245.                         </a>
  246.                     </div>
  247.                 {% endfor %}
  248.             </div>
  249.             <button id="philosophy_show_more" class="gap-8 mt-16 md:mt-12 shadow hover bg-white border-b-[6px] w-[250px] sm:w-[175px] py-10 md:py-4 flex items-center justify-center border-manakaGray">
  250.                 <p class="text-xl md:text-sm">更に見る</p>
  251.                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" style="color: #7d7d7d;" stroke-width="1.5" stroke="currentColor" class="size-6">
  252.                     <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
  253.                 </svg>
  254.             </button>
  255.         </div>
  256.     </div>
  257.     <div class="max-w-[1120px] w-full px-6 md:px-0">
  258.         {% set breadcrumbs = [{'name': '特集'}] %}
  259.         {% include('Block/breadcrumbs.twig') %}
  260.     </div>
  261. </div>{% endblock %}