Just The Docs 이전, 다음 링크 추가
작성일: 2023-10-27이번에도 사용자 편의기능인 이전, 다음 포스트 링크를 추가하였습니다.
제가 사용중인 Just The Docs는 2단계 메뉴구조(grand_parent → parent → child)를 지원하고 있어 child 글에 대해서만 이전, 다음 링크를 추가했습니다.
템플릿 추가
포스팅이 그려지는 곳인 default.html에 이전, 다음 링크를 담당하는 prev_next.html을 추가했습니다.
_layouts/default.html
...
{% include components/prev_next.html
include_parent=page.parent
include_grand_parent=page.grand_parent
include_has_children=page.has_children
include_nav_order=page.nav_order
%}
다음으로 prev_next.html을 추가했습니다.
링크 디자인은 velog에서 사용하는 디자인을 가져와 수정해서 사용했습니다.
_includes/components/prev_next.html
{%- if include.include_has_children == false -%}
{%- assign child_pages = site[page.collection]
| default: site.html_pages
| where: "parent", include.include_parent
| where: "grand_parent", include.include_grand_parent -%}
{%- include sorted_pages.html pages = child_pages -%}
{%- assign prev_nav_order = include.include_nav_order | minus: 1 -%}
{%- assign next_nav_order = include.include_nav_order | plus: 1 -%}
{%- assign prev_page = sorted_pages | where: "nav_order", prev_nav_order | first -%}
{%- assign next_page = sorted_pages | where: "nav_order", next_nav_order | first -%}
<hr>
<div class="prev-next">
<div class="prev-div">
{% if prev_page != nil %}
<a class="prev-next-a" href="{{ prev_page.url | absolute_url }}">
<div class="prev-next-arrow" style="margin-right: 1rem">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
</svg>
</div>
<div style="flex:1 1 0%;display: flex;flex-direction: column;align-items: flex-start;line-height: 1;min-width: 0px">
<div class="prev-next-header">Previous</div>
<h3 class="prev-next-body">{{ prev_page.title }}</h3>
</div>
</a>
{% endif %}
</div>
<div class="next-div">
{% if next_page != nil %}
<a class="prev-next-a" style="flex-direction: row-reverse" href="{{ next_page.url | absolute_url }}">
<div class="prev-next-arrow" style="margin-left: 1rem">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path>
</svg>
</div>
<div style="flex:1 1 0%;display: flex;flex-direction: column;align-items: flex-end;line-height: 1;min-width: 0px">
<div class="prev-next-header">Next</div>
<h3 class="prev-next-body" style="text-align: right;">{{ next_page.title }}</h3>
</div>
</a>
{% endif %}
</div>
</div>
{%- endif -%}
다음으로 scss를 추가했습니다.
_saas/layout.scss
...
.prev-next {
display:flex;
margin-left:auto;
margin-right:auto
}
@media (max-width: 768px) {
.prev-next {
flex-direction: column-reverse;
padding-left: 1rem;
padding-right: 1rem;
}
}
.prev-div {
min-width:0;
flex: 1 1 0
}
@media (max-width: 768px) {
.prev-div {
flex: initial;
width: 100%;
min-width:0;
}
}
.next-div {
min-width:0;
flex: 1 1 0;
margin-left: 3rem
}
@media (max-width: 768px) {
.next-div {
margin-left: 0;
margin-bottom: 1.5rem;
flex: initial;
width: 100%;
}
}
.prev-next-a {
cursor:pointer;
border-radius: 0.5rem;
background: $prev-next-color;
width: 100%;
padding-left:1rem;
padding-right:1rem;
height:4rem;
display:flex;
align-items: center;
text-decoration: none;
}
.prev-next-arrow {
width:32px;
height:32px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size:1.5rem;
color: $prev-next-arrow-color;
}
.prev-next-header {
font-size:0.75rem;
font-weight: bold;
color:$prev-next-font-color;
}
.prev-next-body {
width: 100%;
font-size: 1.125rem;
color:$prev-next-font-color;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin: 0!important;
}
다크 모드를 담당하는 scss도 추가했습니다.
_sass/color_schemes/light.scss
...
$prev-next-color: $grey-lt-000 !default;
$prev-next-font-color: $grey-dk-200 !default;
$prev-next-arrow-color: $blue-100 !default;
_sass/color_schemes/dark.scss
...
$prev-next-color: $grey-dk-250;
$prev-next-font-color: $white;
$prev-next-arrow-color: $blue-000;
실행 후 이전, 다음 링크가 잘 생성되는 것을 확인했습니다.
추가된 코드는 다음 commit에서 확인할 수 있습니다.