提交 f157b9f2 编写于 作者: W wangze

📝 update GBlog-wx doc

上级 f05eebd7
......@@ -3,8 +3,9 @@
<p align="center">
<img src="https://gitee.com/fuzui/GBlog-wx/badge/star.svg?theme=dark" alt="Build Status">
<img src="https://img.shields.io/github/stars/fuzui/GBlog-wx.svg?style=social" alt="Build Status">
<img src="https://img.shields.io/badge/halo-1.4.1-brightgreen" alt="Build Status">
<img src="https://img.shields.io/badge/halo-1.4.5-brightgreen" alt="Build Status">
</p>
GBlog-wx:微信小程序博客
> 我们只是搬运工,将color-ui样式与halo接口结合了一下。
......@@ -23,7 +24,7 @@ GBlog-wx:微信小程序博客
* [halo](https://github.com/halo-dev/halo) 一个优秀的开源博客发布应用
* [ColorUI](https://github.com/weilanwl/ColorUI) 鲜亮的高饱和色彩,专注视觉的小程序组件库
* [Parser](https://github.com/jin-yufeng/Parser) 小程序富文本插件(html 渲染)
* [Painter](https://github.com/Kujiale-Mobile/Painter) 小程序生成图片库,轻松通过 json 方式绘制一张可以发到朋友圈的图片
* [mp-html](https://github.com/jin-yufeng/mp-html) 小程序富文本组件,支持渲染和编辑 html,支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用
### 联系
......
---
title: 自定义样式
---
> 自定义文章解析样式
* 自定义文章解析样式
`api.js`文件中,修改`ParserStyle`.
......@@ -10,11 +10,70 @@ 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;'
blockquote: 'background-color:#e7f6ed;border-left:6px solid #4caf50;color:rgb(136, 136, 136);padding: 20rpx 40rpx 20rpx 30rpx;margin: 28rpx 0;',
ul: 'padding-left: 25px;',
ol: 'padding-left: 25px;',
h1: 'font-size: 1.5em;line-height: 50px;',
h2: 'font-size: 1.17em;line-height: 40px;',
h3: 'font-size: 0.83em;line-height: 30px;',
h4: 'font-size: 0.67em;line-height: 30px;',
h5: 'font-size: 0.50em;line-height: 30px;'
}
```
`table``th``td`为表格样式;`pre`为代码块样式;`blockquote`为引用样式,你也可以增加更多,例如`tr``a``h1`等。
* 代码高亮
当前支持`html、css、C-like、JavaScript、shell、bash、docker、git、php、nginx、less、json、java、go、properties、sql、yaml`,主题为`Tomorrow Night`
需按以下步骤来实现更多扩展及自定义:
1. 下载[mp-html](https://github.com/jin-yufeng/mp-html)
git 方式
```shell
# 通过 github 获取
git clone https://github.com/jin-yufeng/mp-html.git
# 或通过 gitee 获取
git clone https://gitee.com/jin-yufeng/mp-html.git
```
下载zip
*github releases*:https://github.com/jin-yufeng/mp-html/releases
*gitee releases*:https://gitee.com/jin-yufeng/mp-html/releases
> 先装好node环境
2. 自定义高亮代码
前往 [官网](https://prismjs.com/download.html) 下载对应的 *prism.min.js* (选择Minified version,下载后`prism.js`重命名为`prism.min.js`)和 *prism.css* 并替换 mp-html中*plugins/highlight/* 目录下的文件。
3. 开启插件
在 mp-html中*tools/config.js* 文件中,将`plugins`中audio(音乐播放器)、highlight(代码高亮)、markdown(解析 md)取消注释。
修改`plugins/highlight/config.js``copyByLongPress: true`以开启代码块复制功能。
4. 打包
在mp-html根目录输入以下命令
* `npm install`
> 如果过慢可使用` npm install --registry=https://registry.npm.taobao.org`
* `npm run build:weixin`
5. 替换组件
将mp-html的`/dist`文件夹下的`mp-weixin`粘贴并完全替换小程序中`/components`下的`mp-weixin`文件夹。
6. 更多解析样式参考:[mp-html文档](https://jin-yufeng.gitee.io/mp-html)
\ No newline at end of file
......@@ -5,14 +5,19 @@ title: 代码结构
```
GBLOG-WX
├── cloudfunctions // 云服务
├── colorui // color-ui组件库
├── component // 自定义组件
├── components // 自定义组件
│ └── article-list // 文章列表
│ └── painter // painter小程序生成图片组件
│ └── parser // parser富文本组件
│ └── mp-weixin // mp-html小程序富文本组件
├── config // 配置文件
├── custom-tab-bar // 自定义tabbar
├── images // 图片
├── pages // 页面代码
├── services // 封装方法
│ └── api // 接口实现
│ └── posters // 海报样式
├── styles // 样式
│ └── colorui // color-ui组件库
├── utils // 公用js
```
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册