amperage

التيار هو موضوع لمولد المواقع الثابتة GoHugo. يوفر هذا الموضوع الميزات التالية:

• يُنشئ صفحات AMP أصلية.
• PWA صالحة خارج الصندوق.
• البيانات المنظمة التلقائية.
• عامل خدمة للتخزين المؤقت للأصول، والجلب المسبق للارتباط، والتنقل في وضع عدم الاتصال.
• صُنع مع وضع تحسين محركات البحث (SEO) في الاعتبار.
• متعدد اللغات ودعم i18n.
• تسليط الضوء على التعليمات البرمجية في وقت البناء.
• سريع للغاية وخفيف الوزن.
• أنماط بسيطة ويمكن تجاوزها بسهولة.
• رموز AMP القصيرة الأساسية وخطافات عرض تخفيض السعر لسهولة الاستخدام.
• القائمة الرئيسية وجدول المحتويات والمشاركات ذات الصلة.
• يستخدم خطوط الويب الآمنة بشكل افتراضي.
• الاقتصاص التلقائي للصور وتوليد srcset.
• أزرار المشاركة الاجتماعية وعلامات بطاقة OGP/Twitter.
• تحليلات جوجل القابلة للتخصيص مع gtag.
• رمز Adsense القصير القابل للتكوين.
• نظام التعليق الملحد (مثال Disqus).

❯ تثبيت

يمكنك استخدام exampleSite المقدم لبدء مشروعك الجديد:

git clone https://github.com/asurbernardo/amperage.git

mkdir -p new-site/themes/amperage

mv amperage/exampleSite/ * new-site
mv amperage/ * new-site/themes/amperage

cd new-site

hugo serve

❯ حوض المطبخ

يمكنك التحقق من جميع مكونات هذا الموضوع هنا وموقع ويب يعمل بكامل طاقته باستخدام Amperage هنا من خلال موقعك حقًا.

❯ إعدادات

 # Default language if you have a multi-language setup
DefaultContentLanguage = " en "

baseURL = " https://example.com "
theme = " amperage "
pygmentsUseClasses = true

# Number of posts shown per page
paginate = 10

# Language sections
[ languages ]
    [ languages . en ]
        contentDir = " content "
        languageName = " English "
        languageCode = " en "
        title = " Amperage theme ⚡ "
        description = " This is an example page for the Amperage theme! "
        weight = 1
    [ languages . es ]
        contentDir = " content/spanish "
        languageName = " Español "
        languageCode = " es "
        title = " Tema Amperage ⚡ "
        description = " Esta es una página de ejemplo para el tema Amperage! "
        weight = 2

# Menu elements
[[ menu . main ]]
    identifier = " hugo "
    name = " Hugo "
    url = " https://gohugo.io "
    weight = 10
[[ menu . main ]]
    identifier = " github "
    name = " GitHub "
    url = " https://github.com/asurbernardo/amperage "
    weight = 10

# Enable only tags taxonomy
[ taxonomies ]
    tag = " tags "

[ params ]
    copyright = " Amperage " # Name shown on footer copyright
    themeColor = " #333 " # Theme color displayed on mobile browsers

    # Default AMP components for the whole site
    ampElements = [ " amp-analytics " , " amp-social-share " , " amp-install-serviceworker " , " amp-iframe " ]

    # Google Analytics code
    googleAnalytics = " UA-128498798-1 "

    # Adsense publisher code
    adsensePublisher = " ca-pub-123456789 "

    # Comments Iframe URL
    commentsEmbedUrl = " https://comments.example.com "

    # Social sites for metatags
    facebookSite = " example "
    twitterSite = " @example "

    # Structured data elements
    socialProfiles = [ " https://twitter.com/example " , " https://www.linkedin.com/in/example/ " , " https://github.com/example " ]

    alternatePageName = " Amperage example "
    organizationLogo = " /logo.png "
    organizationName = " Asur "

    publisherName = " amperage "
    publisherLogo = " /logo-amp-article.png "
    publisherLogoWidth = 600
    publisherLogoHeight = 60

# Generate json to use as search index
[ outputs ]
    home = [ " HTML " , " RSS " , " SearchIndex " ]

[ outputFormats ]
    [ outputFormats . SearchIndex ]
        mediaType = " application/json "
        baseName = " search "
        isPlainText = true
        notAlternative = true

# Enable unsafe mode to be able to use HTML on markdown
[ markup ]
    [ markup . goldmark ]
        [ markup . goldmark . renderer ]
            unsafe = true 

❯ تخصيص الشعار

لتجاوز الشعار الافتراضي، قم بإضافة علامة svg على layouts/partials/header/logo.html .

❯ تخصيص الأنماط

لتجاوز الأنماط الافتراضية، ما عليك سوى إضافة الملف assets/custom.scss إلى مشروعك وسيتم نقله وتصغيره وإلحاقه تلقائيًا. يبلغ حجم الأنماط الافتراضية 5 كيلو بايت فقط (بما في ذلك تمييز التعليمات البرمجية)، مما يترك لك 45 كيلو بايت لتخصيص السمة بشكل أكبر.

❯ تمكين تثبيت عامل الخدمة عبر المجال

لتمكين عامل الخدمة عبر النطاقات، يلزمك تجاوز الملف static/install-sw.html :

 < amp-install-serviceworker
  src =" https://your-site.com/sw.js "
  data-iframe-src =" https://your-site.com/install-sw.html "
  layout =" nodisplay " >
</ amp-install-serviceworker > 

❯ روابط القائمة

في القائمة يمكنك تعيين الروابط الداخلية والخارجية. لتعيين الروابط الخارجية يمكنك استخدام ملف config.toml :

[[ menu . main ]]
    identifier = " hugo "
    name = " Hugo "
    url = " https://gohugo.io "
    weight = 10
[[ menu . main ]]
    identifier = " github "
    name = " GitHub "
    url = " https://github.com/asurbernardo/amperage "
    weight = 10

إذا كنت تريد عرض صفحة من موقعك الخاص في القائمة، فيجب عليك إضافتها إلى مقدمة تلك الصفحة:

[ languages . es ]
    [ menu . main ]
        name = " Your title for the menu "
        weight = 20

يعد هذا التمييز مهمًا لأن عامل الخدمة يحتاج إلى تحديد عناوين URL الداخلية حتى يتمكن من تحميلها بفارغ الصبر.

❯ عرض الإعلانات

لتمكين الإعلانات، يجب أن يكون لديك رمز ناشر Adsense معتمد. بمجرد الحصول على واحدة، قم بتعيينها في config.toml :

 adsensePublisher = " ca-pub-123456789 "

يمكنك الآن استخدام الرمز القصير amp-ad :

 {{< amp-adsense
    width="320"
    height="320"
    layout="fixed"
    slot="123456789" >}}

❯ تعليقات

نظرًا لمتطلبات AMP، يجب استضافة التعليقات في نطاق مختلف عن النطاق الأصلي. Amperage جاهز لتلقي عنوان URL لتضمين التعليقات في نهاية كل مشاركة. هذا لتحقيق درجة من اللاأدرية لنظام التعليق.

تذكر أنه لتغيير حجم إطار iframe الذي يحتوي على مربع التعليق، يلزمك إرسال رسالة إلى amp Sentinel بالارتفاع الجديد:

 window . requestAnimationFrame ( ( ) => {
    window . parent . postMessage ( {
    sentinel : 'amp' ,
    type : 'embed-size' ,
    height : msg . data . height
    } , '*' ) ;
} ) ;

إذا كنت ترغب في دمج خدمة التعليقات الخاصة بك، فسوف تقوم Amperage بإضافة id المعلمات وعنوان url إلى الطلب حتى تتمكن من استخدامها في iframe، في حالة احتياجك إلى معرف فريد. مثال على Disqus:

 var urlParams = new URLSearchParams ( window . location . search ) ;

var disqus_config = function ( ) {
    this . page . url = urlParams . get ( 'url' ) ;
    this . page . identifier = urlParams . get ( 'id' ) ;
} ;

ما أوصي به شخصيًا هو استخدام مشروع Github Pages الجديد وإحالته من موقعك الرئيسي. هنا يمكنك رؤية مثال كامل الوظائف باستخدام Disqus.

❯ المساهمة في التيار

إذا كان لديك طلب ميزة أو وجدت خطأ، فلا تتردد في فتح مشكلة جديدة.