강인규 블로그

0%

Hueman테마에 메뉴 변경하기

작성일 Edited on In , Disqus:

# 상단 메뉴 변경

hueman테마를 사용중에 home부분을 변경할려고 하니 index.이라는 부분이 붙여서 나오는 것을 보고 변경할려고 생각한 방법입니다.

위 이미지는 저의 상단에 `home -> innks v6`로 변경하니 나오는 것을 스샷한것입니다. 이것이 뭐 번거롭게하냐? 라고 생각 할수도 있습니다. 하지만 저의경우에는 몇개의 메뉴를 추가하니 길어져서 보기가 조금 그랬습니다.

# 참고

더 쉬운 방법을 찾았네요 Nayoung Kim 감사 ^^
https://github.com/ppoffice/hexo-theme-hueman/issues/139 가시면 답이 있습니다.

# 시작

먼저 _config.yml을 찾아 편집기로 엽니다. (테마의 파일이 아니라 hexo의 설정 파일 입니다.)

1
2
3
4
5
6
7
# Site_
title: innks
subtitle: Sixth Challenge
description: theK의 여섯번째 도전 블로그
author: theK
language: en
timezone: Asia/Seoul

위의 설정 중에 language라는 값이 en인걸 확인후 테마란에 가시면 languages라는 폴더가 있습니다. 그중 조금전 확인한 en.yml파일을 열어 index: 밑에 자기가 원하는 메뉴를 추가 합니다.(굳이 en파일이 아니라도 다른 파일이라도 주가 하면 되더군요. 2017-11-19)

1
2
3
4
5
6
7
8
9
index:
    home: 'Home'
    about: 'About'
    search: 'Search'
    archive: 'Archive'
    category: 'Category'
    uncategorized: 'uncategorized'
    tag: 'Tag'
    innksv6: 'innks v6'  <-- 이것을 추가 합니다.

이제 테마의 _config.yml파일을 열어 위의 `innksv6’를 추가 하니 되네요.

1
2
3
4
5
menu:
    innksv6: /
    # Delete this row if you don't want categories in your header nav bar
    Categories:
    About: /about/index.html

밑의 것은 하지 마시길 바랍니다.

# 변경하기 하지 마시길 바랍니다.

이제 Hueman데마의 폴더에서 header.ejs를 변경하겠습니다. 위치는 themes/hueman/layout/common/header.ejs 입니다.

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
31
32
33
34
35
36
37
38
39
40
41
<header id="header">
    <div id="header-outer" class="outer">
        <div class="container">
            <div class="container-inner">
                <div id="header-title">
                    <h1 class="logo-wrap">
                        <a href="<%- url_for() %>" class="logo"></a>
                    </h1>
                    <% if (theme.subtitle) { %>
                        <h2 class="subtitle-wrap">
                            <p class="subtitle"><%= theme.subtitle %></p>
                        </h2>
                    <% } %>
                </div>
                <div id="header-inner" class="nav-container">
                    <a id="main-nav-toggle" class="nav-icon fa fa-bars"></a>
                    <div class="nav-container-inner">
                        <ul id="main-nav">
                            <% for (var i in theme.menu) {
                                    if (i == 'Categories') { %>
                                        <%- list_categories({
                                            depth: 2,
                                            style: 'list',
                                            class: 'main-nav',
                                            show_count: false,
                                        }) %>
                                    <% } else { %>
                                <li class="main-nav-list-item" >
                                    <a class="main-nav-list-link" href="<%- url_for(theme.menu[i]) %>"><%= __('index.' + i.toLowerCase()) %></a>
                                </li>
                            <% }} %>
                        </ul>
                        <nav id="sub-nav">
                            <%- partial('search/index') %>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
header.ejs
2727<% } else { %>
2828<li class="main-nav-list-item" >
29 - <a class="main-nav-list-link" href="<%- url_for(theme.menu[i]) %>"><%= __('index.' + i.toLowerCase()) %></a>
 29+ <a class="main-nav-list-link" href="<%- url_for(theme.menu[i]) %>"><%= __(i.toLowerCase()) %></a>
3030<li>
3131<% }} %>
찐한 붉은 부분을 삭제 합니다.

위의 내용중에 29번째 줄의 내용의 일 부분을 변경 합니다.

1
<%= __('index.' + i.toLowerCase()) %>

위의 내용중에 'index.' +를 빼줍니다.

1
<%= __(i.toLowerCase()) %>

그러면 위의 보듯이 이렇게 나옵니다. 그러면 메뉴 부분에 index.부분이 사라진 것을 알수 있습니다.

아무것도 아닌것이 계속 신경이 쓰였는데 이렇게 빼고나니 속도 시원한 것같습니다

# 관련 문서 바로가기