إضافة مواضيع ذات صلة خاصية بقوالب AMP without iframe

عبدو تكنولوجي - Abdou Technologie
27 مايو 2022

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي

اليوم اقدم لكم شكل جديد وبسيط لمواضيع ذات صلة صالحة لقوالب التي تعمل ب ال AMP وبدون فريم و استضافة خارجية


شرح التركيب في الفيديو التالي 






كود الذي يوضع فوق ال /head


	
<b:if cond='data:view.isPost'>
    <script async='async' custom-element='amp-list' src='https://cdn.ampproject.org/v0/amp-list-0.1.js' />
    <script async='async' custom-element='amp-bind' src='https://cdn.ampproject.org/v0/amp-bind-0.1.js' />
    <script async='async' custom-template='amp-mustache' src='https://cdn.ampproject.org/v0/amp-mustache-0.2.js' />
    <script async='async' custom-element='amp-timeago' src='https://cdn.ampproject.org/v0/amp-timeago-0.1.js' />
</b:if>
<style amp-custom='amp-custom'>
:root{--main-color:#e05a2f;--main-background:#f1f1f1;--background-post:#F6F6F6;--background-read-more:#ffffff;--background-read-more-hover:#f6f6f6;--background-footer:#cccccc;--post-color-link:#999999;--post-color-text:#6C6C6C;--post-color-details:#4e4d4d}
    /*<![CDATA[*/
@-webkit-keyframes animateHeart{0%,100%,50%{-webkit-transform:scale(1)}5%{-webkit-transform:scale(1.2)}10%{-webkit-transform:scale(1.1)}15%{-webkit-transform:scale(1.3)}}@keyframes animateHeart{0%,100%,50%{-webkit-transform:scale(1);transform:scale(1)}5%{-webkit-transform:scale(1.2);transform:scale(1.2)}10%{-webkit-transform:scale(1.1);transform:scale(1.1)}15%{-webkit-transform:scale(1.3);transform:scale(1.3)}}.related-post #list{width:100%!important}.related-post li{margin:10px 9px;width:100%;background:var(--background-footer);padding:12px 6px 12px 17px;border-radius:50px;display:flex;align-items:center;max-height:114px;margin-right:0}.related-post li .thumb{width:100px;height:100px;border-radius:50%;border:2px solid #fff;margin-right:15px;overflow:hidden;cursor:pointer}.related-post li .thumb:hover{-webkit-animation:animateHeart 2.5s infinite;animation:animateHeart 2.5s infinite}.related-post li .thumb img{height:100%;width:100%}.related-post{padding:10px 5px 0 24px;margin:0 auto}.related-post li .details{margin-right:10px}.related-post li .details h1{line-height:1.3rem;font-size:18px}.related-post li .details h1 a{font-weight:700}.related-post li .details .date{display:block;font-size:15px;color:var(--post-color-details);margin-top:13px;cursor:pointer;display:block}.related-post li .details .date time{display:block;font-size:12px;color:var(--post-color-details);margin-top:7px;cursor:pointer}.related-post li .details .date .icon{float:right;width:9px;height:9px;margin-top:12px;margin-left:3px;fill:var(--post-color-details)}.related-post li .read-more{margin-right:auto}.related-post li .read-more a{background:var(--background-read-more);display:block;padding:10px 11px;border-radius:25px;font-weight:700;transition:all .5s ease}.related-post li .read-more a svg{display:none}.related-post li .read-more a:hover{background:var(--background-read-more-hover)}@media screen and (max-width:1140px){.related-post li .details h1{font-size:15px}.related-post li .thumb{width:70px;height:70px}.related-post li .details .date{font-size:12px}.related-post li .read-more a{padding:10px 11px;font-size:12px}.related-post li .read-more a span{display:none}.related-post li .read-more a svg{display:block;fill:var(--post-color-text);width:10px;height:10px}}@media screen and (max-width:540px){.related-post li{border-radius:6px;margin:5px auto}.related-post li .thumb{margin-right:0}.related-post li .details{display:block}.related-post li .read-more{display:none}.related-post li .details h1{font-size:12px}.related-post li .details .date time{font-size:10px}.related-post li .details .date svg{height:8px!important;margin-top:11px!important}}
   /*]]>*/
</style>




الكود الذي يوضع مع اكواد ال Blog



	

<b:includable id='related' var='post'>
    <svg layout='nodisplay'>
        <defs>
            <symbol id='icon-clock' viewBox='0 0 32 32'>
                <path d='M20.586 23.414l-6.586-6.586v-8.828h4v7.172l5.414 5.414zM16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 28c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12z' />
            </symbol>
            <symbol id='icon-plus' viewBox='0 0 32 32'>
                <path d='M31 12h-11v-11c0-0.552-0.448-1-1-1h-6c-0.552 0-1 0.448-1 1v11h-11c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h11v11c0 0.552 0.448 1 1 1h6c0.552 0 1-0.448 1-1v-11h11c0.552 0 1-0.448 1-1v-6c0-0.552-0.448-1-1-1z' />
            </symbol>
        </defs>
    </svg>
    <b:if cond='data:widgets.Blog.first.allBylineItems.labels and data:post.labels.any'>
        <div class='related-post'>
            <div class='widget-title'>
                <h2>مواضيع ذات صلة</h2>
            </div>
            <amp-list expr:src='&quot;/feeds/&quot; + data:blog.blogId + &quot;/posts/default/-/&quot; + data:post.labels.first.name + &quot;?alt=json&amp;max-results=5&quot;' height='450' id='list' items='feed.entry' layout='responsive' single-item='' width='500'>

                <template type='amp-mustache'>

                    <li>
                        <a href='{{#link.4}}{{href}}{{/link.4}}'>
                            <div class='thumb'>
                                {{#media$thumbnail}}
                                    <amp-img alt='{{#title}}{{$t}}{{/title}}' height='150' layout='responsive' src='{{url}}' width='150' />
                                {{/media$thumbnail}}
                                {{^media$thumbnail}}
                                    <amp-img alt='{{#title}}{{$t}}{{/title}}' height='150' layout='responsive' src='https://4.bp.blogspot.com/-OI0BoYP677M/VZu1TW7a3DI/AAAAAAAAFsE/4BRdE2YFS5A/w150-h150-p-k-no-nu/noimg.png' width='150' />
                                {{/media$thumbnail}}
                            </div>
                        </a>
                        <div class='details'>
                            <h1 class='post-title'>
                                <a href='{{#link.4}}{{href}}{{/link.4}}' target='_blank' title='{{#title}}{{$t}}{{/title}}'>{{#title}}{{$t}}{{/title}}</a>
                            </h1>
                            <a class='date' href='{{#link.4}}{{href}}{{/link.4}}' title='bookmark'>
                                <svg class='icon icon-clock'>
                                    <use xlink:href='#icon-clock' />
                                </svg>
                                <amp-timeago datetime='{{#published}}{{$t}}{{/published}}' height='30' layout='responsive' locale='ar' width='160'>{{#title}}{{$t}}{{/title}}
                                </amp-timeago>
                            </a>
                        </div>
                        <div class='read-more'>
                            <a href='{{#link.4}}{{href}}{{/link.4}}' title='{{#title}}{{$t}}{{/title}}'>
                                <span>قراءة المزيد</span>
                                <svg class='icon icon-plus'>
                                    <use xlink:href='#icon-plus' />
                                </svg>
                            </a>
                        </div>
                    </li>
                </template>

                <div fallback=''>حدث خطأ</div>
                <div placeholder='' />
            </amp-list>



        </div>
    </b:if>
</b:includable>



تبحث على الكود التالي



	
<b:includable id='postBody' var='post'>




الكود الذي تضعه امامه



	
<b:include data='post' name='related'/>



الان احفظ القالب ومبروك عليك الاضافة

اذا اعجبتك الاضافة لا تنسى الاشتراك في المدونة من هنا
تعليقات
لا يوجد تعليق
يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع