Intro
안녕하세요. 이번 포스팅에서는 현재 블로그에서 포스팅 밑에 이전글, 다음글 에 대해서 카테고리별로 표시될 수 있도록 커스터마이징 하는 방식에 대해 짧게 공유드리려 합니다.
기존에는 작성날짜를 기준으로 sorting이 되어있고, 포스트의 카테고리와는 무관하게 이전에 작성했던 글이 보이는 것이 마음에 걸려 하루(?)정도 삽질 끝에 해결하였습니다.
제가 사용하는 테마는 hexo-icarus-theme 라는 테마입니다. 버전은 5.1.1 을 쓰고 있습니다.
코드
아래 코드 추가 라고 되어 있는 부분을 추가한 후에 렌더링되는 부분의 변수명도 바꿔주면 됩니다.
/icarus/layout/common/article.jsx1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| module.exports = class extends Component {
render() {
const { config, helper, page, index } = this.props;
const { article, plugins } = config;
const { url_for, date, date_xml, __, _p } = helper;
const indexLaunguage = toMomentLocale(config.language || 'en');
const language = toMomentLocale(page.lang || page.language || config.language || 'en');
const cover = page.cover ? url_for(page.cover) : null;
const updateTime = article && article.update_time !== undefined ? article.update_time : true;
const isUpdated = page.updated && !moment(page.date).isSame(moment(page.updated));
const shouldShowUpdated = page.updated && ((updateTime === 'auto' && isUpdated) || updateTime === true);
let nextPage = page.next;
let prevPage = page.prev;
if (page && nextPage && prevPage) {
if (page.categories.length > 0) {
const currentCategory = page.categories.data[1].name;
while (nextPage.categories.data[1].name !== currentCategory && nextPage.next) {
nextPage = nextPage.next;
}
if (prevPage.categories.data.length < 1) {
prevPage = page.prev;
} else {
while (prevPage.categories.data[1].name !== currentCategory && prevPage.prev) {
prevPage = prevPage.prev;
if (prevPage.categories.data.length < 1) {
prevPage = page.prev;
break;
}
}
}
} else {
nextPage = null;
prevPage = null;
}
}
return <Fragment>(렌더링 코드...)</Fragment>;
|
그리고 렌더링 되는 부분도 마찬가지로 수정
return() page.next , page.prev 변경1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| {
!index && (prevPage || nextPage) ? (
<nav class="post-navigation mt-4 level is-mobile">
{nextPage ? (
<div class="level-start">
<a
class={`article-nav-next level level-item${
!nextPage ? ' is-hidden-mobile' : ''
} link-muted`}
href={url_for(nextPage.path)}>
<i class="level-item fas fa-chevron-left"></i>
<span class="level-item">{nextPage.title}</span>
</a>
</div>
) : null}
{prevPage ? (
<div class="level-end">
<a
class={`article-nav-prev level level-item${
!prevPage ? ' is-hidden-mobile' : ''
} link-muted`}
href={url_for(prevPage.path)}>
<span class="level-item">{prevPage.title}</span>
<i class="level-item fas fa-chevron-right"></i>
</a>
</div>
) : null}
</nav>
) : null;
}
|
추가 설명을 더 해보자면
1
| nextPage.categories.data[1];
|
여기서 인덱스 값을 1을 준 이유는, 각자의 블로그 카테고리의 level을 어떻게 설정 했느냐에 따라 다르게 설정해주면 될 것 같습니다.
저는 Programming > Python 여기서 Python 카테고리만 걸러주기 위해 1 이라는 인덱스 값을 준 것입니다.
도움이 되셨길 바랍니다!!!. 혹은, 더 좋은 방법이 있다면 댓글 남겨주시면 감사하겠습니다!!!
Reference