그동안의 변경기록

연결문서

메모

CSS를 변경해볼까요?

휴고 깃허브 페이지를 성공했다. 그러나..디자인이 너무 거슬려요. 몇가지 css와 페이지를 수정하고, 파일들을 변경하고 버그를 수정했습니다. 다음은 내가 파일을 수정하고 변경한 기록입니다.

content

content 폴더명이 왼쪽 book라인에 보이는 카테고리와 파일입니다. 폴더만 만들면 인식을 못하지만 내부에 마크다운 파일이 있으면 폴더명s로 카테고리가 생성됩니다. 기본적으로 폴더를 생성하고 _index.md파일을 만들어줘야 이름 그대로 설정이 가능합니다. 이런 경우, 리스트를 나열하거나 간단하게 이 폴더의 쓸모와 정보를 링크하는 게 좋습니다. _idex.md파일에는 이왕이면 백링크를 달지 않는 것을 추천합니다. 오류 날 가능성이 많습니다. 또한 content의 모든 마크다운 파일은 안에 꼭 텍스트를 작성해야 합니다. 메타데이터와 함께 텍스트를 모두 작성해야지 백링크와 그래프에서 오류가 발생하지 않습니다.

프로퍼티 타이틀

title: date: porperties의 title을 먼저 제목으로 인식한다. 그러나 파일 링크는 파일명과 연동이 된다. SEO상의 제목을 title이라고 생각하면 될 것 이지만 title도 꼭 작성합시다. date도 작성해줘야 합니다. 전 Date로 했는데, Date로 해서 깃허브에 푸쉬하면 바로 오류가 발생합니다. 소문자여야지 제대로 인식합니다.

로컬에서 사이트 미리보기

깃 풀 푸쉬 하고 깃허브 페이지를 구경하는 것이 아닌 hugo serve명령으로 먼저 미리보기를 한 후 만족스러우면 그 때 push하면 됩니다. 시간이 지나면 알아서 배포가 되므로 먼저 로컬에서 상황을 지켜본 후 배포하면 됩니다.

Config.yaml

baseURL설정하기

config.yaml에서 baseURL을 설정가능합니다. 자신의 주소를 적어주세요.

메뉴 고정메뉴 설정

여기서 왼쪽 메뉴 맨 아래에 잇는 고정메뉴도 추가 할 수 있습니다. 왼쪽 book메뉴의 site theme, 원래 메뉴에는 github였는데 변경했습니다.

아래의 sebsite와 blog 링크 및 블로그 이름까지 변경이 모두 가능합니다. 삭제도 가능합니다.

TOC h6까지 모두 보이게 하기

hugo는 TOC를 h3까지만 표현한다 이것을 수정 가능하다.config.yaml 에 들어가서 다음과 같이 작성하면 h6까지 모두 볼 수 있습니다.

markup:
  tableOfContents:
    startLevel: 1
    endLevel: 6

마음대로 config.yaml 수정했는데, 제 book이 안보였습니다. 이 부분은 그대로 두는게 맞는 듯 합니다. 왜 안나왔는 지 이유는 모르겠습니다.

  # Set source repository location.
  # Used for 'Last Modified' and 'Edit this page' links.
  BookRepo: https://github.com/64bitpandas/amethyst

타이틀 색상 변경

header {
    position: fixed;
    width: 100%;
    padding: 0px 80px;
    z-index: 9999;
    background-color: var(--header);
    margin: 0 !important;
    height: $header-height;
}

여기서 타이틀 색상 등을 변경 가능합니다. 타이틀 높이나 여러 부분들을 수정했습니다.

index.md에서 설정을 통해 카테고리 만들기

메뉴 왜 옆에 화살표 사라졌어요? 여기보면 오른쪽에 화살표가 있어서 접히기도 하는데,

여긴 그런게 없다 생각해보니 폴더이름 그대로 된것도 아니고 폴더이름이랑 메뉴이름이 달랐는데 어떻게 한건지 찾아보았습니다.

우선 메인 블로그와의 차이를 봤는데, 메인 블로그는 카테고리도 선택이 가능했고 누르면 텍스트가 보였다. 그걸 바탕으로 그사람의 리포지토리를 확인해봤는데, 각각의 폴더에 _index.md파일이 있어서 이게 그 파일의 이름과 카테고리 이름을 설정해준다는 것을 확인했다. 그걸 바탕으로 git 폴더에 인덱스 마크다운 파일을 만드니까 제대로 눌러지는 것을 확인

bookCollapseSection: true

메타데이터에 옵션을 설정하면 접힙니다.

정리하자면. 폴더를 생성하면 그 폴더에 _index.md파일을 생성시키고, 프로퍼티 부분에 title을 설정한 후 bookCollapseSection: true 추가시켜주면 접히는 메뉴가 생성이 됩니다.

toc 폰트 크기 설정하기

#TableOfContents > ul {
    font-size:1.3em;
  }

그래프뷰 인코딩

한글로 쓰여진 부분들은 위 부분처럼 나와서 어려웠습니다. 이 부분은 무조건 수정해야겠다 싶었습니다. asset\quartz\js\graph.js를 클릭합니다.

.text((d) => content[d.id]?.title || d.id.replace("-", " "))

이 항목을 찾아서,

.text((d) => {
  const decodedName = decodeURIComponent(content[d.id]?.title || d.id);
  console.log('Decoded node name:', decodedName);
  return decodedName;
})

이렇게 수정해주면, 되는데 이 경우는 파일의 경로와 링크가 모두 보이는 버전

파일 이름만 확인하고 싶다면

.text((d) => {
  const decodedName = decodeURIComponent(content[d.id]?.title || d.id);
  const nameParts = decodedName.split('/');
  const lastNamePart = nameParts[nameParts.length - 1];
  console.log('Decoded node name:', lastNamePart);
  return lastNamePart;
})

이렇게 하면 됩니다!

최종 이미지!

그래프뷰를 다른 페이지로 만들기

먼저, 기본 페이지에 있는 그래프뷰를 없앱시다. layouts\particles\quartz\footer.html을 수정하자!

<hr/
{{/*  {{if $.Site.Params.enableFooter}}  */}}
<div class="page-end" id="footer">
    <div class="backlinks-container">
        {{partial "quartz/backlinks.html" .}}
    </div>
    <div>
        {{partial "quartz/graph.html" .}}
    </div>
</div>
{{/*  {{end}}  */}}
{{partial "quartz/contact" .}}

여기서 그래프 항목을 삭제!!

<hr/>
{{/*  {{if $.Site.Params.enableFooter}}  */}}
<div class="page-end" id="footer">
    <div class="backlinks-container">
        {{partial "quartz/backlinks.html" .}}
    </div>
</div>
{{/*  {{end}}  */}}
{{partial "quartz/contact" .}}

그래프를 삭제하면! 심플하게 백링크만 존재! 그러나 그래프뷰를 단일로 보이게 하는 기능을 결국 알지 못하여..

  <hr/>

{{/*  {{if $.Site.Params.enableFooter}}  */}}
<div class="page-end" id="footer">
    <div class="backlinks-container">
        {{partial "quartz/backlinks.html" .}}
    </div>
</div>
<div>
    {{partial "quartz/graph.html" .}}
 </div>
{{/*  {{end}}  */}}

{{partial "quartz/contact" .}}

로 변경!

백링크?

하던 중 이상한 걸 발견했습니다. 왜 나는 백링크가 없지? (이게 기본인데..) 우선 가장 중요한건 설정-파일및 경로에서 절대경로로 링크를 생성하는 것이다. 절대경로!!로 해야지 문제가 덜합니다.

설치하다 hugo-obsidian #

이 단계에서는 Hugo가 구문 분석할 백링크 목록을 생성합니다. Go (>= 1.16)가 설치되어 있는지 확인하세요 .

# Install and link `hugo-obsidian` locally
go install github.com/jackyzha0/hugo-obsidian@latest
### 참조
- https://themes.gohugo.io/

휴고 옵시디언을 설치해준다. 그런다음에 메인 폴더에서 **hugo-obsidian -input=content -output=data -index=true** 명령을 실행한다. https://github.com/jackyzha0/hugo-obsidian

그런데 여기서 끝이아니었습니다. 우선 링크가 이상하게어있어서, 메인 폴더의 바로 상위폴더에 static폴더를 생성한다 그럼 얘가 돌아가면서 알아서 만들어줌 그런데 data 폴더에 json을 생성해주고 중요한 링크맵은 또 상위폴더 static폴더에 해준다 파일들을 올겨야한다.

두 개의 json파일들은 aasets indices 폴더에 그냥 넣어버리고 linkmap은 진짜 폴더에 있는 static에 저장하면 된다. 이걸 시행할 때마다 수동으로 시행해야 합니다.

참조