XBlog开发手册
小游
2021-07-27

界面

界面功能应该是用的最多的一个功能，包括侧边栏，更多功能等部分全部都在这里

记得在auth里面加上 widget

界面函数主要包括添加侧边栏，添加界面和添加设置界面设置，这里我一个一个来进行介绍

# 添加侧边栏

这里我也懒得写例子了，这里就拿个人信息卡片来进行举例吧~效果如下

image-20210730082712987

首先我们需要自己写好样式和html

image-20210730082855090

大家写的时候按照下面这个规范来，因为我后续应该会直接从style里面提取css样式

image-20210730082947849

当然如果只能是静态的肯定是不够的，我们可以在里面插入一些动态数据，这里就需要用到模板引擎了

我在知乎上随便找了一篇文章GO语言模板引擎 GO语言标准库http/template - 知乎 (zhihu.com) (opens new window)，更详细的请自己参考官方文档

比如我这里就用到了两语法，第一个是显示变量

image-20210730083435490

第二个就是判断，如果bili这个变量不为空，那么我们就显示if里面的内容，如果为空就不显示

image-20210730083904528

界面写完了还不够，我们还需要去注册一下这个界面才行，比如我这个插件的代码如下

// 使用博客系统提供的接口
const widget =xBlog.widget
const database =xBlog.database
const tools =xBlog.tools

// 一些字段
const dbArticle = "article"
const dbComment = "comment"
const keyIntroduce = "my_introduce"
const keyBackground = "my_background"
const keyAvatar = "my_avatar"
const keyGithub = "my_github"
const keyTelegram = "my_telegram"
const keyTwitter = "my_twitter"
const keyZhiHu = "my_zhi_hu"
const keySteam = "my_steam"
const keyBili = "my_bili_bili"

// 添加卡片
widget.addSide("","index.html",function () {
    // 初始化数据库链接
    let db = database.newDb(dbArticle)
    let commentDb = database.newDb(dbComment)
    return {
        background: tools.getSetting(keyBackground),
        avatar: tools.getSetting(keyAvatar),
        post: db.GetCount({"status": "publish", "post_type": "post"}),
        diary: db.GetCount({"status": "publish", "post_type": "diary"}),
        comment: commentDb.GetCount({}),
        introduce: tools.getSetting(keyIntroduce),
        bili: tools.getSetting(keyBili),
        github: tools.getSetting(keyGithub),
        twitter: tools.getSetting(keyTwitter),
        telegram: tools.getSetting(keyTelegram),
        steam: tools.getSetting(keySteam),
        zhiHu: tools.getSetting(keyZhiHu)
    }
},true)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

addSide这个函数有三个参数，第一个是标题，如果没有的话就不会显示，如果加了标题的话就是下面这个效果

image-20210730084533342

第二个参数是html文件的名字，因为我的设置的就是index.html所以这里填index.html

第三参数就是回调函数，因为侧边栏有些数据是要实时刷新的，所以我们需要通过回调函数返回变量，返回的变量就可以直接在html上显示出来了。如果你那个是纯静态的，然就不需要回调函数

这里我使用了 tools.getSetting 可以从数据库中获取设置信息。

image-20210730085720525

第三个参数是是否开启调试，其实用的不多，大家不用管

重载插件后，自己可以到侧边栏设置哪里可以看到自己注册的侧边栏信息，自己记得拖动到对应的侧边栏，这样才能使用哦！

image-20210730085918543

# 添加界面

添加界面可以在博客系统上注册一个界面，这个和侧边栏不同，侧边栏只是在侧边栏注册，这个是直接显示一个界面。比如友人帐，我的追番等等，这里就拿友人帐来进行举例，其实这个和侧边栏流程差不多。

首先也是写一个index.html界面，里面写内容

image-20210731154201832

最上面写样式，中间写内容，下面就写script标签。

注意：因为我的友人帐用到了vue，因为vue里面的字符串模板也是用的{{}} 会和go的模板语法冲突，所以这里我们需要修改一下vue，比如我这里用的是${}

image-20210731155256607

然后我们这里渲染界面就可以这样去渲染了

image-20210731155322634

下面就是在主函数注册界面，这个参数比较多，这里我一个一个来介绍

widget.addPage({
    background: tools.getSetting(keyBackground),
    file:"index.html",
    headMeta: {
        title: "友人帐",
    },
    css: ["element"],
    script: ["vue","element","jquery"],
    url: "",
    full: false,
    side: false
},function (){
    // 友链设置
    return {
        name: tools.getSetting(keyFriendName),
        dec: tools.getSetting(keyFriendDec),
        link: tools.getSetting(keyFriendLink),
        avatar: tools.getSetting(keyFriendAvatar),
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

第一个是option参数，第二个是回调函数，回调函数这个和侧边栏是一样的，都是可以通过回调函数返回值，给主界面显示。下面说一下option参数。

  • background 这个是背景，用于显示背景信息
  • file 这个表示我们的html文件
  • headMeta 表示head标签，这个可以用来自己设置一些head信息，目前只能设置title，后续可以支持更多
  • css 表示自己用到的一些css库，比如我这里用到了element，目前博客系统内置了一些常见库，请自己移步到API参考里面查看。如果有一些没有的，可以自己直接贴库的URL地址
  • script 表示用到的JavaScript库，博客系统同样内置了一些库
  • url 这个是后续扩展字段，比如你想注册多个界面就可以用这个来区分，目前这个还没开发完整
  • full 表示是否需要全屏，目前还没做，是一个保留字段
  • side 这个表示是否需要显示侧边栏信息 目前也还待开发，是一个保留字段

如何查看自己渲染的界面呢？还记得前面插件信息里面的那个unique字段吗？

image-20210731161007404

我们只需要在url里面输入 /more/friends 就可以访问这个界面了！下面这个就是实际效果了！

image-20210731161047474

好了，这个就介绍到自己，自己感兴趣的可以去看看我写的那几个插件

# 添加设置

前面我们介绍了添加界面，但是有界面还是不够的，我们还需要对界面进行设置，或者我们的插件某些功能需要进行设置，同样需要设置功能，这个时候我们就可以通过设置功能来实现了。

普通的设置可以直接来进行设置，但是遇到一些比较复杂的，比如友人帐所有友链的管理，都需要自己写界面了，同时还需要集成到我的后台管理设置里面去。

# 普通设置

这里我拿豆瓣插件来举例

widget.addSetting("豆瓣设置",1,[
    {title:"豆瓣用户ID",type: "input",key: keyDouBanUser,default:""},
    {title:"豆瓣cookie",type: "text",key: keyDouBanCookie,default:""},
    {title:"每日定时同步",type: "switch",key: keyDouBanSync,default: false},
    {title:"立即同步(耗时操作，请勿重复点击！)",type: "row",key: keyDouBanSyncNow,default: "admin/plugins/dou_ban"}
])
1
2
3
4
5
6

首先这个有三个参数，第一个是设置的标题，第二个是设置的类型，普通设置类型为1，第三个就是设置的内容了。设置的内容是一个数组类型的数据。

这里我单独解释一下每个key的意义吧。首先第一个title表示设置的名字，第二个type是设置的类型。

目前包括

switch 开关类型

text 文本域

input 输入框

upload 图片上传

number 步进器

row 按钮类型，点击按钮会触发http请求

第三个key的话就是设置的唯一标识，这里每个插件的设置必须使用plugins_插件名字作为前缀，避免造成设置互相干扰的情况。

第四个default 是设置默认的值，用户没有设置的情况下，默认为什么

这里我给大家看一下数据库的设置信息，所有的设置都会保存到这个表中

image-20210731162301187

key就是我们前面设置的key的值，大家在设置的时候务必确保key是唯一的，避免冲突

value就是设置的值了，这个值可以是任意类型的数据，大家可以根据自己的情况来灵活发挥。

反映到我们的实际界面

image-20210731162614413

# 复杂设置

目前想使用复杂设置的必须要提前写好然后集成到我们后台管理界面中，然后等版本更新后才能使用。。

就拿友链管理来进行举例，像这种复杂的设置根本是不可能通过json来进行表达了，这个时候就需要我们自己去写界面了

image-20210731162703639

这里可以看到插件中其实非常简单，我们只需要让插件的type等于2就行了，第三个参数表示我们界面的名字

widget.addSetting("友链管理",2,"friend")
1

这个时候我们就把所有的逻辑全部放到后台管理哪里去了（因为这种界面设置很麻烦，所以需要集成到我的后台管理界面里去）在components这个文件夹的plugins文件夹里，注意名字一一对应，上面设置的那个name就是下面这个文件夹对应的name

image-20210731163337679

下面这个就是友链设置的界面了，这个其实是通过vue来实现的。。。

image-20210731163556655

编辑 (opens new window)
上次更新: 2021/08/01, 10:35:45
工具包
路由

← 路由→

Theme by Vdoing | Copyright © 2021-2021 小游