提交 fc6850f2 编写于 作者: W wangze

初始化

上级
**/node_modules
**/dist
package-lock.json
\ No newline at end of file
>采用[vuepress](https://github.com/vuejs/vuepress)记录一些文档。
\ No newline at end of file
module.exports = {
locales: {
'/': {
selectText: '选择语言',
label: '简体中文',
lang: 'zh-CN',
title: '极客文档',
description: '心之所向,即所向披靡'
},
'/en/': {
selectText: 'Languages',
label: 'English',
lang: 'en-US',
title: 'Geek Docs',
description: 'The heart to, namely sweeps away all obstacles'
}
},
head: [
['link', {
rel: 'icon',
href: 'https://cdn.fuzui.net/blog/logo_31_1587573903203.png'
}],
['script', {}, `
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?a35645ada7638f826316b05fa8ee955b";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
`]
],
themeConfig: {
locales: {
'/': {
nav: require('./nav/zh'),
sidebarDepth: 2,
sidebar: {
'/gblog-wx/': getGblogwxSidebar('基础', '高级配置'),
}
}
},
repo: 'fuzui/docs',
repoLabel: 'GitHub',
smoothScroll: true,
lastUpdated: '最后更新于'
},
plugins: [
['@vuepress/back-to-top', true],
[
'sitemap',
{
hostname: 'https://docs.geekera.cn',
},
],
],
extraWatchFiles: [
'.vuepress/nav/zh.js'
]
}
function getGblogwxSidebar(groupA, groupB) {
return [{
title: groupA,
collapsable: false,
children: [
''
]
},
{
title: groupB,
collapsable: false,
children: [
'posters-share',
'custom-style',
'subscribe'
]
}
]
}
\ No newline at end of file
module.exports = [
{
text: 'GBlog-wx',
link: '/gblog-wx/'
},
{
text: '风电演示',
link: '/windpower/'
},
{
text: '博客',
link: 'https://www.geekera.cn/'
}
]
// placeholder for test, dont't remove it.
//.content {
// font-size 30px;
//}
pre.vue-container
border-left-width: .5rem;
border-left-style: solid;
border-color: #42b983;
border-radius: 0px;
& > code
font-size: 14px !important;
& > p
margin: -5px 0 -20px 0;
code
background-color: #42b983 !important;
padding: 3px 5px;
border-radius: 3px;
color #000
em
color #808080
font-weight light
//搜索框
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
\ No newline at end of file
---
home: true
heroImage: 'https://cdn.fuzui.net/blog/logo_31_1587573903203.png'
actionText:
actionLink:
footer: MIT Licensed | Copyright © 2020 fuzui.net
---
# 介绍
GBlog-wx:微信小程序博客
> 我们只是搬运工,将color-ui样式与halo接口结合了一下。
[![star](https://gitee.com/GeekEra/GBlog-wx/badge/star.svg?theme=dark)](https://gitee.com/GeekEra/GBlog-wx/stargazers)[![star](https://img.shields.io/github/stars/GeekEra/GBlog-wx.svg?style=social)](https://github.com/GeekEra/GBlog-wx)
[halo](https://halu.run)作为后台,小程序样式采用[color-ui组件](https://www.color-ui.com/)
### 一、展示
![展示图](https://cdn.fuzui.net/blog/view.png)
![](https://oss.fuzui.net/img/20200529022512.png)
![](https://oss.fuzui.net/img/gblogadmin.png)
### 二、在线体验
![qrcode](https://cdn.fuzui.net/blog/qrcode_1588864925914.png)
### 三、说明
本项目采用[halo](https://halu.run)作为后台,调用halo接口。小程序样式使用[color-ui组件](https://www.color-ui.com/)组件。
### 四、使用
#### 1.后台搭建
采用halo搭建,具体可查看halo文档:https://halo.run
#### 2.小程序导入
* 拉取代码
```shell
git clone git@github.com:GeekEra/GBlog-wx.git
```
* 导入工具
通过[微信公众平台](https://mp.weixin.qq.com/)注册小程序账号,登录后在`开发——开发设置`中查看AppID;
下载微信开发者工具,选择`小程序——导入项目`,选择刚刚clone的文件夹并填写自己的AppID.
![1](https://cdn.fuzui.net/blog/1_1588866821272.png)
* 配置
`config`中有个`api-tmp.js`文件重命名为`api.js`
修改如下配置:
```javascript
const ApiBaseUrl = '';//生产上
const Config = {
AccessKey: '',
guestbookSheetId: 2
}
```
1.`ApiBaseUrl`为halo后台地址,上线必须为域名,在开发者工具中可点击`右上角详情——本地设置`,将不校验合法域名打勾。
2.`AccessKey`为halo api的AccessKey。进入halo后台管理系统,在`系统——博客设置——高级选项——API设置`中,将API 服务开启,并设置Access key。将此Access key填入上述js文件中对应位置。
![123](https://cdn.fuzui.net/blog/123_1588867938268.png)
3.`guestbookSheetId`该值是留言板页面id,默认为关于页的评论,可自行前往表结构中查看。(默认2)
* 配置合法域名
[微信公众平台](https://mp.weixin.qq.com/)中,`开发——开发设置——服务器域名`中添加request、uploadFile、downloadFile合法域名。将上述`ApiBaseUrl`域名添加到request合法域名,例如`www.geekera.com`
![](https://oss.fuzui.net/img/20200529020312.png)
![](https://oss.fuzui.net/img/20200628014304.png)
#### 3.高级功能配置(非必须)
* 海报分享
[开启文章分享海报功能](https://gitee.com/GeekEra/GBlog-wx/wikis/[高级功能]开启海报分享?sort_id=2322392)
* 文章订阅、评论通知
[开启新文章订阅、评论回复通知](https://gitee.com/GeekEra/GBlog-wx/wikis/[高级功能]开启文章订阅、评论通知?sort_id=2322404)
* 自定义文章内容样式
[修改文章、日记、评论解析样式](https://gitee.com/GeekEra/GBlog-wx/wikis/[高级功能]自定义文章内容样式?sort_id=2322419)
### 五、结构
```
GBLOG-WX
├── cloudfunctions // 云服务
├── colorui // color-ui组件库
├── component // 自定义组件
│ └── article-list // 文章列表
│ └── canvas-share // 海报生成
│ └── parser // parser富文本组件
├── config // 配置文件
├── images // 图片
├── pages // 页面代码
├── utils // 公用js
```
### 六、功能
**浏览页面功能:**
* 文章浏览、评论、点赞、搜索
* 文章分类、标签、归档
* 光影照片
* 日记
* 留言
* 友情链接
* 站点统计
* 文章分享海报
* 新文章订阅
* 评论回复通知
**管理页面功能:**
> 目前管理页面不支持开启**二步验证**登录!
* 后台登录
* 站点信息
* 个人信息修改
* 服务器信息查看
* 博客设置浏览
* 友链管理
* 日记管理
* 文章/分类/标签管理
* 附件上传、图库管理
* 评论审核、回复
* 主题切换、菜单编辑
### 七、致谢
* [halo](https://github.com/halo-dev/halo) 一个优秀的开源博客发布应用
* [ColorUI](https://github.com/weilanwl/ColorUI) 鲜亮的高饱和色彩,专注视觉的小程序组件库
* [Parser](https://github.com/jin-yufeng/Parser) 小程序富文本插件(html 渲染)
* [Hux Blog](https://huangxuan.me/)的背景图
### 八、联系
如果您发现了什么bug,或者有什么界面建议或意见,
欢迎 [issue](https://github.com/GeekEra/GBlog-wx/issues),当然也可以直接点小程序关于栏中的“联系我”或“意见反馈”或“留言”。
\ No newline at end of file
---
title: 自定义样式
---
> 自定义文章解析样式
`api.js`文件中,修改`ParserStyle`.
```javascript
const ParserStyle = {
table: 'border-collapse:collapse;border-top:1px solid gray;border-left:1px solid gray;margin: 28rpx 0;',
th: 'border-right:1px solid gray;border-bottom:1px solid gray;background: #ccc;',
td: 'border-right:1px solid gray;border-bottom:1px solid gray;',
pre: 'display: block;background: hsl(30, 20%, 25%);color: white;text-shadow: 0 -.1em .2em black;font-family: monospace;font-size: 1em;text-align: left;white-space: pre;word-spacing: normal;word-break: normal;word-wrap: normal;line-height: 1.5;tab-size: 4;hyphens: none;margin: 28rpx 0;',
blockquote: 'background-color:#e7f6ed;border-left:6px solid #4caf50;color:rgb(136, 136, 136);padding: 20rpx 40rpx 20rpx 30rpx;margin: 28rpx 0;'
}
```
`table``th``td`为表格样式;`pre`为代码块样式;`blockquote`为引用样式,你也可以增加更多,例如`tr``a``h1`等。
---
title: 海报分享
---
>配置小程序云服务(若不使用海报分享功能可跳过)
### 1.开启
`config/api.js`文件中,修改如下代码
```json
const ShareConfig = {
isOpen: false,
env: ''
}
```
修改isOpen为`true`
(env为函数ID在下方提到)
### 2.如未配置在控制台会出现如下提示:
![](https://images.gitee.com/uploads/images/2020/0612/003601_03be824a_4988475.png)
### 3.点击开发者工具左上方“云开发”,进入开通,填写环境名称和环境ID创建;
![](https://images.gitee.com/uploads/images/2020/0612/003601_534028ef_4988475.png)
### 4.右击cloudfunctions,点击更多设置,选择刚刚创建的环境;
![](https://images.gitee.com/uploads/images/2020/0612/003601_d97e171a_4988475.png)
### 5.在`config/api.js`文件中修改刚刚设置云服务的环境ID
`1.`中所提到的`env`
### 6.打包上传云函数,首先安装npm、node环境(步骤略,推荐安装nvm:[Windows下安装及使用NVM](https://blog.csdn.net/qq_32682137/article/details/82684898)),可通过`npm -v`检测是否安装。
### 7.右击cloudfunctions下get_qrcode文件夹,点击终端中打开,出现get_qrcode目录的cmd命令行,输入命令`npm i`等待完成,会发现多出如下`node_moudles`文件夹和`package-lock.json`文件。
![](https://images.gitee.com/uploads/images/2020/0612/003602_fd9b6b40_4988475.png)
![](https://images.gitee.com/uploads/images/2020/0612/003601_c9a84123_4988475.png)
![](https://images.gitee.com/uploads/images/2020/0612/003602_8a02f00f_4988475.png)
### 8.右击cloudfunctions下get_qrcode文件夹,点击“创建并部署:云端安装依赖(不上传node_moudles)”,等待完成。
![](https://images.gitee.com/uploads/images/2020/0612/003602_309f2b60_4988475.png)
### 9.右击cloudfunctions,同步云函数列表。
![](https://images.gitee.com/uploads/images/2020/0612/003602_52e131c9_4988475.png)
### 10.设置downloadFile合法域名
[微信后台](https://mp.weixin.qq.com/)需将博客图片地址域名(halo附件地址)和微信头像域名添加到downloadFile合法域名,例如`cdn.fuzui.net``wx.qlogo.cn`。(在开发者工具中可勾选不校验合法域名运行)
\ No newline at end of file
---
title: 订阅消息
---
>开启订阅,此功能需启动node项目。[GBlog-wxpush](https://gitee.com/ufec/GBlog-wxpush)
>
>感谢[ufec](https://gitee.com/ufec)对订阅相关功能的实现。
## 1.下载
> 下载之前确保本地/服务器安装了npm(推荐使用nvm管理)
```shell
git clone https://gitee.com/ufec/GBlog-wxpush.git
npm install
```
## 2.配置小程序订阅末班
打开微信后台,左侧找到订阅消息,点击添加
![](https://images.gitee.com/uploads/images/2020/0613/003303_80b6a978_4988475.png)
搜索“留言审核信息”和“新作品推荐提醒”
![](https://images.gitee.com/uploads/images/2020/0613/003303_fcfd710c_4988475.png)
在“留言审核通知”选用栏**依次**勾选`留言内容``回复内容``审核状态``回复人``文章标题`
![](https://images.gitee.com/uploads/images/2020/0613/003303_f7c54379_4988475.png)
在“新作品推荐提醒”选用栏**依次**勾选`作品名称``发表时间``作者`
![](https://images.gitee.com/uploads/images/2020/0613/003303_8a701a57_4988475.png)
提交完成后会出现两个模板:
![](https://images.gitee.com/uploads/images/2020/0613/003303_689c7d1e_4988475.png)
记下这两个模板ID。
## 3.配置项目
> 配置启动之前请确保安装MongoDB、Redis。
`config/config.js`文件中,修改如下代码:
```javascript
module.exports={
// 小程序信息
appInfo: {
AppID: "wx0345c0b270baa60f",
AppSecret: "", //小程序AppSecret,可在https://mp.weixin.qq.com中开发——开发设置中获取
},
redis: {
host: "127.0.0.1",
port: 6379,
pass: "" //没有就不填
},
site: {
url: "https://www.geekera.cn", //网站博客地址,结尾无斜杠
key: "", //api KEY,halo后台配置的AccessKey
author: "fuzui" //文章作者名
},
subscribe: {
comment: "W56K5······································", // 留言审核通知模板id
article: "vhOJ1······································", //新作品推荐提醒模板id
}
}
```
`config/database.js`文件中记录了MongoDB信息,默认则无需修改。
## 4.启动
在项目根路径下输入一下命令
1.开启服务
```shell
npm start
```
2.另开一个终端(cmd),启动定时任务。
> 可修改`utils/schedule.js`中255行:
>
> ```
> schedule.scheduleJob('30 30 21 * * *', () => { //表示每天21点30分30秒执行
> ```
>
> 将`'30 30 21 * * *'`修改为`'10 * * * * *'`(每十秒执行任务)方便测试
```
node utils/schedule.js
```
至此服务端启动成功。
## 5.开启小程序新文章订阅功能
在小程序项目`GBlog-wx`中,修改`config/api.js`中以下代码:
```javascript
//订阅配置
const PushConfig = {
isOpen: true, //默认为false未开启,这里需要true开启
updateKey: "vhOJ1·······································",//新文章订阅模板id
messageKey: "W56K········································",//留言审核通知模板id,
SubscribeUrl: "http://127.0.0.1:5000",//订阅服务地址,服务器需修改为域名并设置微信reques合法域名
}
```
## 6.测试
在小程序中进入关于页,点击最下方“订阅推送更新”,订阅成功后,前往后台发布新文章,待定时任务时间达到,微信就会收到新文章推送信息;
评论某一文章时勾选”回复是否接受推送“,在后台通过并回复该评论,待定时任务时间达到,微信就会收到评论回复通知。
## 7.部署
使用是必然要部署到服务器的,即服务器拉去并修改代码,可通过`nohup npm start &`后台启动服务。
可通过nginx代理5000端口,并将域名添加到小程序的request合法域名之中。
{
"name": "geekera-docs",
"version": "1.0.0",
"private": true,
"description": "geek doc",
"keywords": [
"文档",
"geekera"
],
"license": "MIT",
"scripts": {
"build": "vuepress build geekera-docs",
"dev": "vuepress dev geekera-docs"
},
"devDependencies": {
"@vuepress/plugin-back-to-top": "1.5.2",
"vuepress-plugin-sitemap": "2.3.1",
"vuepress": "1.5.2"
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册