Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
fuzui
docs
提交
f157b9f2
docs
项目概览
fuzui
/
docs
通知
0
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
f157b9f2
编写于
3月 13, 2021
作者:
W
wangze
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
📝
update GBlog-wx doc
上级
f05eebd7
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
73 addition
and
8 deletion
+73
-8
docs/gblog-wx/README.md
docs/gblog-wx/README.md
+3
-2
docs/gblog-wx/custom-style.md
docs/gblog-wx/custom-style.md
+62
-3
docs/gblog-wx/directory.md
docs/gblog-wx/directory.md
+8
-3
未找到文件。
docs/gblog-wx/README.md
浏览文件 @
f157b9f2
...
...
@@ -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 平台使用
### 联系
...
...
docs/gblog-wx/custom-style.md
浏览文件 @
f157b9f2
---
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
docs/gblog-wx/directory.md
浏览文件 @
f157b9f2
...
...
@@ -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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录