Unduhan amperage - pengunduhan kode sumber amperage

Ampere adalah tema untuk generator situs statis GoHugo. Tema ini menyediakan fitur-fitur berikut:

Menghasilkan halaman AMP asli.
PWA yang valid sudah dikeluarkan dari kotaknya.
Data terstruktur otomatis.
Pekerja layanan untuk cache aset, pengambilan tautan, dan navigasi offline.
Dibuat dengan mempertimbangkan SEO.
Dukungan multibahasa dan i18n.
Penyorotan kode pada waktu pembuatan.
Sangat cepat dan ringan.
Gaya minimal dan mudah diganti.
Kode pendek AMP dasar dan kait render penurunan harga untuk kemudahan penggunaan.
Menu header, daftar isi dan postingan terkait.
Menggunakan font yang aman untuk web secara default.
Pemangkasan gambar otomatis dan pembuatan srcset.
Tombol berbagi sosial dan tag kartu OGP/Twitter.
Google Analytics yang dapat disesuaikan dengan gtag.
Kode pendek Adsense yang dapat dikonfigurasi.
Agnostik sistem komentar (contoh Disqus).

❯ Instalasi

Anda dapat menggunakan exampleSite yang disediakan untuk mem-bootstrap proyek baru Anda:

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

❯ Wastafel dapur

Anda dapat memeriksa semua komponen tema ini di sini dan situs web yang berfungsi penuh menggunakan Amperage di sini milik Anda.

❯ Konfigurasi

 # 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

❯ Sesuaikan logo

Untuk mengganti logo default, tambahkan markup svg pada sebagian layouts/partials/header/logo.html .

❯ Sesuaikan gaya

Untuk mengganti gaya default cukup tambahkan file assets/custom.scss ke proyek Anda dan itu akan ditranspilasi, diperkecil, dan ditambahkan secara otomatis. Gaya default hanya berbobot 5KB (termasuk penyorotan kode), sehingga Anda memiliki 45KB untuk menyesuaikan tema lebih lanjut.

❯ Aktifkan instalasi pekerja layanan lintas domain

Untuk mengaktifkan pekerja layanan lintas domain, Anda perlu mengganti file 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 >

❯ Tautan menu

Pada menu Anda dapat mengatur tautan internal dan eksternal. Untuk mengatur tautan eksternal Anda dapat menggunakan file 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

Jika Anda ingin menampilkan halaman dari situs Anda sendiri pada menu, Anda perlu menambahkan bagian depan halaman itu:

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

Perbedaan ini penting karena pekerja layanan perlu mengidentifikasi URL internal agar dapat memuatnya dengan cepat.

❯ Iklan bergambar

Untuk mengaktifkan iklan, Anda harus memiliki kode penerbit Adsense yang disetujui. Setelah Anda mendapatkannya, atur di config.toml :

 adsensePublisher = " ca-pub-123456789 "

Sekarang Anda dapat menggunakan kode pendek amp-ad :

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

❯ Komentar

Karena persyaratan AMP, komentar harus dihosting di domain yang berbeda dari aslinya. Amperage siap menerima URL untuk menyematkan komentar di akhir setiap postingan. Hal ini untuk mencapai tingkat agnostisisme pada sistem komentar.

Ingatlah bahwa untuk mengubah ukuran iframe yang berisi kotak komentar, Anda perlu mengirim pesan ke amp sentinel dengan ketinggian baru:

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

Jika Anda ingin mengintegrasikan layanan komentar Anda sendiri, Amperage akan menambahkan parameter id dan url ke permintaan sehingga Anda dapat menggunakannya di iframe, jika Anda memerlukan id unik. Contoh untuk Disqus:

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

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

Yang saya rekomendasikan secara pribadi adalah menggunakan proyek Halaman Github baru dan merujuknya dari situs utama Anda. Di sini Anda dapat melihat contoh yang berfungsi penuh menggunakan Disqus.