郭减

前端开发工程师,前端爱好者

您可以通过以下步骤使用礼品卡开通ChatGPT4。

最后有全程的操作图

准备工作

  1. 科学上网,手机也要科学上网
  2. 美区的appleID

  1. 首先,您需要一个美国区的Apple ID。如果您没有,请先注册一个美国区的Apple ID。。

  2. 您需要一张美国区的礼品卡。您可以在苹果官网购买礼品卡,或者在支付宝购买礼品卡。选择电子邮件方式发送礼品卡,然后输入礼品卡金额(ChatGPT 一个月 $19.9),并填写发卡人和收卡人信息。请注意,您需要使用Google邮箱接收礼品卡号码,因为国内邮箱有可能会收不到礼品卡的兑换码。

  3. 充值礼品卡。您可以将礼品卡充值到您的美国区Apple ID上。具体步骤如下:

    • 打开App Store,点击头像,进入个人中心。
    • 选择兑换充值卡或代码。
    • 手动输入礼品卡的代码。
    • 点击兑换,完成充值。
  4. 订阅ChatGPT4。您可以在美国的App Store搜索ChatGPT,下载并打开软件,然后订阅升级即可。

操作流程图

  1. 首先在手机上科学上网之后,在Apple store里面切换账号为你的美区账号
  2. 打开支付宝切换地区为美国的一个地区,休斯顿,纽约等,然后找到下面的大牌礼卡,点进去
  3. 找到美区App Store,点击去购买
  4. 输入你需要购买的金额,这里填写的是美刀,不是人民币,所以填写20就行(可以看到下面写的是ChatGPT之类的)
  5. 选择使用支付宝付款就行
  6. 附上一个我10月底购买的截图
  7. 然后再App Store里面可以看到账户余额有20刀
  8. 在GPT里面点击购买即可

操作流程图

操作流程图

操作流程图

操作流程图

操作流程图

操作流程图

操作流程图

操作流程图

请注意,以上步骤仅供参考,具体操作可能会因地区、时间等因素而有所不同。如果您遇到任何问题,请随时联系我。祝您使用愉快!

说明:众所周知,我们在新起一个项目的时候,都是要添加路由,和创建对应的文件夹,子文件夹,index.jsx文件的,如果菜单少倒还好,如果菜单比较多,每次的复制黏贴,复制黏贴,复制黏贴,消耗大量的时间,人力,物力,最最重要的事情是!!!影响我们开发人员的心情,让我觉得我就是个无脑工具人,这种简单,无脑,但又不能搞错的工作,真的是很令人生气,在极大的程度上消耗我们的耐心

所以,简单写个小工具来做这件事情吧

参考地址: 源文件地址
文档地址: GitHub文档地址 博客文档地址

项目生成脚本

这是一个用于生成 React 项目结构的脚本。脚本会根据给定的菜单配置生成文件夹和文件,每个文件夹包含一个基本的 React 组件。

效果图如下

配置文件如下

如何使用

  1. 运行脚本

    执行以下命令:

    1
    node index.js

    这将根据 MENU_CONFIG 数据生成项目结构。

菜单配置

1
2
3
4
// 在 generateFiles.js 中的 MENU_CONFIG 数据
const MENU_CONFIG = [
// ... 你的菜单配置
];

文件结构

生成的文件结构如下:

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
- SystemConfig
- SystemInfo
- index.jsx
- WhiteList
- index.jsx
- DeviceManage
- SystemCommand
- index.jsx
- TimeSetting
- index.jsx
- NetworkConfig
- index.jsx
- DoubleHotBackup
- index.jsx
- DeviceCertificate
- index.jsx
- SystemMaintenance
- KeyBackUpAndRestore
- index.jsx
- RestoreAndUpgrade
- index.jsx
- AdminManage
- AdminList
- index.jsx
- AdminStrategy
- index.jsx
- SystemMonitor
- OnlineUser
- index.jsx
- ScheduledTask
- index.jsx
- DeviceMonitor
- index.jsx
- MonitorThreshold
- index.jsx
- About
- LicenseInfo
- index.jsx

注意事项

  • 请确保在运行脚本之前备份任何重要数据,因为脚本会覆盖已存在的文件夹和文件。
  • 你可以根据需要调整生成的组件代码和文件夹结构。
  • 若要使用 ES6 模块语法,请确保正确配置 Babel,可以参考 Babel 文档进行配置。
  • 目前只支持二级菜单配置项的生成,只有一级菜单暂不支持,有三级菜单也不支持,原因:暂时没需求,懒得搞,可自行更改就行

示例代码

以下是生成的每个组件的简单示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// SystemInfo/index.jsx
import React from 'react';
import { Button } from 'antd';

const SystemInfo = () => {
return (
<div>
<h1> SystemInfo </h1>
<Button type="primary">Primary Button</Button>
</div>
);
};

export default SystemInfo;

你可以在每个组件的 index.jsx 中添加具体的页面内容。

最后附上源码地址

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
const fs = require('fs');

// 测试数据
const MENU_CONFIG = [

{
name: '系统配置',
route: '/',
key: '/systemConfig',
subMenu: [
{
name: '系统信息',
route: '/systemInfo',
key: '/systemInfo',
},
{
name: '白名单管理',
route: '/whiteList',
key: '/whiteList',
},
]
},
// 设备管理
{
name: '设备管理',
route: '/',
key: '/deviceManage',
subMenu: [
{
name: '系统命令',
route: '/systemCommand',
key: '/systemCommand',
},
{
name: '时间设置',
route: '/timeSetting',
key: '/timeSetting',
},
{
name: '网络配置',
route: '/networkConfig',
key: '/networkConfig',
},
{
name: '双机热备',
route: '/doubleHotBackup',
key: '/doubleHotBackup',
},
{
name: '设备证书',
route: '/deviceCertificate',
key: '/deviceCertificate',
},
]
},
// 系统维护
{
name: '系统维护',
route: '/',
key: '/systemMaintenance',
subMenu: [
{
name: '备份&恢复',
route: '/keyBackUpAndRestore',
key: '/keyBackUpAndRestore',
},
{
name: '还原&升级',
route: '/restoreAndUpgrade',
key: '/restoreAndUpgrade',
},
]
},
// 管理员管理
{
name: '管理员管理',
route: '/',
key: '/adminManage',
subMenu: [
{
name: '管理员列表',
route: '/adminList',
key: '/adminList',
},
{
name: '管理员策略',
route: '/adminStrategy',
key: '/adminStrategy',
},
]
},
// 系统监控
{
name: '系统监控',
route: '/',
key: '/systemMonitor',
subMenu: [
{
name: '在线用户',
route: '/onlineUser',
key: '/onlineUser',
},
{
name: '定时任务',
route: '/scheduledTask',
key: '/scheduledTask',
},
{
name: '设备监控',
route: '/deviceMonitor',
key: '/deviceMonitor',
},
{
name: '监控阈值',
route: '/monitorThreshold',
key: '/monitorThreshold',
},
]
},
// 关于
{
name: '关于',
route: '/',
key: '/about',
subMenu: [
{
name: '授权信息',
route: '/licenseInfo',
key: '/licenseInfo',
},
]
}
]

function generateComponentCode(name, key) {
return `
import React from 'react';
import { Button } from 'antd';

const ${key.charAt(1).toUpperCase() + key.slice(2)} = () => {
return (
<div>
<h1> ${name} </h1>
{/* 这里可以写你的具体页面内容 */}
<Button type="primary">Primary Button</Button>
</div>
);
};

export default ${key.charAt(1).toUpperCase() + key.slice(2)};
`;
}


MENU_CONFIG.forEach(({ name, key, subMenu }) => {
// 生成主文件夹
fs.mkdirSync(`./${key.charAt(1).toUpperCase() + key.slice(2)}`, { recursive: true });
console.log(`创建文件夹: ./${key.charAt(1).toUpperCase() + key.slice(2)}`);

// 生成子文件夹
subMenu.forEach(({ name: subName, key: subKey }) => {
fs.mkdirSync(`./${key.charAt(1).toUpperCase() + key.slice(2)}/${subKey.charAt(1).toUpperCase() + subKey.slice(2)}`, { recursive: true });
console.log(`创建子文件夹: ./${key.charAt(1).toUpperCase() + key.slice(2)}/${subKey.charAt(1).toUpperCase() + subKey.slice(2)}`);

// 生成文件
const code = generateComponentCode(subName, subKey);
fs.writeFileSync(`./${key.charAt(1).toUpperCase() + key.slice(2)}/${subKey.charAt(1).toUpperCase() + subKey.slice(2)}/index.jsx`, code);
console.log(`创建index.jsx文件: ./${key.charAt(1).toUpperCase() + key.slice(2)}/${subKey.charAt(1).toUpperCase() + subKey.slice(2)}/index.jsx`);
});
});


该文章主要讲述了 hexo 的yml配置,包含每个字段的解释和作用,帮助你快速上手和配置hexo的各项信息和功能。

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
# Hexo 配置
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# 站点
title: 郭减
subtitle: '前端开发工程师,前端爱好者'
description: '前端开发工程师, 前端爱好者, 前端博客,javascript, nodejs, react, html, css, python, git,hexo, next'
keywords:
author: 郭减
language: zh-CN
timezone: ''

search:
path: search.xml
field: post
format: html
limit: 10000
local_search:
enable: true
# URL
## 在这里设置你的站点. 比如, 如果你使用 GitHub Page,设置 url 为 https://iprogramme.github.io/MyBlog/ 其中 iprogramme 是 username,MyBlog 是你的博客地址。
url: https://iprogramme.github.io/MyBlog/
root: /MyBlog/
# 永久链接格式,如果不填,则默认的是: :year/:month/:day/:title/
# 我这里使用了 abbrlink 插件,作用在于生成文章的永久链接,避免在更改文章标题时,SEO没有和评论全部消失等情况。
permalink: posts/:abbrlink.html
# 缩略链接配置
abbrlink:
alg: crc32 # 算法:crc16(default) 和 crc32
rep: hex # 进制:dec(default) 和 hex
# 永久链接默认格式
permalink_defaults: posts/:abbrlink.html
# 美化链接设置
pretty_urls:
trailing_index: false # 设置为 false 以从永久链接中移除结尾的 'index.html'
trailing_html: false # 设置为 false 以从永久链接中移除结尾的 '.html'

# 目录设置
source_dir: source # 源文件目录
public_dir: MyBlog # 公共输出目录
tag_dir: tags # 标签页目录
archive_dir: archives # 存档目录
category_dir: categories # 分类目录
code_dir: downloads/code # 代码目录
i18n_dir: :lang # 国际化目录
skip_render: # 跳过渲染的文件列表

# 写作设置
new_post_name: :title.md # 新文章的文件名格式
default_layout: post # 默认布局
titlecase: false # 将标题转换为 titlecase
external_link:
enable: true # 在新标签页中打开外部链接
field: site # 应用于整个站点
exclude: '' # 排除的链接字段
filename_case: 0 # 文件名大小写(0: 不变, 1: 小写, 2: 大写)
render_drafts: false # 渲染草稿
post_asset_folder: true # 启用文章资源文件夹
marked:
prependRoot: true # 将相对链接转换为绝对链接
postAsset: true # 允许在文章中嵌套文件
relative_link: false # 使用相对链接
future: true # 渲染未来的文章
highlight:
enable: true # 启用代码高亮
line_number: true # 显示行号
auto_detect: false # 自动检测代码语言
tab_replace: '' # 替换制表符的字符串
wrap: true # 是否包裹代码块
hljs: false # 使用 hljs 替代默认高亮引擎
prismjs:
enable: false # 启用 Prism.js
preprocess: true # 在渲染之前处理代码块
line_number: true # 显示行号
tab_replace: '' # 替换制表符的字符串
# 首页设置
index_generator:
path: '' # 博客首页的根路径(默认 = '')
per_page: 10 # 每页显示的文章数量(0 = 禁用分页)
order_by: -date # 文章排序方式(默认按日期降序排列)

# 分类与标签
default_category: uncategorized # 默认分类
category_map: # 分类映射
tag_map: # 标签映射

# Metadata 元素
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true # 自动生成 meta 标签

# 日期/时间格式
## Hexo 使用 Moment.js 解析和显示日期
## 你可以根据 http://momentjs.com/docs/#/displaying/format/ 定制日期格式
date_format: YYYY-MM-DD # 日期格式
time_format: HH:mm:ss # 时间格式
updated_option: 'mtime' # 文章更新时间选项('mtime', 'date', 'empty')

# 分页
## 将 per_page 设置为 0 以禁用分页
per_page: 10
pagination_dir: page

# 包含/排除文件
## include:/exclude: 选项仅适用于 'source/' 文件夹
include: # 包含的文件列表
exclude: # 排除的文件列表
ignore: # 忽略的文件列表

# 扩展
## 插件: https://hexo.io/plugins/
## 主题: https://hexo.io/themes/
theme: next # 使用的主题

# 部署
## 文档: https://hexo.io/docs/one-command-deployment
deploy:
type: git # 部署类型
repo: git@github.com:iProgramme/MyBlog.git # 仓库地址
branch: gh-pages # 部署的分支

今年以来,人工智能领域热火朝天,国内各大厂商陆续推出大模型和对应的AI聊天机器人。本文介绍了国内目前最流行和常用的9个免费的AI聊天机器人,这些AI对话助手都已经通过了生成式人工智能备案,可以直接使用。总的看来,国内的这些大模型助手,普遍在于擅长文本,但图像作画方面一般,数理逻辑能力相对较弱。除介绍其主要功能外,本文还站在个人用户体验上陈列了相关产品的优缺点,读者可以根据自己的需要选择适合的聊天机器人。

表格

AI聊天机器人 推荐语
文心一言 百度出品,国内最先推出的大模型助手,支持联网实时获取信息
讯飞星火 科大讯飞出品,支持语音输入提问和语音朗读回复
智谱AI 智谱AI出品,支持网页、Windows、macOS、iOS和Android
通义千问 阿里云出品,通义家族成员,办公好助手
豆包 字节跳动出品,支持抖音和今日头条内容信息获取
腾讯混元助手 腾讯出品,具备强大的中文创作和逻辑推理能力
紫东太初 中科院和武智院出品,支持文本、图像、视频、3D、音频全模态能力
百川大模型 原搜狗CEO王小川公司百川智能出品,开源大模型中的佼佼者
Kimi Chat Moonshot(月之暗面)出品,支持20万汉字的上下文长度

文心一言

是国内的搜索引擎公司百度推出的人工智能聊天机器人,英文名是ERNIE Bot,基于百度自研的知识增强大语言模型——文心大模型。该AI聊天助手能够与人对话互动、回答问题、协助创作,高效便捷地帮助人们获取信息、知识和灵感。比如回答问题,提供定义和解释及建议,也可以辅助人类进行创作产生新的内容,如文本生成与创作、文本改写等。

主要功能

表格

功能名称 功能描述
回答问题 根据用户的问题,提供相关的信息和答案
文本创作 生成各种类型的文本,包括文案、诗歌、小说、新闻、电子邮件等
知识推理 进行逻辑推理、常识推理、数学推理等
自然语言理解 理解用户的自然语言意图,提供相应的服务和内容
聊天交流 与用户进行自然语言聊天,提供帮助、解答问题和提供信息
生成图片 根据用户的文字描述,生成符合要求的图片或画作
文本创作 生成各种类型的文本,包括文案、诗歌、小说、新闻、电子邮件等
文本创作 生成各种类型的文本,包括文案、诗歌、小说、新闻、电子邮件等
文本创作 生成各种类型的文本,包括文案、诗歌、小说、新闻、电子邮件等

翻译
将用户输入的文本翻译成多种语言,实现跨语言交流
智能推荐
根据用户的需求和兴趣,推荐相关的内容和资源
情感分析
分析用户的情感和情绪,提供相应的帮助和支持
文本纠错
帮助用户修改和纠正文本中的错误和瑕疵
文字生成语音
将用户输入的文本转换成语音,实现语音交互
文档生成
根据用户的需求和模板,生成各种类型的文档,如简历、报告、合同等
代码生成
根据用户的需求和语言,生成相应的代码
语音识别
将用户的语音转换成文字,实现语音文字的交互
与用户进行多种形式的人机交互,如语音交互、图像交互、手势交互等

文心一言优点

  • ✅ 国内最先推出的大模型聊天机器人,持续版本迭代和优化
  • ✅ 基于文心大模型3.5版本是完全免费使用的
  • ✅ 提供网页端、iOS、Android移动端使用
  • ✅ 内置一言百宝箱,提供海量的提示指令模板
  • ✅ 支持实时联网,可以随时获取最新的信息
  • ✅ 支持将生成的内容以Markdown格式复制
  • ✅ 配合插件使用,可进行图片、文档、图表和商业信息的查询
  • ✅ 移动端APP还提供虚拟角色和语音输入等功能

文心一言缺点

  • ⛔ 使用最新的文心大模型4.0需要付费,不过为了覆盖高昂的运算成本,也可以理解
  • ⛔ 语意理解能力还需进一步提高,有时候可能会误解用户的意图,或者无法处理一些复杂的语言表达
  • ⛔ 对话生成能力也需要不断提高,有时候可能会生成一些重复、无意义或者不符合语法规则的文本

讯飞星火

是基于科大讯飞自研的讯飞星火认知大模型的AI对话工具,可以和人类进行自然交流,为用户提供包括语言理解、问答、推理等各类认知智能服务,高效完成各领域认知智能需求。讯飞星火可以与用户进行自然的对话互动,同时提供内容回复、语言理解、知识问答、推理、多题型步骤级数学和代码理解与编写等能力。

讯飞星火优点

  • ✅ 支持文字、图像、语音输入进行对话
  • ✅ 支持将回答的内容直接以语音朗读,并可以选择发音
  • ✅ 提供网页端、iOS、Android移动端使用
  • ✅ 内置助手中心,提供丰富多样的提示指令
  • ✅ 提供友伴功能,内置海量的虚拟角色
  • ✅ 提供插件功能,可生成PPT、简历、邮件、流程图等

讯飞星火缺点

  • ⛔ 语意理解能力尚有不足,尤其是使用第二人称向其提问
  • ⛔ 回复和响应有时可能不够准确或详细
  • ⛔ 虽然信息会定期更新,但不支持实时获取最新信息

智谱清言

是由人工智能公司智谱AI推出的基于千亿参数的 ChatGLM2 大模型开发的免费AI聊天软件,支持多轮对话,具备内容创作、信息归纳总结等能力。智谱清言作为用户的智能助手,可在工作、学习和日常生活中为用户解答各类问题,完成各种任务。目前,智谱清言已具备“通用问答、多轮对话、创意写作、代码生成以及虚拟对话”等丰富能力,未来还将开放多模态等生成能力。

智谱清言优点

  • ✅ 提供网页端、Windows、macOS、iOS和Android端使用
  • ✅ 内置灵感大全,提供多种场景开箱即用的提示指令
  • ✅ 文档解读助手,支持文档提问、文档总结、文档翻译
  • ✅ 提供代码沙盒,可直接在安全可靠的沙盒环境中生成和执行代码
  • ✅ 支持图片输入和生成,移动端还支持语音输入

智谱清言缺点

  • ⛔ 知识更新时效性有限,训练数据有截止时间,无法回答一些最新的问题,也无法实时获取信息
  • ⛔ 语境理解有限,可能会在一些复杂或模糊的问题上产生误解
  • ⛔ 数学能力还有待提高,虽然在一定程度上可以解决各种基础数学问题,但在复杂和高等数学问题上能力有限

通义千问

是阿里云推出的一款免费的AI聊天机器人和对话工具,基于阿里云自主研发的超大规模语言模型「通义大模型」,旨在以友好、有帮助和理解的方式与用户交流。该AI助手能够理解自然语言输入,进行复杂的搜索查询,包括但不限于提供信息、解答问题、创作文字、表达观点、撰写代码等,甚至还可以执行一些基本的任务自动化。

通义千问优点

  • ✅ 内置百宝袋,提供趣味生活、创意文案、办公助理、学习助手等提示指令
  • ✅ 提供网页端、iOS、Android移动端使用
  • ✅ 除文本回答外,还支持图片理解、文档解析
  • ✅ 移动端APP支持语音输入

通义千问缺点

  • ⛔ 不支持实时更新信息,无法获取最近日期的时效性内容
  • ⛔ 回复的答案有时可能会犯错误或遗漏一些重要的信息
  • ⛔ 相比而言,内置的直接可用的提示指令数量还有待丰富

豆包

是由字节跳动公司开发的免费人工智能助手,基于抖音的云雀大模型,可以与用户进行自然语言对话,并回答相关问题。豆包的主要功能包括回答问题、提供信息、解决问题、进行对话、多语言支持和个性化服务等,可应对用户在工作、学习和生活上常见的问题和场景。

主要功能:豆包目前提供四个不同的AI聊天机器人

  1. 豆包。豆包的主要功能是回答用户的问题,提供有用的信息和帮助。其训练数据来自互联网上的大量文本,包括新闻、博客、小说、论文等。通过对这些数据的学习和分析,豆包可以理解自然语言并回答各种问题,包括历史、科学、技术、文化、娱乐等方面的问题。
  2. 超爱聊天的小宁。小宁同样是是由字节跳动开发的人工智能,和豆包是两个不同的团队开发的。虽然他们的功能和应用场景可能会有所不同,但都致力于为用户提供高质量的服务和体验。
  3. 英语学习助手。AI 英语学习助理,可以和用户一起练习英语,如学习日常生活中常见的英语短语、英语俚语、使用英语扮演一个客户服务场景。
  4. 全能写作助手。文案创作助手,可以进行如歌词、诗歌、餐厅评价、代码示例的生成和撰写。

豆包优点

  • ✅ 提供网页端、iOS、Android移动端使用
  • ✅ 内置多个AI智能体,并支持创建自定义智能体
  • ✅ 移动端APP支持语音输入和朗读
  • ✅ 对抖音和头条上的内容相关信息支持更好
  • ✅ 支持获取实时信息和新闻报道

豆包缺点

  • ⛔ 理解和生成能力还存在一些限制和不足,例如对某些语言结构和语义的理解可能不够准确
  • ⛔ 知识储备还有待进一步提高,基于其训练数据和算法,可能存在一些不全面或不准确的情况
  • ⛔ 目前更擅长于文本交互,对于多模态交互(例如语音、图像、视频等)的支持还需要进一步提高

腾讯混元助手

是由腾讯公司推出的基于超千亿参数规模训练的「腾讯混元大模型」人工智能对话助手,具有强大的中文理解与创作能力、逻辑推理能力,以及可靠的任务执行能力。该AI聊天工具备丰富的专业领域知识,可帮助用户解答疑问、提供有用的信息和建议,涵盖文本创作、工作计划、数学计算和聊天对话等领域。

主要功能

  1. 产品功能
    1. 多轮对话。具备上下文理解和长文记忆能力,流畅完成各专业领域的多轮问答;
    2. 内容创作。支持文学创作、文本摘要、角色扮演能力,流畅、规范、中立、客观;
    3. 逻辑推理。准确理解用户意图,基于输入数据或信息进行推理、分析;
    4. 知识增强。有效解决事实性、时效性问题,提升内容生成效果;
    5. 多模态。支持文字生成图像能力,输入指令即可将奇思妙想变成图画。
  2. 应用场景
    1. 文档场景。可提供文档创作、文本润色、文本校阅、表格公式及图表生成等能力,提高创作效率,提升创作体验;
    2. 会议场景。可提供会中问答、会议总结、会议待办项整理等能力,简化会议操作并提高会议效率;
    3. 广告场景。可提供智能化的广告素材创作,提供AI多模态生成能力,提升营销内容创作工作效率;
    4. 营销场景。构建智能导购,帮助商家提升服务质量和服务效率。

腾讯混元助手优点

  • ✅ 提供网页端和微信小程序使用
  • ✅ 内置灵感发现,提供开箱即用的提示指令库

腾讯混元助手缺点

  • ⛔ 目前尚未面向个人用户推出移动端APP
  • ⛔ 提示指令库相比还不够丰富,期待不断扩充
  • ⛔ 每个会话页面限制对话20轮,若超过20次,将提示用户开始新会话

紫东太初

是由中科院自动化所和武汉人工智能研究院联合推出的一个全模态大模型,它是在千亿参数多模态大模型“紫东太初1.0”基础上升级打造的2.0版本。紫东太初大模型支持多轮问答、文本创作、图像生成、3D理解、信号分析等全面问答任务,具有强大的认知、理解、创作能力,能够带来全新的互动体验。

主要功能

  1. 图像能力
    1. 图像描述:基于用户上传的图片素材,准确理解并回答图片识别类问题
    2. 目标检测:支持丰富品类的目标检测任务,能够判定目标类型、数量和对应的位置信息
    3. 图像检索:基于海量的高质图片素材库,能为用户搜索出关联度高的精致图片素材
    4. 图像生成:针对用户指令诉求,生成对应的精致图片,并可以修改描述微调图片内容
    5. 文字识别:基于图片内容,支持多场景、多语种、高精度的文字检测与识别服务
  2. 语言能力
    1. 中文问答:准确理解用户输入的问题语境,并能做出准确的知识性问答
    2. 文本续写:基于用户输入的故事引导自动续写丰富故事内容
    3. 文本创作:准确理解用户输入意图,并生成语意连贯、逻辑通顺的文本内容
    4. 标题生成:基于对文章或者长文本的理解,快速聚合生成精简且概括的标题文案
    5. 语法分析:准确理解并分析中英文句子的语法,提醒语法错误并修改等
    6. 机器翻译:帮助用户翻译各类型文本素材,包括中英文互译、文言文和白话文互译等
    7. 古诗创作:基于用户给到的主题或引导内容即兴创作诗歌、绝句等
    8. 代码理解:理解C语言、Python、JAVA等绝大部分编程语言、算法和数据结构,快速给出所需的解答
    9. 代码编写:能帮助用户快速编写简单的代码片段,例如函数、类或循环等
    10. 数学计算:既能处理常规数学计算问题,也能处理如《孙子算经》上记录的鸡兔同笼数学应用问题等
    11. 逻辑推理:支持处理复杂的逻辑推理类问题,包括科学推理、常识推理、时空推理等
  3. 视频能力
    1. 视频描述:基于用户上传的视频素材,准确理解并回答视频识别、视频描述类问题
    2. 视频检索:基于海量的高质视频素材库,能为用户搜索出关联度高的精致视频素材
    3. 视频问答:基于用户上传的视频素材,准确理解并回答视频相关的问题,同时支持上下文信息理解和多轮问答
  4. 音乐/音频能力
    1. 音乐生成:通过给定的文本提示可控生成高保真的音乐,并支持即兴创作多种风格类型和多种乐器演奏的音乐
    2. 音乐多模问答:基于对用户上传的音乐素材的理解,可完成相关多模态问答任务
    3. 音频鉴伪:紫东太初能判断当前音频是真人说话还是机器合成
    4. 音频事件分类:可检测当前音频中所包含的声音事件类型,目前支持11种单一声音事件和混合声音事件
    5. 语音识别:可将语音快速准确识别为文字,支持手机应用语音交互、语音内容分析多个场景
    6. 语音合成:提供高度拟人、流畅自然的语音合成服务,满足文本阅读、语音播报等各类型场景需求
  5. 3D能力
    1. 3D场景描述:紫东太初2.0具备基于点云数据的3D场景理解和物体感知能力
  6. 信号类能力
    1. 信号识别:支持雷达信号鉴别与知识交互,可借助模型快速掌握信号基本来源及参数等

紫东太初优点

  • ✅ 支持全模态,包括文本、图像、视频、3D、音频音乐和信号等
  • ✅ 内置指令助手,提供丰富的预置提示指令
  • ✅ 提供网页版和微信小程序使用

紫东太初缺点

  • ⛔ 目前尚未推出移动端APP
  • ⛔ 指令助手提供的提示指令还有待进一步丰富

百川大模型

是由原搜狗CEO王小川成立的大模型公司百川智能推出的大语言模型,融合了意图理解、信息检索以及强化学习技术,在知识问答、文本创作领域表现突出,可以和人类进行自然交流、解答问题、协助创作,帮助大众轻松、普惠的获得世界知识和专业服务。

主要功能

  1. 自然交流:理解用户问题,并提供相应的回答。像与真人聊天一样与其沟通,无需担心语言障碍。
  2. 解答问题:无论是常识性的问题还是专业领域的问题,都可以为你提供准确的信息和答案。
  3. 协助创作:可以帮助你撰写文章、创作诗歌、编写故事等,激发你的创意灵感。
  4. 知识百科:掌握大量的科学、文化、艺术等领域的知识,可以为你提供丰富的信息和深入的见解。
  5. 个性化推荐:根据你的兴趣和需求,可以为你推荐相关的内容、产品和服务。
  6. 教育辅导:可以帮助你学习新知识,解答你在学习过程中遇到的问题,提高你的学习效果。
  7. 生活助手:可以帮助你管理日常生活中的琐事,提醒你的重要事项,让你的生活更加有序。

以上只是部分功能,实际上还有更多能力,等待你来发现和体验。

百川大模型优点

  • ✅ 处于开源大模型中的第一梯队
  • ✅ 最新的 Baichuan2-192K 长窗口大模型支持处理约 35 万个汉字

百川大模型缺点

  • ⛔ 不支持实时获取最新信息
  • ⛔ 更加面向商业用户,网页在线体验版并没有提供很多个性化功能
  • ⛔ 仅提供网页体验版和API文档接入,暂未推出APP版

Kimi Chat

是国内人工智能初创公司Moonshot AI(月之暗面)推出的智能对话助手,支持输入长达20万汉字的上下文。Kimi Chat擅长中文和英文的对话,可以帮助用户解决各类生活和工作中的问题、提供实用的信息和参考建议,主要的功能包括:问题回答、提供建议、语言翻译、知识查询、解决计算和数学问题、日程安排和提醒、网址和文件阅读。

主要功能

  1. 回答问题:回答各种问题,包括日常生活、科技、教育、娱乐等领域的问题
  2. 提供建议:提供关于各种主题的建议,例如旅行、购物、饮食等
  3. 语言翻译:翻译中文和英文之间的文本
  4. 知识查询:提供有关历史、地理、科学等主题的知识
  5. 计算和数学问题:解决数学问题,例如计算、单位换算等
  6. 日程安排和提醒:安排日程、设置提醒和提醒您即将到来的事件
  7. 网址和文件阅读:用户可以发送网址或文件,AI会阅读相关内容并回复问题

Kimi Chat优点

  • ✅ 上下文长度高,支持输入长达20万汉字
  • ✅ 支持上传 pdf、doc、xlsx、ppt、txt 等格式的文件进行阅读
  • ✅ 支持网址阅览,可从网页内容中提取相关信息来回答用户问题

Kimi Chat缺点

  • ⛔ 目前仅提供网页版使用
  • ⛔ 未提供内置提示指令模板
  • ⛔ 知识截止日期到2023年04月,时效性有待提高

以上便是AI工具集测试后为大家整理的国内热门且免费的AI聊天机器人,可以看到每个公司推出的AI助手都有其更擅长的地方:如果你更偏向于时效性信息检索和问答,那么文心一言更适合;如果你常用语音进行交流,那么讯飞星火更推荐;若你是抖音短视频和今日头条的重度用户,那么字节跳动的豆包是个不错的选择;如果你要处理长文档,Kimi Chat和百川大模型则支持更长的上下文。

以下文件内容全部是我自己翻译的,原文地址为:https://iprogramme.github.io/MyBlog/

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
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
# ---------------------------------------------------------------
# 主题核心配置设置
# See: https://theme-next.org/docs/theme-settings/
# ---------------------------------------------------------------

# 如果为false,则将“_data/next.yml”中的配置合并到默认配置中(重写)。
# 如果为true,将通过`_data/next.yml`中的选项完全覆盖默认配置(重写)。仅适用于NexT设置。
# 如果为true,则默认NexT `_config.yml`中的所有配置都必须复制到`NexT.yml'中。如果您知道自己在做什么,请使用。
# 如果您想在不编辑默认配置的情况下,通过`NexT.yml`注释NexT `_config.yml'中的一些选项,这将非常有用。
override: false

# 控制台提醒(如果发布了新版本)。
reminder: false

# 允许缓存内容生成。在NexT v6.0.0中引入。
cache:
enable: true

# 在hexo generate 后删除不必要的文件。
minify: false

# 定义自定义文件路径。
# 在站点目录“source/_data”中创建自定义文件,并在下面取消对所需文件的注释。
custom_file_path:
#head: source/_data/head.swig
#header: source/_data/header.swig
#sidebar: source/_data/sidebar.swig
#postMeta: source/_data/post-meta.swig
#postBodyEnd: source/_data/post-body-end.swig
#footer: source/_data/footer.swig
#bodyEnd: source/_data/body-end.swig
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl


# ---------------------------------------------------------------
# 站点信息设置
# See: https://theme-next.org/docs/getting-started/
# ---------------------------------------------------------------

favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml

# 在页脚中显示多语言切换器
language_switcher: false

footer:
# 指定网站的设置日期。如果未定义,则使用当前年份
since: 2018

# 年份和版权信息之间的图标。
icon:
# Icon名称来自 Font Awesome. See: https://fontawesome.com/icons
name: fa fa-heart
# 如果要设置图标的动画,请将其设置为true
animated: true
# 使用十六进制代码更改图标的颜色。
color: "#ff0000"

# 由Hexo和NexT提供动力
copyright:

# 由Hexo和NexT提供动力
powered: false

# 中国用户的备案 ICP 和公安信息。 See: https://beian.miit.gov.cn, http://www.beian.gov.cn
beian:
enable: true
icp: zheshisha
# 公安备案的数字部分。
gongan_id: 123
# 公安备案的完整编号。
gongan_num: 456
# 公安备案的图标。 See: http://www.beian.gov.cn/portal/download
gongan_icon_url: http://www.beian.gov.cn/portal/download

# 知识共享4.0国际许可。
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# license 的可用值: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# 如果您更喜欢 CC 许可证的翻译版本,可以设置 language 值,例如 deed.zh
# CC 许可证提供 39 种语言,您可以在 https://creativecommons.org 找到您需要的特定和正确的缩写。
creative_commons:
license: by-nc-sa
sidebar: false
post: false
language:


# ---------------------------------------------------------------
# 主题方案配置
# ---------------------------------------------------------------

# Schemes
# scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

# 黑暗模式
darkmode: false


# ---------------------------------------------------------------
# 菜单设置
# see: 此文章所有翻译来自郭减
# 更多信息:https://github.com/iProgramme/MyBlog
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# key是菜单项的名称。如果此项目的翻译可用,则将加载翻译后的文本,否则将使用key名称。key名称区分大小写。(指的是比如 about,中文下翻译的为 关于)
# 分隔符“||”之前的值是目标链接,分隔符“||”之后的值是Font Awesome icon的名称。
# 当在子目录中运行站点时(例如,yoursite.com/blog),请从链接值中删除前导斜杠(/archives -> archives)。
# 外部 url 应以 http:// 或 https:// 开头
menu:
home: / || fa fa-home
about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
#schedule: /schedule/ || fa fa-calendar
# sitemap: /sitemap.xml || fa fa-sitemap
# commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: false


# ---------------------------------------------------------------
# 侧边栏设置
# See: https://theme-next.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

sidebar:
# 侧边栏位置.
position: left
#position: right

# 手动定义侧边栏宽度。如果有评论,将默认用于:
# Muse | Mist: 320
# Pisces | Gemini: 240
# width: 300

# 边栏显示(仅适用于Muse|Mist),可用值:
# - post 自动展开帖子。 默认值.
# - always 自动展开所有页面.
# - hide 仅当单击侧边栏切换图标时展开.
# - remove 完全删除侧边栏,包括侧边栏切换.
display: post

# 以像素为单位,侧边栏的padding.
padding: 18
# 边栏与顶部菜单栏的偏移量(以像素为单位)(仅适用于Pisces|Gemini)。
offset: 12
# 在窄视图上启用侧边栏 (only for Muse | Mist).
onmobile: false

# 侧边栏头像
avatar:
# 替换默认图像并在此处设置url.
url: #/images/avatar.gif
# 如果为true,图像将在圆圈中显示.
rounded: true
# 如果为true, 鼠标放在图像上时会旋转.
rotated: true

# Posts / Categories / Tags 放侧边栏.
site_state: true

# 社交链接
# 用法: `Key: permalink || icon`
# Key 是向最终用户显示的链接标签.
# 分隔符“||”之前的值是目标永久链接,分隔符“||”之后的值是 Font Awesome icon的名称。
social:
GitHub: https://github.com/iProgramme || fab fa-github
E-Mail: mailto:yubowen2003@gmail.com || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
Google: https://plus.google.com/yourname || fab fa-google
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype

social_icons:
enable: true
icons_only: false
transition: false

# 博客滚动
links_settings:
icon: fa fa-link
title: Links
# Available values: block | inline
layout: block

# links:
# Title: http://yoursite.com

# 边栏中的目录
# Front-matter variable (unsupport wrap expand_all).
toc:
enable: true
# 自动将列表编号添加到 toc.
number: true
# 如果为true,则如果标题宽度大于侧边栏宽度,则所有单词都将放在下一行。
wrap: false
# 如果为true,则会显示帖子中所有级别的TOC,而不是其中激活的部分.
expand_all: false
# 生成的toc的最大航向深度.
max_depth: 6

# 在侧边栏中打开指定聊天小部件的按钮.
# 首先,你需要启用聊天服务,如果你想激活它的侧边栏按钮。.
chat:
enable: false
#service: chatra
#service: tidio
icon: fa fa-comment # Icon name in Font Awesome, set false to disable icon.
text: Chat # Button text, 你可以随意改变他.


# ---------------------------------------------------------------
# 回复设置
# See: https://theme-next.org/docs/theme-settings/posts
# ---------------------------------------------------------------

# 在主页自动提取描述作为前言文本.
excerpt_description: true

# 阅读更多按钮
# 如果为 true, 则在摘录部分显示“阅读更多”按钮.
read_more_btn: true

# 回复设置
post_meta:
item_text: true
created_at: true
updated_at:
enable: true
another_day: true
categories: true

# 文章字数显示设置
# 依赖: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
separated_meta: true # 是否换行显示 字数统计 及 阅读时长
item_text_post: true # 文章 字数统计 阅读时长 使用图标 还是 文本表示
item_text_total: true # 博客底部统计 字数统计 阅读时长 使用图标 还是 文本表示
awl: 4
wpm: 275
post_wordcount:
# 文本显示
item_text: true
# 文章字数统计
wordcount: true
# 阅读时长
min2read: true
# 站点总字数统计
totalcount: false
# 该post_wordcount的所有设置另起一行显示
separated_meta: true

readingtime: true
# 使用图标而不是符号#来指示帖子底部的标签
tag_icon: false

# 打赏 (捐赠)
# Front-matter variable (unsupport animation).
reward_settings:
# 如果为true,则默认情况下每篇文章都会显示奖励.
enable: true
animation: true
comment: 原创的技术分享,请我喝杯奶茶吧

reward:
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png

# 通过Telegram频道、Twitter等订阅.
# 用法: `Key: permalink || icon` (Font Awesome)
follow_me:
#Twitter: https://twitter.com/username || fab fa-twitter
#Telegram: https://t.me/channel_name || fab fa-telegram
#WeChat: /images/wechat_channel.jpg || fab fa-weixin
#RSS: /atom.xml || fa fa-rss

# 相关热门帖子
# 依赖: https://github.com/tea3/hexo-related-popular-posts
related_posts:
enable: false
title: # 自定义标头,保留为空以使用默认标头
display_in_home: false
params:
maxCount: 5
#PPMixingRate: 0.0
#isDate: false
#isImage: false
#isExcerpt: false

# 闲着没事加点自己的链接防止盗文章咯
# see: https://iprogramme.github.io/MyBlog/
# 帖子设置
# 依赖: https://github.com/hexojs/hexo-deployer-git
post_edit:
enable: false
url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name # Link for view source
#url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name # Link for fork & edit

# 在页脚中显示上一篇文章和下一篇文章(如果存在)
# 可选值: left | right | false
post_navigation: left


# ---------------------------------------------------------------
# 自定义页面设置
# See: https://theme-next.org/docs/theme-settings/custom-pages
# ---------------------------------------------------------------

# 标记页面的TagCloud设置.
tagcloud:
# 以下所有值与默认值相同,请自行更改.
min: 12 # 最小字体大小px
max: 30 # 最大字体大小px
start: "#ccc" # 开始颜色 (hex, rgba, hsla or color keywords)
end: "#111" # 结束颜色 (hex, rgba, hsla or color keywords)
amount: 200 # 标签数量,如果您有200个以上的标签,请更改它

# 谷歌日历
# 通过日历页面与他人分享您最近的日程安排.
calendar:
calendar_id: <required> # 您的谷歌帐户电子邮件
api_key: <required>
orderBy: startTime
offsetMax: 24 # Time Range
offsetMin: 4 # Time Range
showDeleted: false
singleEvents: true
maxResults: 250


# ---------------------------------------------------------------
# 其他主题设置
# ---------------------------------------------------------------

# 设置帖子/页面中的文本对齐方式.
text_align:
# 可选值: start | end | left | right | center | justify | justify-all | match-parent
desktop: justify
mobile: justify

# 减少宽度较窄的设备上的padding / margin.
mobile_layout_economy: false

# Android Chrome 标题面板颜色 ($brand-bg / $headband-bg => $black-deep).
android_chrome_color: "#222"

# 自定义 Logo (不支持 scheme Mist)
custom_logo: #/uploads/custom-logo.jpg

codeblock:
# 代码高亮主题
# 可选值: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night bright
# 在代码块上添加啊复制按钮
copy_button:
enable: true
# 显示文本复制结果.
show_result: true
# 可选值: default | flat | mac
style: mac

back2top:
enable: true
# 在侧边栏显示返回到顶部.
sidebar: true
# 在返回顶部按钮上显示页面滚动的百分比.
scrollpercent: true

# 读取进度条
reading_progress:
enable: true
# 可选值: top | bottom
position: top
color: "#37c6c0"
height: 10px

# 书签支持
bookmark:
enable: false
# 自定义的书签颜色.
color: "#222"
# 如果为 auto, 当关闭页面或者点击书签icon的时候存储阅读进度.
# 如果为手动 manual, 只有单击书签图标才可保存.
save: auto

# `Follow me on GitHub` banner 在右上角.
github_banner:
enable: true
permalink: https://github.com/iProgramme
title: Follow me on GitHub


# ---------------------------------------------------------------
# 字体设置
# See: https://theme-next.org/docs/theme-settings/#Fonts-Customization
# 更多信息:https://iprogramme.github.io/MyBlog/posts/af303a63.html
# ---------------------------------------------------------------
# 在谷歌字体库查找字体 (https://www.google.com/fonts)
# 此处设置的所有字体都将具有以下样式:
# light | light italic | normal | normal italic | bold | bold italic
# 请注意,设置过多的字体会导致网站运行缓慢!
# ---------------------------------------------------------------
# 了避免scheme Pisces / Gemini中标题和侧边栏之间的空格,建议`global` (and `title`)使用Web安全字体:
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------

font:
enable: false

# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
host:

# 字体配置:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: x.x`. Use `em` as unit. Default: 1 (16px)

# 用于<body>内部所有元素的全局字体设置.
global:
external: true
family: Lato
size:

# 网站标题的字体设置 (.site-title).
title:
external: true
family:
size:

# 标题的字体设置 (<h1> to <h6>).
headings:
external: true
family:
size:

# 帖子的字体设置 (.post-body).
posts:
external: true
family:

# 代码和代码块的字体设置.
codes:
external: true
family:


# ---------------------------------------------------------------
# SEO 设置
# ---------------------------------------------------------------

# 禁用移动设备上的百度转换.
disable_baidu_transformation: false

# 如果 true, 网站小标题将添加到索引页.
# 记得在Hexo`_config.yml中设置你的网站小标题 (e.g. subtitle: Subtitle)
index_with_subtitle: true

# 使用Base64加密和解密自动添加外部URL.
exturl: false

# google 网站管理员工具验证.
# See: https://www.google.com/webmasters
google_site_verification:

# Bing 网站管理员工具验证.
# See: https://www.bing.com/webmaster
bing_site_verification:

# Yandex 网站管理员工具验证.
# See: https://webmaster.yandex.ru
yandex_site_verification:

# Baidu 网站管理员工具验证.
# See: https://ziyuan.baidu.com/site
baidu_site_verification:

# 启用baidu推送,使博客自动将url推送给baidu,这对SEO非常有帮助.
baidu_push: false


# ---------------------------------------------------------------
# 第三方插件和服务设置
# See: https://theme-next.org/docs/third-party-services/
# 更多 plugins: https://github.com/theme-next/awesome-next
# 您可能需要在“vendors”中安装依赖项或设置CDN URL
# 下面有两个不同的CDN提供商:
# - jsDelivr (cdn.jsdelivr.net), works everywhere even in China (任何地方都可以工作,甚至是中国。啥意思啊,中国怎么了啊,我大中国怎么了!!)
# - CDNJS (cdnjs.cloudflare.com), provided by cloudflare
# ---------------------------------------------------------------

# 数学公式渲染支持
math:
# 默认值(true)将根据需要加载mathjax/katex脚本.
# 也就是说,它只呈现那些在`mathjax: true` in Front-matter的页面.
# 如果设置为 false, 将会加载 mathjax / katex srcipt 到每个页面!!.
per_page: true

# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support .
mathjax:
enable: false
# See: https://mhchem.github.io/MathJax-mhchem/
mhchem: false

# hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
katex:
enable: false
# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
copy_tex: false

# 在您的网站上轻松实现快速Ajax导航.
# Dependencies: https://github.com/theme-next/theme-next-pjax
pjax: false

# FancyBox是一个为图像添加缩放功能的工具,它提供了一种漂亮而优雅的方式.
# 更多信息: https://fancyapps.com/fancybox
fancybox: true

# 用于缩放Medium等图像的JavaScript库.
# 不要同时启用 `fancybox` and `mediumzoom`.
# 更多信息: https://github.com/francoischalifour/medium-zoom
# see: https://iprogramme.github.io/MyBlog/posts/eca4cdb6.html
mediumzoom: false

# 用于懒加载图像的Vanilla JavaScript插件.
# 更多信息: https://github.com/ApoorvSaxena/lozad.js
lazyload: false

# Pangu 支持
# 更多信息: https://github.com/vinta/pangu.js
pangu: false

# Quicklink 支持
# 不要同时启用 `pjax` and `quicklink`.
# 更多信息: https://github.com/GoogleChromeLabs/quicklink
# Front-matter (unsupport home archive).
quicklink:
enable: false

# 主页和归档页面可以通过以下主页和归档选项进行控制.
# 此配置项独立于 `enable`.
home: false
archive: false

# 默认 (true) 将在加载事件触发后初始化Quicklink.
delay: true
# 自定义浏览器必须执行预取的时间(以毫秒为单位).
timeout: 3000
# 默认值(true)将启用fetch()或回退到XHR.
priority: true

# 为了获得更大的灵活性,您可以添加一些模式(RegExp、Function或Array)来忽略.
# See: https://github.com/GoogleChromeLabs/quicklink#custom-ignore-patterns
ignores:


# ---------------------------------------------------------------
# 评论设置
# See: https://theme-next.org/docs/third-party-services/comments
# ---------------------------------------------------------------

# 多评论系统支持
comments:
# 可选值: tabs | buttons
style: tabs
# 选择默认显示的评论系统.
# 可选值: changyan | disqus | disqusjs | gitalk | livere | valine
active:
# 设置“true”表示记住访问者选择的评论系统.
storage: true
# 懒加载所有评论系统.
lazyload: false
# 改任何导航的文本或订单,以下是一些示例.
nav:
#disqus:
# text: Load Disqus
# order: -1
#gitalk:
# order: -2

# Disqus
disqus:
enable: false
shortname:
count: true
#post_meta_order: 0

# DisqusJS
# Alternative Disqus - 用 Disqus API 渲染评论模块.
# Demo: https://suka.js.org/DisqusJS/
# 更多信息: https://github.com/SukkaW/DisqusJS
disqusjs:
enable: false
# API Endpoint of Disqus API (https://disqus.com/api/).
# 如果您能够连接到Disqus api,请将api保留为空。否则,您需要一个反向代理.
# For example:
# api: https://disqus.skk.moe/disqus/
api:
apikey: # 从 https://disqus.com/api/applications/ 注册新应用
shortname: # See: https://disqus.com/admin/settings/general/

# Changyan
changyan:
enable: false
appid:
appkey:
#post_meta_order: 0

# Valine
# 更多信息: https://valine.js.org, https://github.com/xCss/Valine, https://guojian2003.blogspot.com/2023/09/github-actionsnpmgithub-packagesgithub.html
valine:
enable: false
appid: # Your leancloud application appid
appkey: # Your leancloud application appkey
notify: false # Mail notifier
verify: false # Verification code
placeholder: Just go go # 评论框 placeholder
avatar: mm # Gravatar style
guest_info: nick,mail,link # Custom comment header
pageSize: 10 # Pagination size
language: # Language, available values: en, zh-cn
visitor: false # Article reading statistic
comment_count: true # 如果 false, 评论数只会在帖子页面展示,不会在主页展示
recordIP: false # 是否记录评论者 IP
serverURLs: # 启用自定义域名后,请在此处填写(默认情况下会自动检测到,无需填写)need to fill in)
#post_meta_order: 0

# LiveRe 评论系统
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: # <your_uid>

# Gitalk
# 更多信息: https://gitalk.github.io, https://github.com/gitalk/gitalk
gitalk:
enable: false
github_id: # GitHub repo owner
repo: # Repository name to store issues
client_id: # GitHub Application Client ID
client_secret: # GitHub Application Client Secret
admin_user: # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
distraction_free_mode: true # Facebook-like distraction free mode
# Gitalk's display language depends on user's browser or system environment
# 如果你想让每个访问你网站的人都看到统一的语言,你可以设置一个强制语言值
# 可选值: en | es-ES | fr | ru | zh-CN | zh-TW
language:


# ---------------------------------------------------------------
# 发布小工具和内容共享服务
# See: https://theme-next.org/docs/third-party-services/post-widgets
# ---------------------------------------------------------------

# 每篇文章的星级支持.
# To get your ID visit https://widgetpack.com
rating:
enable: false
id: # <app_id>
color: fc6423

# AddThis Share. See: https://www.addthis.com
# Go to https://www.addthis.com/dashboard to customize your tools.
add_this_id:


# ---------------------------------------------------------------
# 统计和分析
# See: https://theme-next.org/docs/third-party-services/statistics-and-analytics
# ---------------------------------------------------------------

# Google 分析
google_analytics:
tracking_id: # <app_id>
# 默认情况下, NexT 将会加载一个额外的 gtag.js script 在你的网站中 site.
# 如果您只需要页面查看功能,请将以下选项设置为true以获得更好的性能.
only_pageview: false

# Baidu 分析
baidu_analytics: # <app_id>

# Growingio 分析
growingio_analytics: # <project_id>

# CNZZ 统计
cnzz_siteid:

# 每篇文章展示到访者数量.
# You can visit https://leancloud.cn to get AppID and AppKey.
# AppID and AppKey are recommended to be the same as valine's for counter compatibility.
# 不要同时启用 `valine.visitor` and `leancloud_visitors`.
leancloud_visitors:
enable: false
app_id: # <your app id>
app_key: # <your app key>
# Required for apps from CN region
server_url: # <your server url>
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# 如果你不关心leancloud计数器的安全性,只想直接使用它
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: true

# 另一个显示每篇文章访问者数量的工具.
# Visit https://console.firebase.google.com/u/0/ to get apiKey and projectId.
# Visit https://firebase.google.com/docs/firestore/ to get more information about firestore. https://guojian2003.blogspot.com/2023/09/github-actionsreleasegithub.html
firestore:
enable: false
collection: articles # Required, a string collection name to access firestore database
apiKey: # Required
projectId: # Required

# Show Views / Visitors of the website / page with busuanzi.
# 更多信息: http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: fa fa-eye


# ---------------------------------------------------------------
# 搜索服务
# See: https://theme-next.org/docs/third-party-services/search-services
# ---------------------------------------------------------------

# Algolia Search
# 更多信息: https://www.algolia.com
algolia_search:
enable: false
hits:
per_page: 10
labels:
input_placeholder: Search for Posts
hits_empty: "We didn't find any results for the search: ${query}"
hits_stats: "${hits} results found in ${time} ms"

# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# 如果 auto, 通过更改输入触发搜索.
# 如果手动 manual, 通过回车键或者点击搜索按钮来搜索.
trigger: auto
# 显示每篇文章的前n个结果,通过设置为-1显示所有结果.
top_n_per_article: 1
# 将html字符串解压缩为可读字符串.
unescape: false
# 页面加载时预加载搜索数据.
preload: false

# Swiftype Search API Key
swiftype_key:


# ---------------------------------------------------------------
# Chat 服务
# See: https://theme-next.org/docs/third-party-services/chat-services
# ---------------------------------------------------------------

# Chatra 支持
# See: https://chatra.io
# Dashboard: https://app.chatra.io/settings/general
chatra:
enable: false
async: true
id: # Visit Dashboard to get your ChatraID
#embed: # Unfinished experimental feature for developers. See: https://chatra.io/help/api/#injectto

# Tidio 支持
# See: https://www.tidiochat.com
# Dashboard: https://www.tidiochat.com/panel/dashboard
tidio:
enable: false
key: # Public Key, get it from dashboard. See: https://www.tidiochat.com/panel/settings/developer


# ---------------------------------------------------------------
# 标签设置
# See: https://theme-next.org/docs/tag-plugins/
# ---------------------------------------------------------------

# Note tag (bs-callout)
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple
icons: false
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

# Tabs tag
tabs:
transition:
tabs: false
labels: true

# PDF tag
# NexT将尝试本地加载pdf文件,如果失败,将使用pdf.js.
# 因此,如果您想使用pdf标签并使其可用于所有浏览器,则必须安装pdf.js的依赖项.
# See: https://github.com/theme-next/theme-next-pdf, https://guojian2003.blogspot.com/2023/09/github-actionspackagegithub.html
pdf:
enable: false
# Default height
height: 500px

# Mermaid tag
mermaid:
enable: false
# Available themes: default | dark | forest | neutral
theme: forest


# ---------------------------------------------------------------
# 动画设置
# ---------------------------------------------------------------

# 使用速度设置所有内容的动画.
# 更多信息: http://velocityjs.org
motion:
enable: true
async: false
transition:
# Transition variants:
# fadeIn | flipXIn | flipYIn | flipBounceXIn | flipBounceYIn
# swoopIn | whirlIn | shrinkIn | expandIn
# bounceIn | bounceUpIn | bounceDownIn | bounceLeftIn | bounceRightIn
# slideUpIn | slideDownIn | slideLeftIn | slideRightIn
# slideUpBigIn | slideDownBigIn | slideLeftBigIn | slideRightBigIn
# perspectiveUpIn | perspectiveDownIn | perspectiveLeftIn | perspectiveRightIn
post_block: fadeIn
post_header: slideDownIn
post_body: slideDownIn
coll_header: slideLeftIn
# Only for Pisces | Gemini.
sidebar: slideUpIn

# 页面加载过程中顶部的进度条.
# Dependencies: https://github.com/theme-next/theme-next-pace
# 更多信息: https://github.com/HubSpot/pace
pace:
enable: false
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: minimal

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
# 这个实测感觉没效果不知道为啥,大家可以自己试试
three:
enable: false
three_waves: false
canvas_lines: false
canvas_sphere: false

# 这个是我自己设置的背景动画特效
# see: https://iprogramme.github.io/MyBlog/posts/af303a63.html
canvas_nest:
enable: true
color: '0,0,0' # RGB颜色值
opacity: 0.9 # 透明度,取值范围 [0, 1]
zIndex: -1 # 元素堆叠顺序,负值表示在所有正常元素下

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
# 这个也是有效的,但我郭减不喜欢哈哈哈哈
canvas_ribbon:
enable: false
size: 300 # The width of the ribbon
alpha: 0.6 # The transparency of the ribbon
zIndex: -1 # The display level of the ribbon


#! ---------------------------------------------------------------
#! 注意:不要编辑以下设置!
#! 注意:除非你清楚的知道你在做什么!
#! See: https://theme-next.org/docs/advanced-settings
#! See: https://guojian2003.blogspot.com/2023/09/github-actionsnpm.html
#! ---------------------------------------------------------------

# Script Vendors. 为要自定义的Vendors设置CDN地址.
# 请注意,您最好使用与内部版本相同的版本,以避免潜在的问题.
# 当您在网站上启用https时,请记住使用CDN文件的https协议.
vendors:
# 内部路径前缀.
_internal: lib

# Internal version: 3.1.0
# anime: //cdn.jsdelivr.net/npm/animejs@3.1.0/lib/anime.min.js
anime:

# Internal version: 5.13.0
# fontawesome: //cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5/css/all.min.css
# fontawesome: //cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css
fontawesome:

# MathJax
# mathjax: //cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
mathjax:

# KaTeX
# katex: //cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css
# katex: //cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css
# copy_tex_js: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.js
# copy_tex_css: //cdn.jsdelivr.net/npm/katex@0/dist/contrib/copy-tex.min.css
katex:
copy_tex_js:
copy_tex_css:

# Internal version: 0.2.8
# pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js
pjax:

# FancyBox
# jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
# fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
# fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
jquery:
fancybox:
fancybox_css:

# Medium-zoom
# mediumzoom: //cdn.jsdelivr.net/npm/medium-zoom@1/dist/medium-zoom.min.js
mediumzoom:

# Lazyload
# lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js
# lazyload: //cdnjs.cloudflare.com/ajax/libs/lozad.js/1.14.0/lozad.min.js
lazyload:

# Pangu
# pangu: //cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js
# pangu: //cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js
pangu:

# Quicklink
# quicklink: //cdn.jsdelivr.net/npm/quicklink@1/dist/quicklink.umd.js
quicklink:

# DisqusJS
# disqusjs_js: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js
# disqusjs_css: //cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css
disqusjs_js:
disqusjs_css:

# Valine
# valine: //cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js
# valine: //cdnjs.cloudflare.com/ajax/libs/valine/1.3.10/Valine.min.js
valine:

# Gitalk
# gitalk_js: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js
# gitalk_css: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css
gitalk_js:
gitalk_css:

# Algolia Search
# algolia_search: //cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js
# instant_search: //cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js
algolia_search:
instant_search:

# Mermaid
# mermaid: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
# mermaid: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.4.8/mermaid.min.js
mermaid:

# Internal version: 1.2.1
# velocity: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.min.js
# velocity: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.min.js
# velocity_ui: //cdn.jsdelivr.net/npm/velocity-animate@1/velocity.ui.min.js
# velocity_ui: //cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.ui.min.js
velocity:
velocity_ui:

# Internal version: 1.0.2
# pace: //cdn.jsdelivr.net/npm/pace-js@1/pace.min.js
# pace: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js
# pace_css: //cdn.jsdelivr.net/npm/pace-js@1/themes/blue/pace-theme-minimal.css
# pace_css: //cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/blue/pace-theme-minimal.min.css
pace:
pace_css:

# Internal version: 1.0.0
# three: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three.min.js
# three_waves: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/three-waves.min.js
# canvas_lines: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_lines.min.js
# canvas_sphere: //cdn.jsdelivr.net/gh/theme-next/theme-next-three@1/canvas_sphere.min.js
three:
three_waves:
canvas_lines:
canvas_sphere:

# Internal version: 1.0.0
# canvas_ribbon: //cdn.jsdelivr.net/gh/theme-next/theme-next-canvas-ribbon@1/canvas-ribbon.js
canvas_ribbon:

# Assets
css: css
js: js
images: images

1. 确认已安装hexo

安装完的目录应该如下图

2. clone next 主题到本地

1
git clone https://github.com/theme-next/hexo-theme-next.git themes/next

在此注意:这里的地址是最新的,网上很多的教程的地址都是老的 next 地址

3. 安装依赖

1
npm install

4. 配置 hexo 主题

_config.yml 中配置 hexo 主题

1
theme: next

至此,可以 hexo server 来查看效果如下图

5. 配置 canvas_nest 效果

1
2
3
4
5
6
// 找到文件 /themes/next/layout/layout.swig
// 在文件的body标签内的末尾添加

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
1
2
3
4
# 找到文件 /themes/next/_config.yml
# 增加以下代码
canvas_nest:
enable: true

重启 hexo 服务后如下图

6. 插入图片

1
2
3
4
5
6
# 找到文件 /themes/next/_config.yml
# 增加以下代码
post_asset_folder: true
marked:
prependRoot: true
postAsset: true

按照以下方式使用图片

1
![image-20221130093101260](image-20221130093101260.png)

如果有需要的话请安装 hexo-renderer-marked

1
npm install hexo-renderer-marked --save

7. 图片点击放大预览

1
2
3
# 找到文件 /themes/next/_config.yml
# 修改以下代码
fancybox: true

8. 图片懒加载

1
2
3
# 找到文件 /themes/next/_config.yml
# 增加以下代码
lazyload: true

9. 设置404页面

1
2
3
4
5
# 找到文件 /themes/next/_config.yml
# 增加以下代码
404:
path: /404.html
per_page: false

然后在 404.html 中写入如下代码

10. 添加站点访问人数和总访问量

1
2
3
4
5
6
7
8
9
10
# 找到文件 /themes/next/_config.yml
# 增加以下代码
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: fa fa-eye

11. 添加字数统计及阅读时长

1
2
3
4
# 找到文件 /themes/next/_config.yml
# 增加以下代码
readingtime:
enable: true

12. 添加评论

1
2
3
4
5
# 找到文件 /themes/next/_config.yml
# 增加以下代码
comment:
enable: true
type: gitalk

13. 增加打赏功能

1
2
3
4
5
6
# 找到文件 /themes/next/_config.yml
# 增加以下代码
reward:
enable: true
wechat: image-20221130092900864.png
alipay: image-20221130092900864.png

将文件放在 themes/next/source/images 目录下

14. 修改永久链接的默认格式

安装 hexo-abbrlink

1
npm install hexo-abbrlink --save
1
2
3
4
5
6
7
# 找到文件 /themes/next/_config.yml
# 修改以下代码
permalink: posts/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
permalink_defaults: posts/:abbrlink.html

在js中,我们经常会碰到这样的一个问题:给一个数组对象去重

如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr = [
{id:123,name:'xxx',age:12},
{id:124,name:'xxx',age:12},
{id:125,name:'xxx',age:12},
{id:126,name:'xxx',age:12},
{id:127,name:'xxx',age:12},
{id:128,name:'xxx',age:12},
{id:129,name:'xxx',age:12},
{id:121,name:'xxx',age:12},
{id:122,name:'xxx',age:12},
{id:123,name:'xxx',age:12},
{id:124,name:'xxx',age:12},
{id:125,name:'xxx1',age:12},
]
// 任务是将两个所有属性值相同的对象,只保留一个

我们知道,如果数组里面是简单数据类型,我们可以直接用 es6Set() 就可以完成去重,那么对于数组中每一项都是对象的,如何去重才是最好的方式呢

按照正常思维,就是将数组每一项和后面的每一项的每一个属性值做对比,如果全部相同,那么就保留一个,我们很容易写出类似如下的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var add = [arr[0]]
for(var i = 0;i < arr.length;i++){
var flag = true
for(var j = 0;j < add.length; j++){
var arrIstr = []
var addIstr = []
for(var key in arr[i]){
arrIstr.push(arr[i][key])
addIstr.push(add[j][key])
}
if(arrIstr.join('') == addIstr.join('')){
flag = false
break
}
}
if(flag){
add.push(arr[i])
}
}

这么一大堆,层层的循环,无数的判断,分分钟想炸啊有木有,而且谁能明白,你这么一大堆的代码,目的仅仅是为了给一个数组对象去重😂

那么有什么其他的好一点的办法去重吗?有人会说了 , es6 啊,那么我们看看一般的 es6 写法如何

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

function promise(fn){
var that = this;
var state = 'pending';
var callbacks = []
var value;
function resolve(newValue){
console.log(newValue);
state = 'fulfilled';
value = newValue
console.log('-----------')
setTimeout(function () {
callbacks.forEach(function (callback) {
handle(callback);
});
}, 0);
}
function handle(obj = {}){
console.log(state);
if(state == 'pending'){
callbacks.push(obj)
return
}
if(!obj.onFulfilled) {
obj.resolve(value);
return;
}
var ret = obj.onFulfilled(value);
obj.resolve(ret)
}
this.then = (onFulfilled)=>{
console.log(2);
return new promise((resolve)=>{
console.log(3);
handle({
onFulfilled:onFulfilled,
resolve:resolve
})
})
}
fn(resolve)
console.log(4);
}
new promise((res)=>{
console.log(1);
setTimeout(() => {
res(111)
}, 1000);
}).then((data)=>{
return new promise((res)=>{
console.log(6)
setTimeout(() => {
res(222)
}, 1000);
})
}).then((data)=>{
console.log(5);
setTimeout(() => {
console.log(333);
}, 1000);
})

分析代码的运行顺序

先假设所有的代码里面没有设立定时器

主线程打印顺序为 1,4,2,3,4,2,3,4

  1. new promise() – 打印 1,打印 4
  2. .then() – 打印 2
  3. .then 里面的 new promise() – 打印 3,打印 4
  4. 第二个 .then – 打印 2
  5. 第二个 .then 里面的 new promise() – 打印 3,打印 4

主流程走完

主流程解释:

  1. new promise() 为 new 了一个对象,上面都是变量方法的初始化,真正的代码只有两行就是 fn(resolve);console.log(4); 所以先出 1,后出 4
  2. .then() 打印 2,然后返回一个 new promise()
  3. 上一步返回的 new promise() 运行,打印3(这个过程也就是执行了 handle 的过程),然后打印 4
  4. 由于上一步返回的是一个新的 promise 对象,所以在外面可以直接再次 .then 而不会报错,那么这一次的 .then() 也就是上一个 promise 的then 而不是第一步里面的 new promise()

背景

最近打算买一辆电瓶车来上下班,但又不知道哪个好,网上是各说纷纭啊,于是就想着,干脆用node.js自己写一个小爬虫,来爬一下中关村在线里面电瓶车的信息吧。

(以后完整代码请前往 www.yubowen2003.com/MyBlog 暂时还在建设中,欢迎大家提issue😂 。)

简介

该demo采用node.js作为爬虫,为方便,有些地方使用es6语法,如有不懂,欢迎咨询😊

步骤

  • 第一步,引入需要的库
1
2
3
4
5
var cheerio = require('cheerio');
var fetch = require('node-fetch');

// cheerio 是一个类似浏览器端的jQuery,用来解析HTML的
// fetch 用来发送请求
  • 第二步,设置初始的爬取的入口(我身处杭州,所以地区选了杭州的🤣)
1
2
3
4
5
6
7
8
// 初始url
var url = "http://detail.zol.com.cn/convenienttravel/hangzhou/#list_merchant_loc"
// 由于每个a标签下是相对路径,故需要一个根地址来拼接,如下
var urlRoot = "http://detail.zol.com.cn"
// 存放所有url,之所以用set,是为了防止有相同的而重复爬去
var urls = new Set()
// 存储所有数据
var data = []

至此,我们的准备部分结束了😅,接下来,开始表演了

  • 分析网页,思考爬取的方式

每行4款,每页是48款,一共16页

思路:

  1. 获取当前页48个链接。
  2. 分别并点进去,拿到该电瓶车信息(名称和价格,其他信息获取方式一样,自行改就好😂)并存储。
  3. 回到当前页,点击“下一页”
  4. 获取下一页的信息
  5. 重复步骤 1 - 4

具体实现方式,以下有注释

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
// 这是得到每个页面的48个链接,并开始发送请求

function ad(arg){
// 参数 arg 先不管
// 本地化一下需要爬取的链接
let url2 = arg || url;
// 请求第一页该网页,拿到数据之后,复制给 app
var app = await fetch(url2).then(res=>res.text())
// 然后假装用jQuery解析了
var $ = cheerio.load(app)
// 获取当前页所有电瓶车的a标签
var ele = $("#J_PicMode a.pic")
// 存放已经爬取过的url,防止重复爬取
var old_urls = []
var urlapp = []
//拿到所有a标签地址之后,存在数组里面,等会儿要开始爬的
for (let i = 0; i < ele.length; i++) {
old_urls.push(fetch(urlRoot+$(ele[i]).attr('href')).then(res=>res.text()))
}
// 用把URL一块丢给promise处理
urlapp = await Promise.all(old_urls)
// 处理完成之后,循环加入jQuery😂
for (let i = 0; i < urlapp.length; i++) {
let $2 = cheerio.load(urlapp[i],{decodeEntities: false})
data.push({
name:$2(".product-model__name").text(),
price:$2(".price-type").text()
})
}
// 至此,一页的数据就爬完了
// console.log(data);

// 然后开始爬取下一页
var nextURL = $(".next").attr('href')
// 判断当前页是不是最后一页
if (nextURL){
let next = await fetch(urlRoot+nextURL).then(res=>res.text())
// 获取下一页的标签,拿到地址,走你
ad(urlRoot+nextURL)
}
return data
}
ad()

完整代码如下

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
var cheerio = require('cheerio');
var fetch = require('node-fetch');
var url = "http://detail.zol.com.cn/convenienttravel/hangzhou/#list_merchant_loc"
var urlRoot = "http://detail.zol.com.cn"
// var url = "http://localhost:3222/app1"
var urls = new Set()
var data = []
async function ad(arg){
let url2 = arg || url;
var app = await fetch(url2).then(res=>res.text())
var $ = cheerio.load(app)
var ele = $("#J_PicMode a.pic")
var old_urls = []
var urlapp = []
for (let i = 0; i < ele.length; i++) {
old_urls.push(fetch(urlRoot+$(ele[i]).attr('href')).then(res=>res.text()))
}
urlapp = await Promise.all(old_urls)
for (let i = 0; i < urlapp.length; i++) {
let $2 = cheerio.load(urlapp[i],{decodeEntities: false})
data.push({
name:$2(".product-model__name").text(),
price:$2(".price-type").text()
})
}

var nextURL = $(".next").attr('href')
if (nextURL){
let next = await fetch(urlRoot+nextURL).then(res=>res.text())
ad(urlRoot+nextURL)
}
return data
}
ad()

网上很多的教程,都讲的很详细,这里就不赘述了

我只是希望你能用最快的方式学会使用它

Promise 含义

Promise 是异步编程的一种解决方案,它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象,是一个可以直接用的js对象(前端和node中都可以直接使用)

前端离不开异步编程,在以前,我们用 ajax 进行数据交互的时候,经常碰到这种情况

  1. 先调接口登陆.
  2. 成功之后调接口获取登陆信息
  3. 成功后调用左侧导航
  4. 成功后调用某个页面的初始化数据,
  5. 成功后,调用接口查询表格

为什么要使用 Promise

这个时候,我们的代码就像这样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$.ajax({
url:'/url1',
success:function(){
// ...
$.ajax({
url:'/url2',
success:function(){
// ...
$.ajax({
url:'/url3',
success:function(){
// ...
$.ajax({
url:'/url4',
success:function(){
// ...
}
})
}
})
}
})
}
})

丑是丑了点,也稍微有点难懂,典型的金字塔代码,但代码没毛病,能跑起来就ok。但是!!!最大的问题在于,明天产品脑子一热,告诉你“那啥,你把第二步和第四步的顺序调换一下”,瞬间想炸啊有木有😂!!!即使提出来,也逃不出层层回调的坑爹掌心😂

自从有了 Promise 之后,代码就变得好看了很多

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
new Promise((resolve)=>{
$.ajax({
url:'/url1',
success:function(){
// ...
resolve()
}
})
}).then(()=>{
return new Promise((resolve)=>{
$.ajax({
url:'/url2',
success:function(){
// ...
resolve()
}
})
})
}).then(()=>{
return new Promise((resolve)=>{
$.ajax({
url:'/url3',
success:function(){
// ...
resolve()
}
})
})
})

于是,我们就可以不断的 newthen 下去,而如果需要更改顺序,我们只需要调换两个 then 的顺序就好

所以,为什么要使用 Promise ?因为可以提高代码的可读性和可维护性

如何使用

Promise 的使用其实很简单,其实跟回调函数差不多,很容易懂

Promise 中带一个参数 resolve ,当异步操作结束之后,调用该方法就好,在外面就可以 then

1
2
3
4
5
6
7
8
9
10
new Promise((resolve)=>{
setTimeout(()=>{
console.log(123)
resolve()
},300)
}).then(()=>{
console.log(456)
})
// 123
// 456

总结: 虽然说 Promise 用起来很简单,但最好能自己手动实现一个 Promise 函数,另外, Promise 的用处很多,后面将陆续介绍