amperage下載 - amperage原始碼下載

Amperage 是靜態網站產生器 GoHugo 的主題。此主題提供以下功能：

產生原生 AMP 頁面。
開箱即用的有效 PWA。
自動結構化資料。
用於資產快取、連結預取和離線導航的 Service Worker。
考慮到 SEO。
多語言和 i18n 支援。
程式碼在建置時突出顯示。
超快且輕量。
最小且易於覆蓋的樣式。
基本 AMP 短程式碼和 Markdown 渲染掛鉤易於使用。
標題選單、目錄和相關貼文。
預設使用網頁安全字體。
自動影像裁剪和 srcset 生成。
社交分享按鈕和 OGP/Twitter 卡標籤。
可使用 gtag 自訂 Google Analytics。
可設定的 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

❯ 廚房水槽

您可以在此處查看該主題的所有組件，並在此處真正使用您自己的安培數創建一個功能齊全的網站。

❯ 配置

 # 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新增到您的專案中，它將自動轉譯、縮小和附加。預設樣式僅重 5KB（包括程式碼突出顯示），這為您留下了 45KB 來進一步自訂主題。

❯ 啟用跨域 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

如果您想在選單上顯示您自己網站的頁面，您需要新增到該頁面的 frontmatter：

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

這種差異很重要，因為 Service Worker 需要識別內部 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新增至請求中，以便您可以在 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' ) ;
} ;