阅读视图

发现新文章,点击刷新页面。

QQ小程序互帮互助

个人主体的 QQ 小程序,到底是哪些人开通了流量主在玩啊?

从微信端移植并修改了一个工具类的 QQ 小程序,然后备案审核上架后,自然流量没有一点,你说尴不尴尬!

img

还有一点呢,QQ 小程序开通流量主的条件还是很高的,相比微信小程序。

要求连续 7 天内,每天的访问 UV 都不能低于 100,也就是在一个连续周期内要完成 700UV。

于是,我就去某宝找找有没有做流量主开通的,我先是输入 “QQ 小程序流量主开通”,根本就没有。

然后就只搜小程序流量主开通,清一色微信小程序的,没辙,随便找几家问问有没有能做 QQ 小程序的。

img

结果就是,根本没人做这玩意的流量主开通业务,不过也意外地知道了他们做一个微信小程序地普遍报价 150 上下,同样也是刷访问,10 天完成 500UV。

最后我就找群找论坛,QQ 小程序互助,也没有,不知道有没有和我一样的,有的话,我建了一个扣扣群,或加我 QQ:2652364582,互帮互助。

img

QQ小程序已发布,但无法被搜索的解决方案

前言

我的QQ小程序在2024年8月就已经审核通过,上架后却一直无法被搜索到。打开后,再在QQ上下拉查看 “最近使用”,发现他出现一下又马上消失。

上线是按正常流程走的,开发、备案、审核,也没有任何违规,后台也没收到说被封或异常的信息。

img

排查

难道是我名字(实用工具箱)问题,当我要去后台修改名字时,提示要重新备案。不过也让我想起之前我搜索的时候,别人也有用这名字,所以根本不是这个原因。

会不会是后台哪里设置了,第一次玩QQ小程序后台,搞不好一开始的时候我乱点了什么。最后找啊找,终于在 “关联设置” 中找到了问题所在。

img

解决

在QQ后台的设置下的 “关联设置” 里 “QQ频道” 有一个 “仅允许在机器人服务中使用”,这一项给出的解释是 “打开后,QQ小程序推荐页将不会展示此小程序”,没错,我勾选了。

尴不尴尬,去掉后什么无法被搜索,什么在最近使用框里马上消失的问题,全部解决。所以我之前刚上架时没有自然流量也是因为这个,那我才放开小程序推荐,官方会不会就给推了啊,这个只能看后面几天的情况才能知道,但现在的我还是急需流量。

img

找流量

为什么着急找流量?因为QQ小程序的流量主开通不同于微信小程序,他的要求更高,必须连续7天内,每天的UV不能低于100。

虽然700UV也不多,但他不是累积的,过了7天没达量,前面的UV总数作废。在不清楚明天有没有自然流量的情况,我决定找人友链,就是我们在自己的小程序里互相跳转。

友链之路

小程序友链,也就是小程序跳小程序,由于我的没有做后台管理,界面展示是写死的,加这个要改两个地方,一个是配置,一个是添加点击跳转事件。

配置,只需在app.json中添加

1
2
3
"navigateToMiniProgramAppIdList": [
"appId"
]

添加点击跳转事件

1
2
3
4
5
qq.navigateToMiniProgram({
appId: '1112309851',
success(res) {
// 跳转成功
}

写在后面

其实平台刚上线时,好像是19年还是18年,个人开发者只要一上架自己的小程序就能开通流量主。现在我的心态,借张伟名言:机会像雨点般打来, 而我却一一闪过。

不过QQ小程序的应用场景还是很多元化的,群和频道,机器人里都能绑定,外加互助一下其实也很快,所以,大家要和我一起吗?我建了一个扣扣群,或加我 QQ:2652364582,互帮互助。

img

QQ小程序互帮互助

个人主体的 QQ 小程序,到底是哪些人开通了流量主在玩啊?

从微信端移植并修改了一个工具类的 QQ 小程序,然后备案审核上架后,自然流量没有一点,你说尴不尴尬!

img

还有一点呢,QQ 小程序开通流量主的条件还是很高的,相比微信小程序。

要求连续 7 天内,每天的访问 UV 都不能低于 100,也就是在一个连续周期内要完成 700UV。

于是,我就去某宝找找有没有做流量主开通的,我先是输入 “QQ 小程序流量主开通”,根本就没有。

然后就只搜小程序流量主开通,清一色微信小程序的,没辙,随便找几家问问有没有能做 QQ 小程序的。

img

结果就是,根本没人做这玩意的流量主开通业务,不过也意外地知道了他们做一个微信小程序地普遍报价 150 上下,同样也是刷访问,10 天完成 500UV。

最后我就找群找论坛,QQ 小程序互助,也没有,不知道有没有和我一样的,有的话,我建了一个扣扣群,或加我 QQ:2652364582,互帮互助。

img

鸿蒙Next实战:烟花模拟器

前言

通过上一篇文章可以看出,要在鸿蒙应用中实现特别炫的特效还是比较复杂。动画固然重要,但如果在赶工期的情况下,大家都会优先业务,那有没有简单快速的方法呢?

有的,也用像 Android 和 iOS 里 WebView 的方式,h5 的特效现在是应有尽有,把他嵌入鸿蒙 Next 应用里就可以,那如何在鸿蒙 Next 中使用 WebView 来实现电子烟花?

img

实现要点

  1. 组件拆解
  2. 资源引入
  3. 页面路由
  4. WebView

img

开始实践

因为前面的木鱼和现在的烟花都是同一个小工具应用,公用组件的拆分、页面跳转和资源的引入全有涉及,所以就连同 WebView 一起总结一下。

组件拆解

在 ArkUI 中,UI 显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。这里我们将所有页面的导航拆分成一个公用组件,并定义为 HdNav.ets。

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import { router } from '@kit.ArkUI'

@Component
export struct HdNav {
@StorageProp('topHeight')
topHeight: number = 0
@Prop
title: string = 'hello world'
@Prop
hasBorder: boolean = false
@Prop
leftIcon: ResourceStr = $r('app.media.ic_common_back')
@Prop
rightIcon: ResourceStr = $r('sys.media.ohos_ic_public_more')
@Prop
showRightIcon: boolean = true
@Prop
iconColor: ResourceStr = $r('app.color.black')
@Prop
titleColor: string = '#131313'
@BuilderParam
menuBuilder: () => void = this.defaultMenu

@Builder
defaultMenu() {

}

build() {
Row({ space: 16 }) {
Image(this.leftIcon)
.size({ width: 24, height: 24 })
.onClick(() => router.back())
.fillColor(this.iconColor)
Row() {
if (this.title) {
Text(this.title)
.fontWeight(600)
.fontColor(this.titleColor)
.layoutWeight(1)
.textAlign(TextAlign.Center)
.fontSize(18)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
}
.height(56)
.layoutWeight(1)

if (this.showRightIcon) {
Image(this.rightIcon)
.size({ width: 24, height: 24 })
.objectFit(ImageFit.Contain)
.bindMenu(this.menuBuilder)
} else {
Blank()
.width(24)
}
}

.padding({ left: 16, right: 16, top: this.topHeight })
.height(56 + this.topHeight)
.width('100%')
.border({
width: { bottom: this.hasBorder ? $r('app.float.common_border_width') : 0 },
color: $r('app.color.common_gray_bg')
})
}
}

资源引入

应用开发过程中,经常需要用到颜色、字体、间距、图片等资源,在不同的设备或配置中,这些资源的值可能不同。

  • 应用资源:借助资源文件能力,开发者在应用中自定义资源,自行管理这些资源在不同的设备或配置中的表现。
  • 系统资源:开发者直接使用系统预置的资源定义。
1
2
3
4
5
6
7
8
# 引入resouces/base/media下的home_selected的图片
$r('app.media.home_selected')

# 导入resources/rawfile下的index.html文件
$rawfile("index.html")

# 获取resources/rawfile下的audio.mp3音频
await getContext(this).resourceManager.getRawFd("audio.mp3")

页面路由

页面路由 router 根据页面的 uri 找到目标页面,从而实现跳转。以最基础的两个页面之间的跳转为例,具体实现步骤如下:

  1. 在 “Project“窗口,打开 src> main >ets,右键点击 pages 文件夹,创建一个页面。
  2. 在 resources/base/profile 下的 main_pages.json,新建一个 pages 中创建页面的文件名(注意大小写)。
  3. 调用 router.push () 路由到指定页面。
  4. 调用 router.back () 回到首页。

img

WebView

页面加载是 Web 组件的基本功能。根据页面加载数据来源可以分为三种常用场景,包括加载网络页面、加载本地页面、加载 HTML 格式的富文本数据。

页面加载过程中,若涉及网络资源获取,需要配置 ohos.permission.INTERNET 网络访问权限,下面以本地静态文件的方法举例。

  • 将资源文件放置在应用的 resources/rawfile 目录下。

img

  • 鸿蒙 Next 应用代码
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
import web_webview from '@ohos.web.webview';
import { HdNav } from '@mygames/basic';

@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();

build() {
Column() {
HdNav({ title: '看烟花秀', showRightIcon: false, iconColor: $r('app.color.black') })

Button('loadData')
.onClick(() => {
try {
this.controller.loadUrl($rawfile("index.html"));

} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}

})
// 组件创建时,加载www.example.com
Web({ src: $rawfile("index.html"), controller: this.controller })
}
}
}
  • 烟花代码

img

写在后面

到这里鸿蒙 Next 应用实战暂告一段落了。但是鸿蒙系统提供了开箱即用的原生 AI 能力,更方便了我们开发者实现应用的快速智能化,所以,鸿蒙 Next 智能应用实战,待续~

鸿蒙Next实战:电子木鱼

前言

正所谓:Hello Word 是程序员学任何一门语言的第一个程序实践。这其实也是一个不错的正反馈,那如何让学习鸿蒙 Next 更有成就感呢?下面就演示一下从零开发一个鸿蒙 Next 版的电子木鱼,主打就是一个抽象!

img

实现要点

  1. 页面布局
  2. 木鱼点击
  3. 木鱼音效
  4. 动画特效
  5. 自定义弹窗

img

开始实践

页面布局

ArkTS 定义了声明式 UI 描述、自定义组件和动态扩展 UI 元素的能力,配合 ArkUI 开发框架中的系统组件及其相关的事件方法、属性方法等共同构成 UI 开发的主体。我们下面要完成的主要是一个木鱼和设置按钮、自动按钮。

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
build() {

Column() {
HdNav({ title: '电子木鱼', showRightIcon: false, iconColor: $r('app.color.white'), titleColor: '#ffffff' })

Row() {
Text(this.woodenType[this.type] + ':'+ this.score).fontSize(22).fontColor("#ffffff").width('100%').textAlign(TextAlign.Center)
}.width("100%").height("8%")

Row() {
Image($r('app.media.setting')).width(25).height(25).margin(16).onClick(() => {
if (this.dialogController != null) {
this.dialogController.open()
}
})
}.width('100%')

Row() {
Image($r('app.media.foreground')).width(40).height(40).margin({left:8,top:5})
}.width('100%')
.onClick(() => {
this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
message: '数据统计功能,正在完善中~',
})

Row() {
if (this.isPresent) {
Text(this.woodenType[this.type] + ': ' + this.woodenFishNum).fontSize(16).fontColor("#ffffff").width('100%').textAlign(TextAlign.Center)
.transition(this.effect)
}
}.width('100%').height('25%')
.alignItems(VerticalAlign.Top)

Row() {
Image($r('app.media.muyu'))
.width(this.isZoomed == true ? this.targetWidth * 1.2 : this.targetWidth * 1)
.height(this.isZoomed == true ? this.targetHeight * 1.2 : this.targetHeight * 1)
}
.width('100%')
.height('25%')
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)

Row() {
Toggle({ type: ToggleType.Switch })
.onChange((isOn: boolean) => {
if(isOn) {
promptAction.showToast({ message: 'auto is on.' })
} else {
promptAction.showToast({ message: 'auto is off.' })
}
})

Text('自动' + this.woodenType[this.type]).fontSize(18).fontColor('#ffffff').height(40).margin({left: 10})

}.width('100%').height('10%').justifyContent(FlexAlign.Center)

}
.height("100%")
.backgroundColor('rgba(0, 0, 0, 1.00)')

}

木鱼点击

木鱼是一张图片,也就是给该图绑定一个点击事件,点击一次有三个动作需要执行:

  • 木鱼有放大的效果
  • 有类似功德文字的飘动
  • 功德数值的累加

而点击的时候要看到实时的效果,所以可以声明三个状态,通过 State 的修改,从而驱动 UI 更新,以下的 animateTo 是给域名的放大添加的一个平滑效果。

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
// 积分
@State score: number = 0
// 积分文字
@State isPresent: boolean = false
// 木鱼是否放大
@State isZoomed: boolean = false


// 木鱼UI
Image($r('app.media.muyu'))
.width(this.isZoomed == true ? this.targetWidth * 1.2 : this.targetWidth * 1)
.height(this.isZoomed == true ? this.targetHeight * 1.2 : this.targetHeight * 1)
.onClick((event) => {
animateTo({ curve: curves.springMotion() }, () => {
this.isZoomed = !this.isZoomed;

if (this.isZoomed == true) {
this.isPresent = true;
this.score += this.woodenFishNum;
this.onClickPlay();
}
})

// 定时缩小/定时文字消失
setTimeout(() => {this.isZoomed = false;}, 50);
setTimeout(() => {this.isPresent = false}, 600);
})

木鱼音效

木鱼音效是点击时的咚咚的声音,这里就要使用到 HarmonyOS Next 的音频服务。这里需要注意一点,项目运行预览无法播放,一定要模拟器或真机才可以调试音频的播放效果。

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 销毁音效工具
onClickDestroy= ()=>{
AudioMgr.Ins().destroy();
console.log('audio', 'destroy');
}

// 初始化音效工具
onClickInit = ()=>{
AudioMgr.Ins().init();
console.log('audio', 'init');
}

// 播放指定音效
onClickPlay = ()=>{
AudioMgr.Ins().play();
console.log('audio', 'playing');
}

img

动画特效

这里的动画效果主要是点击木鱼,从下网上飘出一个文字然后消失的特效。在鸿蒙中可以通过 TransitionEffect 方法添加效果,首先创建特效,然后再文字上挂载。

1
2
3
4
5
6
7
8
9
// 上移入场特效
private effect: object =
TransitionEffect.OPACITY
// 初始正常大小// 假设动画持续时间为500ms
.combine(TransitionEffect.scale({ x: 1, y: 1 }).animation({ curve: curves.springMotion(0.6, 1.2), duration: 0 }))
// 向上平移150单位// 与上一步同时开始
.combine(TransitionEffect.translate({ x: 0, y: 400 }).animation({ curve: curves.springMotion(0.6, 1.2), duration: 10000, delay: 50 }))
// 淡出至完全透明// 在平移结束后开始淡出
.combine(TransitionEffect.opacity(0).animation({ curve: curves.springMotion(0.6, 1.2), duration: 1000, delay: 0 }));

img

自定义弹窗

经过前面布局,事件绑定,音效播放,一个简单的电子木鱼其实已经完成了。但是为了增添趣味和后期扩展,这里再加一个设置功能,通过按钮打开配置项弹窗,设置包括:

  • 类型选项 (功德、财运、桃花运等)
  • 音效选项 (各种解压的音效素材)
  • 皮肤管理 (木鱼的 UI 界面设置)
  • 数值修改 (对展示的累加数值做任意修改)
  • 其他 (是否关闭音效,是否自动点击等)
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 弹窗层(UI开发-组件-自定义弹窗)
@CustomDialog
struct SettingDialog {
controller?: CustomDialogController

// 父子组件双向同步,文档见 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-link-V5
@Link woodenFishType: number

// 木鱼敲击的数值
@Link woodenFishNum: number

build() {
Column() {

Row() {
Text('愿望:').fontSize(17).fontWeight(600)
Radio({ value: '功德', group: 'word' }).checked(true).onChange((isChecked: boolean) => {
if(isChecked) {
this.woodenFishType = 0
}
})
Text('功德').fontSize(15)
Radio({ value: '财富', group: 'word' }).onChange((isChecked: boolean) => {
if(isChecked) {
this.woodenFishType = 1
}
})
Text('财富').fontSize(15)
Radio({ value: '桃花运', group: 'word' }).onChange((isChecked: boolean) => {
if(isChecked) {
this.woodenFishType = 2
}
})
Text('桃花运').fontSize(15)
}
.width('100%')
.margin({bottom: 12})
.justifyContent(FlexAlign.Start)

Row() {
Text('数值:').fontSize(16).fontWeight(600)
TextInput({text:'1'}).type(InputType.Number).width(180).onChange((value: string) => {
this.woodenFishNum = parseInt(value)
})
}
.width('100%')
.margin({bottom: 12})
.justifyContent(FlexAlign.Start)

Row() {
Text('音效:').fontSize(16).fontWeight(600)
Toggle({ type: ToggleType.Switch })
}
.width('100%')
.margin({bottom: 12})
.justifyContent(FlexAlign.Start)

Row() {
Text('皮肤:').fontSize(16).fontWeight(600)
Radio({ value: '默认', group: 'skin' }).checked(true)
Text('木鱼').fontSize(15)
Radio({ value: '悟空', group: 'skin' })
Text('黑悟空').fontSize(15)
Radio({ value: '典韦', group: 'skin' })
Text('典韦').fontSize(15)
}
.width('100%')
.margin({bottom: 12})
.justifyContent(FlexAlign.Start)

}.padding({top: 28, left: 15})

}
}

这里需要注意的是:父子组件的数据传递。因为自定义弹窗和木鱼是两个不同的组件,而点击弹窗中的比如类型切换或修改的数值,全部要更新到木鱼组件的展示当中。

当然鸿蒙也提供了 @Link 装饰器,用于与其父组件中的数据源共享相同的值,可以结合上面代码和下方截图参考其用法。

img

写在后面

到这里,一个通用型的鸿蒙 Next 版电子木鱼就完成了。不管是组件交互还是布局都还好,唯一让我觉得不适应的是动画特效。

如果用这种方式实现电子烟花肯定不行,所以下次将换一种方法快速实现烟花秀,以及页面间的跳转,待更新~

鸿蒙Next实战:环境搭建

前言

作为独立开发者,如果我们错过了传统移动 App,和后起小程序的红利,那万物互联 + AI 的应用开发就得抓住了。

虽然个人上架应用平台难易都差不多,但是鸿蒙生态当前正需要广大开发者参与,一旦上架,相比其他平台,流量扶持力度更大,变现能力也更容易。

所以,我们可以先开发一些应用占个位置,后面再逐渐迭代完善;那么,第一步就先从搭建开发环境开始吧。

img

鸿蒙 Next 简介

鸿蒙 Next,英文 HarmoneyOS Next,又叫纯血版鸿蒙,2023 年 8 月 4 日开发者预览版,2024 年 6 月正式对外公布。鸿蒙 NEXT 采用了全鸿蒙内核,完成了对 Linux 内核的全面替换,并去掉了安卓开放源代码项目(AOSP)等代码,实现了真正的自主可控,他能支持华为及合作厂商的多种智能终端设备,包括手机、平板、智慧屏等等。

img

运行环境要求

针对开发 HarmonyOS 应用及元服务,华为基于 IntelliJ IDEA Community 开源版本打造了一个集成开发环境(IDE)——DevEco Studio,能将开发的应用和服务同时运行在 HarmonyOS 和 OpenHarmony 系统上,为保证 DevEco Studio 正常运行,建议您的电脑配置满足如下要求:

  • 操作系统:Windows10 64 位,内部版号大于 18363
  • 内存:8GB 及以上
  • 硬盘:100GB 及以上
  • 分辨率:1280*800 像素及以上
  • 其他: 开启了 Hyper-V 虚拟化

img

DevEco Studio

下载

进入 huawei 开发者平台下载,最好找 5.0 以上又不是最新版本就行。还有 DevEco Studio 支持 Windows 和 macOS 系统,但我本人用的是 Windows,所以就以 win 系统演示。

img

安装

下载完成后,双击下载的 “deveco-studio-xxxx.exe”,进入 DevEco Studio 安装向导。因为 DevEco Studio 提供开箱即用的开发体验,将 HarmonyOS SDK、Node.js、Hvigor、OHPM、模拟器平台等进行合一打包,几乎无需额外下载配置就能马上跑项目,但是要运行模拟器需要一点配置,比如 Windows 版本要大于 18363。

img

模拟器设置

DevEco Studio 提供预览、模拟器、真机三种方式查看项目的运行效果,但是给予的测试权限不一。最高的真机,目前需要搭载了鸿蒙 Next 的手机才行,且鸿蒙无法自己升级到 Next,所以折中的方法就是用模拟器。官方现在要求使用模拟器需申请,而且本地电脑开始了虚拟化技术 Hyper-V。

img

img

img

项目运行

DevEco Studio 安装完成后,可以通过运行 Hello World 工程来验证环境设置是否正确。接下来以创建一个支持 Phone 设备的工程为例进行介绍。

img

项目结构

可能当时为了适应主流开发语言,加上自己新出的 ArkTS 有三种工程类型可供选择,而我就是为 ArkTS 而来,所以以下和后面要做的应用也都是 ArkTS。

  • ArkTS 工程目录结构(Stage 模型)
  • C++ 工程目录结构(Stage 模型)
  • JS 工程目录结构(FA 模型)

img

项目创建后,结构就是上图,而关于每个目录或文件的用法,就要去官方文档查看 “工程目录结构”,这里就略过进入到简单例子的演示。

img

第一个 Hello World

创建页面

在 “Project” 窗口,点击 “entry > src > main > ets > pages”,打开 “Index.ets” 文件,进行页面的编写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'

build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}

预览效果

在编辑窗口右上角的侧边工具栏,点击 Previewer,打开预览器。

img

写在后面

如果你有应用端相关的开发经验,上手鸿蒙应用还是比较容易的。而如果你像我一样是做后端的,或很少接触前端,那也可以跟着我一起代码实战,简单实现一个鸿蒙 Next 的电子木鱼和电子烟花秀,文章待更新~

个人最新微信小程序——有用工具盒,上架了!

简介

“有用工具盒”是一款强大且实用的工具类小程序,提供包括图片处理、信息查询、测算,娱乐等常用工具。如:文本加密解密、二维码生成与识别、九宫格切图、图片拼接、国旗头像生成、房贷和BMI计算器等,如同瑞士军刀一样方便好用。

mmexport1720348679200

功能介绍

国旗头像

只需要上传一张图片,就会免费生成一张带国旗的头像

九宫格切图

只需上传一张图片,工具会自动将他分成九宫格的切图,保存后就可以发朋友圈了。

房贷计算器

目前贷款利率还没调整,其他的基本功能都没有问题。

色盲测试

通过不停的切换颜色矩阵,你可以点击其中不同的色块,类似于颜色找茬,来测试你的色盲程度。

image-20240711154242511

手持弹幕

手持弹幕,是一个可以自定义文字样式的滚动大字报,可以用于像粉丝给爱豆接机用的欢迎词。

节日倒计时

节日倒计时,是一个在本地存储日期进行倒计时的工具,样式温馨多样。由于没有远程存储,如果对微信进行了清理缓存,节日倒计时也会消失需要重新创建。

随机数

随机数,是一个可以用于朋友间抽签的小工具,给定两个区间,工具自动产生一个数值。

大转盘

大转盘是一个随机定义的事件扇叶,抽中哪个就中哪个。

image-20240711154305686

二维码生成

二维码生成工具,你只需要提供链接或文本,工具会将其生成一个可识别的二维码。

二维码识别

二维码识别,一个通用型二维码识别器,不管是这里生成的还是其他地方的都可以识别。

全息时钟

全息时钟,一个可以用来拍摄自习课视频的时钟展示,省掉了专门安装全息时钟的APP。

常用号码

常用号码罗列了日常生活中紧急需要的号码,点击后就可以拨打,比如报警,住院等等号码。

image-20240711154336615

恶搞理发器

纯娱乐性的小工具,就好比周星驰的,你看这个是部手机,其实是个理发器。

数钱

数钱也是一个娱乐性工具,看你自己的手速,滑动地越快数的钱越多。

更多

目前这个小程序集成了31个小工具,其他诸如尺子、量角器、计算器、亲戚计算器、粤语翻译等等,更多的你可以自己体验了。后续还会迭代一些AI之类的小工具,如果有体验有问题的,也可以在下方公众号给我留言哈~

gzh_qrcode

工具类uniapp源码免费开源啦!

简介

一个基于uniapp开发的强大且实用的工具类APP,提供了包括图片处理、测算,信息查询和娱乐等常用的工具。如:文本加密解密、二维码生成与识别、九宫格切图、图片拼接、国旗头像、房贷和BMI计算器等,如同瑞士军刀一样方便好用~

1
🕙 项目基本保持每日更新,右上随手点个 🌟 Star 关注,这样才有持续下去的动力,谢谢~

项目展示

码云: https://gitee.com/gaoxingqufuhchao/bqs-toolsbox-uniapp

落地: https://www.zerofc.cn/market/

下载:https://www.zerofc.cn/market/land_pages/bqs_toolsbox/index.html

项目截图

img

img

img

img

img

img

img

项目说明

项目灵感来源于 前端铺子 ,前台基于Vue-uniApp,使用colorUi与uview框架,部分Demo参考uniApp插件市场等,感谢各位作者~

特别声明

本软件属于技术开源软件, 任何使用本源码从事商业活动,对别人和自己造成损失的,本人概不负责!

功能规划

2024-08 : 增加2048小游戏、小霸王游戏机等经典小游戏
2024-09 : 增加木鱼、摸鱼等娱乐性小工具
2024-10: 增加编程博文和视频,代码资源等等

安装教程

  1. 下载安装:「HBuildX」、「微信开发者工具」
  2. 扫码登录微信开发者工具
  3. 将项目拖进【HBuildX】- 运行 - 微信小程序 - 完成

其他说明

由于很多年没碰uniapp了,这次我想试一下uniapp统计,因为数据绝对了我更新的频率,而再次玩得时候却差点翻车!

其实主要是Hbuild版本和官方策略原因,以前的时候app打包默认会勾选uni统计。而现在不但出了两个版本(1.0和2.0),而且默认是不勾选的,需要自己挑选。重点是选择哪一个就会在对应版本的统计系统生效,也就是如果选了2.0再打开1.0的后台是看不到数据的,最后我看了文档才了解清楚。

img

写在后面

做这个工具箱app主要有两个原因,一个是我做的一个微信小游戏还在备案中,目前是空档没啥事情;第二个是借机重新捡一下uniapp的内容,很多都已经忘了,所以工具箱app的更新迭代会慢一点。

hexo实战:(一)零成本搭建个人独立博客

前言

很多平台都能写博客还有创作激励,为什么我又要搭一个?为什么这次要选择用Hexo框架?

对应的原因是流量自由和省钱,第一个,很多平台能写但不是都有收益,而且平台有自身的规则,比如会屏蔽一些推广类信息。如果我哪天做了一产品,是没办法直接用平台博客的方式硬推的,至少放码和链接不行。第二个用Hexo搭到GitHub上,我可以不用买服务器,毕竟现在也还没有想法要做一个什么样的东西。

总之,有个独立博客,相比平台博客在内容约束上更自由。有想法了就发出来,做了游戏什么的就放出来,md的文章以后要存储备份可以转word,更方便在副业的路上轻装探索。

Hexo介绍

Hexo是一款基于Node.js的开源静态博客框架,用于快速、简单且高效地搭建个人或团队的静态博客网站。说白了他是一个静态网站生成器,我们新增文章只需要编辑md文件,通过运行命令再生成像html的静态文件。其实我挺早听过Hexo,但一直没用,直到我cms搭的博客别人挂马后。我关闭网站全面使用平台博客,但经种种原因,我又萌生了建独立博客的想法,并且这次打算走长期路线,第一步先记录上次Hexo搭建过程仅供参考。

流程

  • 本地构建Hexo
  • 配置 GitHub
  • 代码上传与备份
  • 个性化域名绑定

环境搭建

Hexo的博客,不管是页面的添加还是构建都是通过npm命令,所以最基本要把Node安装了。项目部署和部署的地方又在GitHub,所以Git也要提前装好。这里强调一下,运行Hexo命令最好在Git的GUI窗口里,不要用Windows的cmd,坑多,关于Node和Git环境安装就跳过了。

构建Hexo

安装Hexo

1
npm install -g hexo

检验Hexo是否安装

1
hexo -v

项目构建

1
2
3
4
5
6
7
8
# 创建一blog项目
hexo init blog

# 进入项目
cd blog

# 安装依赖包
npm install

其他操作

1
2
3
4
5
#右键 Git Bush,用户项目自动化部署
npm install hexo-deployer-git --save

hexo _config.yml中文乱码问题
用Notepad++等编辑器打开,选择 “编码” -> “转为UTF-8编码”

安装项目开发者操作包.jpg

项目预览

1
2
3
4
5
6
7
8
# 清理旧的静态文件
hexo clean

# 生成静态文件
hexo g

# 运行预览项目
hexo s

Snipaste_2024-05-23_19-55-21.jpg
Snipaste_2024-05-23_19-57-44.jpg

配置 GitHub

这里虽然只是写的配置GitHub,其实包含了本地用Git生成SSH密钥对,和GitHub上公钥添加,提交Token的获取,以及Pages服务的开启。还有仓库名的建立也有讲究,下面就从这些点开始逐一展开。

建立仓库

仓库名是个什么讲究法呢?就是格式要保持 “github账号名.github.io”, 比如我的账户名是“z11r00”,那么仓库就要建成 “z11r00.github.io”。如果不这样,最后等用Hexo部署完毕后,初始的域名可能就是 “github账号名.github.io/仓库名”,会在后面多了一个路径,而且hexo的config没有设置好连css都加载不出来。
image.png

设置SSH

GitHub 的 SSH(Secure Shell)主要用于安全地连接到 GitHub 服务器,其实就是平时Git常用的克隆、拉取、提交、推送等操作。而好处除了安全外,就是提交代码不用每次都要输入账号密码。如果安装了hexo-deployer-git的话,只需一个命令就可以完成项目从静态构建到自动部署。

生成SSH密钥对

打开Git面板,输入 “ssh-keygen -t rsa -C GitHub账户”, 这里的GitHUb账户是你登陆GitHub的邮箱等方式。生成后找到目录下的id_rsa.pub(公钥),用编辑器打开并复制。

实际生成id_rsa文件.jpg

GitHub中添加SSH公钥

登陆GitHub网站,点击个人头像,找到 “Settings”->”SSH and GPG keys”后,点击 “New SSH keys”,最后将前面复制的很长的公钥字符串粘贴到Key文本框中。

github添加ssh.jpg
github添加ssh key.jpg
github粘贴ssh.jpg

验证设备是否可连接

通过 “ssh -T git@github.com” 命令,验证当前的设备是否可以连接。
校验ssh是否绑定.jpg

获取提交的token

虽然说SSH连接不用一直登陆,但是初次还要要的。而且不光要输入账号密码还需要一个提交用的Token,没有这个,运行hexo d一直提示Logon failed, 这个后面会集中列出报错事故的。

获取token,还是进入“Settins”,找到 “Developer settings”->“Personal access tokens”->“Tokens(classic)”, 然后设置备注和过期时间。最主要的权限要勾选 “workflow”、“gist”、“user”,点击 “Generate”按钮,生成的”ghp_”为前缀的就是token了,复制并保存下来。

提交仓库失败1.jpg
提交仓库失败3.jpg
提交仓库失败4.jpg
提交仓库失败5.jpg

项目部署

项目部署的其实是将Hexo生成的静态文件提交到github上,后期添加文章也就是markdown文件,继续重新生成,重新部署。而项目的代码却在本地,虽然代码量不多,但是里面的package.json和_config.yml,以及用到的主题包,还是有必要保存一下。所以我这里的方法是,静态部署项目放在一个公有仓库,而项目源代码单独提交到一私有仓库下。

修改配置

打开项目根目录下的_config.yml,主要添加仓库的地址,其他的配置下篇再介绍。因为hexo很多玩法更多的是配置和各种依赖,比如可以添加统计、留言、修改主题、站内搜索、甚至广告位等等。
image.png

静态文件生成

通过 “hexo clean” 先清理,然后执行 “hexo g” 重新生成。

将博客编译为静态文件项目.jpg

开始部署

通过命令 “hexo d”,开始部署项目,如果第一次运行,就需要前面提到的输入github账号密码。确认Login后会再次弹一个窗口就是输入Token了,最后完成部署。这里需要注意一下的是,最好用Git面板运行命令,如果是cmd很有可能第二次的窗无法弹出,亲测坑点。

页面上传.jpg
image.png

访问测试

部署完成就进入仓库下,除了查看提交的代码外,打开仓库下的 “Settings”,找到 “Pages”。

提交仓库失败6.jpg

个性化域名绑定

有一个git域名其实也不错,为什么还要买一个去绑定呢?一个是我本身这域名就空在这里,第二个是可以给博客增加一点IP点,第三个是更利于某度的爬取。我看其他博主说国内一些搜索引擎屏蔽了github的pages博客,当然我没有验证过,下次也要做SEO相关的时候可以测试一下。

获取IP地址

要想知道当前项目部署的独立IP地址,只需要ping一下github分配的域名,比如我直接 “ping z11r00.github.io”就可以看到了。

IP获取.jpg

域名解析

进入购买的域名控制台,给自己的域名添加两个解析,一个指向旧域名,一个解析到前面获取到的IP地址。

域名解析.jpg

项目绑定域名

进入仓库的“Settings”下,点击 “Pages”,找到 “Custom domain”,将自己的域名粘贴进文本框保存。然后在项目的“source” 新建CNAME(没有后缀), 打开文件粘贴域名,比如我的zerofc.cn,最后再重新部署项目访问。

image.png

报错汇总

1.extends includes/layout.pug block content include ./includes/mixins/post-ui.pug #recent-posts.recent-posts +postUI include includes/pagination.pug
项目启动后报的这个,是因为缺失了一些依赖包,上面的是没有 pug 以及 stylus 的渲染器,解决方法就是安装对应的依赖。

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

2.运行后打开hexo博客上的中文乱码
解决方法是用Notepad++等编辑器打开,选择 “编码” -> “转为UTF-8编码”。

3.unable to access ‘https://github.com/z11r00/z11r00.github.io.git/‘: Empty reply from server
出现这个报错的是项目初次部署时,原因就是没有设置Token,解决方法就是前面“配置 GitHub”的“提交Token获取”部分。

4.unable to access ‘https://github.com/z11r00/z11r00.github.io.git/‘: The requested URL returned error: 403
出现这个一般就是间接性打开GitHub网站,毕竟是国外网站,多刷新几下,多请求几下就可以了。

写在后面

既然博客已经搭起来了,后面还有分两步走,凑成三部曲。第一个是Hexo的各种配置和插件的玩法,第二个是Hexo博客SEO相关的内容,如果我那个小游戏软著下来了,可能博客的事情就会延后一点。

hexo实战:(三)独立博客运营总结

前言

通过前面两个步骤,完成了静态博客从搭建到基本功能添加和界面优化。那么,这次就要介绍一下搭在GitHub上的静态博客如何运营推广。也就是如何让网站被各大搜索引擎收录?如何提高网站权重,提高收录量?

网站收录

平台选择

站长相关的平台有:某度站长工具、360站长平台、搜狗资源平台、必应网站管理员工具、谷歌站长工具等。列出的五个平台,可以按自身情况提交,提交方法也大同小异,以下以某度为例。

添加网站

添加某度、360、某狗等引擎收录,进入某度的站长工具,点击添加网站。流程就三步,输入网站,设置站点属性,最后验证网站。而验证网站又有三种方式,分别是文件验证、HTML标签验证、CNAME验证,我这里选择文件验证。

选择文件验证后,下载baidu_verify_xxxx.html文件,然后将该文件放入theme/主题包名/source/根目录下。重新编译生成静态文件,而验证文件会被原封不动地复制到编译后博客根目录地public下,最后部署就完成验证了。

image-20240606113057594

image-20240606135833994

链接提交

进入站长工具的 “普通收录”,这里我们可以向搜索引擎主动提交网站的链接地址。其中提交的方式有三种,分别是API提交、sitemap、手动提交,而最方便快捷的就是给引擎提供sitemap,也就是网站地图,里面按固定格式放满网站上需要被收录的链接。但是某度对于这种方式有限制,需要站点达到一定量才可以使用sitemap,当然也不妨碍我们先做出地图。

image-20240607091525644

安装地图生成插件

以下两个插件都可以生成sitemap,但是generator-sitemap相比另一个多了一种txt格式。

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
配置url

设置这个可以在sitemap中指定网站的地址,如果绑定了个性化域名就填写改域名。不然放入github自带域名,可能被国内引擎屏蔽,也可能由自带域名重定向个性化域名,同样都影响网站的收录。

1
2
3
4
url: https://www.zerofc.cn
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

image-20240607105629724

配置地图插件

打开hexo的_config.yml添加下面对应插件的参数,用于配置sitemap文件的保存位置。其中上面的插件可通过txt和xml决定需要的格式。

1
2
3
4
5
6
7
8
# generator-sitemap插件
sitemap:
#path: sitemap.txt
path: sitemap.xml

# hexo sitemap百度网站地图
baidusitemap:
path: baidusitemap.xml
清理与生成

插件完毕后再重新编译打包的同时,在public下就会生成sitemap的xml文件了。

1
hexo clean && hexo g

image-20240606133915299

创建robots文件

robots.txt 文件是一个简单的文本文件,用于指示搜索引擎爬虫如何访问和索引您的网站。创建后放入hexo主题包下的source,这样每次打包后都会在静态项目的根目录下,以下是一个简单的robots.txt文件配置。

1
2
3
User-agent: *  
Disallow: /video/
Disallow: /archives/

上述示例告诉所有搜索引擎爬虫(User-agent: *)不要索引 /video//archives/ 目录下的内容。

image-20240607145358947

错误合集

1
2
The file will have its original line endings in your working directory.
On branch master

原因

windows下的换行符是CRLF而Unix的换行符格式是LF。git默认支持LF。

解决方法

1
2
3
git rm -r --cached .

git config --global core.autocrlf false

抱团友情链接

最好是有收录或网站权重高的,欢迎大家找我互链!

添加广告联盟

这个后续等流量上来了再更新。

其他优化

markdown中插入视频

启动源代码模式,输入下面代码后再切回。

image-20240606204325844

1
2
3
4
<video width="320" height="240" controls>  
<source src="https://www.zerofc.cn/zd_image_bed/img/11.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

hexo实战:(二)个人独立博客豪华装修合集

前言

上次介绍了使用Hexo+GitHub Pages,零成本搭建一个专属自己的独立博客网站。我觉得那篇文章是没有入门门槛的,不管你是什么行业,只要想打造个人IP,又不太想受博客平台约束,那么读完后动手操作一下也能轻松完成。而这次呢,上篇也说了Hexo会出三篇内容,这里就要在前者基础上做进一步升级,将完成下面七个主要的博客常用功能。

指标

  • Hexo如何安装Butterfly主题并配置?
  • Hexo如何创建页面和添加文章?
  • Hexo如何添加第三方评论系统?
  • Butterfly主题如何添加站内搜索?
  • Butterfly主题如何添加百度统计?
  • Butterfly主题如何添加文章置顶功能?
  • Butterfly主题如何配置RSS和404页面?
  • 如何配合Typora完成md的同步与本地备份?

主题添加与配置

Hexo官网专门有一个栏目的主题列表,这里我选的 “butterfly”,首先拉取主题代码到themes目录下,然后在Hexo的配置中启动主题。

拉取主题包

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

启动主题

1
theme: butterfly

image-20240601204144917

基础配置

基础配置主要是设置网站的标题、描述、SEO、菜单等项,下面我就列出hexo的config(根目录下_config.yml),和主题Butterfly的config(themes的Butterfly下_config.yml),并注释相关项的简介仅供参考。

hexo_config.yml

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
title: ZERO开发                           #网站标题
subtitle: 一个独立开发者的博客 #网站副标题
description: 公众号:ZERO开发 #网站描述
keywords: 技术博客、独立开发者、PHP开发、Pthon开发、人工智能、物联网、游戏开发
author: 北桥苏 #您的名字
language: zh-CN #网站使用的语言
timezone: #网站时区。Hexo 默认使用您电脑的时区

# URL 网址
## 如果您的网站存放在子目录中,
## 例如 http://yoursite.com/blog,则请将您的 url
## 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
url: http://z11r00.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory 目录配置
source_dir: source #源文件夹,这个文件夹用来存放内容。
public_dir: public #公共文件夹,这个文件夹用于存放生成的站点文件。
tag_dir: tags #标签文件夹
archive_dir: archives #归档文件夹
category_dir: categories #分类文件夹
code_dir: downloads/code #nclude code 文件夹
i18n_dir: :lang #国际化(i18n)文件夹
skip_render: #跳过指定文件的渲染,您可使用 glob 表达式来匹配路径。

# Writing 文章
new_post_name: :title.md # 新建文章默认文件名
default_layout: post # 默认布局
titlecase: false # Transform title into titlecase
external_link: true # 在新标签中打开一个外部链接,默认为true
filename_case: 0 #转换文件名,1代表小写;2代表大写;默认为0,意思就是创建文章的时候,是否自动帮你转换文件名,默认就行,意义不大。
render_drafts: false #是否渲染_drafts目录下的文章,默认为false
post_asset_folder: false #启动 Asset 文件夹
relative_link: false #把链接改为与根目录的相对位址,默认false
future: true #显示未来的文章,默认false
syntax_highlighter: highlight.js
highlight: #代码块的设置
enable: true
line_number: true
auto_detect: false
tab_replace:
prismjs:
preprocess: true
line_number: true
tab_replace: ''

# Category & Tag 分类和标签的设置
default_category: uncategorized #默认分类
category_map: #分类别名
tag_map: #标签别名

# 全局日期格式化
date_format: YYYY-MM-DD
time_format: HH:mm:ss
updated_option: 'mtime'
pagination_dir: page #分页目录

## 插件index,用于显示分页和排序配置
index_generator:
path: ''
per_page: 5# 0.关闭分页功能 >0.每页条数
order_by:
top: -1# 置顶排序: -1.倒序 1.正序
date: -1# 日期排序: -1.倒序 1.正序

# 主题启动配置
theme: butterfly

# Deployment github部署配置
deploy:
type: git
repository: https://github.com/z11r00/z11r00.github.io
branch: main

##hexo-generator-search搜索插件配置
search:
path: search.xml
field: post
format: html
limit: 10000

## rss配置
feed:
type: atom
path: atom.xml
limit: 20

## rss位置
rss: /atom.xml

hexo_butterfly_config.yml

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
nav:
logo: /img/logo.png # 导航栏左侧LOGO
display_title: true
fixed: true # 是否置顶导航栏

## 菜单图标配置
Home: / || fas fa-home
Archives: /archives/ || fas fa-archive
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
Music: /music/ || fas fa-music
Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart

# Menu 菜单跳转配置
menu:
首页: / || fas fa-home
时间轴: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
#清单||fa fa-heartbeat:
#音乐: /music/ || fas fa-music
#照片: /Gallery/ || fas fa-images
#电影: /movies/ || fas fa-video
友链: /link/ || fas fa-link
关于: /about/ || fas fa-heart

# Code Blocks (代碼相關)
# --------------------------------------
highlight_theme: light # darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # copy button
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button
highlight_height_limit: false # unit: px
code_word_wrap: false # 代码是否自动换行

# Social Settings (社交圖標設置)
social:
fab fa-github: https://github.com/z11r00 || Github || '#24292e'
fas fa-envelope: 2652364582@qq.com || Email || '#4a7dbe'
fas fa-rss: /atom.xml || RSS


# Image (圖片設置)
# --------------------------------------

# Favicon(網站圖標)
favicon: /img/favicon.png

# Avatar (頭像)
avatar:
img: /img/avatar.png
effect: false

# 是否禁用所有跳转页的顶部图片
disable_top_img: true

# 首页图
index_img: /img/index_img.jpg

# 所有页面的默认顶部图
default_top_img: /img/default_top_img.jpeg

# 归档(时间线)页面顶部图
archive_img: /img/archive_img.jpg

# 标签页面顶部图
tag_img:

# The banner image of tag page
# format:
# - tag name: xxxxx
tag_per_img:

# 分类页面顶部图
category_img:

# The banner image of category page
# format:
# - category name: xxxxx
category_per_img:

## 封面配置
cover:
# display the cover or not (是否顯示文章封面)
index_enable: true
aside_enable: true
archives_enable: true
# the position of cover in home page (封面顯示的位置)
# left/right/both
position: both
(當沒有設置cover時,默認的封面顯示)
default_cover:
- https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg

# Replace Broken Images (替換無法顯示的圖片)
error_img:
flink: /img/friend_404.gif
post_page: /img/404.jpg

# 404 页面配置
error_404:
enable: true
subtitle: 'Page Not Found'
background: /img/404.jpg

## 文章配置
post_meta:
page: # Home Page
date_type: created # created or updated or both 主頁文章日期是創建日或者更新日或都顯示
date_format: date # date/relative 顯示日期還是相對日期
categories: true # true or false 主頁是否顯示分類
tags: false # true or false 主頁是否顯示標籤
label: true # true or false 顯示描述性文字
post:
date_type: both # created or updated or both 文章頁日期是創建日或者更新日或都顯示
date_format: date # date/relative 顯示日期還是相對日期
categories: true # true or false 文章頁是否顯示分類
tags: true # true or false 文章頁是否顯示標籤
label: true # true or false 顯示描述性文字

# 锚点配置
anchor:
# when you scroll, the URL will update according to header id.
auto_update: false
# Click the headline to scroll and update the anchor
click_to_scroll: false

# figcaption (圖片描述文字)
photofigcaption: false

# 复制功能的配置
# copyright: Add the copyright information after copied content (複製的內容後面加上版權信息)
copy:
enable: true # 是否开启网站复制权限
copyright:
enable: false # 是否开启复制版权信息添加
limit_count: 50 # 字数限制,当复制文字大于这个字数限制时,将在复制的内容后面加上版权信息

# Post
# --------------------------------------

# toc (文章的目錄配置)
toc:
post: true
page: false
number: true
expand: false
style_simple: false
scroll_percent: true

# 文章版权设置
post_copyright:
enable: true
decode: false
author_href:
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

# Sponsor/reward 文章打赏
reward:
enable: true
text: 打赏一下~
QR_code:
- img: /img/qrcode/wechat_trade.jpg
link:
text: 微信
- img: /img/qrcode/alipay_trade.jpg
link:
text: 支付宝

# 文章编辑器配置
# Easily browse and edit blog source code online.
post_edit:
enable: false
# url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/
# For example: https://github.com/jerryc127/butterfly.js.org/edit/main/source/
url:

# 文章推荐配置
related_post:
enable: true
limit: 6 # Number of posts displayed
date_type: created # or created or updated 文章日期顯示創建日或者更新日

# post_pagination (分頁)
# value: 1 || 2 || false
# 1: The 'next post' will link to old post
# 2: The 'next post' will link to new post
# false: disable pagination
post_pagination: 1

# Displays outdated notice for a post (文章過期提醒)
noticeOutdate:
enable: false
style: flat # style: simple/flat
limit_day: 500 # When will it be shown
position: top # position: top/bottom
message_prev: It has been
message_next: days since the last update, the content of the article may be outdated.

# Footer Settings(页尾设置)
# --------------------------------------
footer:
owner:
enable: true
since: 2017
custom_text: Copyright© ZERO开发-独立开发者的日常总结<br/><a href="https://beian.miit.gov.cn/" target="_blank">赣ICP备16002525号-1</a>
# copyright: true # Copyright of theme and framework
copyright: false


# aside (側邊欄)
# --------------------------------------

aside:
enable: true
hide: false
button: true
mobile: true # display on mobile
position: left # left or right
display:
archive: true
tag: true
category: true
card_author:
enable: true
description:
button:
enable: true
icon: fas fa-video
text: 关注我
link: https://space.bilibili.com/286666708/
card_announcement:
enable: true
content: 微信公众号:ZERO开发,致力于为猿友们提供有价值的内容
card_recent_post:
enable: true
limit: 5 # if set 0 will show all
sort: date # date or updated
sort_order: # Don't modify the setting unless you know how it works
card_categories:
enable: true
limit: 8 # if set 0 will show all
expand: none # none/true/false
sort_order: # Don't modify the setting unless you know how it works
card_tags:
enable: true
limit: 40 # if set 0 will show all
color: false
orderby: random # Order of tags, random/name/length
order: 1 # Sort of order. 1, asc for ascending; -1, desc for descending
sort_order: # Don't modify the setting unless you know how it works
card_archives:
enable: true
type: monthly # yearly or monthly
format: MMMM YYYY # eg: YYYY年MM月
order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending
limit: 8 # if set 0 will show all
sort_order: # Don't modify the setting unless you know how it works
card_webinfo:
enable: true
post_count: true
last_push_date: true
sort_order: # Don't modify the setting unless you know how it works
card_post_series:
enable: true
series_title: false # The title shows the series name
orderBy: 'date' # Order by title or date
order: -1 # Sort of order. 1, asc for ascending; -1, desc for descending

# busuanzi count for PV / UV in site
# 訪問人數
busuanzi:
site_uv: true
site_pv: true
page_pv: true

# Time difference between publish date and now (網頁運行時間)
# Formal: Month/Day/Year Time or Year/Month/Day Time
runtimeshow:
enable: false
publish_date:

# Aside widget - 最新评论
newest_comments:
enable: true
sort_order: # Don't modify the setting unless you know how it works
limit: 6
storage: 10 # unit: mins, save data to localStorage
avatar: true

# Bottom right button (右下角按鈕)
# --------------------------------------

# Conversion between Traditional and Simplified Chinese (簡繁轉換)
translate:
enable: false
# The text of a button
default: 繁
# the language of website (1 - Traditional Chinese/ 2 - Simplified Chinese)
defaultEncoding: 2
# Time delay
translateDelay: 0
# The text of the button when the language is Simplified Chinese
msgToTraditionalChinese: '繁'
# The text of the button when the language is Traditional Chinese
msgToSimplifiedChinese: '簡'

# Read Mode (閲讀模式)
readmode: true

# Local search (hexo-generator-search创建搜索)
local_search:
enable: true
# Preload the search data when the page loads.
preload: false
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
CDN:

# Docsearch
docsearch:
enable: false
appId:
apiKey:
indexName:
option:

# Share System (分享)
# --------------------------------------
# Share.js
# https://github.com/overtrue/share.js
sharejs:
enable: true
sites: weibo,wechat,qq,facebook,twitter

# AddToAny
# https://www.addtoany.com/
addtoany:
enable: false
item: facebook,twitter,wechat,sina_weibo,facebook_messenger,email,copy_link

# Comments System (评论系统)
# --------------------------------------
# 评论配置
comments:
# Up to two comments system, the first will be shown as default
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
use: gitalk # Valine,Disqus
text: true # Display the comment name next to the button
# lazyload: The comment system will be load when comment element enters the browser's viewport.
# If you set it to true, the comment count will be invalid
lazyload: true
count: false # Display comment count in post's top_img
card_post_count: false # Display comment count in Home Page

# disqus
# https://disqus.com/
disqus:
shortname:
apikey: # For newest comments widget

# Alternative Disqus - Render comments with Disqus API
# DisqusJS 評論系統,可以實現在網路審查地區載入 Disqus 評論列表,兼容原版
# https://github.com/SukkaW/DisqusJS
disqusjs:
shortname:
apikey:
option:

# livere (來必力)
# https://www.livere.com/
livere:
uid:

# gitalk
# https://github.com/gitalk/gitalk
gitalk:
client_id: Ov23…………1C6fM
client_secret: 4304…………44433f77352
repo: z11r00.github.io
owner: z11r00
admin: z11r00
option:

# Analysis (第三方统计配置)
# --------------------------------------

# Baidu Analytics
# https://tongji.baidu.com/web/welcome/login
baidu_analytics: 74270…………………………………………

# Advertisement
# --------------------------------------

# Google Adsense (谷歌廣告)
google_adsense:
enable: false
auto_ads: true
js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
client:
enable_page_level_ads: true

# Verification (站長驗證)
# --------------------------------------

site_verification:
# - name: google-site-verification
# content: xxxxxx
# - name: baidu-site-verification
# content: xxxxxxx

创建菜单页面

页面包括标签页(tags)、分类页(categories)、友链页(link)、关于页(about),当然也可以自行添加,比如音乐电影之类。不过添加这种页面方式都大同小异,以下以标签页举例。

运行命令

1
hexo new page tags

编辑MD

运行命令后,会在source下根据butterfly模板生成对应的md文件,tags就是tags,不过要将md文件的type修改为对应的类型,类型见上。

1
2
3
title: 标签页
date: 2024-05-02 21:01:24
type: "tags"

image-20240601173015639

Page(页面)front-matter

1
2
3
4
5
6
7
8
title: 页面名称
date: 创建日期
type: (tags,link,categories这三个页面需要配置)
comments: (是否需要显示评论,默认true)
description: 用于SEO优化
top_img: (设置顶部图)
mathjax: (数学公式显示是否支持)
katex: (Tex公式显示是否支持)

创建文章

写文章,可以通过命令创建,也可以在source/_posts目录下,自行新建markedown文件,因为命令也是在_posts文件夹下新建。

运行命令

1
hexo new "文章的大标题"

Post(文章)front-matter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
title: CentOS7下Tomcat启动慢的原因及解决方案
date: 2017-12-02 21:01:24
description:文章描述,用于做SEO优化的
keywords: 文章SEO关键词
top_img: 文章顶部图
cover: 文章缩略图(封面图)
toc: true (是否显示文章目录)
toc_number: true (是否显示文章目录的标识数字)
copyright: true (是否显示版权)
mathjax: (数学公式显示是否支持)
katex: (Tex公式显示是否支持)
hide: false (是否隐藏当前文章)
comments: true #是否可评论
toc: true #是否显示文章目录
categories: "云服务器" #分类
tags: #标签
- centOS
- tomcat

站内搜索添加

站内搜索,我是采用的hexo-generator-search插件解决方案,安装完插件,然后配置一下,最后用hexo清理再生成一下全站静态,同时在根目录也会生成一个search.xml,用于做字符串模糊匹配的。

插件安装

1
npm install hexo-generator-search --save

添加或配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
-config(hexo配置)

search:
path: search.xml
field: post
format: html
limit: 10000

-butterfly-config(butterfly主题配置)

local_search:
enable: true
preload: false
CDN:

清理与生成

1
hexo clean && hexo g

image-20240601175004305

评论系统添加

第三方评论系统我这里使用的是Gitalk ,Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件。使用GitHub登陆,能支持多国语言,至于他的原理,其他博主有介绍。这里就不展开了,如果有时间以后可能会整体介绍一下常用的第三方评论系统,因为我还是希望评论能支持多种方式登陆的,目前没有找到合适的就先选择Gitalk。

注册应用账号

地址:https://github.com/settings/applications/new

1

获取参数

注册成功后拿到 “Client ID” 和 “Client secrets”(点击生成再复制),其中注意的是Homepage URL 要设置为 用户名.github.io精确到https的地址。Authorization callback URL 填写注册的域名,如果绑定了个性化域名就填自己的域名,也是要精确到https的位置。

2

修改Butterfly配置

打开butterfly主题的配置文件,第一个找到 “gitalk” 项,将上面复制的client id 和 client secrets粘贴。

第二个找到 “comments”,将use配置为 “gitalk”,当然也可以用valine、Disqus之类的第三方评论系统。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
comments:
use: # 使用的第三方评论系统名称
text: true # 是否在按钮旁显示评论名称
# If you set it to true, the comment count will be invalid
lazyload: false # 是否设置评论窗为懒加载
count: true # 是否设置评论数统计
card_post_count: true # 是否将评论数显示到首页

gitalk:
client_id: # github应用ID
client_secret: # github应用密钥
repo: 用户名.github.io
owner: 用户名
admin: 用户名

3

博客仓库设置

进入仓库,点击 “Settings”,找到 “Features”, 将 “Issues” 勾选。

4

文章置顶功能添加

打开hexo配置文件 _config.yml,如果前面有per_page的关闭,使用的是hexo-generator-index插件排序,可以自定义序号和日期排序。

如何要置顶文章,只需在文章md的front-matter里添加一个top参数,数值自定。文章列表会出现一个钉子图标,要看到效果则要hexo先清理再生成。

添加配置

1
2
3
4
5
6
index_generator:
path: ''
per_page: 5 # 每页条数
order_by:
top: -1 # 置顶: -1.倒序 1.顺序
date: -1 # 日期: -1.倒序 1.顺序

md文章设置

image-20240601193026538

清理与生成

1
hexo clean && hexo g

image-20240601192658429

RSS配置

对于RSS输出功能,需要安装 hexo-generator-feed 插件。最后使用hexo清理再生成,博客根目录就会生成atom.xml

插件安装

1
npm install hexo-generator-feed --save

添加配置

1
2
3
4
feed:
type: atom
path: atom.xml
limit: 20

设置RSS地址

1
rss: /atom.xml

设置404页面

在hexo的_config.yml找到或添加error_404,设置开启,分别添加标题和背景图。

1
2
3
4
error_404:
enable: true
subtitle: 'Page Not Found'
background: /img/404.jpg

image-20240601193726689

添加百度统计

先登陆或注册百度统计平台,找到 “使用设置” -> “代码获取” -> “新版统计代码获取”,然后会看到一段js代码,只需要复制如下的一个32位长度的字符串。最后将该字符串粘贴到butterfly的config.yml中的baidu_analytics中,部署后一天就可以在后台查看统计报表了。

image-20240601194438994

MarketDown用法

关于新建的文章,我希望本地能备份一份,有md文件和图片,方便上传到其他平台博客。那要怎么做呢,这里我用一个免费的md工具——Typora为例。

创建文件和文件夹

创建一个以文章标题的文件夹,里面再分别创建一img文件夹和同文章标题的md文件,img下再创建一个与文章标题同名的文件夹。

image-20240601194438994

Typora设置

依次找到 “文件” -> “偏好设置” -> “图像” , 将插入图片时的下拉选中 “复制到指定路径”,填入下面的值。

1
./img/${filename}/

image-20240601194438994

第二步找到 “格式” -> “图像” -> “设置图片根目录”,选择markdown文件同级的目录,最后复制图片时就会复制到img下的文章同名目录下。

image-20240601194438994

为什么要这样设置?因为Hexo的图片在打包前都是在主题包/source/img里,而为了方便本地能按文章存储,也方便将本地的文章图片直接丢到img下,然后md文件放到_post中。打包之后就能以仓库图片展示,而且按文章分类存储,以后删除起来也一目了然。

image-20240601194438994

写在最后

这次的优化看起来好像是面面俱到了,但其实关于Hexo主题还有更细节的处理。比如可以添加博客看板精灵,酷炫的动态大背景,还有鼠标跟随或点击特效等等。但是我这博客目前定位主要以内容为主,所以暂时就就演示了,当然,如果有用户喜欢也可以马上加上去的。

最后呢,就是三部曲的第二篇结束了,那下次就自然地要开始进入Hexo章最后一篇。现在是计划介绍一下怎么让博客被各大搜索引擎收录,以及一些推广心得等等。具体的详细内容未定,更新时间也还不知道,因为在等我那个小游戏的软著下来,下来后我一定要好好写一篇软著申请避坑的文章,可实在是太难等了!

(我是一个持续摸索个人副业的普通程序员,关注我,和你一起探索更多可能。——ZERO开发)

谈后端人眼里的nvm、yarn、pnpm……

前言

虽然我是做后端的,但也时常关注前端,只是最近觉得前端的各种工具名称太眼花缭乱了,nvm、yarn、pnpm、taro……

不要说具体使用,就连他们到底是工具还是新框架我都搞混。所以,我就用一篇文章简要记录他们到底是什么,怎么区别以及简易的搭建过程。

nvm

nvm(Node Version Manager),顾名思义,他是Node.js的版本管理工具。主要用来在单个操作系统下安装或管理多版本Node,常用于解决项目中不同版本依赖问题。

下载

github搜作者coreybutler,项目nvm-windows。

img

安装

安装前如果电脑已经有了Node.js,最好卸载以防后面冲突。然后点击exe文件下一步下一步完成后,nvm会自动在电脑的用户变量中添加NVM_HOME和NVM_SYMLINK,最后cmd输入nvm -v,显示nvm版本号表示已经成功。

img

使用

1
2
3
4
nvm install 6.2.0     安装指定版本
nvm uninstall 6.2.0 卸载指定版本
nvm list 查看安装列表
nvm use 6.2.0 使用指定版本

img

pnpm

pnpm(Performant npm),是一个快速、磁盘空间友好的包管理工具,和npm类似,可以简单理解为npm的优化加强版,适合于较大的前端项目,具体的特征可以看其他博主的介绍。因为npm是Node自带,所以有Node即可有pnpm。

下载安装

npm install pnpm -g

使用

1
2
3
4
5
pnpm install 包  // 
pnpm i 包
pnpm add 包 // -S 默认写入dependencies
pnpm add -D // -D devDependencies
pnpm add -g // 全局安装

yarn

yarn 是 Facebook 开发的一个 JavaScript 包管理工具,yarn 使用与 npm 不同的锁定文件格式,但是仍然可以兼容 npm 的包管理规范。

下载安装

npm install -g yarn

使用

1
2
3
4
yarn --version // 查看版本
yarn init // 同npm init,执行输入信息后,会生成package.json文件
yarn install // 安装package.json里所有包,并将包及它的所有依赖项保存进yarn.lock
yarn run // 用来执行在 package.json 中 scripts 属性下定义的脚本

写在后面

写这篇文章的最主要原因,其实还是因为平时独立开发中的项目有用到。比如,我放在独立博客里的在线工具(各种集成编程小工具),和项目中心(带摸鱼小游戏)都有使用pnpm和yarn,大家感兴趣的话可以看看。

img

❌