amperage 다운로드 - amperage 소스 코드 다운로드

Amperage는 정적 사이트 생성기 GoHugo의 테마입니다. 이 테마는 다음과 같은 기능을 제공합니다.

기본 AMP 페이지를 생성합니다.
기본적으로 유효한 PWA.
자동으로 구조화된 데이터.
자산 캐싱, 링크 미리 가져오기 및 오프라인 탐색을 위한 서비스 워커입니다.
SEO를 염두에 두고 제작되었습니다.
다국어 및 i18n 지원.
빌드 시간에 코드 강조 표시.
매우 빠르고 가볍습니다.
최소한의 스타일로 쉽게 재정의할 수 있습니다.
사용 편의성을 위한 기본 AMP 단축 코드 및 마크다운 렌더 후크.
헤더 메뉴, 목차 및 관련 게시물입니다.
기본적으로 웹 안전 글꼴을 사용합니다.
자동 이미지 자르기 및 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

❯ 주방 싱크대

여기에서 이 테마의 모든 구성 요소를 확인하고 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

❯ 로고 맞춤설정

기본 로고를 재정의하려면 부분 layouts/partials/header/logo.html 에 svg 마크업을 추가하세요.

❯ 스타일 맞춤설정

기본 스타일을 재정의하려면 assets/custom.scss 파일을 프로젝트에 추가하기만 하면 자동으로 변환, 축소 및 추가됩니다. 기본 스타일의 무게는 5KB(코드 강조 표시 포함)에 불과하므로 테마를 추가로 사용자 정의할 수 있는 45KB가 남습니다.

❯ 크로스 도메인 서비스 워커 설치 활성화

도메인 간 서비스 워커를 활성화하려면 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의 크기를 조정하려면 새로운 높이로 앰프 센티널에 메시지를 보내야 한다는 점을 기억하세요.

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

자신만의 댓글 서비스를 통합하려는 경우 Amperage는 고유 ID가 필요한 경우 iframe에서 사용할 수 있도록 매개변수 id 및 url 요청에 추가합니다. Disqus의 예:

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

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