小程序+语雀API一键搭建个人博客

本文正在参加「金石计划」

前言

关于这个项目的搭建原因,来源于自己一直想写一个个人博客项目,但是苦于搭建博客不仅仅需要地方存放静态页面,还需要接口服务来保存文章信息,一直到看到了有人利用语雀开发API来进行开发,于是乎去尝试了一下发现是可行的,于是开始用 uni-app + 语雀 API 来开发这个个人博客小程序。

为什么是小程序?因为小程序提供了方便的发布流程,以及相对于网页来的更加容易传播的传播途径(手机扫码就可以查看),采用 uni-app 只是因为没有开发过小程序,但是经常听说这个开发小程序的 vue 框架,所以决定尝试着使用一下。

关于 语雀的API ,官方有提供文档来进行查阅,并且只需要个人token就能够获取一切知识库当中的数据,相当于说,只要修改一个token,就可以把这个项目的数据来源换成任何人的,这也就是标题所说的,最简单的情况下一键就可以拥有一个自己的博客。

小程序+语雀API一键搭建个人博客

项目演示

首页

首页的最上方设计了一个欢迎页,下面通过配置生产了不同的板块来作为首页的展示

小程序+语雀API一键搭建个人博客

欢迎页为实现功能:

  • 个人信息展示:目前就放上了个人微信,可以通过在congfig中- 配置图片。
  • 明暗交替:这个后面会考虑一套方案来实现,暂时整个项目的css并未作出抽离

可以通过配置不同的参数来实现列表展示不同的板块:

小程序+语雀API一键搭建个人博客

由于每个人的语雀的参数是不同的,所以直接使用的话只有 ReposList 全部板块是能够正常渲染的

知识库列表

小程序+语雀API一键搭建个人博客
入口为 ReposList 板块类型的更多按钮,能够进入一个获取个人所有知识库的列表页,页面顶部为个人姓名以及介绍

下面渲染的模块就是首页的 ArticleList 模块,能够正常的浏览文章,进入详情。

文章列表

小程序+语雀API一键搭建个人博客

入口为 ReposList 板块类型的某一项点击,能够进入点击的知识库详情,详情展示知识库相信信息,并且能够正常点击文章进入文章详情

面渲染的模块就是首页的 ArticleCard,通过点击进入文章详情。

文章详情

小程序+语雀API一键搭建个人博客

文章详情展示,通过官方的 rich-text组件进行展示,并且附上了语雀的链接,不过现在语雀好像非会员是没有办法让别人查看自己的文章的。

核心模块

1. 通过 token 调用语雀 API,实现更换一个 token 拥有个人博客

项目相关的配置都保存在 config 文件夹底下,只需要修改其中对应的配置,就可以随心修改这个项目的展示,首先是设置好自己的语雀 token,并且需要给予权限

小程序+语雀API一键搭建个人博客

然后token的配置是在src下的 yuque.json 中

小程序+语雀API一键搭建个人博客

然后在 config/index 还存在着部分其他配置

import yuque from '../yuque.json';

// AuthToken
export const AuthToken = yuque.AuthToken;
export const CONFIG = {
    API: yuque.YuQueApi
}

export const WELCOME_TEXT = [
'Welcome to Yelll\'s Personal blog!🤣🤣🤣',
'Hope you have a nice day!🍭🍭🍭',
]
export const TITLE = 'Yellll🍦'
export const WEIXIN_IMAGE = 'https://mr-yel.github.io/assets/yel-uni-app-blog/yel.jpg'
  • WELCOME_TEXT 为数组,首页的打字机文字
  • TITLE 为首页顶部的title名称
  • WEIXIN_IMAGE 为首页微信图标点击后展示的图片,我这里是我自己的微信名片

接着就是在 config/contentConfig 中配置首页模块

export const contentConfig = {
data: [
        {
            type: 'ReposList',
        },
        {
            type: 'ArticleList',
            namespace: 'u21228658/ga5z5o',
        },
        {
            type: 'ArticleList',
            namespace: 'u21228658/lnce1z',
        },
        {
            type: 'ArticleCard',
            namespace: 'u21228658/ga5z5o',
            slug: 'pt7q4fdzxupeg6gw',
        },
    ]
}
  • ReposList 板块就是所有的知识库板块,这个板块只需要 token 正确就能够正常展示

  • ArticleList 板块就是知识库文章列表板块,代表的是某个知识库底下的所有文章,下面会介绍如何去获取一个知识库的 namespace

  • ArticleCard 板块就是某篇文章的详情板块,代表的就是某一篇文章的详情,需要通过知识库的 namespace 以及文章的 slug,下面会介绍如何获取。

获取知识库 namespace

通过语雀主页进入到某一个具体的知识库当中,这里以我自己的为例,上方路由当中就会包含当前知识库的 namespace

小程序+语雀API一键搭建个人博客

获取文章 slug

进入某一篇具体的文章,就能够在路由上看到当前文章的知识库 namespace以及文章本身的 slug

小程序+语雀API一键搭建个人博客

2. 首页模块设计

首页是通过可配置的模块来设计的,后面可以加入更多的不同的模块甚至可以将这份配置放入云端来做到动态渲染,有点类似于低代码的思路,但是有一个蛋疼的地方就是,小程序是不支持 vuecomponent 动态标签的,所有只能 if else 会显得代码比较臃肿:

小程序+语雀API一键搭建个人博客

3. 视图与数据分类

如果有看代码会发现,首页并不是直接渲染了视图组件,而是包裹了一层 ComponentDataAcquirer,目的是将组件的数据渲染层和视图展示层进行分离,在 ArticleCardAcquirer 这层会去请求数据,并且内部包裹了视图组件,在 ArticleCard 视图层才是实际渲染出来的组件,这样就能够做到数据和视图分离,加强了 CardComponents 里面的组件的复用性,这里面的组件只关心数据的展示而不关心数据的来源,这样就能够在之后的列表页进行复用。

小程序+语雀API一键搭建个人博客

4. 。。。

TODO列表

项目底下存在 TODO.md 文件,记录了之后准备新增的功能,以及优化的部分,当然想要为这个项目不足之处或者有更好的功能想法提出意见的,可以评论或者私信作者。

小程序+语雀API一键搭建个人博客

源码

文章的最后放上项目的 github 地址,感兴趣的小伙伴可以自己运行看看,关于要如何发布自己的小程序这点在网上已经有很多的教程了,我就不再过多的描述,大家可以自行上网搜索,最后这个项目还不够完善,只是刚刚到了能看的地步,希望大家多提意见,在之后有空了会进行修改。

github.com/Mr-Yel/yuqu…

原文链接:https://juejin.cn/post/7214314627520856101 作者:实习生小黄

(1)
上一篇 2023年3月25日 下午8:05
下一篇 2023年3月25日 下午8:15

相关推荐

发表评论

登录后才能评论