[BlogDev] 메인 페이지 스타일링

{%- raw -%}
---
layout: archive
 
<!-- 오른쪽 여백(margin) 제거하여 넓게 보는 옵션 -->
classes: wide
---
 
{{ content }}
 
<h3 class="archive__subtitle">{{ site.data.ui-text[site.locale].recent_posts | default: "Recent Posts" }}</h3>
 
<!-- paginator 가 활성화되어 있다면, post는 paginator.posts 의미, 아니라면 post는 site.posts 의미 -->
{% if paginator %}
  {% assign posts = paginator.posts %}
{% else %}
  {% assign posts = site.posts %}
{% endif %}
 
<!-- page.entries_layout를 entries_layout 변수에 저장, 기본 설정은 'list' -->
{% assign entries_layout = page.entries_layout | default: 'list' %}
<div class="entries-{{ entries_layout }}">
  {% for post in posts %}
 
    <!-- posts의 각 post마다 archive-single.html 형식으로 추출 -->
    {% include archive-single.html type=entries_layout %}
  {% endfor %}
</div>
 
<!-- paginator.html 활성화 -->
{% include paginator.html %}
{% endraw -%}
복사

{%- raw -%}
<!-- post.header.teaser가 있다면 teaser는 post.header.teaser, 아니라면 site.teaser-->
{% if post.header.teaser %}
  {% capture teaser %}{{ post.header.teaser }}{% endcapture %}
{% else %}
  {% assign teaser = site.teaser %}
{% endif %}
 
<!-- post.id가 있다면 title은 <p> 태그 제거하고 마크다운화, 아니라면 그냥 post.title -->
{% if post.id %}
  {% assign title = post.title | markdownify | remove: "<p>" | remove: "</p>" %}
{% else %}
  {% assign title = post.title %}
{% endif %}
 
<!-- class는 include.type, 기본값은 list -->
<div class="{{ include.type | default: 'list' }}__item">
  <article class="archive__item" itemscope itemtype="https://schema.org/CreativeWork">
 
    <!-- grid가 있고 teaser가 있으면 이미지 티저와 상대경로 표시 / index에는 grid 타입 아니므로 무시 -->
    {% if include.type == "grid" and teaser %}
      <div class="archive__item-teaser">
        <img src="{{ teaser | relative_url }}" alt="">
      </div>
    {% endif %}
 
    <!-- post에 link가 있다면 ~~이렇게 표시, url에 대해 링크 걸음-->
    <h2 class="archive__item-title no_toc" itemprop="headline">
      {% if post.link %}
        <a href="{{ post.link }}">{{ title }}</a> <a href="{{ post.url | relative_url }}" rel="permalink"><i class="fas fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span></a>
      {% else %}
        <a href="{{ post.url | relative_url }}" rel="permalink">{{ title }}</a>
      {% endif %}
    </h2>
 
    <!-- 시간을 표시하는 양식을 표시 -->
    {% include page__meta.html type=include.type %}
 
    <!-- post에 description가 있다면 표시 -->
    {% if post.description %}<p class="archive__item-description" itemprop="description">{{ post.description | markdownify | strip_html | truncate: 160 }}</p>{% endif %}
  </article>
</div>
{% endraw%}
복사

{%- raw -%}
{% assign document = post | default: page %}
 
<!-- 모든 것은 문서에 read_time 또는 show_date가 있어야 표시 -->
{% if document.read_time or document.show_date %}
  <p class="page__meta">
 
    <!-- document에 date가 있고 show_date가 활성화되어 있다면 -->
    {% if document.show_date and document.date %}
      {% assign date = document.date %}
      <span class="page__meta-date">
 
        <!-- 달력 이미지를 활성화 -->
        <i class="far {% if include.type == 'grid' and document.read_time and document.show_date %}fa-fw {% endif %}fa-calendar-alt" aria-hidden="true"></i>
 
        <!-- 작성일자 형식 기본값은 "%B %-d, %Y"로 설정하여 date_format에 저장 -->
        {% assign date_format = site.date_format | default: "%B %-d, %Y" %}
 
        <!-- 위에서 저장한 date_format에 맞춰 date 출력한 것을 datetime에 저장 -->
        <time datetime="{{ date | date_to_xmlschema }}">{{ date | date: date_format }}</time>
      </span>
    {% endif %}
 
    <!-- document에 read_time이 있고 show_date가 활성화되어 있다면 -->
    {% if document.read_time and document.show_date %}<span class="page__meta-sep"></span>{% endif %}
 
    {% if document.read_time %}
      <!-- 사이트의 분당 단어 수를 기준으로 words 변수에 값 저장, 중요치 않음 -->
      {% assign words_per_minute = document.words_per_minute | default: site.words_per_minute | default: 200 %}
      {% assign words = document.content | strip_html | number_of_words %}
 
      <span class="page__meta-readtime">
 
        <!-- 시계 이미지를 활성화 -->
        <i class="far {% if include.type == 'grid' and document.read_time and document.show_date %}fa-fw {% endif %}fa-clock" aria-hidden="true"></i>
 
        <!-- 위에서 저장한 words와 words_per_minute 을 비교함으로써 읽은 시간 정보 출력, 중요치 않음 -->
        {% if words < words_per_minute %}
          {{ site.data.ui-text[site.locale].less_than | default: "less than" }} 1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
        {% elsif words == words_per_minute %}
          1 {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
        {% else %}
          {{ words | divided_by: words_per_minute }} {{ site.data.ui-text[site.locale].minute_read | default: "minute read" }}
        {% endif %}
      </span>
    {% endif %}
  </p>
{% endif %}
{% endraw -%}
복사

{%- raw -%}
<!-- 시간을 표시하는 양식을 표시 -->
{% include page__meta.html type=include.type %}
{% endraw -%}
복사

{%- raw -%}
<!-- 캘린더 모양과 작성일자 표시 -->
{% if post.date %}
  <p class="page__meta"><i class="far fa-fw fa-calendar-alt" aria-hidden="true"></i> {{ post.date | date: "%Y.%m.%d" }}</p>
{% endif %}
{% endraw -%}
복사

{%- raw -%}
<!-- 시간을 표시하는 양식을 표시 -->
{% include page__meta.html type=include.type %}
{% endraw -%}
복사

{%- raw -%}
<!--Archive page 용-: (post -> page)-->
<!--page__taxonomy.html에서 가져 옴-->
 
<!-- site의 layout이 category_archive.type이 있고, post의 카테고리가 1개 이상 있다면 -->
{%- if site.category_archive.type and post.categories[0] -%}
 
    <!--
        site.category_archive.type이 liquid이면 path_type = "#", jekyll-archives이면 path_type = 없음
        본 포스트는 liquid이므로 path_type = "#"
    -->
    {%- case site.category_archive.type -%}
        {%- when "liquid" -%}
        {%- assign path_type = "#" -%}
        {%- when "jekyll-archives" -%}
        {%- assign path_type = nil -%}
    {%- endcase -%}
 
    <!-- 위와 동일하고 category가 아닌 태그에 대해 판단 -->
    {% case site.tag_archive.type %}
        {% when "liquid" %}
            {% assign path_type = "#" %}
        {% when "jekyll-archives" %}
            {% assign path_type = nil %}
    {% endcase %}
 
 
    <!-- category_archive.path와 tag_archive.path가 있다면 / 그냥 있다고 생각 -->
    {%- if site.category_archive.path and site.tag_archive.path -%}
 
        <!--
            post의 categories를 downcase해서 ','으로 구분해 post_categories에 저장
            아마도 리스트 구조로 저장하는 듯, 보통 카테고리는 1개이니까 상관 X
        -->
        {%- capture post_categories -%}{%- for category in post.categories -%}{{ category | downcase }}|{{ category }}{%- unless forloop.last -%},{%- endunless -%}{%- endfor -%}{%- endcapture -%}
 
        <!-- 위의 카테고리 리스트의 항목을 ',' 기준으로 정렬해서 category_hashes에 저장 -->
        {%- assign category_hashes = post_categories | split: ',' | sort -%}
 
        <!-- categories를 저장한 것처럼 tag들을 저장 -->
        {% capture post_tags %}{% for tag in post.tags %}{{ tag | downcase }}|{{ tag }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %}
 
        <!-- 위의 태그 리스트의 항목을 ','을 기준으로 정렬해서 tag_hashes에 저장 -->
        {% assign tag_hashes = post_tags | split: ',' | sort %}
 
 
        <!-- 본격적으로 카테고리와 태그를 출력하는 부분-->
        <span class="page__taxonomy">
            <span itemprop="keywords">
 
                <!-- category를 저장한 리스트의 각 항목마다 -->
                {%- for hash in category_hashes -%}
 
                    <!-- 각 카테고리를 | 기호로 나누어 keyValue에 저장 -->
                    {%- assign keyValue = hash | split: '|' -%}
 
                    <!-- keyValue가 단행이 아닌 다행이라면 단행으로 만들어 category_word에 저장 -->
                    {%- capture category_word -%}{{ keyValue[1] | strip_newlines }}{%- endcapture -%}
 
                    <!--
                    1. a태그에 대한 href url을 부여하기 위해 category_word를 아래와 같이 가공
                    1.1. slugify : 문자열을 소문자 url 형식으로 변환
                    1.2. prepend: path_type : 1.1 앞에 path_type 표시(#)
                    1.3. prepend: site.category_archive.path : 1.2 앞에 category_archive.path 표시
                    1.4. relative_url: 입력값 앞에 baseurl 추가 / 나는 baseurl이 따로 없어서 그냥 url로 적용
 
                    2. class 이름은 page__taxonomy-item-category
                    3. category_word 출력
                     -->
                    <a href="{{ category_word | slugify | prepend: path_type | prepend: site.category_archive.path | relative_url }}" class="page__taxonomy-item-category" rel="tag">{{ category_word }}</a>{%- unless forloop.last -%}<span class="sep"> </span>{%- endunless -%}
                {%- endfor -%}
 
                <!-- tag를 저장한 리스트의 각 항목마다 적용, 방식은 위의 category와 같다.-->
                {% for hash in tag_hashes %}
                    {% assign keyValue = hash | split: '|' %}
                    {% capture tag_word %}{{ keyValue[1] | strip_newlines }}{% endcapture %}
                    <a href="{{ tag_word | slugify | prepend: path_type | prepend: site.tag_archive.path | relative_url }}" class="page__taxonomy-item-tag" rel="tag">{{ tag_word }}</a>{% unless forloop.last %}<span class="sep"> </span>{% endunless %}
                {% endfor %}
            </span>
        </span>
    {%- endif -%}
{%- endif -%}
{% endraw -%}
복사

{%- raw -%}
{%- include post__taxonomy.html -%}
{% endraw -%}
복사

{%- raw -%}
{%- include post__taxonomy2.html -%}
{% endraw -%}
복사

{%- raw -%}
<!-- post에 link가 있다면 ~~이렇게 표시, url에 대해 링크 걸음-->
<h2 class="archive__item-title" itemprop="headline"
 
  <!-- 캘린더 모양과 작성일자 표시 -->
  {% if post.date %}
    <p class="page__meta"><i class="far fa-fw fa-calendar-alt" aria-hidden="true"></i> {{ post.date | date: "%Y.%m.%d" }}</p>
  {% endif %
 
  {% if post.link %}
    <a href="{{ post.link }}">{{ title }}</a> <a href="{{ post.url | relative_url }}" rel="permalink"><i class="fas fa-link" aria-hidden="true" title="permalink"></i><span class="sr-only">Permalink</span></a>
  {% else %}
    <a href="{{ post.url | relative_url }}" rel="permalink">{{ title }}</a>
  {% endif %}
</h2>
{% endraw -%}
복사

.archive__item {
  position: relative;
 
  a {
    position: relative;
    z-index: 10;
  }
 
  a[rel="permalink"] {
    position: static;
  }
}
복사

a {
  position: relative;
  z-index: 10;
  text-decoration: none;
}
복사

.page__taxonomy-item-tag {
  text-decoration: none;
  margin-right: 0.1em;
  font-size: $type-size-6;
  padding: 0.2em 0.6em;
  background-color: #4a4d4f;
  border-radius: 3px;
  border: 1px solid #56595b;
  color: white;
 
  &:visited {
    text-decoration: none;
    color: white;
  }
 
  &:hover {
    text-decoration: none;
    background-color: #56595b;
    color: $primary-color;
  }
 
  &:active {
    text-decoration: none;
    background-color: $primary-color;
    color: white;
  }
}
복사