إضافة سكربت قارئ المانجا في بلوجر إضافة سكربت قارئ المانجا في بلوجر

معاينة مستودع الأسكريبت

مرحباً متابعين وزوار مينت ويب الأعزاء, اليوم سأشارك معكم إضافة جديده نوعاً ما علي منصة بلوجر وهي سكربت قارئ المانجا، ونحن علي يقين تام ان هذه الإضافة تعد جديده نوعاً ما علي منصة بلوجر أوعلي الأقل في المحتوي العربي، لنبدأ في إضافة سكربت قارئ المانجا في بلوجر.

التثبيت

لقد أعددت طريقتين لتثبيت هذه الإضافة، إحداهما في مدون منفصلة كقوالب الأنيمي التي سنطرحها هنا في مينت ويب قريباً، والطريقة الأخري هي إضافة كود Html بداخل ألتدوينه كا كود إضافي.

استخدمه كقالب

الحصول علي القالب

نقوم بنسخ جميع محتويات رابط الحصول على القالب ، والآن سنذهب إلى المدون وننشئ مدونة جديدة ، ثم ننتقل إلى المظهر  تحرير HTML و نقوم بحذف كل محتوى القالب الافتراضي الذي حدده بلوجر ونلصق المحتوى الذي نسخت من الرابط السابق. مع هذا سيكون لدينا قارئ الصفحة جاهز للعمل.

إنشاء موضوع

في كل مرة ننشئ فيها موضوعاً جديدًا ، يجب أن نضيف الكود التالي: 

<!-- الفصل السابق / التالي (URL) -->
<div class="reader-nav">
 <a href="#">الفصل السابق</a>
 <a href="#">الفصل التالي</a>
</div>

<!-- قائمة عناوين url للصفحات المراد عرضها -->
<script>
 const pages = [
  "...mint...web/2265/1.jpg",
  "...mint...web/2265/2.jpg",
 ]
</script>
قيمة الصفحات المتغيرة يجب أن تكون من نوع المصفوفة وتحتوي على قائمة روابط للصور المباشرة (انظر المثال أعلاه).

يجب أن تأخذ في عين الاعتبار أن

  • يحتوي القالب على نمط الإدخالات فقط.
  • ليس لديه صفحة رئيسية أو صفحة بحث.

التثبيت بداخل الموضوع


تنبيه تذكر إنشاء نسخة من القالب الخاص بك قبل إجراء أي نوع من التعديل عليه.

تثبيت الجافاسكريب
نقوم بالتوجه إلي المظهر تحرير HTML ونبحث هن الوسم </body> , ونضع الكود التالي فوقه 

<b:if cond='data:view.isPost'>
<script>//<![CDATA[
"use strict";
/*!
* manga-reader.js v1.0
* copyright 2020 Mint Web
* Developed by Hussein Farg (imintweb.com)
* Licensed under MIT
*/!function(){const e=pages,r=document.querySelector(".reader-pages"),n=document.querySelector(".reader-nav #prev"),t=document.querySelector(".reader-nav #next"),c=document.querySelector(".reader-state #current-page"),d=document.querySelector(".reader-state #total-page"),a=e=>{let r=document.createElement("img");return r.src=e,r};r.appendChild(a(e[0])),d.innerHTML=e.length,(()=>{let d=0;n.addEventListener("click",()=>{d>0&&(d--,r.innerHTML="",r.appendChild(a(e[d])),c.innerHTML=d+1)}),t.addEventListener("click",()=>{d<e.length-1&&(d++,r.innerHTML="",r.appendChild(a(e[d])),c.innerHTML=d+1)})})()}();
//]]></script>
</b:if>
نقوم بحفظ التغيرات.
تثبيت CSS
مرة أخرى في اللوحة الخاصة بنا ، نعود إلى علامة التبويب المظهر وننقر الآن على الزر تخصيص ونبحث عن خيار إضافة CSS والصق الرمز التالي:

/*!
* manga-reader.js v1.0
* copyright 2020 Mint Web
* Developed by Hussein Farg (imintweb.com)
* Licensed under MIT
*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:"Roboto",sans-serif;font-size:16px;line-height:1.5}.navbar{background:#575fcf;color:#fff;padding:24px;text-align:center}.navbar .logo .logo-text{color:#fff;text-decoration:none;display:block;font-size:24px;text-transform:uppercase}.reader-wrapper{width:100%;max-width:960px;padding:16px;margin:auto}.footer{background:#f5f5f5;color:rgba(30,39,46,0.8);text-align:center}.footer-copyrights{padding:24px;margin-top:48px;font-size:14px}.footer-copyrights a{color:#575fcf;font-weight:500;text-decoration:none}.reader-control{display:flex;align-items:center;justify-content:space-between;font-size:14px;color:rgba(30,39,46,0.8);font-weight:500;padding:8px 0}.reader-control button,.reader-nav a{background:#f5f5f5;color:#1e272e;outline:0;border:0;padding:12px 16px;font-size:14px;border-radius:4px;cursor:pointer;text-decoration:none;transition:all 0.2s}.reader-control button svg,.reader-nav a svg{width:24px;height:24px}.reader-control button:hover,.reader-nav a:hover{background:#575fcf;color:#fff}.reader-control button{margin-left:8px}.reader-state{padding:8px 16px}.reader-pages{padding:8px 16px}.reader-pages img{width:100%;max-width:100%;border-radius:4px}.reader-nav{padding:8px 16px;display:flex;align-items:center;justify-content:space-between}.reader-nav a{font-weight:500}

مشاركة جديده

الآن عند إنشاء موضوع جديد في وضع HTML ، نضيف html التالي: 

<div class="reader">
    <!-- التحكم -->
    <div class="reader-control">
        <!-- أزرار للتبديل بين الصفحات -->
        <div class="reader-nav">
            <button id="prev">
                <svg viewBox="0 0 24 24">
                    <path fill="currentColor" d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
                </svg>
            </button>
            <button id="next">
                <svg viewBox="0 0 24 24">
                    <path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
                </svg>
            </button>
        </div>
        <!-- الصفحة الحالية / إجمالي الصفحات -->
        <div class="reader-state">
            الصفحة <span id="current-page">1</span>/<span id="total-page">54</span>
        </div>
    </div>

    <!-- الحاوية حيث سيتم عرض الصور -->
    <div class="reader-pages"></div>

    <!-- الفصل السابق / التالي (URL) -->

    <div class="reader-nav">
        <a href="#">الفصل السابق</a>
        <a href="#">الفصل التالي</a>
    </div>

    <!-- عنوان Url للصفحات المراد عرضها -->
    <script>
        const pages = [
            ".../36409/1.jpg"
        ]
    </script>
</div>

نقوم بتعديل القيم المقابلة وهذا كل شيء.

تنبيه استخدم دائمًا وضع html وإلا قد يفسد هيكل html.

إذا فعلنا كل شيء بشكل صحيح ، فيمكننا بالفعل الاستمتاع بقارئ مانجا بسيط ولكنه سيسمح لنا بالحصول على طلب عندما يتعلق الأمر بنشر حلقات المانجا أو القصص المصورة لدينا وعدم إفساد كل شيء. إذا كنت تدير مع خلاصة بلوجر ، يمكنك تخيل كل الإمكانات التي يمكنك الحصول عليها من هذه الإضافة. ؛)
أشكرك كثيرًا ، آمل أن تكون هذه المساهمة مفيدة لك ، وإذا كان الأمر كذلك ، يرجى دعوتك لمشاركتها على الشبكات الاجتماعية مع أصدقائك.
اقرأ أيضًا: