Загрузка amperage - Загрузка исходного кода amperage

Amperage — тема для генератора статических сайтов GoHugo. Эта тема предоставляет следующие возможности:

Создает собственные AMP-страницы.
Действующий PWA «из коробки».
Автоматически структурированные данные.
Сервис-воркер для кэширования ресурсов, предварительной выборки ссылок и автономной навигации.
Сделано с учетом SEO.
Многоязычность и поддержка i18n.
Подсветка кода во время сборки.
Супер быстрый и легкий.
Минимальные и легко переопределяемые стили.
Базовые короткие коды AMP и хуки рендеринга уценки для простоты использования.
Меню шапки, оглавление и связанные посты.
По умолчанию используются безопасные веб-шрифты.
Автоматическая обрезка изображений и генерация исходного набора.
Кнопки социальных сетей и теги карточек 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 в свой проект, и он будет транспилирован, минимизирован и добавлен автоматически. Стили по умолчанию весят всего 5 КБ (включая подсветку кода), что оставляет вам 45 КБ для дальнейшей настройки темы.

❯ Включить междоменную установку сервис-воркера.

Чтобы включить междоменный сервис-воркер, вам необходимо переопределить файл 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 комментарии должны размещаться в домене, отличном от исходного. Amperage готов получить URL-адрес для вставки комментариев в конце каждого сообщения. Это сделано для достижения определенной степени независимости системы комментариев.

Помните, что для изменения размера iframe, содержащего поле комментария, вам необходимо отправить сообщение amp Sentinel с новой высотой:

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

Если вы хотите интегрировать свой собственный сервис комментариев, Amperage добавит к запросу параметры id и url , чтобы вы могли использовать их в 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' ) ;
} ;

Лично я рекомендую использовать новый проект Github Pages и ссылаться на него со своего основного сайта. Здесь вы можете увидеть полнофункциональный пример использования Disqus.