# open-blog

**Repository Path**: jarvis-zeng/open-blog

## Basic Information

- **Project Name**: open-blog
- **Description**: 基于语雀API的简单博客页面
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-12-27
- **Last Updated**: 2024-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OPEN-BLOG

由于自建博客的文本编辑功能不如某些成熟产品强大, 且开发成本与维护成本并不低, 所以基于语雀开发了一个展示语雀文章的博客页面. 提供基础的首页和文章目录功能.

演示地址: https://www.linqmi.com

![](docs/imgs/view_home.jpg)
![](docs/imgs/view_home1.jpg)
![](docs/imgs/view_special.jpg)

简单的移动端页面
![](docs/imgs/view_home_mobile.jpg)

由于相关三方API的Token安全问题, 所以API调用由服务器进行.

## 一、项目配置

### 1. 页面配置

- 需要安装 `node.js` 环境, 推荐使用 `cnpm`

修改 `obConstants.js` 中的配置内容

![](docs/imgs/obConstants_js.jpg)

``` javascript
const OB = {
  SYS : {
    /** [自定义] 网站名称 */
    NAME            : 'OPEN-BLOG',
    /** [自定义] 网站版本 */
    VERSION         : 'v_2.0.0',
    /** [自定义] 网站备案号 */
    RECORD_ID       : '晋ICP备19013490号-1',
    /**
     * 是否开发环境
     * false 代表生产环境, 将请求 PROD_SERVER_RUL
     * true  代表开发环境, 将请求 DEV_SERVER_RUL
     */
    IS_DEV          : false,
    /**
     * 生产地址, 请填写自己的域名或地址, 请注意跨域配置, 配套服务端已跨域
     * https://www.linqmi.com/xzserver/ 是一个演示地址
     */
    PROD_SERVER_RUL : 'https://www.linqmi.com/xzserver/',
    /**
     * 开发地址
     * 默认是 ob-server 的地址
     */
    DEV_SERVER_RUL  : 'http://127.0.0.1:9999/',
  },
  USER : {
    /**
     * GITEE 地址, 目前暂无跳转场景
     */
    PROFILE_URL : 'https://gitee.com/jasminexz',
    /**
     * 博客地址, 目前暂无跳转场景
     */
    BLOG_HOME   : 'https://www.linqmi.com/blog',
    /**
     * 语雀首页地址, 作为网站首页的[语雀首页]地址跳转, 或任何你想跳转的地址
     */
    YUQUE_HOME  : 'https://www.yuque.com/xiaozeizeizi/learning'
  }
}

export default OB

```

修改`public/index.html`中的`title`标签内容, 网站标签页的标题

![](docs/imgs/index_html.jpg)

如果需要修改logo,请替换`public/logo.ico`

### 2. 后台配置

- 提供了一个简单的基于Redis的IP限流功能, 默认关闭, 若要开启, 请引入Redis包

修改`application.yml`配置

```yaml
ob:
  # 语雀配置
  yuque:
    # 语雀 token
    authToken:
    # 语雀目录知识库ID
    tocRepoId: 10858843
    # 可以配置多个知识库ID, 多个知识库的动态会作为热力图展示
    repoIds:
      - 10858843
      - 11236337
  gitee:
    # gitee 的 token
    accessToken:
    # gitee 的用户名
    username:
```

#### 语雀知识库ID查看及Token创建

1. 创建token
2. 调用 https://www.yuque.com/api/v2/users/login 接口,查看用户ID
3. 调用 https://www.yuque.com/api/v2/users/[用户ID]/repos 查看用户的知识库列表

> 语雀开发者文档: https://www.yuque.com/yuque/developer
>
> 语雀 Token 申请: 账户设置 -> Token

#### GITEE 用户名查看及Token创建

> GITEE Token 申请: 账号设置 -> 私人令牌
>
> GITEE 用户名: 账号设置 -> 个人资料 -> 个人空间地址


## 二、项目部署

#### 1. 项目可使用 **Alibaba Cloud Toolkit** 插件部署
![](docs/imgs/alibaba_cloud_toolkit.jpg)

#### 2. 添加服务器地址
![](docs/imgs/alibaba_cloud_toolkit_host.jpg)

#### 3. 添加启动项目
![](docs/imgs/alibaba_cloud_toolkit_app.jpg)

#### 4. 添加后端项目

![](docs/imgs/deployment_server.jpg)

> 后端部署脚本见项目: docs/部署脚本/restart-ob-server.sh

#### 5. 添加前端项目

![](docs/imgs/deployment_view.jpg)

> 前端部署脚本见项目: docs/部署脚本/restart-ob-blog.sh
> 
> 前端项目使用`unzip`命令解压, 若无该命令请使用`yum install -y unzip zip`安装

#### 6. 配置Nginx代理即可

- 推荐使用个人域名 + https 证书
> 阿里云 https://help.aliyun.com/document_detail/405062.html
>
> 腾讯云 https://cloud.tencent.com/document/product/400/6814

## 三、使用技巧与约定

为了更好的管理归类文章, 本项目使用了一些取巧的方法.

### 1. 文章专题

当有一系列文章想作为一个专题文章在专题页面中展示时, 可以在文章所属分组名称开头以 *【专题】* 命名, 则在查询文章时, 该分组及下属文章会以专题的方式展示, 如:

![](docs/imgs/view_special_demo.jpg)

**注意: 包含 *【专题】* 字样的一定要设置为分组类型, 而不是文档类型**

![](docs/imgs/yuque_doc_groupcorrect.jpg)

另外, 如果一系列文章作为专题, 则子文章中必须有一个名为 *专题目录* 的文档, 该文档的内容会展示在专题页面中, 并且专题卡片会跳转至该文章.

![](docs/imgs/view_special_demo2.jpg)

1. 专题的图片: 专题下名为 *专题目录* 的文档的第一张图片, 为了格式统一, 请使用 `1900 * 190` 大小的图
2. 专题的名称: 带有 *【专题】* 的分组的名称, 显示时会忽略 *【专题】* 字样.
3. 专题的简单数据: 该数据自动统计, 创建时间为分组下最早一篇的创建时间, 修改时间为分组下最晚一篇的修改时间.
4. 专题的说明: 专题下名为 *专题目录* 的文档的摘要, 见下图:

![](docs/imgs/yuque_doc_setting.jpg)
![](docs/imgs/yuque_doc_setting_detail.jpg)

### 2. 文章草稿

有些文章可能在编写中, 不想展示在图表中, 那么可以用 *【草稿】* 作为文章的名称, 则该文章不会展示在图表中
```java
public void demo () {
    List<Toc> all;
    Objects.requireNonNull(all).stream()
           // 包含草稿的文章剔除掉
           .filter(toc -> !toc.getTitle().contains("草稿"));
}
```