第三部分.博客设置和设计 --- Part 3. 블로글 설정 및 디자인

Omnivore

Read on Omnivore

Read Original

date_saved: 2024-03-20 01:37:44

Full Content:

Jongdeug

• 📙 Blog
• 📂 Projects
• 🔎 About
• ⚡ Github

🌟 들어가기에 앞서 🌟进去之前

저는 html, css, javascript를 다룰 줄 알기에 조금은 수월하게 원하는 디자인을 구성했습니다. 기본 설정(컴포넌트 배치, 색상, baseUrl …)을 제외하고 원하는 디자인을 구성하려면 적어도 html, css를 다룰 줄 알아야 합니다.
由于我知道如何使用 html 、 css 和 javascript ，因此我能够轻松构建我想要的设计。除了基本设置（组件放置、颜色、 baseUrl …）之外，您至少需要了解 html 、 css 来配置您想要的设计。

🌟 참고 링크 🌟参考链接

공식 문서를 꼭 활용하시길 바랍니다.
请务必使用官方文档。

• quartz 공식 문서 石英官方文档

🌟 블로그 설정 및 디자인

🌟 博客设置和设计

Step 1 기본 설정

步骤1 基本设置

공식 문서를 보면서 프로젝트폴더/quartz.config.ts 와 프로젝트폴더/quartz.layout.ts 파일을 변경하시면 됩니다.
您可以通过查看官方文档来更改 프로젝트폴더/quartz.config.ts 和 프로젝트폴더/quartz.layout.ts 文件。

Step 2 디자인 步骤2 设计

디자인은 입맛대로 변경하시면 되는데 주로 프로젝트폴더/quartz/components/, 프로젝트폴더/quartz/styles/, 프로젝트폴더/quartz/quartz.layout.ts 에서 이뤄집니다. 여러분들은 더 이쁘게 구성하실 거라 생각합니다. 👍 혹시나 문제가 해결되지 않으면 댓글로 문의하시길 바랍니다. 제가 최대한 아는 선에서 답변 드리겠습니다!
您可以根据自己的喜好更改设计，但这主要在 프로젝트폴더/quartz/components/ 、 프로젝트폴더/quartz/styles/ 和 프로젝트폴더/quartz/quartz.layout.ts 中完成。我想你会想出一个更漂亮的构图。 👍如果问题没有解决，请在评论中联系我们。我会尽我所知回答！

Step 3 라우팅 步骤 3 路由

quartz에서 build를 하고 나면 content 내용물이 html 파일로 변환되어 public에 저장됩니다. 따라서 폴더 및 파일 경로에 따라 url이 생성되고, slug 변수를 통해 경로를 다룰 수 있습니다.
在quartz中执行 ==build== 后， ==content== 的内容将转换为 ==html== 文件并保存在 ==public== 中。因此， ==url== 是根据文件夹和文件路径创建的，而路径可以通过 ==slug== 变量来处理。

⚠️ 문제 ⚠️问题

quartz에서 폴더 안에 파일이 있는 경우 폴더 index.html이 자동으로 생성됩니다. 하지만 파일이 없는 폴더의 경우(+ 폴더만 있는 경우) index.html을 생성하지 않습니다.
在quartz中，如果文件夹内有文件，则会自动创建文件夹 ==index====.html== 。但是，对于没有文件的文件夹（仅 + 文件夹），不会创建 ==index====.html== 。

폴더 구조로 설명 드리자면,
为了解释文件夹结构，

content/
├─ IT일기/
│  ├─ 블로그 생성기/
│  │  ├─ 게시글.md
├─ 회고/
 

build 를 거치면 如果您经过 build

public/
├─ IT일기/
│  ├─ 블로그 생성기/
│  │  ├─ index.html
│  │  ├─ 게시글.md
 
 

IT일기, 회고 파일은 index.html 파일이 생성되지 않아 해당 경로로 들어가면 404 페이지가 뜰 것입니다. 对于 IT 日记和回顾文件，不会创建 ==index====.html== 文件，因此如果输入该路径，将会出现 404 页面。

✌ 해결 ✌ 解决了

공식 문서 참조 查看官方文档

You can override this by creating an `index.md` file in the folder with the `title` front- matter field.
 

사실 제일 쉬운 방법은 모든 폴더에 직접 title property가진 index.md를 추가하면 됩니다. 하지만! 너무 귀찮습니다.
事实上，最简单的方法是将带有 title 属性的 index.md 直接添加到每个文件夹。但！太烦人了。

저는 첫 번째 방법을 자동화하는 방법을 선택했습니다.
我选择自动化第一种方法。

프로젝트폴더/quartz/plugin/emitters/helpers.ts
项目文件夹/quartz/plugin/emitters/helpers.ts

“ … // Create index.md
export const createIndexMd = async () ⇒ {
const contentItems = await fs.promises.readdir(“content”, {
encoding: “utf-8”,
recursive: true,
withFileTypes: true,
})

// index.md 생성
for (let item of contentItems) {
try {
if (!item.isFile() && item.name !== “image”) {
const dir = path.join(item.path, item.name, “index.md”)

    // tag 처리 1차: 폴더이름, 2차: 상위 폴더이름  
    let tag: string[] = []  

    // 1차  
    let current = filterTag(item.name)  
    tag.push(current)  

    // 2차  
    const parentItem = item.path.split("/")  
    if (parentItem[parentItem.length - 1] !== "content") {  
      let parent = filterTag(parentItem[parentItem.length - 1])  
      tag.push(parent)  
    }  

    await fs.promises.writeFile(dir, `---\ntitle: ${item.name}\ntag: ${tag}\n---`)  
  }  
} catch (e) {  
  console.log(e)  
}  }  

}

const filterTag = (item: string) ⇒ {
let result: string[] = []

item.split("").map(r ⇒ {
if (r ! "(" && r ! ”)”) {
if (r == ” ”) result.push(”-“)
else result.push(r)
}
})

return result.join(”)
} “

프로젝트폴더/build.ts 项目文件夹/build.ts

`…

async function buildQuartz(argv: Argv, mut: Mutex, clientRefresh: () ⇒ void) {
const ctx: BuildCtx = {
argv,
cfg,
allSlugs: [],
}

// Create index.md
await createIndexMd()

…`

Step 4 댓글 기능

步骤4 评论功能

제가 댓글 기능에서 막힌 부분이 있어 도움을 드리고자 작성했습니다.
我写这篇文章是为了提供帮助，因为我在使用评论功能时遇到了问题。

우선 제가 사용한 댓글 오픈 소스는 giscus입니다. 이 링크를 들어가셔서 해당 절차에 맞게 설정하시길 바랍니다.
首先我使用的评论开源是giscus。请点击此链接并按照相关程序进行设置。

먼저 SPA 설정을 false로 변경해야 합니다. true로 설정하면 페이지 로드가 한 번만 되기 때문에 댓글 기능이 작동하지 않습니다. 首先，您需要将 SPA 设置更改为 false 。如果设置为 true 评论功能将不起作用，因为页面只会加载一次。

프로젝트폴더/quartz.config.ts 项目文件夹/quartz.config.ts

enableSPA: false

giscus 설정을 다하셨다면 <script> 태그를 얻으셨을 겁니다. 이를 아래와 같이 Content.tsx 파일에 넣어줍니다.
如果您完成了 giscus 的配置，您将获得 <script> 标签。将其放入 Content.tsx 文件中，如下所示。

프로젝트폴더/quartz/components/pages/Content.tsx

`import { htmlToJsx } from ”../../util/jsx” import { QuartzComponentConstructor, QuartzComponentProps } from “../types” import { simplifySlug } from ”../../util/path”

function Content({ fileData, tree }: QuartzComponentProps) { const content = htmlToJsx(fileData.filePath!, tree) const classes: string[] = fileData.frontmatter?.cssclasses ?? [] const classString = [“popover-hint”, …classes].join(” ”) const url = simplifySlug(fileData.slug!)

return (