홈페이지>ASP 소스 코드>기타 카테고리
다운로드

미니멀리스트를 위한 Hugo 테마입니다. Fiber는 최소한의 JavaScript와 CSS를 사용하여 사이트를 더 빠르게 로드할 수 있습니다! 또한 눈에 좋은 깔끔한 UI를 보유하고 있습니다!!

목차

  • 설치
    • 서브모듈 사용
    • 테마 직접 다운로드
  • 특징
    • SEO 준비
    • 단축 코드
      • ASCII네마
      • 사용할 수 있나요?
    • 코드를 복사하려면 클릭하세요
    • 아름다운 노트
  • 스크린샷
  • 테마 설정
    • 홈페이지에 콘텐츠 나열
      • 블로그 목록, 메모 등
      • 맞춤 콘텐츠 나열
    • 코드 강조
    • 메뉴 항목
    • 사이트 제목
  • 콘텐츠 작성
    • 메모 작성
    • 머리말

설치

Hugo 기반 사이트에서 이 테마를 사용할 수 있는 방법에는 두 가지가 있습니다.

  1. Git 하위 모듈 사용(권장)
  2. 테마를 <hugo-site-root>/themes/ 에 직접 다운로드

서브모듈 사용

  1. hugo new site SITE_NAME 사용하여 사이트를 만드세요.
  2. SITE_NAME 로 cd 이동
  3. git repo 초기화: git init . 이는 git 하위 모듈을 추가해야 하기 때문에 필요합니다.
  4. git submodule add [email protected]:abdus/hugo-theme-fiber.git themes/hugo-theme-fiber 실행하여 하위 모듈을 추가합니다.
  5. 이제 hugo serve 사용하여 로컬에서 Hugo 서버를 시작합니다.

테마 저장소에 업데이트가 있으면 git submodule update --remote 사용하여 가져올 수 있습니다.

테마 직접 다운로드

어떤 이유로 Git을 사용할 수 없는 경우 이 방법을 사용하세요.

  1. 이것을 다운로드하고 해당 콘텐츠를 SITE_ROOT/themes/hugo-theme-fiber/ 에 추출합니다.
  2. 터미널에서 hugo serve 실행하여 로컬에서 Hugo를 시작합니다.

특징

SEO 준비

이 테마에는 기본 SEO뿐만 아니라 Schema.org의 최소한의 JSON-LD 데이터도 포함되어 있습니다.

단축 코드

즉시 사용 가능한 단축 코드 외에도 때때로 도움이 될 수 있는 몇 가지 유용한 단축 코드가 있습니다.

ASCII네마

AsciiNema Cast를 삽입하세요. 사용할 단축 코드: {{< asciinema id="id of a public cast" >}}

사용할 수 있나요?

이 단축 코드는 caniuse.com 웹사이트의 최신 데이터를 표시합니다. 웹 개발자에게 유용합니다. 예: 

{{ < caniuse feature =" abortcontroller " periods =" future_1,current,past_1,past_2 "
> }}

코드를 복사하려면 클릭하세요

웹사이트 방문자는 단 한 번의 클릭으로 모든 코드블록의 내용을 복사할 수 있습니다. 코드 들여쓰기가 깨지지 않습니다!

아름다운 노트

content/notes 안에 넣은 모든 것은 대략적인 주석을 얻게 됩니다. 이렇게 하면 메모에서 중요한 내용을 더 쉽게 인식할 수 있습니다.

대략적인 주석은 strong , em 및 strikethrough 와 같은 태그를 사용하여 제어됩니다. 새 notes 항목을 생성하려면 먼저 content/notes 디렉터리를 만들어야 합니다. 그런 다음 hugo new notes/file-name.md 사용하여 메모를 생성합니다. 이 파일에는 위에 언급된 태그로 주석을 추가하는 방법에 대한 정보가 포함되어 있습니다.

스크린샷

테마 설정

홈페이지에 콘텐츠 나열

홈페이지는 두 가지 방법으로 구성할 수 있습니다. content 디렉터리에서 가장 좋아하는/가장 중요한 섹션을 나열할 수 있습니다.

아니면 그 안에 맞춤 콘텐츠를 배치하세요.

아니면 둘 다 할 수도 있어요! fromtmatter 내부에 속성 title 있는 파일 content/_index.md 생성하세요. 이 title 속성은 SEO에 유용합니다. 예: 

 ---
title : " Welcome to my Homepage "
---

<!-- content goes here -->

블로그 목록, 메모 등

홈페이지에 콘텐츠 목록을 생성하려면 config.toml 파일에 mainSections 라는 변수를 설정해야 합니다. 예: 

[ params ]
mainSections = [ " posts " ]

맞춤 콘텐츠 나열

사용자 정의 콘텐츠를 나열하려면 해당 콘텐츠를 적절한 앞부분과 함께 content/_index.md 안에 넣기만 하면 됩니다.

코드 강조

기본적으로 Hugo는 어떤 클래스도 사용하지 않습니다. 그러나 일부 기능이 이에 따라 달라지므로 이 테마에서는 작동하지 않습니다.

코드블록에 대한 클래스를 실행해야 합니다. 방법은 다음과 같습니다. 

 # file: config.toml
[ markup ]
[ markup . highlight ]
codeFences = true
noClasses = false

메뉴 항목

기본적으로 상단 메뉴에는 메뉴 항목이 하나만 있습니다. 거기에 더 많은 항목을 추가하려면 config.toml 내부에 메뉴 항목을 정의해야 합니다. 다음은 내 사이트의 config.toml 예입니다. 

[ menu ]

  [[ menu . main ]]
    identifier = " me "
    name = " Me "
    url = " /me/ "
    weight = 10


  [[ menu . main ]]
    identifier = " keys "
    name = " keys "
    url = " /keys/ "
    weight = 10

  [[ menu . main ]]
    identifier = " categories "
    name = " categories "
    url = " /categories "
    weight = 10

  [[ menu . main ]]
    identifier = " notes "
    name = " notes "
    url = " /notes/ "
    weight = 10

사이트 제목

사이트 제목은 config.toml 의 다음 매개변수에 의해 제어됩니다. 

[ params ]
  title = " abdus.xyz "
  mainSections = [ " posts " ]

콘텐츠 작성

메모 작성

Notes 이 테마에 하드 코딩된 특별한 종류입니다. 이런 종류의 콘텐츠는 대략적인 주석을 얻게 됩니다(그래서 노트 관리가 더 쉬워집니다).

노트 페이지 내에서 대략적인 주석을 사용하는 방법을 알아보려면 hugo new notes/your-filename.md 명령을 사용하여 노트 페이지를 생성하세요.

종류의 메모에 대한 원형이 포함되어 있습니다.

머리말

이 테마는 SEO를 위한 사용자 정의 게시물 설명 및 메타 이미지를 처리하기 위해 머리말을 사용합니다. meta.image 및 meta.description 찾을 수 없으면 각각 /images/default-meta-image.png 및 .Summary 로 대체됩니다.

Frontmatter에서 이 두 필드를 다음과 같이 사용하세요. 

 ---
...
...
meta :
image : " https://example.com/some-image.png "
  description : " your custom desc "
...
...
---

<!-- content goes here -->
확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체