amperageダウンロード - amperageソースコードのダウンロード

Amperage は、静的サイトジェネレーター GoHugo のテーマです。このテーマは次の機能を提供します。

ネイティブ AMP ページを生成します。
すぐに使える有効な PWA。
自動構造化データ。
アセットのキャッシュ、リンクのプリフェッチ、オフラインナビゲーションのための Service Worker。
SEOを念頭に置いて作られています。
多言語と i18n のサポート。
ビルド時にコードを強調表示します。
超高速かつ軽量。
最小限で簡単にオーバーライドできるスタイル。
使いやすさを追求した基本的な AMP ショートコードとマークダウンレンダーフック。
ヘッダーメニュー、目次、および関連投稿。
デフォルトで Web セーフフォントを使用します。
画像の自動トリミングと srcset の生成。
ソーシャルシェアボタンとOGP/Twitterカードタグ。
gtag を使用してカスタマイズ可能な Google アナリティクス。
設定可能な 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 を使用した完全に機能する Web サイトはここで実際に確認できます。

❯ 構成

 # 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

❯ ロゴをカスタマイズする

デフォルトのロゴをオーバーライドするには、部分的なlayouts/partials/header/logo.htmlにsvgマークアップを追加します。

❯ スタイルをカスタマイズする

デフォルトのスタイルをオーバーライドするには、ファイルassets/custom.scssプロジェクトに追加するだけで、自動的にトランスパイル、縮小されて追加されます。デフォルトのスタイルの重みは 5 KB (コードの強調表示を含む) のみなので、テーマをさらにカスタマイズするには 45 KB が残ります。

❯ クロスドメイン Service Worker のインストールを有効にする

クロスドメイン Service Worker を有効にするには、ファイル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

Service Worker は内部 URL を識別して、内部 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 センチネルに送信する必要があることに注意してください。

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

独自のコメントサービスを統合する場合、Amperage はパラメーターidとurlリクエストに追加します。これにより、一意の ID が必要な場合に備えて 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' ) ;
} ;