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

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block stylesheet %}
  4.     <link rel="stylesheet" href="/html/template/default/assets/css/content.css">
  5.     <link rel="stylesheet" href="/html/template/default/assets/css/frame03.css">
  6. {% endblock %}
  8. {% set categories = [
  9.         'essay',
  10.         'interview',
  11.         'report',
  12.         'guide',
  13.         'philosophy'
  14.     ]
  15. %}
  17. {% block javascript %}
  18.     <script>
  19.         $(function(){
  20.             $('.slide-img:not(".slide-img-slow")').slick({
  21.             autoplay: true,
  22.             autoplaySpeed: 3000,
  23.             arrows: false,
  24.             dots: false,
  25.             infinite: true,
  26.             speed: 800,
  27.             slidesToShow: 1,
  28.             variableWidth: true,
  29.             centerMode: true,
  30.             responsive: [
  31.             {
  32.                 breakpoint: 750,
  33.                 settings: {
  34.                 variableWidth: true,
  35.                 centerMode: true,
  36.                 }
  37.             }
  38.             ]
  39.         });
  41.         $('.slide-img-slow > li:last-child > img').on('load',function(){
  42.             setTimeout(function(){
  43.             $('.slide-img-slow').not('.slick-initialized').slick({
  44.                 autoplay: true,
  45.                 autoplaySpeed: 0,
  46.                 arrows: false,
  47.                 dots: false,
  48.                 speed: 18000,
  49.                 infinite: true,
  50.                 cssEase: 'linear',
  51.                 slidesToShow: 1,
  52.                 variableWidth: true,
  53.                 centerMode: true,
  54.                 draggable: false,
  55.                 touchMove: false,
  56.                 pauseOnFocus: false,
  57.                 pauseOnHover: false,
  58.             });
  59.             $('.slide-img-slow').css('opacity',1);
  60.             },1000);
  61.         });
  63.         $('.slide-img-slow > li > img').each(function(){
  64.             var ctrl = $(this);
  65.             ctrl.attr('src',ctrl.data('src'));
  66.         });
  68.         });
  69.     </script>
  70.     {% if Post.category[0].slug in categories %}
  71.         <script>
  72.             $(document).ready(function () {
  73.                 const postSlug = '{{ Post.category[0].slug }}';
  74.                 console.log(postSlug);
  75.                 $('#page_special_detail').addClass('bg-' + postSlug);
  76.             });
  77.         </script>
  78.     {% endif %}
  79.     <script>
  80.         $(function () {
  81.             $("#share-menu-button").on('click', function () {
  82.                 $("#share-menu").fadeToggle();
  83.                 copyLinkText('リンクをコピー');
  84.             });
  85.         });
  87.         function copyUrl() {
  88.             const url = location.href;
  89.             navigator.clipboard.writeText(url);
  90.             copyLinkText('コピーしました');
  91.             setTimeout(function () {
  92.             copyLinkText('リンクをコピー');
  93.             }, 2000);
  94.         }
  96.         function openLineShare() {
  97.             const lineUrl = 'https://social-plugins.line.me/lineit/share?url=';
  98.             const url = location.href;
  99.             window.open(`${lineUrl}${url}`)
  100.         }
  102.         function openMail() {
  103.             const url = location.href;
  104.             const mailto = `mailto:?body=${url}`;
  105.             window.open(mailto);
  106.         }
  108.         function copyLinkText(text) {
  109.             $("#copy-link > span").text(text);
  110.         }
  111.     </script>
  112. {% endblock %}
  114. {% block main %}
  115.     <div
  116.         class="second-wrap white-wrap w-full flex flex-col items-center justify-center font-extralight mx-auto animate-slideIn">
  117.         <!-- KV -->
  118.         <div id="section-kv" class="w-full z-10">
  119.             <div class="flex flex-col items-center w-full">
  120.                 <img src="{{ Post.special_kv_pc.url }}" alt="{{ Post.special_kv_pc.alt }}" class="sm:hidden object-cover h-[450px] w-full overflow-hidden">
  121.                 <img src="{{ Post.special_kv_sp.url }}" alt="{{ Post.special_kv_sp.alt }}" class="hidden sm:block w-full object-cover h-[640px]">
  122.                 <div class="max-w-[880px] w-full lg:w-[86.6vw]  md:mx-6 bg-black bg-opacity-80 text-white px-12 py-14 md:py-8 md:px-6 flex-col flex mt-[-24px] relative">
  123.                     <p class="text-end text-[#B0B0B0] text-sm md:text-xs absolute top-[4px] right-[8px]">{{ Post.post_date|date('Y/m/d') }}</p>
  124.                     <div class="flex items-center border border-white w-fit mb-3 text-sm sm:text-xs px-3 py-[2px]">
  125.                         <p class="{% if Post.sub_category is not empty %} after:content-['|'] {% endif %}">{{ Post.category[0].name }}
  126.                         </p>
  127.                         {% if Post.sub_category is not empty %}
  128.                             <span class="{% if Post.sub_category is not empty %} ml-1 {% endif %}">{{ Post.sub_category.name }}</span>
  129.                         {% endif %}
  130.                     </div>
  131.                     <h1 class="text-3xl md:text-xl leading-loose tracking-[5px]">{{ Post.post_title|raw }}</h1>
  132.                 </div>
  133.             </div>
  134.         </div>
  135.         <div id="page_special_detail" class="w-[100vw] mx-[-50vw] h-fit relative flex flex-col items-center bg-top mt-[-180px] lg:px-6 md:pt-[100px]">
  136.             <div class="section-inner">
  137.                 <div class="section-cont text-[10px]">
  138.                     {{ Post.filter_content|raw }}
  139.                 </div>
  140.             </div>
  141.         </div>
  142.         <div class="max-w-[880px] w-full mx-auto md:px-3">
  143.             <div class="w-full flex justify-between text-sm py-28 items-center">
  144.                 {% if PrevPost is not empty %}
  145.                     <a href="{{ path('special_post',{'id':PrevPost}) }}" class="flex items-center gap-4 md:gap-2">
  146.                         <img src="{{asset('/html/template/default/assets/img/special/arrow-prev.svg')}}" alt="" class="mt-1 md:w-10">
  147.                         <p class="whitespace-nowrap text-xs">前の記事へ</p>
  148.                     </a>
  149.                 {% else %}
  150.                     <div class="w-[134px] opacity-0"></div>
  151.                 {% endif %}
  152.                     <div class="md:mt-16 whitespace-nowrap">
  153.                         <a href="{{ path('special_posts') }}" class="border border-[#DFDFDF] px-3 py-1 md:text-xs md:px-1 text-center">記事一覧へ</a>
  154.                     </div>
  155.                 {% if NextPost is not empty %}
  156.                     <a href="{{ path('special_post',{'id':NextPost}) }}" class="flex items-center gap-4 md:gap-2">
  157.                         <p class="whitespace-nowrap text-xs">次の記事へ</p>
  158.                         <img src="{{asset('/html/template/default/assets/img/special/arrow-next.svg')}}" alt="" class="mt-1 md:w-10">
  159.                     </a>
  160.                 {% else %}
  161.                     <div class="w-[134px] opacity-0"></div>
  162.                 {% endif %}
  163.             </div>
  164.             <hr class="bg-[#DFDFDF] w-[100vw] mx-[calc(50%-50vw)] px-[calc(50%-50vw)]">
  165.             <div class="w-full mt-24 md:mt-8 flex flex-col items-center">
  166.                 <h2 class="text-xl mb-10 md:mb-6 md:text-sm">SHARE</h2>
  167.                 {# TODO:シェアボタン #}
  168.                 <ul id="share-menu" class="flex mb-8 items-center">
  169.                     <li class="hover cursor-pointer p-3 " onclick="openLineShare()">
  170.                         <img class="h-8 w-8" src="{{ asset('assets/icon/LINE_LOGO.svg') }}">
  171.                     </li>
  172.                     <li class="hover cursor-pointer p-3" onclick="openMail()">
  173.                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
  174.                             <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75"/>
  175.                         </svg>
  176.                     </li>
  177.                     <li id="copy-link" class="hover cursor-pointer p-3" onclick="copyUrl()">
  178.                         <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="size-7">
  179.                             <path fill-rule="evenodd" d="M19.902 4.098a3.75 3.75 0 0 0-5.304 0l-4.5 4.5a3.75 3.75 0 0 0 1.035 6.037.75.75 0 0 1-.646 1.353 5.25 5.25 0 0 1-1.449-8.45l4.5-4.5a5.25 5.25 0 1 1 7.424 7.424l-1.757 1.757a.75.75 0 1 1-1.06-1.06l1.757-1.757a3.75 3.75 0 0 0 0-5.304Zm-7.389 4.267a.75.75 0 0 1 1-.353 5.25 5.25 0 0 1 1.449 8.45l-4.5 4.5a5.25 5.25 0 1 1-7.424-7.424l1.757-1.757a.75.75 0 1 1 1.06 1.06l-1.757 1.757a3.75 3.75 0 1 0 5.304 5.304l4.5-4.5a3.75 3.75 0 0 0-1.035-6.037.75.75 0 0 1-.354-1Z" clip-rule="evenodd"/>
  180.                         </svg>
  181.                     </li>
  182.                 </ul>
  183.             </div>
  184.         </div>
  185.         <div class="w-full max-w-[1120px] lg:px-12 mt-[130px] md:mt-10 mb-8 md:mb-0">
  186.             <ul id="breadcrumbs" class="border-t border-[#EFEFEF] py-5 md:py-4 w-full md:text-xs text-sm tracking-widest flex items-center gap-x-1">
  187.                 <li>
  188.                     <a href="{{ url('homepage') }}" class="hover">
  189.                         <span>HOME</span>
  190.                     </a>
  191.                 </li>
  192.                 <span>/</span>
  193.                 <li>
  194.                     <a href={{url('special_posts')}} class="hover">
  195.                         <span>特集</span>
  196.                     </a>
  197.                 </li>
  198.                 <span>/</span>
  199.                 <li>
  200.                     <span>{{ Post.post_title|raw }}</span>
  201.                 </li>
  202.             </ul>
  203.         </div>
  204.     </div>
  206. {% endblock %}