# 博客设置文档 / README


"Borderless" 文档 (英文)

- [安装](https://github.com/junhobaik/junhobaik.github.io/wiki/Document-(Borderless,-en)#install)
- [基本设置](https://github.com/junhobaik/junhobaik.github.io/wiki/Document-(Borderless,-en)#basic-settings)
- 撰写文章
  - [Markdown YAML Front matter](https://github.com/junhobaik/junhobaik.github.io/wiki/Document-(Borderless,-en)#markdown-yaml-front-matter)
- [部署](https://github.com/junhobaik/junhobaik.github.io/wiki/Document-(Borderless,-en)#deploy)


## "Borderless", Gatsby 博客启动器 (主题)

使用 Gatsby 创建的静态网站，
Borderless 博客主题。

本文档基于分发到 Github Pages 的版本。

**[Borderless 演示网站](https://junhobaik.github.io)**

- 极简设计，无边框，颜色极简
- 创建 Markdown 文章 (Markdown + emoji, ktex)
- 搜索引擎优化 (SEO)
- 支持 Safari 浏览器等文章的阅读器模式
- Google Analytics 支持
- Google Adsense 支持
- Disqus 评论功能

## 安装

有两种方法可以开始使用此博客。

1. Fork 仓库后使用
2. Clone 仓库后使用

### ! 重要

**不要在 master 分支上工作。**

如果您完成了上述步骤，您正在工作的分支是 `develop`。
在这个 `develop` 分支上开始工作。您可以修改 `develop` 分支或从 `develop` 分支单独创建一个分支。

`master` 分支用于部署，构建的文件位于此处。
您可以在 `develop` 分支上工作并使用 deploy 命令进行部署。
deploy 命令会自动部署到 `master` 分支，该分支没有直接访问权限。

### 1. Fork 仓库后使用

- Fork 仓库后：

1. `Setting > Option - Repository name`
    将仓库重命名为 "**username**.github.io"
2. `Setting > Branches - Default branch`
    更改默认分支。选择 **develop** 并按更新按钮继续。
3. Clone 您的仓库。
4. `$ npm i` 安装包
5. `$ npm start` 启动本地开发环境。检查 URL "localhost:8000"

### 2. Clone 仓库后使用

```bash
$ git clone -b develop --single-branch https://github.com/junhobaik/junhobaik.github.io.git [SITE_DIRECTORY]
$ npm install
```

此过程基于 `develop` 分支克隆仓库。
然后安装所需的包。

```bash
$ npm start
```

启动本地开发环境。
检查 URL "localhost:8000"

## 基本设置

为您修改默认设置。

### 修改 `./config.js`

`config.js` 示例：

```javascript
module.exports = {
  /** Site MetaData (Required all)*/
  title: `Dev.White`,
  description: `Junho Baik's Development Blog`,
  author: `Junho Baik`,
  siteUrl: 'https://junhobaik.github.io',

  /** Header */
  profileImageFileName: 'profile.png',

  /** Home > Bio information*/
  comment: 'Jr. Web Front-end Developer. / javascript, react ...',
  name: 'Junho Baik',
  company: '',
  location: 'Korea',
  email: 'junhobaik@gmail.com',
  website: 'https://junhobaik.github.io',
  linkedin: '',
  facebook: '',
  instagram: 'https://www.instagram.com/junhobaik',
  github: 'https://github.com/junhobaik',

  /** Post */
  enablePostOfContents: true,
  disqusShortname: 'junhobaik',
  enableSocialShare: true,

  /** Optional */
  googleAnalytics: 'UA-123123123-0',
  googleAdsenseClient: 'ca-pub-5001380215831339',
  googleAdsenseSlot: '5214956675',
};
```

| 设置                                             | 类型                             | 说明                                                         |
| ------------------------------------------------ | -------------------------------- | ------------------------------------------------------------ |
| title                                            | (必填) String                | 网站标题。标题文本在头部。输入每个网页的标题。 |
| description                                      | (必填) String                | 网站描述                                      |
| author                                           | (必填) String                | 网站作者                                           |
| siteUrl                                          | (必填) String                | 输入您的网站地址。如果在部署时地址不存在，可能会发生许多错误。 |
| profileImageFileName                             | String                           | 将您的个人资料图片放在路径 `./src/images` 中，并输入图像的文件名。它会在标题旁边输入图像。如果没有输入，它会显示一个随机图像。 |
| comment, name, company, location, email, website | String                           | 这是显示在主页 (索引) 页面左侧的个人信息。如果未输入，则不输出该项目，所有值都作为字符串输入。 |
| linkedin, facebook, instagram, github            | String                           | 这些是社交图标链接，将显示在主页 (索引) 页面左侧的个人信息下方。单击图标将带您到该链接。请输入完整链接，不仅仅是 ID。 |
| enablePostOfContents                             | (必填) Boolean (true, false) | 设置目录是否出现在文章中。       |
| disqusShortname                                  | String                           | 您可以激活评论功能。在 Disqus 中创建站点后，在此处输入站点的 shortname。清空该值将禁用评论功能。 |
| enableSocialShare                                | (必填) Boolean (true, false) | 设置是否在文章底部显示文章社交分享图标。 |
| googleAnalytics                                  | String                           | 您可以激活 Google Analytics。输入您的 TrackingID。    |
| googleSearchConsole                              | String                           | Google Search Console 所有权验证的 HTML 标签中的内容值，例如 'w-K42k14_I4ApiQKuVPbCRVV-GxlrqWxYoqO04KDbKo' |
| googleAdsenseClient                              | String                           | 激活 GoogleAdsense 时 Google AdSense 的客户端输入。此外，将 `./static/ads.txt` 中对应于 Client 的数字更改为您的客户端数字。 |
| googleAdsenseSlot                                | String                           | 激活 GoogleAdsense 时输入 Google AdSense Slot。     |

String (String) 值不需要为空 `''`。

Disqus 评论、Google Analytics 和 Google Adsense 功能在本地开发期间被禁用。部署后，您可以使用这些功能。

## 撰写文章

文章是用 Markdown 编写的。

- Markdown
- Emoji 支持
- KaTeX 支持

您的文章将位于 `./_posts` 文件夹中。
您的草稿文章将位于 `./_drafts` 文件夹中。（草稿文章在本地开发期间可见，但在分发的网络上不可见）。
`_posts` 文件夹和 `_drafts` 文件夹必须存在。**不要删除这两个文件夹。**

文件的标题成为文章的地址。如果输入了日期，例如 Jekyll 的文章文件标题格式，则日期将从地址中排除。

ex 1. `./_posts/first-post.md`
 address: `https://junhobaik.github.io/first-post`

2. `./_posts/2019-12-31-first-post.md`
    address: `https://junhobaik.github.io/first-post`

**创建带有图像的文章**

在 markdown 中嵌入图像时，结构如下：

创建一个地址为 `/first-post` 的文章的示例。创建 `./_posts/first-post` 文件夹后：
 Markdown 文件标题为 `index.md`，
 将图像文件放在该文件夹中。

```
  _posts/
    first-post/
      index.md
      image-file-1.png
      image-file-2.jpg
      ...
```

### 系列文章

当您如下所示在一个主题上写几篇文章时，您可以使用系列功能来指示该文章包含在系列中。使用系列功能，您将在文章顶部看到一系列文章列表。

- 创建博客，安装
- 创建博客，设置
- 创建博客，分发

如果您这样写文章，请按如下方式编写文件名。

- `development-blog_1.md`
- `development-blog_2.md`
- `development-blog_3.md`

下划线 (`_`) 后面的数字是系列的编号。
下划线 (`_`) 前面的文件名必须相同。
文件名中必须只有一个下划线 (`_`)。
不要在下划线 (`_`) 后混合数字和字母。

### Markdown YAML Front Matter

在 Markdown 文章的顶部，输入该文章的信息。在两个 `---` 中输入信息，如下所示。

```yaml
---
title: title here...
date: 2018-01-01
tags:
  - javascript
  - ES6
keywords:
  - keyword1
  - keyword2
---

contents here...
```

| 变量       | 描述                                                         |
| ---------- | ------------------------------------------------------------ |
| `title`    | **(必填)** 输入文章的标题。如果包含特殊字符，请将它们括在 `" "` 中。 |
| `date`     | **(必填)** 输入此文章的创建日期          |
| `tags`     | **(可选)** 输入文章的标签                            |
| `keywords` | **(可选)** SEO 元关键字                             |

\+ 所有值不包含在 `''`, `""` 中。

#### Data 示例

```yaml
# date Examples

## Case 1
date: 2018-09-01

## Case 2
date: 2018-09-01 22:00:00

## 'Time zone' Not Support
## There is no error but ignores the time zone
date: 2018-09-01 20:00:00 +0900
```

#### Tags & Keywords 示例

```yaml
# tags & keywords Examples

## Case 1
tags: onlyOneTag

## Case 2
tags: [tag1, tag2]

## Case 3
tags:
  - tag1
  - tag2
```

## 部署

部署前的检查清单：

1. 确保您的 Github 仓库名为 `username.github.io`。
2. 确保您在 `./config.js` 中正确编写了 `siteUrl`。
3. 确保您正在使用的分支不是 `master` 分支。（请参阅安装部分以获取相关说明）。

```bash
$ npm run deploy
```

使用上述命令开始部署。提交会自动对 `master` 分支进行。这需要几十秒，有时甚至几分钟才能反映出来。

您现在可以输入并验证您的地址。