amperage

Amperage เป็นธีมสำหรับเครื่องมือสร้างไซต์แบบคงที่ GoHugo ธีมนี้มีคุณสมบัติดังต่อไปนี้:

• สร้างหน้า AMP ดั้งเดิม
• PWA ที่ถูกต้องตั้งแต่แกะกล่อง
• ข้อมูลที่มีโครงสร้างอัตโนมัติ
• พนักงานบริการสำหรับการแคชสินทรัพย์ การดึงข้อมูลลิงก์ล่วงหน้า และการนำทางแบบออฟไลน์
• จัดทำขึ้นโดยคำนึงถึง SEO
• รองรับหลายภาษาและ i18n
• โค้ดที่เน้นเวลาในการสร้าง
• เร็วสุดและน้ำหนักเบา
• สไตล์มินิมอลและเอาชนะได้ง่าย
• รหัสย่อ AMP พื้นฐานและ hooks เรนเดอร์มาร์กดาวน์เพื่อความสะดวกในการใช้งาน
• เมนูส่วนหัว สารบัญ และโพสต์ที่เกี่ยวข้อง
• ใช้แบบอักษรที่ปลอดภัยบนเว็บเป็นค่าเริ่มต้น
• การครอบตัดรูปภาพอัตโนมัติและการสร้าง srcset
• ปุ่มแชร์โซเชียลและแท็กการ์ด OGP/Twitter
• Google Analytics ที่ปรับแต่งได้ด้วย 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 ไปยังโปรเจ็กต์ของคุณ จากนั้นไฟล์จะถูกทรานสไพล์ ย่อขนาด และต่อท้ายโดยอัตโนมัติ สไตล์เริ่มต้นมีน้ำหนักเพียง 5KB (รวมถึงการเน้นโค้ด) ซึ่งจะทำให้คุณมี 45KB เพื่อปรับแต่งธีมเพิ่มเติม

❯เปิดใช้งานการติดตั้งพนักงานบริการข้ามโดเมน

หากต้องการเปิดใช้งานบริการข้ามโดเมนคุณต้องแทนที่ไฟล์ 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 ความคิดเห็นจึงต้องโฮสต์ในโดเมนที่แตกต่างจากโดเมนเดิม แอมแปร์พร้อมรับ URL สำหรับฝังความคิดเห็นไว้ท้ายทุกโพสต์ นี่คือการบรรลุถึงระดับของการไม่เชื่อเรื่องพระเจ้าสำหรับระบบแสดงความคิดเห็น

โปรดจำไว้ว่าในการปรับขนาด iframe ที่มีช่องแสดงความคิดเห็น คุณจะต้องส่งข้อความไปยัง amp sentinel ด้วยความสูงใหม่:

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

หากคุณต้องการรวมบริการแสดงความคิดเห็นของคุณเอง Amperage จะเพิ่มพารามิเตอร์ id และ url ให้กับคำขอ เพื่อให้คุณสามารถใช้บน iframe ได้ ในกรณีที่คุณต้องการ ID เฉพาะ ตัวอย่างสำหรับ 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 ได้ที่นี่

❯มีส่วนทำให้เกิดกระแสไฟฟ้า

หากคุณมีคำขอคุณลักษณะหรือพบข้อบกพร่อง โปรดเปิดประเด็นใหม่ได้เลย