app/Plugin/TabaCMS2/Resource/template/default/post.twig line 1

Open in your IDE?
  1. {#
  2. Copyright (C) SPREAD WORKS Inc. All Rights Reserved.
  4. For the full copyright and license information, please view the LICENSE
  5. file that was distributed with this source code.
  6. #}
  7. {% extends 'default_frame.twig' %}
  8. {% set body_class = 'tabacms_post_page' %}
  10. {# 投稿データの取得 #}
  11. {% set post = TabaCMSPost() %}
  12. {% set share_title = post.getTitle|raw|nl2br %}
  13. {% set breadcrumbs = [{'name': 'ニュース', 'route': '/news'}, {'name': post.getTitle|raw|nl2br}] %}
  15. {% if post.getThumbnail is not empty %}
  16.     {% set share_media = asset(post.getThumbnail,'save_image') %}
  17. {% else %}
  18.     {% set share_media = asset('assets/img/top-page/FV.webp') %}
  19. {% endif %}
  21. {% block javascript %}
  22.     {{ TabaCMSAsset('script.js','script')|raw }}
  23.     {{ post.getScript|raw }}
  24.     <script>
  25.         {# MEMO: post.getURLというメソッドによりtabaのプレビュー画面でエラーが発生していた為、jsからURLを渡す形に修正 #}
  26.         const share_title = "{{share_title}}";
  27.         const share_media = "{{share_media}}"
  28.         const share_url = window.location.href;
  29.         $(function () {
  30.             $(document).ready(function () {
  31.                 var sns = ["line", "twitter", "facebook", "pinterest"];
  32.                 $.each(sns,function(index,value){
  33.                     switch (value){
  34.                         case "line" :
  35.                             var line_share_url = `https://social-plugins.line.me/lineit/share?url=${share_url}%0a${share_title}`;
  36.                             $('.'+ value ).attr('href', line_share_url);
  37.                             break;
  38.                         case "twitter" :
  39.                             var twitter_share_url = `https://twitter.com/intent/tweet?url=${share_url}&text=${share_title}`;
  40.                             $('.'+ value ).attr('href', twitter_share_url);
  41.                             break;
  42.                         case "facebook" :
  43.                             var facebook_share_url = `https://www.facebook.com/sharer/sharer.php?u=${share_url}`;
  44.                             $('.'+ value ).attr('href', facebook_share_url);
  45.                             break;
  46.                         case "pinterest" :
  47.                             var pinterest_share_url = `http://pinterest.com/pin/create/button/?url=${share_url}&media=${share_media}&description=${share_title}`;
  48.                             $('.'+ value ).attr('href', pinterest_share_url);
  49.                             break;
  50.                     }
  51.                 })
  52.             });
  53.              $(document).ready(function () {
  54.                 $('#js-button-copy').attr('data-url',share_url);
  55.              });
  56.             $('#js-button-copy').click(function () {
  57.                 const url = $(this).data('url');
  58.                 navigator.clipboard.writeText(url);
  59.             });
  60.         });
  61.     </script>
  62. {% endblock javascript %}
  64. {% block stylesheet %}
  65.     {{ TabaCMSAsset('style.css','style')|raw }}
  66. {% endblock stylesheet %}
  68. {% block main %}
  69.     <section class="pt-20 md:pt-16">
  70.         {{ include('Block/breadcrumb.twig') }}
  71.     </section>
  72.     <section class="px-6">
  73.         <div class="mx-auto w-full max-w-[37rem]">
  74.             <div class="mx-auto grid gap-6 leading-normal">
  75.                 <h1 class="text-2xl font-light tracking-widest md:text-xl">
  76.                     <span class="sr-only">タイトル：</span>
  77.                     {{ post.getTitle|raw|nl2br }}
  78.                 </h1>
  79.                 <time datetime="{{ post.getPublicDate|date('Y-m-d') }}" class="text-right text-sm tracking-wider">
  80.                     <span class="sr-only">投稿日：</span>
  81.                     {{ post.getPublicDate|date('Y.m.d') }}
  82.                 </time>
  83.             </div>
  84.             {% if post.getThumbnail is not empty %}
  85.                 <div class="mt-16 md:mt-10">
  86.                     <img src="{{ asset(post.getThumbnail,'save_image') }}" class="w-full">
  87.                 </div>
  88.             {% endif %}
  89.             <div class="mt-20 pb-[7.5rem] md:text-sm md:mt-6">
  90.                 {{ post.getBody|raw|nl2br }}
  91.             </div>
  92.         </div>
  93.     </section>
  94.     <section class="px-6 pb-[7.5rem] md:pb-20">
  95.         <h2 class="font-medium leading-normal text-center text-base">記事をシェアする</h2>
  96.         <div class="flex justify-center items-center mt-6 gap-6">
  97.             <a class="line" rel="nofollow noopener" target="_blank">
  98.                 <img src="{{asset('assets/icon/LINE_LOGO.svg')}}" alt="LINEのロゴ" class="w-[2.1rem]">
  99.             </a>
  100.             <a class="twitter" rel="nofollow noopener" target="_blank">
  101.                 <img src="{{asset('assets/icon/X_LOGO.svg')}}" alt="Xのロゴ" class="w-7">
  102.             </a>
  103.             <a class="facebook" rel="nofollow noopener" target="_blank">
  104.                 <img src="{{asset('assets/icon/FB_LOGO.svg')}}" alt="FaceBookのロゴ" class="w-[2.1rem]">
  105.             </a>
  106.             <a class="pinterest" rel="nofollow noopener" target="_blank">
  107.                 <img src="{{asset('assets/icon/Pinterest_LOGO.svg')}}" alt="Pinterestのロゴ" class="w-[2.1rem]">
  108.             </a>
  109.             <button id="js-button-copy" class="relative">
  110.                 <img src="{{asset('assets/icon/share.svg')}}" alt="コピー" class="w-[2.1rem]">
  111.             </button>
  112.         </div>
  113.         <a href="/news" class="md:w-full w-80 border grid place-items-center h-11 mx-auto mt-20 text-sm rounded-[0.18rem] hover">
  114.             ニュース一覧に戻る
  115.         </a>
  116.     </section>
  117. {% endblock %}