Jekyll 웹 사이트 맞춤 제작

18384 단어 portfolioprogramminggithubtutorial
이 글은 시리즈의 일부분으로, 이 시리즈는 Jekyll 에서 자신의 GitHub Pages 블로그를 신속하고 자유롭게 구축하고 위탁 관리하는 방법을 보여 준다.이 시리즈는 Staticman를 사용하여 저희 코드에 논평 시스템을 직접 추가하고 Umami를 사용하여 프라이버시를 우호적이지만 무료 분석을 추가하는 등 더욱 높은 주제를 포함할 것입니다.
나는 강좌를 몇 부분으로 나눈다.
  • Introduction
  • Setting Up
  • Create Content
  • 사용자 정의 디스플레이<- 여기 있습니다.
  • Commenting System - Part 1
  • Commenting System - Part 2
  • Analytics
    • 이제 웹 사이트에 내용을 추가하기 시작했습니다. 웹 사이트의 외관을 어떻게 맞춤형으로 만드는지 봅시다.

    Jekyll 페이지 생성 방법


    내가 Jekyll을 좋아하는 이유 중 하나는 사이트 창설 뒤의 대부분의 마력을 숨겼기 때문에, Jekyll이 당신에게 매우 깨끗한 목록을 제공했기 때문이다.
    그러나 주제를 맞춤형으로 만들 때 실망하기 쉬워 주제를 어떻게 업데이트해야 할지 모른다는 단점이 있다.
    실제로 레이아웃은 테마에 의해 정의되며 로컬 폴더에 존재하지 않습니다.
    그래서 어떤 일을 하기 전에 우리minima theme repository를 봐야 한다.현재 버전의 분기를 확인하십시오.
    내 예에서 2.5버전이 설치되어 있기 때문에 Gemfile 파일에서 이 정보를 찾을 수 있습니다.) 그래서 보고 있습니다. 2.5-stable branch
    우리의 블로그 구조는 주로 두 개의 폴더에 의존한다.
  • _layouts: 모든 가격 인하 파일의 전단 데이터에 사용되는 레이아웃을 포함한다.
  • _includes: 레이아웃에 사용되는 HTML 코드 세그먼트를 포함합니다.
    • 예를 들어 post 레이아웃의 코드를 보면 다음과 같은 내용을 볼 수 있다(이해를 위해 단축한다).
    <!-- _layouts/post.html -->
---
layout: default
---
<article
  class="post h-entry"
  itemscope
  itemtype="http://schema.org/BlogPosting"
>
  <header class="post-header">
    <h1 class="post-title p-name" itemprop="name headline">
      {{ page.title | escape }}
    </h1>
    ...
  </header>

  <div class="post-content e-content" itemprop="articleBody">{{ content }}</div>
  ...
</article>
    이곳에는 평론할 만한 곳이 매우 많다.
    우리가 본 첫 번째 일은 블로그 레이아웃 사용default 레이아웃이다.
    레이아웃 중첩은 앞의 내용 아래의 모든 내용이 부모 레이아웃의 {{ content }} 변수에 주입되는 방식으로 작동합니다.
    예를 들어 이 레이아웃을 사용하여 블로그 글을 작성할 때, 그 내용은 <div class="post-content e-content" itemprop="articleBody">{{ content }}</div> 블록에 주입됩니다.
    우리는 또한 문장 제목이 프론트 데스크톱 데이터를 사용한 것을 볼 수 있다.
    제목 사용page 변수는 템플릿 앞에 정의된 모든 변수를 포함하는 것을 보여 줍니다.
    이러한 변수는 템플릿의 하위 수준에서 무시할 수 있습니다.이 경우 템플릿 앞에 제목이 정의되어 있지 않으며 이 템플릿을 사용하는 게시물에만 적용됩니다.
    지금 우리가 기본 레이아웃을 보면 이것이 바로 우리가 본 것이다.
    <!-- _layouts/default.html -->
<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
  {% include head.html %}

  <body>
    {% include header.html %}

    <main class="page-content" aria-label="Content">
      <div class="wrapper">{{ content }}</div>
    </main>

    {% include footer.html %}
  </body>
</html>
    기본 레이아웃은 모든 페이지의 기본 구조를 나타냅니다.
    서브레이아웃을 주입하는 변수 content 외에 HTML 코드를 주입하는 변수도 여러 개 include 를 사용합니다.
    이제 그것들을 깊이 있게 이해하고 favicon을 추가함으로써 블로그를 맞춤형으로 만들기 시작합시다.

    favicon 추가


    웹 사이트에favicon을 추가하는 것부터 시작합시다.HTML에 익숙하면favicon이 head 표시줄에 정의되어 있음을 알 수 있습니다.이 테마에 이 탭을 포함하는 것은 _includes/head.html 파일입니다.
    테마의 모든 파일을 프로젝트에 넣고 덮어쓸 수 있습니다.
    이 경우 GitHub에서 코드를 복사하고favicon을 추가하기 위해 자체 _includes/head.html 를 만들 수 있습니다.
    저의favicon에 대해 연습을 위해 a lion emoji를 사용하여 하나를 만들었습니다.
    <!-- _includes/head.html -->
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  {% seo %}
  <link rel="stylesheet" href="{{ '/assets/main.css' | relative_url }}" />
  {% feed_meta %} 
  {% if jekyll.environment == 'production' and site.google_analytics %} 
    {% include google-analytics.html %} 
  {% endif %}

  <link
    rel="apple-touch-icon"
    sizes="180x180"
    href="{{ '/apple-touch-icon.png' | relative_url }}"
  />
  <link
    rel="icon"
    type="image/png"
    sizes="32x32"
    href="{{ '/favicon-32x32.png' | relative_url }}"
  />
  <link
    rel="icon"
    type="image/png"
    sizes="16x16"
    href="{{ '/favicon-16x16.png' | relative_url }}"
  />
</head>

    제목 수정


    우리가 덮어쓰는 head.html 파일처럼, 우리는 우리가 원하는 사이트를 맞춤형으로 만들 수 있는 모든 파일을 덮어쓸 수 있다.
    예를 들어, 새 로고를 추가하여 제목을 수정할 수 있습니다.
    이를 위해서는 _includes/header.html 파일을 추가하고 수정해야 합니다.
    <!-- _includes/header.html --> 
<header class="site-header" role="banner">
  <div class="wrapper">
    {% assign default_paths = site.pages | map: "path" %} 
    {% assign page_paths = site.header_pages | default: default_paths %}
    <a class="site-title" rel="author" href="{{ '/' | relative_url }}">
      <img src="{{ 'favicon-32x32.png' | relative_url }}" />
      {{ site.title | escape }}
    </a>
    ...
  </div>
</header>

    CSS 사용자 정의


    CSS를 수정할 수 있는 몇 가지 방법이 있습니다.head.html 파일에서 보듯이 CSS는 현재 assets/main.css에서 추출됩니다.
    개발 파일에서, 이것은 사실상 scss 디렉터리에서 구축된 _sass 파일이다.
    맞춤형 css의 한 옵션은 디렉터리 복사/붙여넣기 _sass 이며, 이 디렉터리의 파일을 편집하는 것입니다.
    다른 가능성은 새 파일을 생성하는 것입니다. 이 파일은 테마 css 다음에 불러올 것입니다. 입력한 규칙이 기본 규칙을 덮어쓸 수 있도록 합니다.이것이 바로 내가 지금 너희들에게 보여줄 해결 방안이다.
    우선 다음 코드로 assets/main.scss 파일을 만듭니다.
    // assets/main.scss
--------
--------

@import "minima";
@import "custom";
    기본 파일에 비해 가져오는 파일만 추가했습니다. custom현재 _sass 폴더에 이 파일을 만들고 css를 추가할 수 있습니다.
    // _sass/custom.scss
.site-title {
  color: orangered;
  &:visited {
    color: orangered;
  }
}
    여기에서, 나는 우리의 사자와 일치하도록 사이트 제목의 색깔을 수정했다.나의 주요 관점은 너에게 어떻게 이 점을 할 수 있는지 보여주는 것이다. 이것은 네가 네 사이트를 어떻게 설계할 것인지에 달려 있다.

    우리 게시물에 특색 있는 그림 추가


    너는 거의 모든 블로그에서 블로그 목록과 글 맨 위에 있는 특색 있는 그림을 볼 수 있다.
    불행하게도, 이것은 현재 Jekyll이 관리하는 것이 아니기 때문에, 우리 스스로 이 기능을 실현하도록 하자.
    이번에 우리는 블로그의 포석을 직접 수정하고 싶다.우리는 _layouts/post.html에서 자신의 버전을 만들 수 있다.
    우리가 해야 할 일은 featured_image 변수를 검사하는 것입니다. 만약 변수가 존재한다면, 다음 코드 세션을 추가해서 제목 맨 위에 표시할 것입니다.
    {% if page.featured_image %}
<div class="featured-image">
  <img src="{{ '/assets/' | append: page.featured_image | relative_url }}" />
</div>
{% endif %}
    이전 글에 특색 있는 그림을 추가합시다.필요한 이미지를 자산 폴더에 넣고 해당 이름을 게시물 메타데이터에 추가합니다.
    --------
layout: post
title: "Write a Post"
date: 2021-06-31
categories: jekyll blogging
featured_image: featured-image.jpg
--------
    그리고 스타일을 설정하기 위해 custom.scss 파일에 CSS를 추가할 수 있습니다.
    // _sass/custom.scss
... 
.featured-image {
  margin-bottom: 50px;

  img {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
  }
}
    결과는 다음과 같다.

    주요 이미지를 표시하도록 홈 페이지 업데이트


    우리 홈페이지를 개선합시다.
    먼저 폴더의 home.html를 복사합니다.게시물 레이아웃과 같은 원칙에 따라 우리는 우리의 특색 있는 그림을 추가할 수 있다.
    <!-- _layout/home.html -->
-------- 
layout: default 
--------

<div class="home">
  {% if page.title %}
    <h1 class="page-heading">{{ page.title }}</h1>
  {% endif %} 
  {{ content }} 
  {% if site.posts.size > 0 %}
    <h2 class="post-list-heading">
      {{ page.list_title | default: "Posts" }}
    </h2>
    <ul class="post-list">
      {% for post in site.posts %}
      <li>
        <div>
          {% assign date_format = site.minima.date_format 
            | default: "%b %-d, %Y" %}
          <span class="post-meta">
            {{ post.date | date: date_format }}
          </span>
          <h3>
            <a class="post-link" href="{{ post.url | relative_url }}">
              {{ post.title | escape }}
            </a>
          </h3>
          {% if site.show_excerpts %} 
            {{ post.excerpt }} {% endif %}
        </div>
        {% if post.featured_image %}
        <div class="featured-image">
          <img
            src="{{ '/assets/' | append: post.featured_image | relative_url }}"
          />
        </div>
        {% endif %}
      </li>
      {% endfor %}
    </ul>

    <p class="rss-subscribe">
      subscribe <a href="{{ '/feed.xml' | relative_url }}">via RSS</a>
    </p>
  {% endif %}
</div>
    _layout 파일을 업데이트합니다.
    // _sass/custom.scss
... .post-list > li {
  display: flex;
  flex-wrap: wrap-reverse;

  div:first-child {
    flex: 4 0 200px;
  }
  .featured-image {
    flex: 1 0 200px;
    margin-bottom: 0;
  }
}
    여기서 당신은 자신의 이미지에 따라 개인 블로그를 만드는 모든 기초 지식을 갖추고 있습니다.
    이 위젯의 코드를 찾을 수 있습니다 here.
    우리의 다음 단계는 지금to add a commenting system to our blog이다.
    Sequelize 튜토리얼(10)_실습용 데이터 넣기
    부농 거부. - 자기부터.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage