简介 Node.js 从v18.16.0,v19.7.0版本开始原生支持了打包为可执行文件(Single executable applications), 常用的打包工具pkg也因此不在更新，下面介绍一下我在使用 NodeJs Single executable applications功能时的一些经验和问题。 使用 创建并打包你的项目文件 因为目前该功能只能将单个 js 文件封装为可执行文件，所以我们要借助打包工具（如 webpack, rollup 等）将 js 项目大包围一个 js 文件。由于 wenpack 的配置过于繁杂，这里介绍使用 rollup 工具进行打包。 安装 rollup: npm install --global rollup; 在项目根目录新建rollup.config.js文件，内容如下（根据项目内容进行调整）： const commonjs = require('@rollup/plugin-commonjs'); // commonjs支持，使用es模块可不使用此插件，安装：npm install @rollup/plugin-commonjs -Dconst { nodeResolve } = require('@rollup/plugin-node-resolve');const json = require('@rollup/plugin-json'); // 将静态json文件作为模块导入，按需安装，安装：npm install @rollup/plugin-json -Dconst { string } = require('rollup-plugin-string'); // 将静态文件文本作为模块导入，按需安装，安装：npm install @rollup/plugin-json -Dconst terser = require('@rollup/plugin-terser');// 压缩打包后的文件大小，按需安装，安装：npm install @rollup/plugin-json -Dmodule.exports = { input: 'dist/main.js', // 项目入口文件 output: { dir: 'output', // 输出文件目录 format: 'cjs' // 输出文件格式 }, plugins: [terser({ format: { comments: false } }), nodeResolve({ preferBuiltins: true, exportConditions: ['node'] }), commonjs(), json(), string({ include: ['**/*.html', '**/*.yml'] })]}; 打包项目：rollup -c。 封装为可执行文件 在项目根目录新建your-project-config.json文件，内容如下（根据项目需求进行调整，官方说明）： { "main": "output/main.js", // 打包后的项目入口文件 "output": "your-project.blob", "disableExperimentalSEAWarning": true, "useCodeCache": true, "disableExperimentalSEAWarning": true, // 禁用Nodejs的试验性更能警告 "useSnapshot": false, // 使用快照 "useCodeCache": true // 使用代码缓存} 封装文件： Windows: node --experimental-sea-config your-project-config.jsonnode -e "require('fs').copyFileSync(process.execPath, 'your-project.exe')"npx postject your-project.exe NODE_SEA_BLOB your-project.blob --sentinel-fuse NODE_SEA_FUSE_fce680ab2cc467b6e072b8b5df1996b2 Linux: node --experimental-sea-config your-project-config.jsoncp $(command -v node) your-projectnpx postject your-project.exe NODE_SEA_BLOB your-project.blob --sentinel-fuse NODE_SEA_FUSE_fce680ab2cc467b6e072b8b5df1996b2 等待封装完成。
loadStyle("/hexo-github/style.css"); loadStyle("/hexo-github/octicons/octicons.css"); new Badge("#badge-container-HCLonely-bili-senior-newbie-qa-b4c3b3c", "HCLonely", "bili-senior-newbie-qa", "b4c3b3c", false); 一个用于哔哩哔哩硬核会员搜题的 Tampermonkey 脚本。 安装 安装Tampermonkey(建议)或其他脚本管理器； 点此安装搜题脚本。 使用 手机哔哩哔哩客户端进入答题； 浏览器登录哔哩哔哩(已登录可跳过此步骤)；； 浏览器打开调试工具(F12), 将浏览器切换为移动设备(Ctrl+Shift+M)； 在地址栏输入https://www.bilibili.com/h5/senior-newbie/qa并回车，等待网页加载完成； 启动脚本(Alt+N)； 加载题库(需要题目完全匹配)：可从本地加载题库(支持txt,doc,docx,xls,xlsx格式)，题库中搜索不到则使用搜索引擎搜索 直接运行：使用搜索引擎搜索(支持百度，搜狗，必应，谷歌) 点击题目即可进行搜索。 注意事项 使用此脚本时建议关闭其他插件/脚本，避免冲突； 建议选择文史，知识，音乐等答案比较好搜索判断的类型。
loadStyle("/hexo-github/style.css"); loadStyle("/hexo-github/octicons/octicons.css"); new Badge("#badge-container-HCLonely-all-pusher-api-6e6e3b2", "HCLonely", "all-pusher-api", "6e6e3b2", false); 在静态网站上实现浏览记录功能，浏览记录保存在用户本地。 安装 下载visit-history.min.js文件； 在你的网页中插入 或直接使用CND 使用 保存浏览记录 const { visitHistory } = require('visit-history');visitHistory.set({ data: { }, // [必需]保存的数据 identifier: () => window.location.pathname, // [可选]网页的位移标识符, 默认为 () => window.location.pathname limit: 20 // [可选]最大保存的浏览历史数量，默认为 20}); Example: const { visitHistory } = require('visit-history');visitHistory.set({ data: { title: document.querySelector('title').innerText.trim(), link: window.location.href }, identifier: () => window.location.href, limit: 30}); 读取浏览记录 const { visitHistory } = require('visit-history');visitHistory.get({ htmlTemplate: '', // [可选]Html模板, 使用'{{key}}'替换data中的变量. 留空则返回保存的data数据, 默认为空 limit: 10 // [可选]读取的浏览记录数量, 留空则返回所有数据, 默认为空}); Example: const { visitHistory } = require('visit-history');const history = visitHistory.get({ htmlTemplate: '{{title}}', limit: 10});document.querySelector('.history').innerHTML = history.join(''); 鸣谢 store.js
loadStyle("/hexo-github/style.css"); loadStyle("/hexo-github/octicons/octicons.css"); new Badge("#badge-container-HCLonely-all-pusher-api-f15d9c8", "HCLonely", "all-pusher-api", "f15d9c8", false); 介绍 注意：此模块仅作推送使用，不可交互 ！！！ 统一化推送服务Nodejs API. 已支持钉钉, Discord, 邮件, 飞书, PushDeer, PushPlus, QQ, QQ 频道机器人, Server 酱, Showdoc Push, Telegram Bot, 企业微信群机器人, 息知, WxPusher, NowPush, iGot, Chanify, Bark, Push, Slack, Pushback, Zulip, RocketChat, Gitter等平台. 已支持平台 QQ(go-cqhttp) – GoCqhttp QQ(Qmsg) – Qmsg QQ 频道机器人 – QqChannel 钉钉群机器人 – DingTalk Discord – Discord 邮件 – Mail 飞书群机器人 – FeiShu 企业微信 – WorkWeixin 企业微信群机器人 – WorkWeixinBot Telegram Bot – TelegramBot PushDeer – PushDeer PushPlus – PushPlus Server 酱 – ServerChanTurbo Showdoc Push – Showdoc 息知 – Xizhi WxPusher – WxPusher NowPush – NowPush iGot – IGot Chanify – Chanify Bark – Bark GoogleChat – GoogleChat Push – Push Slack – Slack Pushback – Pushback Zulip – Zulip RocketChat – RocketChat Gitter – Gitter Pushover – Pushover 安装 npm install all-pusher-api -S 使用 Example 多平台推送 const { PushApi } = require('all-pusher-api'); // 多平台同时推送(async () => { console.log((await new PushApi([ { name: 'ServerChanTurbo', config: { key: { token: '******' } } }, { name: 'PushDeer', config: { key: { token: '******' } } }, { name: 'WxPusher', config: { key: { token: '******', uids: ['******'] } } } ]) .send({ message: '测试文本' })).map((e) => (e.result.status >= 200 && e.result.status { // Example 1 const { PushApi } = require('all-pusher-api'); // 多平台同时推送 const result = await new PushApi([ { name: 'ServerChanTurbo', config: { key: { token: '******' } } } ]) .send({ message: '测试文本' }); console.log(result.map((e) => (e.result.status >= 200 && e.result.status { const { DingTalk } = require('all-pusher-api/dist/DingTalk'); const result = await new DingTalk({ key: { token: '******', secret: '******' } }) .send({ message: '这条消息@了所有人', extraOptions: { isAtAll: true } }); console.log(result);})(); customOptions 这里以钉钉为例 (async () => { const { DingTalk } = require('all-pusher-api/dist/DingTalk'); const result = await new DingTalk({ key: { token: '******', secret: '******' } }) .send({ customOptions: { "msgtype": "actionCard", "actionCard": { "title": "我 20 年前想打造一间苹果咖啡厅, 而它正是 Apple Store 的前身", "text": " \n\n #### 乔布斯 20 年前想打造的苹果咖啡厅 \n\n Apple Store 的设计正从原来满满的科技感走向生活化, 而其生活化的走向其实可以追溯到 20 年前苹果一个建立咖啡馆的计划", "btnOrientation": "0", "btns": [ { "title": "内容不错", "actionURL": "https://www.dingtalk.com/" }, { "title": "不感兴趣", "actionURL": "https://www.dingtalk.com/" } ] } } }); console.log(result);})(); 自定义接口 (async () => { const { Custom } = require('all-pusher-api/dist/Custom'); // 自定义接口只能通过此方法引入 const { createHmac } = require('crypto'); const sign = () => { const timestamp = new Date().getTime(); const secret = '******'; const stringToSign = `${timestamp}\n${secret}`; const hash = createHmac('sha256', secret) .update(stringToSign, 'utf8') .digest(); return `timestamp=${timestamp}&sign=${encodeURIComponent(hash.toString('base64'))}`; }; console.log(await new Custom({ url: `https://oapi.dingtalk.com/robot/send?access_token=******&${sign()}`, success: { key: 'responseData.errcode', value: 0 } }).send({ msgtype: 'text', text: { content: '测试文本' } })); /* 返回值 { status: 200, statusText: 'Success', extraMessage: } */}); 参数 pusherConfig 这部分写的比较乱，建议配合参数生成器使用！ const pusher = new WxPusher(pusherConfig); 参数类型默认值说明 tokenstringnull大部分平台的授权token, 如果有授权信息有多个, 请使用key baseUrlstringnull对于部分支持搭建服务端的平台, 如果使用自建服务端, 需配置此选项 webhookstringnullDiscord, 企业微信机器人, RocketChat和GoogleChat 的 webhook 地址, 该平台请使用webhook而不是token userIdstringnullPushback 平台的 User_id chat_idstringnullTelegram 平台的 chat_id emailstringnullZulip 平台的 bot email domainstringnullZulip 平台的 domain toArraynullZulip 平台的发送对象 roomIdstringnullGitter 平台发送对象的 roomid baseUrlstringnullgo-cqhttp 的http通信地址, 以http://或https://开头 user_idnumbernull使用 go-cqhttp 推送时的目标 QQ 号, 此参数与group_id, channel_id二选一 group_idnumbernull使用 go-cqhttp 推送时的目标群号, 此参数与user_id, channel_id二选一 channel_idstringnull使用 go-cqhttp 推送时的目标频道ID, 此参数与user_id, group_id二选一, 且必须与guild_id同时存在 guild_idstringnull使用 go-cqhttp 推送时的目标子频道ID, 此参数必须与channel_id同时存在 corpidstringnull企业微信群机器人的corpid agentidstringnull企业微信群机器人的agentid secretstringnull钉钉、飞书加签的密钥[可选]/企业微信群机器人的secret touserstringnull企业微信群机器人指定接收消息的成员, 也可在sendOptions中配置 uidsArraynullWxPusher 发送目标的 UID, 也可在sendOptions中配置 topicIdsArraynullWxPusher 发送目标的 topicId, 也可在sendOptions中配置 appIDstringnullQQ频道机器人的 ID, 使用QQ频道推送时此选项为必选 tokenstringnullQQ频道机器人的 token, 使用QQ频道推送时此选项为必选 sandboxbooleanfalse使用QQ频道推送时是否启用沙箱, 可选 channelIDstringnullQQ频道的子频道 ID, 使用QQ频道推送时此选项为必选 userstringnullPushover 的 user key, 使用 Pushover 推送时此选项为必选 keyobjectnull以上参数都可以放到key中, 示例 - key.hoststringnull邮件发送服务器地址, 使用邮件推送时此选项为必选 - key.portnumbernull邮件发送服务器端口, 使用邮件推送时此选项为必选 - key.securebooleanfalse邮件发送服务器是否启用TLS/SSL, 可选 - key.authobjectnull邮件发送服务器的验证信息, 使用邮件推送时此选项为必选 - key.auth.userstringnull邮件发送服务器的用户名, 使用邮件推送时此选项为必选 - key.auth.passstringnull邮件发送服务器的密码, 使用邮件推送时此选项为必选 proxyobjectnull代理配置, 可选, 部分支持 - proxy.enablebooleanfalse是否启用代理 - proxy.protocolstring'http'代理协议 - proxy.hoststringnull代理主机地址 - proxy.portnumbernull代理端口 - proxy.usernamestringnull代理用户名 - proxy.passwordstringnull代理密码 CustomConfig 自定义接口 const customPusher = new Custom(CustomConfig); 参数类型默认值说明 urlstringnull请求链接, 必需 methodstring'POST'请求方式, 可选 contentTypestring'application/json'发送的数据类型, 等同于hreders['Content-type'] headersAxiosRequestHeadersnull请求头, 可选 successobjectnull推送成功的判断方式, 必需 - success.keystringnull请看示例 - success.valueanynull请看示例 keyobjectnull以上参数都可以放到key中 proxyobjectnull代理配置, 同上 pushersConfig const pushers = new PushApi(pushersConfig); const pushersConfig: Array sendOptions const result = await pusher.send(sendOptions); 参数类型默认值说明 messagestringnull推送的消息内容, message与customOptions至少要有一个 titlestringnull部分平台支持消息标题, 不填则自动提取message第一行的前10个字符 typestring'text'仅支持text, markdown, html. 具体平台支持情况请查看支持的消息类型 extraOptionsobjectnull附加内容, 此对象中的内容会附加到请求体中, 示例 customOptionsobjectnull自定义请求内容, 推送时会POSTcustomOptions, 示例 customSendOptions const result = await customPusher.send(customSendOptions); customSendOptions会直接作为请求体发送, 具体请查看示例. pushersSendConfig const results = await pushers.send(pushersSendConfig); const pushersSendConfig: Array 返回值 result const result = await pusher.send(sendOptions); 参数类型默认值说明 statusnumbernull状态码 statusTextstringnull状态说明文本 extraMessageAxiosResponseErrornull results const results = await pushers.send(pushersSendConfig); const results: Array 支持的消息类型 所有平台支持均纯文本(text)格式消息, 大部分支持markdown格式消息, 部分支持html格式消息 markdown*为支持html格式不支持markdown格式消息时自动将markdown转换为html格式 other为部分平台支持特殊格式的消息, 可通过customOptions传入参数, 具体参数请查看相应平台的文档 Showdoc: text Pushover: text QQ(go-cqhttp): text, other Qmsg: text, other Discord: text, other 飞书: text, other NowPush: text, other Chanify: text, other Bark: text, other Server酱Turbo: text, markdown 息知: text, markdown PushDeer: text, markdown, other QQ频道: text, markdown, other 企业微信: text, markdown, other 企业微信群机器人: text, markdown, other 钉钉: text, markdown, other TelegramBot: text, markdown, html 邮件: text, markdown*, html PushPlus: text, markdown*, html WxPusher: text, markdown*, html 状态码 0-Missing Parameter: ***: 缺少必要参数 10-Missing Options: 缺少发送消息配置 11-Unknown Error: 未知错误 200-Success: 推送成功 201-Waiting: 待审核 100-Error: 请求发送成功, 服务器返回错误信息 101-No Response Data: 请求发送成功, 但没有接收到服务器返回的数据 102-Request Error: 请求发送失败, 一般是网络问题 103-Options Format Error: 参数格式错误 104-Get "***" Failed: 获取参数失败 140-Check Sign Failed: 签名校检失败
想必大家都经历过学校/公司要求在网上答题的情况，为了更方面的搜索答案，于是这个脚本就出现了。 安装说明 安装Tampermonkey或类似浏览器扩展(脚本基于此扩展使用) 安装此脚本 Github GreasyFork 必读说明 不用时请关闭此脚本！ 启用此脚本后刷新网页才会生效！ 使用无题库模式时不要将弹出的窗口最大化 支持txt, html, word, excel格式的题库，其他格式自行转换成支持的格式 选择/复制受限时可配合网页限制解除(改)脚本使用 使用说明 使用前先在Tampermonkey中启用此脚本； 点击浏览器的Tampermonkey扩展图标，找到此脚本下面的启动启动选项并点击； 按要求选择模式 题库模式[建议]: 如果你已经有该题目相关题库了就选这个，题库文件支持txt, html, word, excel格式，其他格式的题库请自行转换成支持的格式； 无题库模式: 搜索时会弹出使用百度/搜狗/必应/谷歌的搜索结果，弹出的窗口不要全屏显示； 直接运行: 之前使用题库模式导入过题库，并且题库不需要更新，避免重复导入题库操作； 选择题目后会弹出搜按钮，点击此按钮即可搜索； 用完记得关闭此脚本，否则可能会造成访问其他网页出现BUG；
微信版本 <= 8.0.18 开启 X5 内核: debugmm.qq.com/?forcex5=true 复制这个在微信团队后点开或用微信扫描二维码 出现下图说明开启成功 安装 X5 内核(以下线上与本地内核二选一) 安装线上内核：http://debugtbs.qq.com 复制这个在微信发送出去后打开下载线上内核，重启即可； 安装本地内核：点此下载 本地内核(不要直接打开)，下载完把文件复制到 /sdcard/Android/data/com.tencent.mm/files/tbs 目录(没有这个目录的话新建一个)，然后回到 http://debugtbs.qq.com 点击安装本地内核，安装完成后重启微信； 打开vConsole调试功能：http://debugx5.qq.com 复制这个在微信发送出去后打开，选择顶部信息，下面勾选打开vConsole调试功能 在大学习界面点击右下角的绿色按钮，在弹出的控制台输入下面的代码(最好等视频加载完开始播放后在执行，太快了可能没反应，没反应的话再输一遍就好了) var videoEle = document.getElementsByTagName('video')[0]; // 获取播放器元素videoEle.controls = true; // 显示进度条videoEle.currentTime = videoEle.duration; // 时间拉到最后videoEle.ended = true; // 视频播放结束score = 100; // 成绩__vconsole.style.display = 'none'; // 隐藏右下角绿色按钮 全微信版本（需电脑） 启用Inspector调试功能： 如果使用 x5 内核，按上述步骤走到第三步，勾选打开TBS内核Inspector调试功能; 如果不使用 x5 内核，debugmm.qq.com/?forcex5=false 复制这个在微信团队后点开或用微信扫描二维码 出现下图说明开启成功 然后复制这个在微信发送出去后打开http://debugxweb.qq.com/?inspector=true，等加载完关闭就行 手机通过数据线连接电脑并启用 USB 调试功能（如何打开?） 下载 Chrome 或 Edge 浏览器，安装ADB扩展，网址打不开可以使用离线安装 点击ADB扩展图标，点击View Inspaction Targets(如果手机上弹出是否允许调试，点击允许) 在弹出的页面上勾选Discover USB devices和Discover network targets 打开大学习页面，等待加载设备，出现如下图所示 手机上开始播放视频，电脑上点击inspect，在弹出的窗口右侧一栏点击控制台或Console 在控制台输入以下代码： var videoEle = document.getElementsByTagName('video')[0]; // 获取播放器元素videoEle.controls = true; // 显示进度条 手机上拖动进度条跳过 部分微信版本（需root） 此方法需要手机 root, 并安装XPosed框架，这里建议安装LSPosed框架！ 具体支持情况点此查看 如果你不了解 Root, XPosed, Lsposed, 刷机等内容，请不要使用此方法！ 此方法默认你已安装 XPosed 框架并可用！ 安装Enable WebView Debugging [启用 WebView 调试]模块，可在 XPosed 和 LSPosed 官方仓库找到 启用此模块，LSPosed 需要勾选微信作用域并重启微信 按照微信版本<=8.0.18的第四步进行操作
本文介绍一个适用于多种输入法的关于公主连结Re:Dive的词库pcr-dict。 特色 支持多种输入法： 搜狗拼音 txt QQ 拼音 QQ 五笔 百度拼音 小小输入法 谷歌拼音 Gboard 拼音加加 Win10 微软拼音（自定义短语） Win10 微软五笔（自定义短语） Win10 微软拼音（自学习词库） 微软拼音 必应输入法 FIT 输入法 Mac 简体拼音 Rime 中州韵 华宇紫光拼音 libpinyin Chinese-pyim 手心输入法 新浪拼音 极点五笔 极点郑码 小鸭五笔 雅虎奇摩 五笔 86 版 五笔 98 版 仓颉平台 百度手机或 Mac 版百度拼音 QQ 手机 讯飞输入法 全面吃鱼更新的词汇： 包括角色名，别名，公会名，声优名，装备名，专武名，技能名称等等 每周更新一次 使用 到github releases页面下载pcr-dict.zip文件，解压后导入即可。 蓝奏云下载 密码:h1wg 数据来源 角色&别名&公会&声优: HoshinoBot 装备&专武&技能: 公主连结 WIKI 词库转换工具 imewlconverter LICENSE MIT LICENSE
适用于live2d.user.js,live2d_demo的基于 Nodejs 的后端 Api. 使用方法 安装NodeJs,Git 克隆本项目git clone https://github.com/HCLonely/live2dNodeApi.git 定位到项目目录cd live2dNodeApi 安装依赖npm i -S或cnpm i -S 启动服务器npm start 命令 命令功能额外说明 npm start启动 api 服务器 npm run update重新生成modelList.json文件用于增加或删除模型后更新模型列表 npm run check检测模型的主配置文件格式及模型文件的完整性 npm run screenshot生成模型的预览图，放在preview文件夹 npm run pre在网页上查看模型的预览图，需要先生成 配置 修改config.json文件进行配置： { "port": 2333, // 监听端口，默认2333 "ssl":{ "enable":false, // 是否启用ssl "privateCrt":"", // ssl证书文件路径 "privateKey":"" // ssl私钥文件路径 }} 模型目录结构 models├─模型文件夹 # 同一角色不同皮肤，不同皮肤共用一个index.json文件│ ├─index.json # 必须，或model.json│ └─...├─模型文件夹 # 同一角色不同皮肤，每个皮肤都有各自的index.json文件│ ├─模型文件夹 # 单个模型│ │ ├─index.json # 必须，或model.json│ │ └─...│ └─模型文件夹 # 单个模型│ ├─index.json # 必须，或model.json│ └─...└─模型文件夹 # 单个模型 ├─index.json # 必须，或model.json └─... 详情请参考models目录 常见问题 依赖安装慢 npm 安装慢 下载 Chromium 慢 更新模型后顺序乱了 请重命名模型文件夹进行排序，参考models目录。
现在有很多网站使用 pjax, 包括本站也是。本站主题是从 Typecho 的 hansome 主题移植过来的，在移植过程中就遇到了这个问题： 开启 pjax 后百度分析和谷歌分析之统计首次访问的页面，之后的页面都不会统计。 下面来说一下我是如何解决的。 百度分析 在pjax:complete添加以下回调： if(typeof _hmt !== "undefined" && typeof _hmt.push === "function") _hmt.push(['_trackPageview',window.location.pathname]); 谷歌分析 谷歌分析似乎有两种，请根据你引用的 js 库修改： ga: 使用https://www.google-analytics.com/analytics.js gtag: 使用https://www.googletagmanager.com/gtag/js?id=UA-******* ga 在pjax:complete添加以下回调： if(typeof ga === "function") ga('send', 'pageview', window.location.href); gtag 在pjax:complete添加以下回调(感谢@FGHRSH)： if(typeof gtag === "function") gtag('event', 'pageview', {page_location: window.location.href});
在博客中插入类似 Github contributions 的活动日历。 注意：此插件会和hexo g命令冲突，请使用hexo ge或hexo generate替代hexo g命令！ 前提条件 注意：不满足前提条件的无法使用此插件，在不满足前提条件的情况下安装此插件出现的问题不予以处理，如何实现以下前提条件的问题不予以处理！ Node.js >= 12.0 使用Git对博客**源码（不是使用 git 部署）**进行管理； 在博客根目录使用git log -1 --date=iso --pretty=format:"%ad"命令能够输出一个日期； 如何确定第一项是否符合： 博客根目录含有.git文件夹，这是一个隐藏文件夹； 符合上面的第三项。 安装 npm i hexo-calendar -S or cnpm i hexo-calendar -S 使用 作为辅助函数在主题模板中使用 作为标签在 md 文件中使用 注意：这种方法请使用严格的 JSON 格式！ {% calendar %}{"monthLang": "cn", "dayLang": "cn", "title": "活动日历"}{% endcalendar %} 如果你使用了自动部署 如果你使用了Travis CI, Github Action之类的自动部署，那么你需要在推送源码之前使用hexo gc -w=40命令生成一个calendar.json文件。-w=40代表显示 40 周之前至今的活动记录。 选项 名称类型默认值描述 widthString"600"日历宽度，单位：px heightString"165"日历高度，单位：px idString"calendar"日历元素 id monthLangString or Array"en"月份语言，可选：en, cn或自定义 dayLangString or Array"en"一周中每一天的语言，可选：en, cn或自定义 weeksNumber40显示多少周之前至今的活动记录 titleString"calendar"日历标题 insertScriptBooleantrue是否自动插入echarts库。如果你已全局引入echarts库，请将此项设为false；如果你的站点启用了pjax，请将此项设为false，并全局引用echarts库。 示例
本文介绍了如何不使用帐号密码，不配置 SSH 对 git 远程仓库进行拉取(pull)和推送(push), 如果你需要经常换电脑或使用公共电脑的话使用此方法比较安全。这里主要介绍 Github, Coding, 码云这三个比较主流的托管平台的配置方法。 Github 登录 Github, 点击右上角的头像->Settings 点击Developer settings 点击Personal access tokens 点击Generate new token创建一个token Note随便填就行，Select scopes勾选repo给与 repo 操作权限，然后拉到最下面点击Generate token即可 记住这个 token(我这里加密了，实际上是一串字母数字) 以https://github.com/user/repo.git仓库为例，只需要在仓库前面添加x-access-token:**************@即可，************替换成上一步的 token https://x-access-token:**************@github.com/user/repo.git Coding 登录 Coding, 点击右上角的头像->个人设置 点击访问令牌 点击新建令牌创建一个令牌 令牌描述随便填就行，选择权限勾选project:depot给与仓库操作权限，然后拉到最下面点击创建令牌即可 记住这个用户名和令牌(我这里加密了，实际上是一串字母数字) 以https://e.coding.net/user/project/repo.git仓库为例，只需要在仓库前面添加用户名:令牌@即可,用户名和令牌替换成上一步的用户名和令牌 https://*****:***********@e.coding.net/user/project/repo.git 码云 登录码云, 点击右上角的头像->设置 点击私人令牌 点击生成新令牌创建一个令牌 私人令牌描述随便填就行，请选择将要生成的私人令牌所拥有的权限勾选projects给与仓库操作权限，如果弄需要Pull Requests那就把下面的pull_requests也勾选上，然后拉到最下面点击提交即可 记住这个令牌(我这里加密了，实际上是一串字母数字) 以https://gitee.com/user/repo.git仓库为例，只需要在仓库前面添加oauth2:**********即可,**********替换成上一步的令牌 https://oauth2:**********@gitee.com/user/repo.git 安全起见，如果你使用公共电脑进行仓库的 push&pull 操作，请在离开时删除你的代码仓库，如果你之后还要用不想删除代码仓库，请使用git remote rm命令把仓库链接删掉！
一款基于WebStackPage的 Hexo 主题。Demo loadStyle("/hexo-github/style.css"); loadStyle("/hexo-github/octicons/octicons.css"); new Badge("#badge-container-HCLonely-hexo-theme-webstack-fc2ec5e", "HCLonely", "hexo-theme-webstack", "fc2ec5e", false); 安装 git clone https://github.com/HCLonely/hexo-theme-webstack themes/webstack 配置 favicon 网站图标 示例： favicon: /favicon.ico banner [可选]分享网站到 twitter 和 facebook 时的图片。 示例： banner: /images/webstack_banner_cn.png logo 网站 logo expanded: 侧边栏展开时左上角的 logo collapsed: 侧边栏收起时左上角的 logo dark: 顶栏为暗色时左上角的 logo, 仅 about 页面生效 示例： logo: expanded: /images/logo@2x.png collapsed: /images/logo-collapsed@2x.png dark: /images/logo_dark@2x.png flag 语言标识，多语言请配合子页面使用 icon: 语言图标，默认仅有flag-cn和flag-us, 其他图标自行寻找存放于主题目录/source/images/flags/ name: 语言名称 default: 该语言是否为默认语言 index: 页面链接 示例： flag: - name: Chinese default: true icon: flag-cn index: /index.html search 是否显示搜索框 示例： search: true userDefinedSearchData 自定义搜索引擎 custom: 是否启用自定义配置 thisSearch: 当前搜索引擎的搜索链接 thisSearchIcon: 当前搜索引擎的图标链接，格式为url(图片链接) hotStatus: 是否启用搜热词功能 data: 多搜索引擎配置 name: 搜索引擎名字 img: 搜索引擎的搜索链接 url: 搜索引擎的图标链接，格式为url(图片链接) 示例： userDefinedSearchData: custom: true thisSearch: https://www.baidu.com/s?wd= thisSearchIcon: url(https://www.baidu.com/favicon.ico) hotStatus: true data: - name: 百度 img: url(https://www.baidu.com/favicon.ico) url: https://www.baidu.com/s?wd= - name: 谷歌 img: url(https://www.google.com/favicon.ico) url: https://www.google.com/search?q= githubCorner 右上角的 github corner 示例： githubCorner: '.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}' since 建站年份，显示在页面底部 示例： since: 2020 menu [主要]侧边栏菜单设置 name: 分组名 icon: 分组图标 config: [主要]分组内容(详细设置查看Config)，如果有二级菜单则不需要此项！ submenu: 二级菜单，如果有二级菜单则不需要config, 此选项内容包含name, icon, config选项 示例： menu: - name: 常用工具 icon: far fa-star config: hotTools - name: 其他工具 icon: fas fa-tools submenu: - name: 开发工具 icon: fas fa-tools config: devTools - name: 我的博客 icon: fas fa-blog config: myBlog expandAll 是否将侧边栏全部展开 示例： expandAll: true about 侧边栏的关于本站 url: 关于页面链接 name: 在侧边栏显示的文字 icon: 图标 示例： about: url: /about/ icon: far fa-heart name: 关于本站 aboutPage 关于页面设置 生成关于页面 hexo new page about 编辑source/about/index.md, 添加type: 'about' ---title: aboutdate: 2020-06-04 18:11:54type: 'about'--- 编辑主题配置文件的aboutPage website: 关于本站内容 head: 标题 html: 内容，支持html语法 webmaster: 关于站长内容 head: 标题 name: 站长名字 url: 链接 img: 头像 description: 描述 html: 其他内容，支持html语法 示例： aboutPage: website: head: 关于本站 html: '本站是hexo主题hexo-theme-webstack的demo站。' webmaster: head: 关于站长 name: HCLonely url: https://blog.hclonely.com/ img: /images/logos/myblog.png description: 懒人一个 html: '本站是HCLonely基于WebStackPage项目做的一款Hexo主题。' busuanzi 不蒜子统计 enable: 是否启用不蒜子统计 position: 访问量显示位置, footer显示在页脚, sidebar显示在侧边栏 pv: 访问量显示的内容, $pv会被替换为访问量 uv: 访客数显示的内容, $uv会被替换为访客数 示例： busuanzi: enable: true position: sidebar pv: 本站总访问量$pv uv: 本站总访客数$uv custom 自定义html内容 head: 插入到标签内的内容 body: 插入到标签之前的内容 示例： custom: head: |- # 以下内容插入到标签内，可设置多行，注意每行开头至少四个空格 body: |- # 以下内容插入到标签之前，可设置多行，注意每行开头至少四个空格 custom text config [主要]网站内容设置 参数 name: 网站名称 url: 网站链接 img: 网站图标 description: 网站描述 示例： - name: HCLonely Blog url: https://blog.hclonely.com/ img: /images/logos/myBlog.png description: 一个懒人的博客。 关联设置名称并添加网站 在menu和submenu中设置的config的内容为此选项的名称。 例menu： menu: - name: 常用工具 icon: far fa-star config: hotTools 则常用工具分组里的网站有以下两种添加方式： 在主题的_config.yml里添加： hotTools: - name: HCLonely Blog url: https://blog.hclonely.com/ img: /images/logos/myBlog.png description: 一个懒人的博客。 - name: Github url: https://github.com/ img: /images/logos/github.png description: 面向开源及私有软件项目的托管平台。 在站点根目录/source/_data/(没有自行创建)内新建hotTools.yml文件，文件内容如下： - name: HCLonely Blog url: https://blog.hclonely.com/ img: /images/logos/myBlog.png description: 一个懒人的博客。- name: Github url: https://github.com/ img: /images/logos/github.png description: 面向开源及私有软件项目的托管平台。 以上两种方式任选一种即可，建议使用第二种。 子页面配置 创建子页面 使用hexo new page xxx创建子页面，这里包括下面的说明都以hexo new page child为例。 修改子页面配置文件 使用上面的命令生成子页面后，打开根目录/source/child/index.md文件（子页面配置文件），在两个---之间添加一行type: 'child'使此配置文件生效，子页面默认使用主页的配置，子页面优先使用子页面配置文件两个---之间的配置，各配置项和主页的配置功能相同。 示例请看https://github.com/HCLonely/hexo-theme-webstack/tree/gh-pages/source/child/index.md 由于子页面在很久之前就基本做完了，后来比较忙就鸽了，可能有些配置或 bug 给忘了，有问题请及时反馈！
Valine-admin 由于 Leancloud 流控原因，自动唤醒任务可能会失败，详情：https://forum.leancloud.cn/t/topic/22595 所以这里介绍一个使用第三方计划任务网站进行定时唤醒 Valine-admin 的方法。 注册cron-job帐号 注册地址：https://cron-job.org/en/signup/ 注册时的时区请选择Asia/Shanghai 添加一个计划任务 登陆之后依次点击Members,cronjobs,Create cronjob Title, Address Title可以随便填一个 Address填写你的云引擎环境变量的ADMIN_URL，也就是 Leancloud 的Web 主机域名。如果你用的我Valine 添加博主标签及评论微信、QQ 通知文章里的最新版的仓库，还需要在后面加上/start，当然也可以不加，加上会有唤醒日志。 Schedule 选择User-defined进行自定义设置 Days of month: 全选 Days of week: 全选 Months: 全选 Hours: 你需要在哪个时间段唤醒就选择什么 Minutes: 选择0,20,40 按住Ctrl可多选 Notifications 可以不用修改，也可以根据自己的需要修改 Common 勾选Save responses, 保存唤醒日志 点击Create cronjob
本教程介绍了如何给 Valine 评论系统添加博主、小伙伴、 访客标签，添加浏览器及操作系统图标，以及评论微信及QQ通知。 建议有一定 JS 基础的用户根据本教程进行自定义修改，至少能够自己找到为什么会报错，否则不建议修改！ 添加标签及图标 基于https://github.com/xCss/Valine修改。 由于 1.4.0 以后 Valine 作者不再发布源码，所以这里不说如何修改了，只放出我修改好的 js 链接及使用方法。 参数如何添加请查看 Demo 站源码的butterfly.yml 文件和valine.pug 文件 链接 https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js 与原版相比 添加博主，小伙伴，访客标签 添加浏览器和操作系统图标，需fontawesomeV5支持 邮箱检测更严格 meta placeholder可自定义 使用方法 基本方法同原版相同，请先查看原版使用文档并配置好。 Butterfly 主题可以根据这篇文章修改，其他主题请自行修改！ 本版比原版多了以下参数： 参数类型说明默认示例 tagMetaArray标签要显示的文字[“博主”,“小伙伴”,“访客”][“博主”,“小伙伴”,“访客”] masterArray/Stringmd5 加密后的博主邮箱[][“fe01ce2a7fbac8fafaed7c982a04e229”] friendsArraymd5 加密后的小伙伴邮箱[][“fe01ce2a7fbac8fafaed7c982a04e229”] metaPlaceholderObjectmeta placeholder 内容{}{“nick”:“昵称/QQ 号”,“mail”:“邮箱(必填)”} 示例 评论微信通知及 QQ 通知 基于https://github.com/DesertsP/Valine-Admin修改。 修改方法不在多说，直接使用我的源码即可，如果你有一定的 NodeJS 知识，可以参考我的源码自行修改。 注意！由于 leancloud 的原因，自动唤醒任务可能会失败！ 详情：https://forum.leancloud.cn/t/topic/22595 解决办法: https://blog.hclonely.com/posts/ac04080d/ 仓库地址 https://github.com/HCLonely/Valine-Admin.git 与原版相比 添加微信提醒功能 添加 QQ 提醒功能 添加禁止邮件提醒功能 使用方法 基本方法同原版相同，请先查看原版使用文档并配置好。 本版比原版多了以下参数： 变量示例说明 SERVER_KEYSCUxxxxxxxx[可选]Server酱 SCKEY 用于微信通知 SERVER_TURBO_KEYSCTxxxxxxxx[可选]Server酱·Turbo版 SendKey 用于微信通知 SERVER_TURBO_MDtrue[可选]使用Server酱·Turbo版通知时是否使用 MD 模板，默认为false QMSG_KEYxxxxxxxx[可选]Qmsg key 用于 QQ 通知 QQ_SHAKE(已失效)true[可选]QQ 通知时发送戳一戳 DISABLE_EMAILtrue[可选]禁止邮件通知博主，@仍然会提醒 TEMPLATE_NAMErainbow[可选]rainbow或default邮件通知模板 邮件通知模板(模板变量与原版不同) 邮件通知模板在云引擎环境变量中设定，可自定义通知邮件标题及内容模板。 环境变量示例说明 MAIL_SUBJECT${PARENT_NICK}，您在${SITE_NAME}上的评论收到了回复[可选]@通知邮件主题（标题）模板 MAIL_TEMPLATE见下文[可选]@通知邮件内容模板 MAIL_SUBJECT_ADMIN${SITE_NAME}上有新评论了[可选]博主邮件通知主题模板 MAIL_TEMPLATE_ADMIN见下文[可选]博主邮件通知内容模板 邮件通知包含两种，分别是被@通知和博主通知，这两种模板都可以完全自定义。默认使用经典的蓝色风格模板（样式来源未知）。 默认被@通知邮件内容模板如下： 您在"> 上的留言有新回复啦！ 同学，您曾在文章上发表评论： 给您的回复如下： 您可以点击 ">查看回复的完整內容 ，欢迎再次光临 "> 。 a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none} @通知模板中的可用变量如下（注，这是邮件模板变量，请勿与云引擎环境变量混淆）： 模板变量说明 博客名称 博客首页地址 文章地址（完整路径） 收件人昵称（被@者，父级评论人） 父级评论内容 新评论者昵称 新评论内容 默认博主通知邮件内容模板如下： .wrap span { display: inline-block; } .w260{ width: 260px;} .w20{ width: 20px;} .wauto{ width: auto;} 您的"> 上有新的评论啦！ 发表评论： " target="_blank">[查看评论] a:link{text-decoration:none}a:visited{text-decoration:none}a:hover{text-decoration:none}a:active{text-decoration:none} 博主通知邮件模板中的可用变量与@通知中的基本一致，和 变量不再可用。 示例
创建工作空间 前往Coding注册一个帐号 登录后点击右上角的Cloud Studio 点击设置，将 ssh 公钥添加到Coding或Github或者其他的 Git 仓库的个人公钥列表 点击工作空间，新建工作空间 从零开始搭建 Hexo 工作空间名称能自己看懂就行，运行环境选择预置环境、Node.js，代码来源选空，然后创建 点击刚刚创建的工作空间 按下键盘Ctrl+~打开终端 按照官方教程依次输入以下命令就可以了 npm install hexo-cli -ghexo init blogcd blognpm install 到这里一个博客就基本搭建完成了，其他的去看Hexo 官方文档就可以了 已经搭建好了 Hexo 工作空间名称能自己看懂就行，运行环境选择预置环境、Node.js，代码来源选仓库，并在下面输入你源码仓库的SSH地址，然后创建 点击刚刚创建的工作空间，它会自动克隆你的源码，你只需要运行npm install命令安装所需依赖就可以了 预览 我们在本地只需运行hexo server就可以在http://localhost:4000预览了，不过用Cloud Studio的话运行hexo server命令后，需要Ctrl+Shift+P打开命令面板，输入preview,选择Preview: Open Preview Tab输入端口号（默认 4000）回车就可以了 插件（可选） 如果你用过 Vscode, 下面可以不用看了，安装你喜欢的插件就可以了 点击左边的Extensions可以安装扩展，这里推荐几个适用于编辑 Hexo 的插件 JavaScript 支持 在欢迎使用页面点击安装对JavaScript的支持，右下角会有弹窗，确定即可 Markdown Preview Enhanced Markdown 预览插件
前言 之前搞网页 Live2d 模型的时候在网上找了很多文章，但大部分都只支持moc格式的模型，不支持moc3格式的模型。 如果你的模型是moc格式，请参考给网页添加一个 Live2D 看板娘（前端） 最近在Github上看到这个项目AzurLaneL2DViewer, 根据这个项目做成了 JS 库。 使用前请查看live2dcubismcore的许可协议 loadStyle("/hexo-github/style.css"); loadStyle("/hexo-github/octicons/octicons.css"); new Badge("#badge-container-HCLonely-Live2dV3-021efa5", "HCLonely", "Live2dV3", "021efa5", false); 使用方法 在标签内添加如下内容： 在之前添加以下内容： window.onload = () => { new l2dViewer({ el: document.getElementById('L2dCanvas'), // 要添加Live2d的元素, 支持dom选择器和jq选择器 basePath: 'https://cdn.jsdelivr.net/gh/HCLonely/Live2dV3/assets', // 模型根目录 modelName: 'biaoqiang_3', // 模型名称 sounds: [ // 触摸播放声音 'sounds/demo.mp3', // 相对路径是相对于模型文件夹 'https://cdn.jsdelivr.net/npm/live2dv3@latest/assets/biaoqiang_3/sounds/demo.mp3' // 也可以是网址 ] })} 参数 参数类型描述默认 el[必需] DOM 对象或 jQuery 对象要挂载 Live2d 模型的元素, 支持 DOM 选择器和 jQuery 选择器，例：document.getElementById('L2dCanvas')或document.querySelector('#L2dCanvas')或$('#L2dCanvas')null basePath[必需] String模型根目录null modelName[必需] String模型目录null width[可选] NumberCanvas 宽度，单位: px500 height[可选] NumberCanvas 高度，单位: px300 sizeLimit[可选] Boolean当窗口大小小于设置的宽或高时不加载模型false mobileLimit[可选] Boolean移动端不加载模型false sounds[可选] Array触摸播放声音， 留空则不播放null 方法 loadModel(modelName?) 重新加载/更换模型 Demo https://live2dv3demo.hclonely.com/
loadStyle("/hexo-github/style.css"); loadStyle("/hexo-github/octicons/octicons.css"); new Badge("#badge-container-HCLonely-hexo-tag-steamgame-eb96928", "HCLonely", "hexo-tag-steamgame", "eb96928", false); 用于在 Hexo 博客中嵌入 steam 游戏。 安装 npm install hexo-tag-steamgame --save 使用方法 嵌入单个游戏 {% steamgame appid description %}```* 批量嵌入游戏```Nunjucks{% steamgames %}appidappidappidappidappidappid{% endsteamgames %} 参数 appid: Steam 游戏 id.description(可选): 用于替换默认游戏简介。 Demo {% steamgame 1057090 %}```{% steamgame 1057090 %}```Nunjucks{% steamgame 1057090 "I like it." %}```{% steamgame 1057090 "I like it." %}```Nunjucks{% steamgames %}2615701057090{% endsteamgames %} License MIT
本项目不再维护，在线编辑建议使用code-server! loadStyle("/hexo-github/style.css"); loadStyle("/hexo-github/octicons/octicons.css"); new Badge("#badge-container-HCLonely-hexo-online-server-079d0a2", "HCLonely", "hexo-online-server", "079d0a2", false); 本插件已实现以下功能: 在线新建，编辑，删除 post 和 page(默认路径) hexo clean,hexo server,hexo deploy 源码同步 需求 Node.js >= 10.0 Hexo 4.X(只测试了 4.X) Git mac 系统close server功能无法使用(我没有 mac 设备，无法测试) 准备工作 将源码托管到 Git 仓库(建议使用私人仓库, 只在本地使用可无视) 配置好 git, 确认可以使用以下默认命令进行同步: git pull git add --all . git commit -m "..." git push 使用 安装 npm install hexo-online-server 配置 新建config.json文件, 内容如下(注释删掉): { "indexPath":"/",// 自定义主页路径, 以"/"结尾 "port": 4001,// http监听端口 "wsPort": 4002,//websocke监听端口 "secret":"",//用来签名session ID cookie,https://www.npmjs.com/package/express-session#secret "user":"",//登录用户名 "passwordHash": "",//密码加密后的字符串 "autoSave": 300000,//编辑文章时自动保存时间, 单位:ms, 0为不自动保存 "noticeUrl":"",//当有用户登录时向`此链接+message`发送get请求，留空则不通知 "pull":["git pull"],//从git同步命令 "push":["git add --all .","git commit -m 'Update at {time}'","git push"],//同步到git命令 "ssl":false,//是否启用SSL "private":{//启用ssl需配置此项 "key":"",//SSL证书key路径 "crt":""//SSL证书路径 }} 注意把后面的注释删掉！ 把config.json文件保存到你的博客目录以外的地方, 在_config.yml中添加: onlineConfigPath: '../config.json' #`config.json`文件路径 使用以下命令获取加密密码, 将得到的passwordHash添加到config.json文件: > hexo bcrypt 你的密码 运行hexo online, 浏览器打开http://localhost:4001/ 常见问题 源码同步 如果你只在本地或只在服务器使用，可以选择不进行同步， 如果你本地和服务器都使用，每次编辑前请从git同步，编辑完成后同步到git 部署 如果你使用的自动部署，直接将源码同步到 git 仓库即可，不用hexo deploy LICENSE MIT
注意，本文方法主要用于 Butterfly 主题，其他主题需要有一定的前端知识 ！！！ DIY 前请先备份！！！ 本文基于 Butterfly 主题 3.0.0 之前的版本修改！ 3.0.0 版本之后的部分内容可能需要调整！ 对前端及自己使用的主题不太了解的话建议不要随意修改！ 本文介绍的所有修改效果都可以在Demo 网站中查看！ 如果修改过程中出现问题请先查看Demo 网站源码对比一下有没有错误！ Pixiv 日榜 Butterfly 主题 在themes\Butterfly\layout\includes\widget文件夹新建card_pixiv.pug文件，文件内容如下： .card-widget.card-pixiv .card-content .item-headline i.fa.fa-image(aria-hidden="true") span= _p('aside.card_pixiv') iframe(src="https://cloud.mokeyjay.com/pixiv" frameborder="0" style="width:99%;height:380px;margin:0;") https://cloud.mokeyjay.com/pixiv使用的是超能小紫提供的服务，也可以自行搭建，搭建方式请看这里 编辑themes\Butterfly\layout\includes\widget\index.pug文件，在你想要显示的位置插入以下代码： if theme.aside.card_pixiv include ./card_pixiv.pug 编辑butterfly.yml文件，在card_webinfo下面添加一行card_pixiv: true 编辑themes\Butterfly\languages\zh-CN.yml文件(请根据你的网站语言选择)，找到card_announcement: 公告, 在下面添加一行card_pixiv: Pixiv日榜Top50(后面的文本可自定义) 如果不想显示，直接把butterfly.yml文件的card_pixiv: true改为card_pixiv: false即可 其他主题 将以下内容插入到需要显示的地方： 访客地图 Butterfly 主题 前往clustrmaps网站注册一个帐号 找到Free Tools下面的Website Widget, 点击Get Map Widget 输入你的博客网址，点击Next 根据你自己的喜好选择样式Map widget或Globe Widget 找到如下代码，记住 src(******的部分): 在themes\Butterfly\layout\includes\widget文件夹新建card_map.pug文件，文件内容如下： .card-widget.card-map .card-content .item-headline i.fas.fa-globe-asia(aria-hidden="true") span= _p('aside.card_map') //- 下面这行适用于3D地图(Globe Widget) script#clstr_globe(type="text/javascript" defer="defer" src="******************") //- 下面这行适用于平面地图(Map Widget) script#clustrmaps(type="text/javascript" defer="defer" src="******************") ******部分填写上面的 src, 3D 地图和平面地图任选一个，不用的把代码删掉 编辑themes\Butterfly\layout\includes\widget\index.pug文件，在你想要显示的位置插入以下代码： if theme.aside.card_map include ./card_map.pug 编辑butterfly.yml文件，在card_webinfo下面添加一行card_map: true 编辑themes\Butterfly\languages\zh-CN.yml文件(请根据你的网站语言选择)，找到card_announcement: 公告, 在下面添加一行card_map: 访客地图(后面的文本可自定义) 如果不想显示，直接把butterfly.yml文件的card_map: true改为card_map: false即可 其他主题 将上面第 5 步中的代码插入到需要显示的地方。 文章日历 本方法只适用于 Butterfly 主题！ 安装hexo-generator-calendar插件 npm install --save git://github.com/howiefh/hexo-generator-calendar.git 下载calendar.js和languages.js文件，保存到themes\Butterfly\source\js目录 calendar.js languages.js 编辑calendar.js文件，在文件最后}(jQuery));之前添加: $(document).ready(function () { $('#calendar').aCalendar('zh-CN');//'zh-CN'请根据自己博客的语言选择}); 编辑butterfly.yml文件, 以下两个你butterfly.yml文件里有哪个就用那个，不要都用！ 在CDN_USE->js下面添加如下内容： - /js/calendar.js- /js/languages.js 在inject->bottom下面添加如下内容： - - 下载calendar.styl文件，保存到themes\Butterfly\source\css\_layout目录 在themes\Butterfly\layout\includes\widget文件夹新建card_calendar.pug文件，文件内容如下： .card-widget.card-calendar .card-content .item-headline i.far.fa-calendar-alt(aria-hidden="true") span= _p('aside.card_calendar') div.widget-wrap div#calendar.widget 编辑themes\Butterfly\layout\includes\widget\index.pug文件，在你想要显示的位置插入以下代码： if theme.aside.card_calendar include ./card_calendar.pug 编辑butterfly.yml文件，在card_webinfo下面添加一行card_calendar: true 编辑themes\Butterfly\languages\zh-CN.yml文件(请根据你的网站语言选择)，找到card_announcement: 公告, 在下面添加一行card_calendar: 文章日历(后面的文本可自定义) 如果不想显示，直接把butterfly.yml文件的card_calendar: true改为card_calendar: false即可 投票系统 Butterfly 主题 前往widgetpack注册账号 登陆后在点击左侧侧边栏Rating->Install, 你会看到如下代码，记住id: wpac_init = window.wpac_init || [];wpac_init.push({widget: 'Rating', id: *****});(function() { if ('WIDGETPACK_LOADED' in window) return; WIDGETPACK_LOADED = true; var mc = document.createElement('script'); mc.type = 'text/javascript'; mc.async = true; mc.src = 'https://embed.widgetpack.com/widget.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);})();Star Rating WIDGET PACK 在博客根目录/themes/Butterfly/layout/includes/post/目录内新建文件rate.pug, 内容如下： #wpac-ratingscript. wpac_init = window.wpac_init || []; wpac_init.push({widget: 'Rating', id: #{theme.rate.id}}); (function() { if ('WIDGETPACK_LOADED' in window) return; WIDGETPACK_LOADED = true; var mc = document.createElement('script'); mc.type = 'text/javascript'; mc.async = true; mc.src = '//embed.widgetpack.com/widget.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling); })();style. #wpac-rating { margin-top: 20px; text-align: center; } 编辑博客根目录/themes/Butterfly/layout/post.pug文件，在!=partial('includes/post/reward', {}, {cache:theme.fragment_cache})下方添加： if theme.rate.enable include includes/post/rate.pug 注意缩进if与上面的if对齐 在Butterfly.yml文件内添加： rate: enable: true id: #上面记住的id 其他主题 将第 2 步生成的代码插入到需要显示的位置。 加载中动画 Butterfly 主题 更新到最新版即可。 其他主题 将以下内容添加到标签内： 将以下内容添加到标签后面： 加载中... 将以下内容添加到标签前面： var endLoading = function () { document.body.style.overflow = 'auto'; document.getElementById('loading-box').classList.add("loaded"); } window.addEventListener('load',endLoading); 页脚跳动的♥ Butterfly 主题 编辑博客根目录/themes/Butterfly/layout/includes/footer.pug文件，将©${theme.since} - ${nowYear} By ${config.author}改为©${theme.since} - ${nowYear + ' '} ${config.author}, 将©${nowYear} By ${config.author}改为©${nowYear + ' '} ${config.author} 编辑butterfly.yml文件, 以下两个你butterfly.yml文件里有哪个就用那个，不要都用！ 在CDN_USE->css下面添加如下内容： - https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/heartbeat.min.css 在inject->head下面添加如下内容： - 其他主题 将添加到需要显示的位置 将以下内容添加到标签内： 页脚显示网站运行时间 Butterfly 主题 编辑博客根目录/themes/Butterfly/layout/includes/footer.pug文件，在最后span=theme.ICP.text下一行添加以下内容： #running-time script. setInterval(()=>{let create_time=Math.round(new Date('2020-01-03 00:00:00').getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml='本站已安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000); 注意#running-time与上面的if theme.ICP.enable对齐！ 要将2020-01-03 00:00:00改为你网站的起始时间！ 其他主题 将以下内容添加到需要显示的位置 setInterval(()=>{let create_time=Math.round(new Date('2020-01-03 00:00:00').getTime()/1000);let timestamp=Math.round((new Date().getTime()+8*60*60*1000)/1000);let second=timestamp-create_time;let time=new Array(0,0,0,0,0);if(second>=365*24*3600){time[0]=parseInt(second/(365*24*3600));second%=365*24*3600;}if(second>=24*3600){time[1]=parseInt(second/(24*3600));second%=24*3600;}if(second>=3600){time[2]=parseInt(second/3600);second%=3600;}if(second>=60){time[3]=parseInt(second/60);second%=60;}if(second>0){time[4]=second;}currentTimeHtml='本站已安全运行 '+time[0]+' 年 '+time[1]+' 天 '+time[2]+' 时 '+time[3]+' 分 '+time[4]+' 秒';document.getElementById("running-time").innerHTML=currentTimeHtml;},1000); 要将2020-01-03 00:00:00改为你网站的起始时间！ 双评论系统 此方法只适用于 Butterfly 主题！ 这里以同时使用Valine和Gitalk, 默认使用Valine为例。 请确认Valine和Gitalk已开启并正确配置。 修改themes/Butterfly/layout/includes/comments/index.pug文件，将所有的else if改为if, 并在span= ' ' + _p('comment')下面添加： a#switch-comment(href="javascript:void(0);" title="切换为Gitalk" target="_self") i.fa.fas.fa-toggle-off(aria-hidden="true") 隐藏一个评论，保留一个默认评论 隐藏valine: 修改themes/Butterfly/layout/includes/comments/valine.pug文件，在#vcomment.vcomment后面添加(style=‘display:none;’) 隐藏gitalk: 修改themes/Butterfly/layout/includes/comments/gitalk.pug文件，在#gitalk-container后面添加(style=‘display:none;’) 隐藏其他评论系统方法与上面类似 在themes/Butterfly/source/js/third-party/目录新建switch_comments.js文件，内容如下： $('#switch-comment').click(function () { switchComment() return false})function switchComment () { const title = $('#switch-comment').attr('title') === '切换为Gitalk' ? '切换为Valine' : '切换为Gitalk' const i = $('#switch-comment>i') if ($('#gitalk-container').css('display') === 'none') { $('#vcomment').slideUp('normal', () => { $('#gitalk-container').slideDown('normal', () => { $('#switch-comment').attr('title', title) i.hasClass('fa-toggle-off') ? i.removeClass('fa-toggle-off').addClass('fa-toggle-on') : i.removeClass('fa-toggle-on').addClass('fa-toggle-off') }) }) } else { $('#gitalk-container').slideUp('normal', () => { $('#vcomment').slideDown('normal', () => { $('#switch-comment').attr('title', title) i.hasClass('fa-toggle-off') ? i.removeClass('fa-toggle-off').addClass('fa-toggle-on') : i.removeClass('fa-toggle-on').addClass('fa-toggle-off') }) }) }} 编辑butterfly.yml文件, 以下两个你butterfly.yml文件里有哪个就用那个，不要都用！ 在CDN_USE->js下面添加如下内容： - /js/third-party/switch_comments.js 在inject->bottom下面添加如下内容： - 如果你使用的其他评论系统注意替换上面的切换为Gitalk, 切换为Valine, #gitalk-container, #vcomment 切换图标使用的fontawesome, 兼容V4和V5, 如果你是用的其他图标库，请替换fa-toggle-on和fa-toggle-off 随机文章跳转 在博客根目录/scripts(没有请自行创建)下新建random.js文件，内容如下： hexo.extend.generator.register('random', function (locals) { const config = hexo.config.random || {} const posts = [] for (const post of locals.posts.data) { if (post.random !== false) posts.push(post.path) } return { path: config.path || 'random/index.html', data: `var posts=${JSON.stringify(posts)};window.open('/'+posts[Math.floor(Math.random() * posts.length)],"_self")` }}) 打开/random/就会随机跳转一篇文章 可选配置 可以在_config.yml添加以下配置： random: path: # 随机链接路径，默认"random/index.html" 如果不想随机跳转到某篇文章，只需在这篇文章Front-matter添加random: false 文章统计图表 从matery 主题上看到了文章发布统计图、标签统计图和文章分类统计图，觉得挺好看，就扒下来做了个插件。 因为使用 Tag 会导致文章获取不全，所以本插件直接使用 html 标签渲染，而不是使用 Tag。由于使用了 cheerio 模块，如果你使用了 html 压缩插件，可能会出现压缩报错，暂时无解。 安装 npm install hexo-charts -S 使用 注意！下面的标签可以放到post和不含type的page的md文件中，含有type的page请自行修改相应的模板文件，这个就不要来问我了，因为每个人用的主题可能都不一样，建议去问主题的作者。 文章发布统计图 标签统计图 文章分类统计图 示例 Butterfly 主题将图表添加到归档、分类、标签页面 将文章发布统计图添加到归档页面 在主题目录/Butterfly/layout/archive.pug文件的#archive下面添加一行#posts-chart, 新添加的比上一行多缩进两个空格。 block content include ./includes/mixins/article-sort.pug #archive #posts-chart 将标签统计图和分类统计图分别添加到标签和分类页面 编辑主题目录/Butterfly/layout/page.pug文件，在.tag-cloud下面添加一行#tags-chart，在.category-content下面添加一行#categories-chart，新添加的比上一行多缩进两个空格。 block content if page.type === 'tags' .tag-cloud #tags-chart else if page.type === 'categories' .category-content #categories-chart 文章二维码(仅 Butterfly 主题) 安装hexo-helper-qrcode插件: npm install hexo-helper-qrcode -S 编辑主题目录/Butterfly/layout/includes/header/post-info.pug, 在文件最后添加以下内容： span.post-qrcode span.post-meta__separator | i.fa.fa-qrcode.post-meta__icon.fa-fw(aria-hidden="true") a(href="javasvript:;" onmouseover='document.getElementById("post-qrcode").style.display="block"' onmouseout='document.getElementById("post-qrcode").style.display="none"')='二维码' div#post-qrcode.post-qrcode-img img#post-img(src=qrcode(page.permalink)) 注意span.post-qrcode要与上面的span.post-meta-commentcount对齐！ valine 评论添加博主等标签(仅 Butterfly 主题) 以下内容仅适用于 Butterfly 主题 = V4.0 请往下翻！ 下载valine.pug文件，替换themes/Butterfly/layout/includes/comments/valine.pug 编辑butterfly.yml文件，找到valine配置，添加以下配置项: master: # md5加密后的博主邮箱 - f8c7c3961aea2c203160e90cd3b3a26a friends: # md5加密后的小伙伴邮箱 - 5c2105bbfe6rfc02a6f6ae26dad3819c - a0adabb31677df92a2405fb18a02ee4d metaPlaceholder: # 输入框的背景文字 nick: 昵称/QQ号(必填) mail: 邮箱(必填) link: 网址(https://) tagMeta: '博主,小伙伴,访客' # 标签要显示的文字,默认'博主,小伙伴,访客' verify: false # 评论时是否需要验证，需jQuery支持 编辑butterfly.yml文件，将CDN中的valine链接改为https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js 改完之后hexo clean一下，不然不会生效 以下内容仅适用于 Butterfly 主题 >= V4.0！ 编辑butterfly.yml文件，找到valine配置，在option下添加以下配置项(注意缩进！): option: master: # md5加密后的博主邮箱 - f8c7c3961aea2c203160e90cd3b3a26a friends: # md5加密后的小伙伴邮箱 - 5c2105bbfe6rfc02a6f6ae26dad3819c - a0adabb31677df92a2405fb18a02ee4d metaPlaceholder: # 输入框的背景文字 nick: 昵称/QQ号(必填) mail: 邮箱(必填) link: 网址(https://) tagMeta: # 标签要显示的文字,请注意顺序！ - 博主 - 小伙伴 - 访客 编辑butterfly.yml文件，将CDN中的valine链接改为https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js 改完之后hexo clean一下，不然不会生效
为了避免每次找模块时都要百度，这里记一下我比较常用的模块及其简单的使用。 cheerio cheerio是 jquery 核心功能的一个快速灵活而又简洁的实现，主要是为了用在服务器端需要对 DOM 进行操作的地方。 安装 npm install cheerio 使用 const cheerio = require('cheerio'),$ = cheerio.load('Hello, world!'); axios-https-proxy-fix axios-https-proxy-fix是修复axios代理 https 失败的分支版本。 安装 npm install axios-https-proxy-fix 使用 中文文档 moment moment 是一个 JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期。 安装 npm install moment 使用 const moment = require('moment '),moment().format('YYYY-MM-DD HH:mm:ss'); Lodash Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 安装 npm install lodash 使用 中文文档 ali-oss ali-oss 是使用 NodeJs 操作阿里云 OSS 官方模块。 安装 npm install ali-oss 使用 中文文档 Puppeteer Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。 安装 npm i puppeteer 使用 中文文档 nrm nrm(npm registry manager )是 npm 的镜像源管理工具，有时候国外资源太慢，使用这个就可以快速地在 npm 源间切换。 安装 npm install -g nrm 使用 查看可选的源 > nrm ls* npm -------- https://registry.npmjs.org/ yarn ------- https://registry.yarnpkg.com/ cnpm ------- http://r.cnpmjs.org/ taobao ----- https://registry.npm.taobao.org/ nj --------- https://registry.nodejitsu.com/ npmMirror -- https://skimdb.npmjs.com/registry/ edunpm ----- http://registry.enpmjs.org/ 切换到 taobao 源 > nrm use taobao Registry has been set to: https://registry.npm.taobao.org/
您可以订阅此RSS以获取更多信息