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' ) ;
} ;