content.json

{"meta":{"title":"JackTang","subtitle":"JackTangの博客","description":"硕士 | 计算机科学与技术 | 虚拟现实技术","author":"JackTang","url":"https://19492035.xyz","root":"/"},"pages":[{"title":"404","date":"2019-08-10T08:41:10.000Z","updated":"2024-04-06T07:48:46.107Z","comments":true,"path":"404.html","permalink":"https://19492035.xyz/404.html","excerpt":"","text":""},{"title":"","date":"2024-04-15T03:33:19.496Z","updated":"2024-04-15T03:33:19.496Z","comments":true,"path":"baidu_verify_codeva-MN1KKIkDWE.html","permalink":"https://19492035.xyz/baidu_verify_codeva-MN1KKIkDWE.html","excerpt":"","text":"layout:false 598d9af5fe0e0ab30de66e1d8b2f8cf6"},{"title":"","date":"2024-05-04T07:17:51.167Z","updated":"2024-05-03T06:33:32.246Z","comments":true,"path":"verification .html","permalink":"https://19492035.xyz/verification%20.html","excerpt":"","text":"verify_f0ea2b9f9d49f82b34afe00385096bb0"},{"title":"放松一下","date":"2019-08-10T08:41:10.000Z","updated":"2024-04-24T15:19:10.108Z","comments":true,"path":"List/index.html","permalink":"https://19492035.xyz/List/index.html","excerpt":"","text":"555电影蛋蛋影视影音资源共享"},{"title":"about","date":"2019-10-24T16:00:00.000Z","updated":"2024-04-06T07:48:46.220Z","comments":true,"path":"about/index.html","permalink":"https://19492035.xyz/about/index.html","excerpt":"","text":""},{"title":"archives","date":"2019-10-24T16:00:00.000Z","updated":"2024-04-06T07:48:46.221Z","comments":true,"path":"archives/index.html","permalink":"https://19492035.xyz/archives/index.html","excerpt":"","text":""},{"title":"categories","date":"2019-10-24T16:00:00.000Z","updated":"2024-04-06T07:48:46.222Z","comments":true,"path":"categories/index.html","permalink":"https://19492035.xyz/categories/index.html","excerpt":"","text":""},{"title":"统计","date":"2020-10-31T02:11:28.000Z","updated":"2024-04-06T07:48:46.223Z","comments":true,"path":"census/index.html","permalink":"https://19492035.xyz/census/index.html","excerpt":"","text":""},{"title":"留言板","date":"2019-10-24T16:00:00.000Z","updated":"2024-04-09T08:01:55.354Z","comments":true,"path":"contact/index.html","permalink":"https://19492035.xyz/contact/index.html","excerpt":"","text":"畅所欲言 在这里可以留下你的足迹，欢迎在下方留言，欢迎交换友链，一起交流学习！ 友链 Luckeyの友链信息 博客名称: Luckeyの博客 博客网址: http://www.luckyzmj.cn"},{"title":"友链","date":"2019-07-19T08:42:10.000Z","updated":"2024-04-06T07:48:46.224Z","comments":true,"path":"friends/index.html","permalink":"https://19492035.xyz/friends/index.html","excerpt":"","text":""},{"title":"资源分享","date":"2019-07-19T08:40:27.000Z","updated":"2024-04-06T07:48:46.225Z","comments":true,"path":"resource/index.html","permalink":"https://19492035.xyz/resource/index.html","excerpt":"","text":""},{"title":"tags","date":"2019-07-19T08:40:27.000Z","updated":"2024-04-06T07:48:46.225Z","comments":true,"path":"tags/index.html","permalink":"https://19492035.xyz/tags/index.html","excerpt":"","text":""},{"title":"相册","date":"2024-04-08T01:48:33.029Z","updated":"2024-04-06T07:48:46.113Z","comments":true,"path":"List/galleries/index.html","permalink":"https://19492035.xyz/List/galleries/index.html","excerpt":"","text":""},{"title":"听听音乐","date":"2019-07-19T08:40:27.000Z","updated":"2024-04-06T07:48:46.122Z","comments":true,"path":"List/tools/index.html","permalink":"https://19492035.xyz/List/tools/index.html","excerpt":"","text":""},{"title":"听听音乐","date":"2019-07-19T08:40:27.000Z","updated":"2024-04-06T07:48:46.122Z","comments":true,"path":"List/music/index.html","permalink":"https://19492035.xyz/List/music/index.html","excerpt":"","text":""},{"title":"视频","date":"2019-08-10T08:41:10.000Z","updated":"2024-04-24T15:18:23.841Z","comments":true,"path":"List/movies/index.html","permalink":"https://19492035.xyz/List/movies/index.html","excerpt":"","text":""},{"title":"乖巧小狗","date":"2024-04-06T07:48:46.113Z","updated":"2024-04-06T07:48:46.113Z","comments":true,"path":"List/galleries/乖巧小狗/index.html","permalink":"https://19492035.xyz/List/galleries/%E4%B9%96%E5%B7%A7%E5%B0%8F%E7%8B%97/index.html","excerpt":"","text":""},{"title":"动漫人物","date":"2024-04-06T07:48:46.114Z","updated":"2024-04-06T07:48:46.114Z","comments":true,"path":"List/galleries/动漫人物/index.html","permalink":"https://19492035.xyz/List/galleries/%E5%8A%A8%E6%BC%AB%E4%BA%BA%E7%89%A9/index.html","excerpt":"","text":""},{"title":"二次元风","date":"2024-04-06T07:48:46.114Z","updated":"2024-04-06T07:48:46.114Z","comments":true,"path":"List/galleries/二次元风/index.html","permalink":"https://19492035.xyz/List/galleries/%E4%BA%8C%E6%AC%A1%E5%85%83%E9%A3%8E/index.html","excerpt":"","text":""},{"title":"城市风光","date":"2024-04-08T01:48:23.389Z","updated":"2024-04-06T07:48:46.116Z","comments":true,"path":"List/galleries/城市风光/index.html","permalink":"https://19492035.xyz/List/galleries/%E5%9F%8E%E5%B8%82%E9%A3%8E%E5%85%89/index.html","excerpt":"","text":""},{"title":"动漫插画","date":"2024-04-06T07:48:46.115Z","updated":"2024-04-06T07:48:46.115Z","comments":true,"path":"List/galleries/动漫插画/index.html","permalink":"https://19492035.xyz/List/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/index.html","excerpt":"","text":""},{"title":"动漫风景","date":"2024-04-06T07:48:46.116Z","updated":"2024-04-06T07:48:46.116Z","comments":true,"path":"List/galleries/动漫风景/index.html","permalink":"https://19492035.xyz/List/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/index.html","excerpt":"","text":""},{"title":"呆萌猫咪","date":"2024-04-06T07:48:46.116Z","updated":"2024-04-06T07:48:46.116Z","comments":true,"path":"List/galleries/呆萌猫咪/index.html","permalink":"https://19492035.xyz/List/galleries/%E5%91%86%E8%90%8C%E7%8C%AB%E5%92%AA/index.html","excerpt":"","text":""},{"title":"清新花卉","date":"2024-04-06T07:48:46.117Z","updated":"2024-04-06T07:48:46.117Z","comments":true,"path":"List/galleries/清新花卉/index.html","permalink":"https://19492035.xyz/List/galleries/%E6%B8%85%E6%96%B0%E8%8A%B1%E5%8D%89/index.html","excerpt":"","text":""},{"title":"璀璨星空","date":"2024-04-06T07:48:46.118Z","updated":"2024-04-06T07:48:46.118Z","comments":true,"path":"List/galleries/璀璨星空/index.html","permalink":"https://19492035.xyz/List/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/index.html","excerpt":"","text":""},{"title":"甜美食品","date":"2024-04-06T07:48:46.118Z","updated":"2024-04-06T07:48:46.118Z","comments":true,"path":"List/galleries/甜美食品/index.html","permalink":"https://19492035.xyz/List/galleries/%E7%94%9C%E7%BE%8E%E9%A3%9F%E5%93%81/index.html","excerpt":"","text":""},{"title":"炫酷跑车","date":"2024-04-06T07:48:46.117Z","updated":"2024-04-06T07:48:46.117Z","comments":true,"path":"List/galleries/炫酷跑车/index.html","permalink":"https://19492035.xyz/List/galleries/%E7%82%AB%E9%85%B7%E8%B7%91%E8%BD%A6/index.html","excerpt":"","text":""},{"title":"自然风景","date":"2024-04-06T07:48:46.119Z","updated":"2024-04-06T07:48:46.119Z","comments":true,"path":"List/galleries/自然风景/index.html","permalink":"https://19492035.xyz/List/galleries/%E8%87%AA%E7%84%B6%E9%A3%8E%E6%99%AF/index.html","excerpt":"","text":""}],"posts":[{"title":"灵沐小程序微信端配置","slug":"灵沐小程序微信端配置","date":"2024-06-27T14:29:40.000Z","updated":"2024-06-27T14:41:12.591Z","comments":true,"path":"posts/13ce3e59.html","link":"","permalink":"https://19492035.xyz/posts/13ce3e59.html","excerpt":"","text":"微信端 ​后台菜单—内容管理—wxSet 章节视频教程 ​点击：03-灵沐数据模型 配置说明 ​ appId：小程序ID appName:小程序名称 indexBg:首页背景(多个背景回车换行输入) notice:公告 logo:logo popNotice:弹窗通知 docHost:文档置顶 topicHost:文档置顶 adCache:广告缓存(开启一天内容同篇文章可重复阅读) host:资源置顶 (注：置顶需要格式输入) 单篇文章示例：&filters[id][$eq]=文章ID 多篇文章示例：&filters[id][$eq]=1&filters[id][$eq]=2 attendviImg：微信公众号二维码 (注：使用方式) 在此字段输入微信公众号二维码地址之后 在金刚区选`wx_default`类型，输入页面值`../follow/follow` shareTitle：分享标题 shareImg：分享图片 vajra：金刚区 金刚区注解 title：标题 icon：图标地址 url：跳转web地址 appId：小程序ID type：功能类型 wx_default：跳转二级页面，需在Url输入页面地址 wx_program：跳转小程序需要在appId输入小程序id，url默认为首页 wx_web：跳转微信公众号地址，需在url输入地址 wx_kefu：客服功能 wx_share：分享小程序 js // 关注 title:\"关注\" icon:\"../../images/attention.png\" type:\"wx_default\" url:\"../follow/follow\" appId:\"\" //客服(微信有效) title:\"客服\" icon:\"../../images/kefu.png\" type:\"wx_kefu\" url:\"\" appId:\"\" //打赏 title:\"打赏\" icon:\"../../images/kefu.png\" type:\"wx_default\" url:\"../about/about\" appId:\"\" //搜索关键字：url中type对应Image(壁纸)，Doc(文档)，Post(资源)，Topic(题库)，active表示默认选中第几个选项卡 title:\"银发\" icon:\"../../images/new.png\" type:\"wx_default\" url:\"../lists/lists?search=\" appId:\"\" //主题类型：type对应Image(壁纸)，Doc(文档)，Post(资源)，Topic(题库) title:\"题库\" icon:\"../../images/new.png\" type:\"wx_default\" url:\"/pages/postType/postType?type=Topic\" appId:\"\" //福利 title:\"题库\" icon:\"../../images/new.png\" type:\"`wx_program\" url:\"/pages/index/index\" appId:\"wxc75686797e36bc24\" adSwitch：全局广告开关 jiliAd：激励视频广告ID chapingAd：插屏广告ID videoAd：视频广告ID about：关于我们 indexType：首页切列表 分类类型 Post：资源下载类型 Doc：文档阅读类型 Image：壁纸类型 Topic：题库类型 copyUrl：是否启动一键复制按钮(不建议开启，若开启需要设置用户隐私协议) popNoticeUrl：弹窗内容访问二极页面 html //公众号地址 https://mp.weixin.qq.com/MzIxMzQ2Nzc3OA //小程序二级页面 /pages/wallcover/wallcover?id=16","categories":[{"name":"小程序篇","slug":"小程序篇","permalink":"https://19492035.xyz/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"微信小程序","slug":"微信小程序","permalink":"https://19492035.xyz/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"},{"name":"灵沐","slug":"灵沐","permalink":"https://19492035.xyz/tags/%E7%81%B5%E6%B2%90/"}],"author":"jacktang"},{"title":"星宿小程序","slug":"星宿小程序","date":"2024-05-16T04:51:29.000Z","updated":"2024-05-16T04:58:50.516Z","comments":true,"path":"posts/7703d477.html","link":"","permalink":"https://19492035.xyz/posts/7703d477.html","excerpt":"","text":"0.页面预览 ​ 注意 星宿V2.X版本文档和代码已经不在提供维护，建议老版本升级星宿V3.0，当然如果你个人主体以及有十分多的流量稳妥暂时不升级为好 1.源码及工具下载 ​HBulider X App开发版:https://www.dcloud.io/hbuilderx.html 微信小程序开发工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 小程序源码：点击下载 教程：星宿UI V3.0从安装到使用全过程 2.wordpress后台设置 ​4.1.安装 ​百度下载wordpress最新版本 4.2.设置伪静态 ​ 4.3.设置固定链接 ​ 4.4.设置媒体裁剪为0 ​ 3.设置SSL证书 ​宝塔后台-—网站-—设置申请SSL证书 4.安装插件 ​下载源码在目录中找到接口和插件文件夹，wordpress后台–插件--上传安装 wordpress-—插件-—上传fengrui-xingshu.zip插件 注意 如果出现存档不兼容，请将fengrui-xingshu.zip插件通过宝塔上传到wordpress后台/wp-content/plugins目录中解压 wordpress-—插件-—上传PODS.zip插件 5.导入pods字段 ​7.1wordpress后台设置pods菜单-—组件-—lmport/Export packages 7.2点击lmport/Export packages，上传pods.json文件 7.3.随后左边菜单就会多出一个基本配置-—新建文章-—关于我们，小程序的基本配置全在这里 6.修改源码 ​在打开下载好的星宿UI小程序前端源码放入HBuilder X中 修改域名 ​域名修改在源码utils/http.js修改 js const baseUrl = 'https://www.frbkw.com'; 修改App ID ​小程序App id在源码manifest.json找到微信小程序ID且修改 修改名称 ​在源码pages.json中找到星宿UI-枫瑞博客修改成你的（有2处） 7.运行调试 ​下载安装HBulider X 之后点击左上角点击偏好设置-—设置—–运行配置—-配置相对于的开发工具路径 运行程序 ​hbuilder x 菜单点击运行----运行到微信小程序 8.HBuilder X修改标识 ​如果是第一次请登录Hbuilder x用户点击manifest.json文件基础配置下的重新获取uni-app应用标识 如果之前已有应用标识请点击登录Hbuilder x用户点击manifest.json文件最最下方源码视图 随后修改appid保存 9.发布 ​HBuilder x 菜单点击发行-—发行到微信小程序 微信小程序后台设置-—开发设置-—服务器域名中添加request域名 基本配置 ​轮播图 ​wordpress后台基本配置里面，添加需要轮播的文章id 公告 紧急弹窗 ​滚动公告 紧急弹窗 ​全局弹窗 弹窗Url访问 ​用于全局弹窗点击确定反问其他页面，目前支持微信公众号，业务域名，二级页面 小程序logo ​输入图片地址需要https协议 金刚区 ​需要按以下格式添加，不要的部分留空不可删除 json 格式： {\"title\": \"标题\", \"type\": \"类型\", \"appid\": \"小程序ID\",\"route\":\"页面地址\",\"himg\":\"图标地址\"} 事例： {\"title\": \"视频号\", \"type\": \"xs_wxvideo_activity\", \"appid\": \"sphZH1MCAzuup7O\",\"route\":\"export/UzFfAgtgekIEAQAAAAAAkmgZ-dnzgQAAAAstQy6ubaLX4KHWvLEZgBPEvqEYVUZGRauDzNPgMJqd9yLzTJ4xAM85VZ0MYmrr\",\"himg\":\"/static/index/dstrict-1.svg\"} 金刚区类型 xs_default：跳二级页面 xs_tab：跳转底部导航 xs_program：跳转小程序 xs_business：跳转web xs_wxvideo_activity：打开视频号视频（appid：输入视频号id，以“sph”开头的id，route：视频feedId，就是视频链接） xs_bilibli：跳转b站小程序，appid参数是AV号，在PC端的播放页面打开F12输入aid即可获得 首页顶部分类 ​输入分类id存在多个请用英文逗号隔开 公众号文章 ​需要按以下格式添加，不要的部分留空不可删除 json 格式： {\"title\": \"标题\", \"hurl\": \"Url地址\", \"himg\": \"封面图片https协议\"} 事例： {\"title\": \"一本不同的张嘉佳《天堂旅行团》读后感\", \"hurl\": \"https://cdn.frbkw.com/wp-center/uploads/2021/11/1638271775-202111301930.jpg\"} 首页图文样式 ​ 1.扁平图标（默认值） 2.大图模式 选择不显示的分类 ​请输入不显示分类id，多个使用英文逗号隔开 专题分类页面样式 ​ 1.默认一级 2.显示二级分类 首先得在wordpress后台基本配置内容下选择专题分类显示样式为二级分类，在后台分类编辑中设置好一级二级菜单(父级子级菜单) () 小程序分享标题 ​小程序右上角分享的标题 小程序分享图片 ​小程序右上角分享中心图片 公众号名称 ​请输入关注微信公众号名称 公众号logo ​请输入关注微信公众号头像地址 公众号二维码 ​请输入关注微信公众号文章链接 微信激广告 ​微信广告ID 一键复制 ​开启后资源下载Url会变成随机64位编码，同时支持点击按钮复制真正的地址 分类专题 ​分类样式 ​分类列表顺序可以在wordpress后台安装simple custom post order插件拖拽改变顺序(感谢Andreas提供帮助) 封面 ​wordpress后台—-分类列表里面，选择对应的分类点击编辑就可以看到填写图片地址 置顶 ​wordpress后台—-分类列表里面，选择对应的分类点击编辑就可以看到是否置顶分类的按钮 搜索 ​标签 ​随机出现 文章详情 ​文章阅读方式 ​ 0正常阅读(默认值) 1跳转公众号 2跳转资源下载 3跳转视频号 4跳转b站 文章公告弹窗 ​文章的公告弹窗内容 文章激励视频阅读 ​请选择文章是否关闭激励视频阅读（默认不开启，最好选择一些直接下载，不然首页面审核提示强制广告） 资源激励视频下载 ​请选择资源下载是否需要激励视频（最好选择一些直接下载，不然资源页面审核提示强制广告） 资源名称 ​资源下载名称标题 资源下载方式 ​ 1.显示下载链接(默认值) 2.小程序直接下载文件 网盘地址 ​资源下载地址 提取码 ​盘下载提取码 文件下载地址 ​当值为1的时候使用小程序下载功能下载地址需要在微信小程序后台添加合法的下载域名，文件下载完成之后会提示转发好友，这样我们就可以得到下载的文件 文件下载格式 ​文件格式，例如：zip 视频号id ​视频号助手中获取，以sph开头的id 视频号feedId ​视频 feedId 就是视频链接 B站视频 ​在PC端的播放页面打开F12输入aid即可获得，或者通过其他的接口等方法 DIY 首页金刚区 ​金刚区type值星宿中有6种定义分别为： ts 1.xs_default 默认值跳二级 2.xs_tap 跳转底部导航 (感谢B站大佬`老夫的仙女梦er`反馈错误) 3.xs_program 跳转小程序 4.xs_business 跳转业务域名请在route填写网站地址 5.xs_wxvideo_activity 打开某个视频号视频 6.xs_bilibli跳转b站小程序，appid参数是AV号，但b站目前只有显式的BV号。获取视频的号，在PC端的播放页面打开F12输入aid即可获得 跳文章详情 ​在基本配置-–金刚区中可配置跳转文章详情 json 格式： {\"title\": \"标题\", \"type\": \"xs_default\", \"appid\": \"\",\"route\":\"/pages/data/data?id=文章ID\",\"himg\":\"图标地址\"} 事例： {\"title\": \"星宿V3.0\", \"type\": \"xs_default\", \"appid\": \"\",\"route\":\"/pages/data/data?id=4247\",\"himg\":\"https://www.frbkw.com/xingsu.png\"} 跳分类列表 ​在基本配置-–金刚区中可配置跳分类列表 json 格式： {\"title\": \"标题\", \"type\": \"xs_default\", \"appid\": \"\",\"route\":\"/pages/list/list?catepos=分类ID\",\"himg\":\"图标地址\"} 事例： {\"title\": \"Uni-apps\", \"type\": \"xs_default\", \"appid\": \"\",\"route\":\"/pages/list/list?catepos=147\",\"himg\":\"https://www.frbkw.com/xingsu.png\"} 跳转web-view ​在基本配置-–金刚区中可配置跳网页，个人小程序能跳转公众号，企业可以跳业务域名； json 格式： {\"title\": \"标题\", \"type\": \"xs_business\", \"appid\": \"\",\"route\":\"公众号文章地址\",\"himg\":\"图标地址\"} 事例： {\"title\": \"规划\", \"type\": \"xs_business\", \"appid\": \"\",\"route\":\"https://mp.weixin.qq.com/s/WSb53WO_Em4F81khimsbBw\",\"himg\":\"/static/index/dstrict-2.svg\"} 跳转小程序 ​在基本配置-–金刚区中可配置跳转小程序；route可以留空，留空默认跳转首页，它也可以跳转详情页面只需要写页面地址和参数 json 格式： {\"title\": \"标题\", \"type\": \"xs_program\", \"appid\": \"小程序ID\",\"route\":\"\",\"himg\":\"图标地址\"} 事例： {\"title\": \"规划\", \"type\": \"xs_program\", \"appid\": \"wx770bd62bc4ca8c7b\",\"route\":\"\",\"himg\":\"/static/index/dstrict-2.svg\"} 视频号 ​在基本配置-–金刚区中可配置跳转视频号；appid：输入视频号id，以“sph”开头的id，route：视频feedId，就是视频链接 json 格式： {\"title\": \"标题\", \"type\": \"xs_wxvideo_activity\", \"appid\": \"小程序ID\",\"route\":\"\",\"himg\":\"图标地址\"} 事例： {\"title\": \"视频号\", \"type\": \"xs_wxvideo_activity\", \"appid\": \"sphZH1MCAzuup7O\",\"route\":\"export/UzFfAgtgekIEAQAAAAAAkmgZ-dnzgQAAAAstQy6ubaLX4KHWvLEZgBPEvqEYVUZGRauDzNPgMJqd9yLzTJ4xAM85VZ0MYmrr\",\"himg\":\"/static/index/dstrict-1.svg\"} 跳转B站 ​在基本配置-–金刚区中可配置跳转B站；在PC端的播放页面打开F12输入aid即可获得，或者通过其他的接口等方法 json 格式： {\"title\": \"标题\", \"type\": \"xs_program\", \"appid\": \"视频aid号\",\"route\":\"\",\"himg\":\"图标地址\"} 事例： {\"title\": \"B站\", \"type\": \"xs_program\", \"appid\": \"512196103\",\"route\":\"\",\"himg\":\"/static/index/dstrict-2.svg\"} 域名添加 ​我们小程序发起的请求域名是需要备案，且支持SSl证书，在微信小程序后台 设置----开发设置----服务器域名中添加request域名记录 客服 ​微信小程序客服如何回复消息 首先需要在微信小程序后台配置客服微信号 网页客服回复消息：https://mpkf.weixin.qq.com/ 微信小程序回复消息 公众号文章 ​小程序打通微信公众号文章，微信在公众号文章地址需要在手机上复制，电脑端复制无效 导读 ​星宿V3.0之后如果需要设置一个后台运行多个程序或者多平台，只需要在wordpress后台-—基本配置-—新增about 小程序前端源码需修改配置文字的索引值 我们需要明白一个后台配置多个程序，他们最终只是配置文件差异，详细阅读本章节会让你一语道破，文字十分难说清楚等待视频更新 微信端 ​微信端是最近兼容的一个，初开发也是以微信为基础，需要多个微信端只需要安导读部分操作即可 抖音端 ​开发中 百度端 ​开发中","categories":[{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"微信小程序","slug":"微信小程序","permalink":"https://19492035.xyz/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"},{"name":"星宿","slug":"星宿","permalink":"https://19492035.xyz/tags/%E6%98%9F%E5%AE%BF/"}],"author":"jacktang"},{"title":"灵沐教程","slug":"灵沐教程","date":"2024-05-16T04:43:32.000Z","updated":"2024-05-16T04:55:58.806Z","comments":true,"path":"posts/2f58d10.html","link":"","permalink":"https://19492035.xyz/posts/2f58d10.html","excerpt":"","text":"微信端 ​后台菜单—内容管理—wxSet 章节视频教程 ​点击：03-灵沐数据模型 配置说明 ​ appId：小程序ID appName:小程序名称 indexBg:首页背景(多个背景回车换行输入) notice:公告 logo:logo popNotice:弹窗通知 docHost:文档置顶 topicHost:文档置顶 host:资源置顶 (注：置顶需要格式输入) 单篇文章示例：&filters[id][$eq]=文章ID 多篇文章示例：&filters[id][$eq]=1&filters[id][$eq]=2 attendviImg：微信公众号二维码 (注：使用方式) 在此字段输入微信公众号二维码地址之后 在金刚区选`wx_default`类型，输入页面值`../follow/follow` shareTitle：分享标题 shareImg：分享图片 vajra：金刚区 金刚区注解 title：标题 icon：图标地址 url：跳转web地址 appId：小程序ID type：功能类型 wx_default：跳转二级页面，需在Url输入页面地址 wx_program：跳转小程序需要在appId输入小程序id，url默认为首页 wx_web：跳转微信公众号地址，需在url输入地址 wx_kefu：客服功能 wx_share：分享小程序 js // 关注 title:\"关注\" icon:\"../../images/attention.png\" type:\"wx_default\" url:\"../follow/follow\" appId:\"\" //客服(微信有效) title:\"客服\" icon:\"../../images/kefu.png\" type:\"wx_kefu\" url:\"\" appId:\"\" //搜索关键字：url中type对应Image(壁纸)，Doc(文档)，Post(资源)，Topic(题库)，active表示默认选中第几个选项卡 title:\"银发\" icon:\"../../images/new.png\" type:\"wx_default\" url:\"../lists/lists?search=银发type=Image&active=2\" appId:\"\" //主题类型：type对应Image(壁纸)，Doc(文档)，Post(资源)，Topic(题库) title:\"题库\" icon:\"../../images/new.png\" type:\"wx_default\" url:\"/pages/postType/postType?type=Topic\" appId:\"\" adSwitch：全局广告开关 jiliAd：激励视频广告ID chapingAd：插屏广告ID videoAd：视频广告ID about：关于我们 indexType：首页切列表 分类类型 Post：资源下载类型 Doc：文档阅读类型 Image：壁纸类型 Topic：题库类型 copyUrl：是否启动一键复制按钮(不建议开启，若开启需要设置用户隐私协议) popNoticeUrl：弹窗内容访问二极页面 html //公众号地址 https://mp.weixin.qq.com/MzIxMzQ2Nzc3OA //小程序二级页面 /pages/wallcover/wallcover?id=16 数据模型 ​章节视频教程 ​点击：02-灵沐部署 数据模型 ​后台菜单—内容管理 我们看到会有内容模型: Category:分类 Post:资源 Image:壁纸 Topic:题目 Doc:文档 wxSet:微信端设置 dySet:抖音端设置 其中user用户暂时用不到，此外wxSet属于微信端配置，后续会有QQset等之类所以 将该类型单独区分开来，对应的内容访问：设置 Category 分类 ​ name：分类名称 desrc:分类描述 icon:分类图标 type:分类类型 分类类型 Post：资源下载类型 Doc：文档阅读类型 Image：壁纸类型 Topic：题库类型 posts:关联的文章不需要用户操作 Doc:关联的文章不需要用户操作 Image:关联的文章不需要用户操作 Subject:关联的文章不需要用户操作 Doc 文档 ​ title：文档名称 desrc:文档描述 cover:封面地址 adRead：广告开关 notice:公告 list:文档节点列表 文档节点列表 title：文档名称 content：正文内容 拓展内链接 正文内容支持设置link链接到小程序二级页面地址(不支持跳转tab)，支持参数；格式如下 md 注意：不能以pages开头， [灵沐](../info/info?id=1) category:关联的分类不需要用户操作 Post 资源 ​ title：资源名称 desrc:资源描述 ver:版本号 cover:封面地址 status:热门标志 adRead：广告开关 notice:公告 images:预览图片(多个图片回车换行输入) vers:资源下载地址 资源下载地址注解 ver：版本 content：正文内容 拓展内链接 正文内容支持设置link链接到小程序二级页面地址(不支持跳转tab)，支持参数；格式如下 md 注意：不能以pages开头， [灵沐](../info/info?id=1) url：下载地址 ::: category:关联的分类不需要用户操作 Wall 壁纸 ​ title：壁纸名称 desrc:壁纸描述 image:壁纸图片(多个图片回车换行输入) category:关联的分类不需要用户操作 (注：) 小程序后台需要添加图片域名到downloadFile合法域名，此外还需要在提交审核选择采集用户隐私配置以下内容 type壁纸类型 壁纸类型 注解 mp4：视频壁纸 jpg/png：静态壁纸 category:关联的分类不需要用户操作 adRead：广告开关 Subject 题库 ​ title：名称 material:材料 材料组件 title：材料标题 content：材料正文内容 topic:标题 题目组件 title：题目标题 content：题目正文内容 answer:答案标 答案组件 title：答案标题 content：答案正文内容 adRead：广告开关 category:关联的分类不需要用户操作 升级 ​在升级灵沐之前我们需要明白它是什么组成的： Strapi Cms 小程序前端 自定义的API 看了结构我们会明白小程序和自定义API是有枫瑞自己写的，Strapi Cms会有官方团队维护。因此我们升级就分为2个部分 1 枫瑞发布的小程序和API 2 后台提示Strapi要升级 章节视频教程 ​点击：04-灵沐升级 小程序升级 ​枫瑞更新发布源码之后我们只需要将源码解压，将小程序源码导入微信开发工具utils/http.js修改域名信息 V3.0开始只要打开项目目录my-project将下载好的小程序源码中的server.js和src.zip上传解压 注意 V2.0是宝塔后台找到src目录将下载好的小程序源码中的API和compomemts以及extensions上传解压 重启node 后台升级 ​后台升级和wordpress概念是一样的，和小程序升级毫无关系。因此你可以理解为不是很必要的情况下不升级也是可行，若想将Strapi 软件包版本号升级到最新的稳定 Strapi 版本 在宝塔后台编辑package.json // path: package.json { // ... \"dependencies\": { \"@strapi/strapi\": \"4.7.0\", \"@strapi/plugin-users-permissions\": \"4.7.0\", \"@strapi/plugin-i18n\": \"4.7.0\", \"better-sqlite3\": \"7.4.6\" // ... } } 将文件中的4.7.0替换成最新的，保存编辑后的文件，终端执行","categories":[{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"微信小程序","slug":"微信小程序","permalink":"https://19492035.xyz/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"},{"name":"灵沐","slug":"灵沐","permalink":"https://19492035.xyz/tags/%E7%81%B5%E6%B2%90/"}],"author":"jacktang"},{"title":"为WordPress网站创建网站地图（Sitemap）","slug":"为WordPress网站创建网站地图（Sitemap）","date":"2024-05-05T13:03:20.000Z","updated":"2024-05-05T13:11:52.987Z","comments":true,"path":"posts/7716fc29.html","link":"","permalink":"https://19492035.xyz/posts/7716fc29.html","excerpt":"","text":"WordPress创建一个站点地图页面 一、新创建一个PHP文件，名称：sitemap.php 二、将以下代码放入sitemap.php文件中 三、然后上传至自己正在使用主题的目录 四、到后台页面-新建页面，选择sitemap页面模板 <?php /* Template Name: Sitemap */ ?> <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\"> <head profile=\"http://gmpg.org/xfn/11\"> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=<?php bloginfo( 'charset' ); ?>\" /> <title>站点地图 - <?php bloginfo('name'); ?></title> <meta name=\"keywords\" content=\"站点地图,<?php bloginfo('name'); ?>\" /> <meta name=\"copyright\" content=\"<?php bloginfo('name'); ?>\" /> <link rel=\"canonical\" href=\"<?php echo get_permalink(); ?>\" /> <style type=\"text/css\"> body {font-family: Microsoft Yahei,Verdana;font-size:13px;margin:0 auto;color: #000000;background: #ffffff;width: 990px;margin: 0 auto} a:link,a:visited {color:#000;text-decoration:none;} a:hover {color:#08d;text-decoration:none;} h1,h2,h3,h4,h5,h6 {font-weight:normal;} img {border:0;} li {margin-top: 8px;} .page {padding: 4px; border-top: 1px #EEEEEE solid} .author {background-color:#EEEEFF; padding: 6px; border-top: 1px #ddddee solid} #nav, #content, #footer {padding: 8px; border: 1px solid #EEEEEE; clear: both; width: 95%; margin: auto; margin-top: 10px;} </style> </head> <body vlink=\"#333333\" link=\"#333333\"> <h2 style=\"text-align: center; margin-top: 20px\"><?php bloginfo('name'); ?>'s SiteMap </h2> <center></center> <div id=\"nav\"><a href=\"<?php bloginfo('url'); ?>/\"><strong><?php bloginfo('name'); ?></strong></a> » <a href=\"<?php echo get_permalink(); ?>\">站点地图</a></div> <div id=\"content\"> <h3>最新文章</h3> <ul> <?php $previous_year = $year = 0; $previous_month = $month = 0; $ul_open = false; $myposts = get_posts('numberposts=-1&orderby=post_date&order=DESC'); foreach($myposts as $post) : ?> <li><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\" target=\"_blank\"><?php the_title(); ?></a></li> <?php endforeach; ?> </ul> </div> <div id=\"content\"> <li class=\"categories\">分类目录<ul> <?php wp_list_categories('title_li='); ?> </ul></li> </div> <div id=\"content\"> <li class=\"categories\">单页面</li> <?php wp_page_menu( $args ); ?> </div> <div id=\"footer\">查看博客首页: <strong><a href=\"<?php bloginfo('url'); ?>/\"><?php bloginfo('name'); ?></a></strong></div><br /> <center> <div style=\"text-algin: center; font-size: 11px\"><strong><a href=\"https://www.shareppp.site/sitemap.xml\" /*这里是自己站点的xml版本的站点地图地址*/target=\"_blank\">Baidu-SiteMap</a></strong> Latest Update: <?php $last = $wpdb->get_results(\"SELECT MAX(post_modified) AS MAX_m FROM $wpdb->posts WHERE (post_type = 'post' OR post_type = 'page') AND (post_status = 'publish' OR post_status = 'private')\");$last = date('Y-m-d G:i:s', strtotime($last[0]->MAX_m));echo $last; ?><br /><br /></div> </center> </body> </html> 方法来源：https://cloud.tencent.com/developer/article/2166750","categories":[{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"建站","slug":"建站","permalink":"https://19492035.xyz/tags/%E5%BB%BA%E7%AB%99/"},{"name":"wordpress","slug":"wordpress","permalink":"https://19492035.xyz/tags/wordpress/"}],"author":"jacktang"},{"title":"解决wordpress网站页面打不开404问题以及XML sitemap无法打开问题","slug":"解决wordpress网站页面打不开404问题以及XML-sitemap无法打开问题","date":"2024-05-05T12:08:26.000Z","updated":"2024-05-05T12:37:47.775Z","comments":true,"path":"posts/deb19a93.html","link":"","permalink":"https://19492035.xyz/posts/deb19a93.html","excerpt":"","text":"问题描述1.用宝塔面板建站用的是Nginx环境，天真的我还想换成Apache，结果。。。 404 Not Foundnginx 2.用SEO插件打开生成的sitemap XML 出现这样的情况,不管怎么换插件还是这样 This page contains the following errors:error on line 3 at column 6: XML declaration allowed only at the start of the documentBelow is a rendering of the page up to the first error. 解决办法 Nginx环境如何配置WordPress伪静态规则问题，由于我是宝塔面板就直接在站点修改上进行伪静态修改 location ~ .*\\.(ini|zip|7z|rar|tar|gz|sql|conf|bak|asp|aspx|jsp)?$ { deny all; } location = /wp-admin/install.php { deny all; } location = /wp-config.php { deny all; } # END 保护敏感文件 location = /favicon.ico { log_not_found off; access_log off; } location = /robots.txt { allow all; log_not_found off; access_log off; } # WordPress伪静态 location / { # BEGIN 安全标头 add_header X-Content-Type-Options nosniff; add_header X-Frame-Options SAMEORIGIN; add_header X-XSS-Protection \"1; mode=block\"; add_header Referrer-Policy \"no-referrer-when-downgrade\"; # END 安全标头 try_files $uri $uri/ /index.php?$args; } # 静态资源优化 location ~* \\.(js|css|webp|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|mp4|mp3)$ { add_header X-Content-Type-Options nosniff; expires max; log_not_found off; access_log off; } 这样就成了，得感谢大佬得方法 2.经过查找多次实践，出现该问题的原因是代码书写不规范：某些php文件 后有空格或空行。 如果自己修改过主题的可能会在复制人家代码的时候导致 后有空格或空行 还有要注意的其他“空格”的地方： 是PHP的默认语法，而则是短标记方法，需要在php.ini中开启short_open_tag指令的。<?后面紧跟着php,之间没有空格；是<?php 而不是 <? php 总之要做的是：找出不该存在的空格或空行，删除之即可。 GitHub也有这样得讨论","categories":[{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"建站","slug":"建站","permalink":"https://19492035.xyz/tags/%E5%BB%BA%E7%AB%99/"}],"author":"jacktang"},{"title":"给网站加个动态时间","slug":"给网站加个动态时间","date":"2024-05-04T08:43:54.000Z","updated":"2024-05-04T09:48:23.847Z","comments":true,"path":"posts/d09a2d58.html","link":"","permalink":"https://19492035.xyz/posts/d09a2d58.html","excerpt":"","text":"之前看到其他博主用的一款”动态时间”插件，看着效果挺不错的，不过源码要付费才能下载。现在，终于被我找到了，免费分享给大家…… 效果展示 Gif图有点拉胯，将就看看吧，实际效果还是不错的。 源码下载 代码展示<!DOCTYPE html> <html> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>时间_刘郎阁</title> </head> <body> <canvas class=\"navigation-wrapper iUp\" id=\"canvas\" style=\"width:100%;padding-top:50px;\" width=\"920\" height=\"350\"></canvas> <script> (function(){var t=820;var a=250;var r=7;var n=10;var e=.65;var f;var o=[];const v=[\"#33B5E5\",\"#0099CC\",\"#AA66CC\",\"#9933CC\",\"#99CC00\",\"#669900\",\"#FFBB33\",\"#FF8800\",\"#FF4444\",\"#CC0000\"];var h=[];var u=[[[0,0,1,1,1,0,0],[0,1,1,0,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,0,1,1,0],[0,0,1,1,1,0,0]],[[0,0,0,1,1,0,0],[0,1,1,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[1,1,1,1,1,1,1]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,1,1],[1,1,1,1,1,1,1]],[[1,1,1,1,1,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,1,0,0],[0,0,0,0,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,0,0,0,1,1,0],[0,0,0,1,1,1,0],[0,0,1,1,1,1,0],[0,1,1,0,1,1,0],[1,1,0,0,1,1,0],[1,1,1,1,1,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,1,1]],[[1,1,1,1,1,1,1],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,1,1,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,0,0,0,1,1,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[1,1,1,1,1,1,1],[1,1,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,1,1,0,0,0,0]],[[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]];function l(t){var a=[];f.fillStyle=\"#005EAC\";var r=new Date;var e=70,o=30;var v=r.getHours();var u=Math.floor(v/10);var l=v%10;a.push({num:u});a.push({num:l});a.push({num:10});var c=r.getMinutes();var u=Math.floor(c/10);var l=c%10;a.push({num:u});a.push({num:l});a.push({num:10});var M=r.getSeconds();var u=Math.floor(M/10);var l=M%10;a.push({num:u});a.push({num:l});for(var p=0;p<a.length;p++){a[p].offsetX=e;e=m(e,o,a[p].num,t);if(p<a.length-1){if(a[p].num!=10&&a[p+1].num!=10){e+=n}}}if(h.length==0){h=a}else{for(var C=0;C<h.length;C++){if(h[C].num!=a[C].num){s(a[C]);h[C].num=a[C].num}}}i(t);g();return r}function s(t){var a=t.num;var n=u[a];for(var e=0;e<n.length;e++){for(var f=0;f<n[e].length;f++){if(n[e][f]==1){var h={offsetX:t.offsetX+r+r*2*f,offsetY:30+r+r*2*e,color:v[Math.floor(Math.random()*v.length)],g:1.5+Math.random(),vx:Math.pow(-1,Math.ceil(Math.random()*10))*4+Math.random(),vy:-5};o.push(h)}}}}function i(t){for(var a=0;a<o.length;a++){t.beginPath();t.fillStyle=o[a].color;t.arc(o[a].offsetX,o[a].offsetY,r,0,2*Math.PI);t.fill()}}function g(){var n=0;for(var f=0;f<o.length;f++){var v=o[f];v.offsetX+=v.vx;v.offsetY+=v.vy;v.vy+=v.g;if(v.offsetY>a-r){v.offsetY=a-r;v.vy=-v.vy*e}if(v.offsetX>r&&v.offsetX<t-r){o[n]=o[f];n++}}for(;n<o.length;n++){o.pop()}}function m(t,a,n,e){var f=u[n];for(var o=0;o<f.length;o++){for(var v=0;v<f[o].length;v++){if(f[o][v]==1){e.beginPath();e.arc(t+r+r*2*v,a+r+r*2*o,r,0,2*Math.PI);e.fill()}}}e.beginPath();t+=f[0].length*r*2;return t}var c=document.getElementById(\"canvas\");c.width=t;c.height=a;f=c.getContext(\"2d\");var M=new Date;setInterval(function(){f.clearRect(0,0,f.canvas.width,f.canvas.height);l(f)},50)})() </script> </body> </html> 完！","categories":[{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"建站","slug":"建站","permalink":"https://19492035.xyz/tags/%E5%BB%BA%E7%AB%99/"}],"author":"jacktang"},{"title":"给博客加个弹窗公告","slug":"给博客加个弹窗公告","date":"2024-05-04T08:37:05.000Z","updated":"2024-05-04T09:48:23.844Z","comments":true,"path":"posts/94330dcd.html","link":"","permalink":"https://19492035.xyz/posts/94330dcd.html","excerpt":"","text":"弹窗公告就像是网页或者APP里面的小广告，可以用来通知你有什么新活动、新消息或者特别优惠。它就像是一个突然跳出来的小提示，提醒你注意一些重要的事情。 该弹窗一天弹出一次，除非手动清除Cookie记录。 效果展示 HTML源代码<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\" /> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <meta http-equiv=\"refresh\" content=\"10;url=https://yjvc.cn/\"> <title>刘郎阁 弹窗公告</title> <link rel=\"stylesheet\" href=\"css/tc.css\" /> <script src=\"https://code.jquery.com/jquery-3.1.1.min.js\"></script> </head> <body> <div class=\"layer\"></div> <div id=\"globalAd\"> <div id='hero-img' style=\"background-color: #1a95ff;background: linear-gradient(to left, #5dadf3 0, #4583ca 100%);\"> </div> <div id='profile-img'> <img src=\"https://yjvc.cn/usr/uploads/logo.png\" /> </div> <div id='content'> <p style=\"font-size: 16px;font-weight: bold;\">刘郎阁公告</p> <p>温馨提示</p> <p>使用Cookie记录</p> <p>一天只弹一次</p> <p>我们已经测试过了，非常不错！快那去食用吧！！</p> <p>YJVC.CN</p> <a onclick=\"closeGlobalAd();\" class=\"btn btn-default\" rel='nofollow'>朕已阅</a> <a href=\"https://yjvc.cn/\" onclick=\"redirectUrlToActive();\" class=\"btn btn-default\" rel='nofollow'>点击访问</a> </div> </div> <script> jQuery.cookie = function(name, value, options) { if(typeof value != 'undefined') { options = options || {}; if(value === null) { value = ''; options.expires = -1; } var expires = ''; if(options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if(typeof options.expires == 'number') { date = new Date(); var totalTime = 24 * 3600; var hour = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); var pastTime = 3600 * hour + 60 * minutes + seconds; var leftTime = totalTime - pastTime; date.setTime(date.getTime() + (options.expires * leftTime * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); } var path = options.path ? '; path=' + (options.path) : ''; var domain = options.domain ? '; domain=' + (options.domain) : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join(''); } else { var cookieValue = null; if(document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for(var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim(cookies[i]); if(cookie.substring(0, name.length + 1) == (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } };//更多资源请关注刘郎阁https://yjvc.cn/ $(function() { var COOKIE_NAME = \"erdangjiade\"; if($.cookie(COOKIE_NAME)) { $(\".layer\").hide(); $(\"#globalAd\").hide(); } else { var erdangjiadeH = $(window).height(); var erdangjiadeW = $(window).width(); $(\".layer\").show(); $(\"#globalAd\").css({ 'top': erdangjiadeH / 2 - $(\"#globalAd\").height() / 2, 'left': erdangjiadeW / 2 - $(\"#globalAd\").width() / 2 }); $(\"#globalAd\").slideDown(300, function() { setTimeout(\"closeGloableAd()\", '300000'); }); $.cookie(COOKIE_NAME, \"erdangjiade\", { path: '/', expires: 1 }); } }); function closeGlobalAd() { $('#globalAd').hide(); $('.layer').hide(); } function redirectUrlToActive() { $('#globalAd').hide(); $('.layer').hide(); } </script> </body> </html> CSS样式代码/*yjvc.cn*/ a { text-decoration: none!important } #globalAd { max-width: 400px; flex-basis: 100%; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 0 30px rgba(0, 0, 0, .3); -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .3); overflow: hidden; position: fixed; display: none; margin: 0 auto; z-index: 10001 } .layer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; filter: alpha(opacity=50); opacity: .5; background: #000; z-index: 1000; display: none } #globalAd #hero-img { width: 100%; height: 100px; background: #007bff } #globalAd #profile-img { width: 80px; height: 80px; margin: -80px auto 0; border: 6px solid #fff; border-radius: 50%; box-shadow: 0 0 5px rgba(90, 90, 90, .3) } #globalAd #profile-img img { width: 100%; background: #fff; border-radius: 50% } #globalAd #content { text-align: center; width: 320px; margin: 0 auto; padding: 0 0 50px } #container #content h1 { font-size: 29px; font-weight: 500; margin: 50px 0 0 } #globalAd #content p { font-size: 18px; font-weight: 400; line-height: 1.4; color: #666; } #globalAd #content a { color: #ccc; font-size: 14px; margin: 0 10px; transition: color .3s ease-in-out; -webkit-transition: color .3s ease-in-out } #globalAd #content a:hover { color: #007bff } #globalAd #content .btn { background: none repeat scroll 0 0 #1ba1e2; border: 0; border-radius: 2px; color: #fff!important; cursor: pointer; font-family: open sans, hiragino sans gb, microsoft yahei, wenquanyi micro hei, Arial, Verdana, Tahoma, sans-serif; font-size: 14px; padding: 6px 10% } #globalAd #content .btn:hover, .yanshibtn:hover { background: none repeat scroll 0 0 #9b59b6; border: 0; border-radius: 2px; color: #fff!important; cursor: pointer; font-family: open sans, hiragino sans gb, microsoft yahei, wenquanyi micro hei, Arial, Verdana, Tahoma, sans-serif; font-size: 14px; padding: 8px 10% } 完！","categories":[{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"博客弹窗","slug":"博客弹窗","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E5%BC%B9%E7%AA%97/"}],"author":"jacktang"},{"title":"网站加载缓冲样式","slug":"网站加载缓冲样式","date":"2024-05-04T07:57:55.000Z","updated":"2024-05-04T09:48:23.850Z","comments":true,"path":"posts/2069cd24.html","link":"","permalink":"https://19492035.xyz/posts/2069cd24.html","excerpt":"","text":"效果1 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Document</title> <style> body { margin: 0; padding: 0; background: #0099CC; } /* 设置位置 */ .loading { position: absolute; /* 居中 */ top: 50%; left: 50%; transform: translate(-50%, -50%); /* 高度 */ height: 40px; /* 弹性布局 */ display: flex; /* 设置子项在y轴方向居中，应该是设置起点在中间，非常有用，不然动画很怪 */ align-items: center; } /* 小竖条 */ .item { height: 50px; width: 5px; background: white; /* 加margin，使竖条之间有空隙 */ margin: 0px 3px; /* 圆角 */ border-radius: 10px; /* 动画：名称、时间、循环 */ animation: loading 1s infinite; } /* 设置动画 */ @keyframes loading { 0% { height: 0px; } 50% { height: 50px; } 100% { height: 0px; } } /* 为每一个竖条设置延时 */ .item:nth-child(2) { animation-delay: 0.1s; } .item:nth-child(3) { animation-delay: 0.2s; } .item:nth-child(4) { animation-delay: 0.3s; } .item:nth-child(5) { animation-delay: 0.4s; } .item:nth-child(6) { animation-delay: 0.5s; } .item:nth-child(7) { animation-delay: 0.6s; } .item:nth-child(8) { animation-delay: 0.7s; } </style> </head> <body> <div class=\"loading\"> <div class=\"item\"></div> <div class=\"item\"></div> <div class=\"item\"></div> <div class=\"item\"></div> <div class=\"item\"></div> <div class=\"item\"></div> <div class=\"item\"></div> <div class=\"item\"></div> </div> </body> </html> 效果2 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Document</title> <style> .container { position: relative; width: 200px; height: 200px; } .container>div { position: absolute; left: 50%; top: 50%; margin-top: -10px; width: 50%; height: 20px; transform-origin: left center; } .container>div::after { content: \"\"; position: absolute; right: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background-color: red; /* background-color: #000; */ transform: var(--scale); animation: dotscale 1.2s linear infinite; animation-delay: var(--animation-delay); } .container>div:nth-child(1) { transform: rotate(0deg); --animation-delay: 0s; } .container>div:nth-child(2) { transform: rotate(30deg); --animation-delay: -0.1s; } .container>div:nth-child(3) { transform: rotate(60deg); --animation-delay: -0.2s; } .container>div:nth-child(4) { transform: rotate(90deg); --animation-delay: -0.3s; } .container>div:nth-child(5) { transform: rotate(120deg); --animation-delay: -0.4s; } .container>div:nth-child(6) { transform: rotate(150deg); --animation-delay: -0.5s; } .container>div:nth-child(7) { transform: rotate(180deg); --animation-delay: -0.6s; } .container>div:nth-child(8) { transform: rotate(210deg); --animation-delay: -0.7s; } .container>div:nth-child(9) { transform: rotate(240deg); --animation-delay: -0.8s; } .container>div:nth-child(10) { transform: rotate(270deg); --animation-delay: -0.9s; } .container>div:nth-child(11) { transform: rotate(300deg); --animation-delay: -1s; } .container>div:nth-child(12) { transform: rotate(330deg); --animation-delay: -1.1s; } @keyframes dotscale { 0% { transform: scale(1); filter: hue-rotate(0deg); } 100% { transform: scale(0); filter: hue-rotate(360deg); } } </style> </head> <body> <div class=\"container\"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> 效果3 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Document</title> <style> .pan-loading { width: 180px; height: 180px; margin: 100px; } /* 食物 */ .pan-loading .loading { position: relative; top: 10%; left: 0; z-index: -1; width: 60%; height: 45%; /* 设置透明边框 */ /* 边框的设置，会去掉三条边框，最终显示一个梯形（上短下长） */ border: 10px solid transparent; border-bottom: 10px solid #fdd835; /* 梯形会变成弧形，效果就是一块肉饼 */ border-radius: 50%; /* 设置动画，名称、时间、循环 */ animation: loading 2s infinite; /* 设置从开头到结尾以相同的速度来播放动画 */ animation-timing-function: linear; } /* 食物转圈 */ @keyframes loading { 0% { width: 10%; transform: rotate(0deg); } 20% { width: 10%; left: 20%; } 30% { width: 25%; } 50% { width: 35%; left: 15%; } 70% { width: 30%; left: 18%; transform: rotate(240deg); } 90% { width: 30%; left: 10%; } 100% { width: 3%; left: 25%; transform: rotate(360deg); } } /* 锅 */ .pan-loading .pan-container { display: flex; width: 100%; /* 设置动画 */ animation: pan 2s infinite; } /* 颠锅 */ @keyframes pan { 0% { transform: rotate(0deg); /* 设置旋转的中心点 */ transform-origin: top right; } 10% { transform: rotate(-2deg); /* 设置旋转的中心点 */ transform-origin: top right; } 50% { transform: rotate(15deg); } 100% { transform: rotate(0deg); } } /* 锅面 */ .pan-loading .pan { width: 60%; height: 20px; /* 背景颜色，线性渐变 */ background: linear-gradient(#3949ab, #5c6bc0); /* 设置锅左右两侧的弧度 */ border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } /* 锅把 */ .pan-loading .handle { width: 40%; height: 10px; /* 背景颜色，线性渐变 */ background: linear-gradient(#3949ab, #5c6bc0); /* 设置锅把两侧的弧度 */ border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } /* 炉子 */ .pan-loading .shadow { position: relative; top: 15%; left: 15%; width: 30%; height: 8px; background: lightgreen; border-radius: 20px; /* 设置动画 */ animation: shadow 2s infinite; } /* 炉子收缩、放大 */ @keyframes shadow { 0% { width: 30%; } 50% { width: 40%; left: 20px; } 100% { width: 30%; } } </style> </head> <body> <!-- 容器 --> <div class=\"pan-loading\"> <!-- 食物，加载圈 --> <div class=\"loading\"></div> <!-- 平底锅 --> <div class=\"pan-container\"> <!-- 锅面 --> <div class=\"pan\"></div> <!-- 锅把 --> <div class=\"handle\"></div> </div> <!-- 炉子 --> <div class=\"shadow\"></div> </div> </body> </html> 效果4 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Document</title> <style> body { margin: 0; padding: 0; /* 居中 */ position: absolute; top: 50%; left: 50%; background: #2D3C50; transform: translate(-50%, -50%); } /* 设置容器 */ .container { width: 300px; height: 200px; background: #2D3C50; position: relative; display: flex; justify-content: space-evenly; } /* 小竖条 */ .container .fence { height: 100%; width: 20px; background: #FFFF00; border-bottom-left-radius: 10%; border-bottom-right-radius: 10%; } .container .fence:nth-child(2) { background-color: #0099CC; } .container .fence:nth-child(4) { background-color: #FFCCCC; } .container .fence:nth-child(6) { background-color: #99C452; } .container .fence:nth-child(8) { background-color: #99CC33; } /* 弧形曲面，画一个大圆放到小竖条上面，形成一个曲面 */ .container .circle { width: 400px; height: 400px; /* 父相子绝 */ position: absolute; background: #2D3C50; border-radius: 50%; top: -150%; overflow: hidden; /* 核心：不是小球动，是大圆旋转 */ transform: rotate(45deg); /* 动画，效果：开始结束慢，循环，循环交替播放动画 */ animation: move 2s ease-in-out infinite alternate; } @keyframes move { 0% { transform: rotate(45deg); } 50% { transform: rotate(-45deg); } 100% { transform: rotate(45deg); } } /* 小圆球 */ .container .circle::after { /* 使用after在圆环里添加一个小球 */ content: ''; position: absolute; width: 30px; height: 30px; background: blue; bottom: 0px; left: 50%; transform: translate(-50%, 0); border-radius: 50%; } </style> </head> <body> <div class=\"container\"> <!-- 圆圈 --> <div class=\"circle\"></div> <!-- 小竖条 --> <div class=\"fence\"></div> <div class=\"fence\"></div> <div class=\"fence\"></div> <div class=\"fence\"></div> <div class=\"fence\"></div> <div class=\"fence\"></div> <div class=\"fence\"></div> <div class=\"fence\"></div> </div> </body> </html> 效果5 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Document</title> <style> .container { width: 400px; height: 300px; /* 居中 */ position: absolute; display: flex; justify-content: center; top: 50%; left: 50%; transform: translate(-50%, -50%); } .container .loading { position: relative; width: 100px; height: 100px; margin: 10px; background: #2D3C50; } /* 6个正方形 */ .loading span { height: 100%; width: 100%; position: absolute; animation: move 3.5s linear infinite; } @keyframes move { 74% { transform: rotate(600deg); } 79% { transform: rotate(720deg); opacity: 1; } 80% { transform: rotate(720deg); opacity: 0; } 100% { transform: rotate(810deg); opacity: 0; } } .loading span:nth-child(2) { animation-delay: 0.1s; } .loading span:nth-child(3) { animation-delay: 0.2s; } .loading span:nth-child(4) { animation-delay: 0.3s; } .loading span:nth-child(5) { animation-delay: 0.4s; } .loading span:nth-child(6) { animation-delay: 0.5s; } .loading span::before { content: ''; position: absolute; height: 10px; width: 10px; background-color: #fff; border-radius: 50%; bottom: 0px; left: calc(50% - 5px); } </style> </head> <body> <div class=\"container\"> <div class=\"loading\"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> </html> 效果6 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Document</title> <style> body { margin: 0; padding: 0; background: #34495e; height: 100vh; /* 水平、垂直方向居中 */ display: flex; justify-content: center; align-items: center; } .loading { width: 150px; height: 150px; /* background: red; */ /* 并排放置两个带边框的框，令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中 */ box-sizing: border-box; border-radius: 50%; border-top: 10px solid #FF9900; position: relative; /* 动画 */ animation: a1 2s linear infinite; } /* before和after在元素前面和后面添加内容 */ .loading::before, .loading::after { content: ''; width: 150px; height: 150px; /* background: red; */ position: absolute; left: 0; top: -10px; /* 形成另外两个颜色弧 */ box-sizing: border-box; border-radius: 50%; } .loading::before { border-top: 10px solid #FF99CC; transform: rotate(120deg); } .loading::after { border-top: 10px solid #CCFF99; transform: rotate(240deg); } /* 文字 */ .loading span{ position: absolute; height: 150px; width: 150px; /* 文字居中 */ text-align: center; line-height: 150px; color: lightgrey; font-size: 15px; /* 动画 */ animation: a2 2s linear infinite; } @keyframes a1{ to{ transform: rotate(360deg); } } @keyframes a2{ to{ transform: rotate(-360deg); } } </style> </head> <body> <div class=\"loading\"> <span>Loading...</span> </div> </body> </html> 效果7 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>Document</title> <style> body { margin: 0; padding: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #34495e; } svg { width: 0; height: 0; } .loading { position: relative; width: 200px; height: 200px; filter: url(#gooey); } .loading span { position: absolute; height: 100%; width: 100%; top: 0; left: 0; display: block; animation: loading 4s ease-in-out infinite; } .loading span:nth-child(1) { animation-delay: 0.2s; } .loading span:nth-child(2) { animation-delay: 0.4s; } .loading span:nth-child(3) { animation-delay: 0.6s; } .loading span:nth-child(4) { animation-delay: 0.8s; } .loading span:nth-child(5) { animation-delay: 1s; } .loading span:nth-child(6) { animation-delay: 1.2s; } .loading span:nth-child(7) { animation-delay: 1.24s; } .loading span::before { content: ''; position: absolute; width: 40px; height: 40px; top: 0; left: calc(50% -20px); box-shadow: 0 0 30px #03a9f4; /* 设置渐变颜色 */ background: linear-gradient(#fce4ec, #03a9f4); border-radius: 50%; } @keyframes loading { 0% { transform: rotate(0deg); } 50%, 100% { transform: rotate(360deg); } } </style> </head> <body> <div class=\"loading\"> <!-- 小球 --> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <svg> <filter id=\"gooey\"> <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"10\"></feGaussianBlur> <feColorMatrix values=\" 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10 \" /> </filter> </svg> </body> </html> 效果8 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <title>圆弧转动</title> </head> <link rel=\"stylesheet\" href=\"../common.css\"> <style> :root { --color: orange; --lineColor: rgba(102, 163, 224, .2); } body { background: #222; overflow: hidden; } section { position: relative; width: 200px; height: 200px; } section::before { content: ''; position: absolute; height: 10px; width: 10px; border-radius: 100%; border-top: 1px solid orange; top: 50%; left: 50%; margin-top: -5px; margin-left: -5px; animation: turn 1s infinite linear; filter: drop-shadow(0 0 2px var(--color)) drop-shadow(0 0 5px var(--color)) drop-shadow(0 0 10px var(--color)) drop-shadow(0 0 20px var(--color)); } .box, .box::after, .box::before { border: 2px solid var(--lineColor); border-left: 2px solid var(--color); border-right: 2px solid var(--color); border-radius: 50%; } .box::after, .box::before { position: absolute; content: ''; left: 50%; top: 50%; } .box { width: 200px; height: 200px; position: relative; animation: turn 1s linear infinite; transform-origin: 50% 50%; } .box::before { width: 180px; height: 180px; margin-top: -90px; margin-left: -90px; animation: turn2 1.25s linear infinite; } .box::after { width: 160px; height: 160px; margin-top: -80px; margin-left: -80px; animation: turn 1.5s linear infinite; } .box-circle, .box-circle1, .box-circle2 { border: 2px solid var(--color); opacity: .9; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: rotate 3s linear infinite; } .box-circle { animation-delay: 0.2s; } .box-circle1 { animation-delay: 1.2s; } .box-circle2 { animation-delay: 2.2s; } @keyframes turn { 100% { transform: rotateZ(-1turn); } } @keyframes turn2 { 100% { transform: rotateZ(1turn); } } @keyframes rotate { 100% { border: none; border-top: 2px solid var(--color); border-bottom: 2px solid var(--color); transform: translate(-50%, -50%) rotate3d(.5, 0.5, 0.5, -720deg); } } </style> <body> <section> <div class=\"box\"></div> <div class=\"box-circle\"></div> <div class=\"box-circle1\"></div> <div class=\"box-circle2\"></div> </section> </body> </html> 效果9 <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\" /> <title></title> </head> <link rel=\"stylesheet\" href=\"../common.css\" /> <style> :root { --border: 5px; --gap: 15px; --w: 200px; } section { width: var(--w); height: var(--w); position: relative; } .loader-item { --width: calc(var(--w) - var(--gap) * 2 * var(--i)); width: var(--width); height: calc(var(--width) / 2); border: var(--border) solid var(--c); border-radius: 50% 50% 0 0/100% 100% 0 0; border-bottom: none; position: absolute; left: calc(50% - var(--width) / 2); top: calc(var(--gap) * var(--i)); transform-origin: 50% 100%; animation: rotate 2s cubic-bezier(0.11, 0.85, 0.22, 1.3) infinite; animation-delay: calc(-60ms * var(--i)); transition: all 0.5s; } section:hover .loader-item { filter: brightness(1.5); animation-play-state: paused; } @keyframes rotate { 0%, 25% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <body> <section> <div class=\"loader-item\" style=\"--c: #e94545; --i: 0\"></div> <div class=\"loader-item\" style=\"--c: #eb8f34; --i: 1\"></div> <div class=\"loader-item\" style=\"--c: #eecf69; --i: 2\"></div> <div class=\"loader-item\" style=\"--c: #215221; --i: 3\"></div> <div class=\"loader-item\" style=\"--c: #87bb80; --i: 4\"></div> <div class=\"loader-item\" style=\"--c: #87ceeb; --i: 5\"></div> <div class=\"loader-item\" style=\"--c: #c393eb; --i: 6\"></div> </section> </body> </html>","categories":[{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"建站","slug":"建站","permalink":"https://19492035.xyz/tags/%E5%BB%BA%E7%AB%99/"}],"author":"jacktang"},{"title":"网站链接跳转提示","slug":"网站链接跳转提示","date":"2024-05-04T07:55:11.000Z","updated":"2024-05-04T09:48:23.848Z","comments":true,"path":"posts/f1ab9e5a.html","link":"","permalink":"https://19492035.xyz/posts/f1ab9e5a.html","excerpt":"","text":"效果展示 具体操作1.新建 js 文件 新建一个 js 文件，如：yjvc.js。然后复制以下代码到其中，代码里面的网址为排除跳转中间页（跳转提示页面）。 function checkParent(element, classNames) { while (element) { if (element.classList && classNames.some(cn => element.classList.contains(cn))) { return true; } element = element.parentElement; } return false; } var excludedClasses = ['card-link', 'friend-item', 'contact-item', 'footer-item']; // 添加需要排除的a标签类名class window.addEventListener('load', (event) => { document.body.addEventListener('click', function(e) { let target = e.target; while (target && target.nodeName !== 'A') { target = target.parentNode; } if (target && target.nodeName === 'A' && !checkParent(target, excludedClasses) && !target.href.includes('gorpeln.top') && !target.href.includes('gorpeln.eu.org') && !target.href.includes('lab.gorpeln.top') && !target.href.includes('github.com') && target.hostname !== window.location.hostname) { e.preventDefault(); let encodedUrl = btoa(target.href); // Base64 encode the URL let url = '/go-wild?target=' + encodedUrl; window.open(url, '_blank'); } }); }); 2.新建一个 html，如 yjvc.html，并复制以下代码到其中： <div class=\"tiaozhuan-all\"> <div class=\"tiaozhuan-nrong\"> <div class=\"tiaozhuan-title\">即将离开 『 gorpeln's Blog 』 ，跳转到以下外部链接</div> <div id=\"tiaozhuan-link\"></div> <div class=\"tiaozhuan-info\">请自行识别该链接是否安全，并保管好个人信息。</div> <div class=\"tiaozhuan-button\"><a href='' id='direct-link'>继续访问</a></div> </div> </div> <script> const params = new URLSearchParams(window.location.search); const encodedTarget = params.get('target'); const target = atob(encodedTarget); // 使用 atob 进行 Base64 解码 if (target) { document.getElementById('direct-link').href = target; document.getElementById('tiaozhuan-link').textContent = '' + target; // 直接显示目标地址 } else { console.error('未指定重定向目标。'); } </script> 3.添加 Css 样式代码，以下样式代码仅作为参考（你也可以根据你自己的主题写一个）： body { background: #ececec; } .tiaozhuan-all { position: relative; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -10px; border-radius: 10px; background: #fff url(../assets/img/go-wild.png) no-repeat center center / cover; color: #666; word-break: break-all; max-width: 700px; height: 350px; text-align: center; font-size: 0.85rem; overflow: hidden; margin: 100px auto 0; @include breakpoint('small') { aspect-ratio: 2 / 1; height: auto; } } .tiaozhuan-nrong { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 20px 30px 20px; } .tiaozhuan-title { font-size: 1.3rem; color: #222; line-height: 1.4; margin-bottom: 4px; } .tiaozhuan-info { margin-top: 6px; } .tiaozhuan-button { margin-top: 20px; } .tiaozhuan-button a { color: #fc9151; border-radius: 4px; padding: 10px 30px; font-size: .85rem; border: 0.5px solid #fc9151; display: inline-block; text-decoration: none; } 4.引用前面的Js代码 <script src=\"/yjvc.js\"></script> 这里的 src=” “ 是你放Js代码的路径，我的是/yjvc.js，换成你自己的即可。 思路js文件识别链接的a标签，并把链接用 base64 编码，同时排除一些不需要跳转中间页的class或网站。然后跳转到go-wild.html文件中（链接格式为/go-wild?target=base64编码），html文件承担了中间页具体信息，及跳转动作。如使用base64解码跳转的链接。 写在最后当然，如果你觉得麻烦。你也可以直接下载现成的Typecho外链跳转插件：ShortLinks。 效果展示： 立即下载 完！","categories":[{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"建站","slug":"建站","permalink":"https://19492035.xyz/tags/%E5%BB%BA%E7%AB%99/"}],"author":"jacktang"},{"title":"一段代码实现Sitemap站点地图","slug":"一段代码实现Sitemap站点地图","date":"2024-05-04T07:50:36.000Z","updated":"2024-05-05T13:47:50.290Z","comments":true,"path":"posts/8f2d0415.html","link":"","permalink":"https://19492035.xyz/posts/8f2d0415.html","excerpt":"","text":"分享一段简单的代码，帮你快速生成网站的Sitemap站点地图。Sitemap是一个列出网站上所有页面URL的文件，它帮助搜索引擎更好地索引你的网站内容。 文章中的代码示例将指导你如何自动化生成Sitemap，这对于提高网站的SEO（搜索引擎优化）非常有用。无论你的网站大小，这个技巧都能帮助你确保搜索引擎能够找到并正确索引你的网页。 具体操作1.新建一个php模板页面 在你的主题目录下新建一个 sitemap.php 模板页面（名称可自定义），然后复制以下代码到其中： <?php /** *Sitemap网站地图 * * @package custom */ ?> <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\"> <head profile=\"http://gmpg.org/xfn/11\"> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=<?php $this->options->charset(); ?>\" /> <title>站点地图 - <?php $this->options->title() ?></title> <meta name=\"keywords\" content=\"站点地图,<?php $this->options->title() ?>\" /> <meta name=\"copyright\" content=\"<?php $this->options->title() ?>\" /> <link rel=\"canonical\" href=\"<?php $this->permalink() ?>\" /> <style type=\"text/css\"> body {font-family: Microsoft Yahei,Verdana;font-size:13px;margin:0 auto;color: #000000;background: #ffffff;width: 990px;margin: 0 auto} a:link,a:visited {color:#000;text-decoration:none;} a:hover {color:#08d;text-decoration:none;} h1,h2,h3,h4,h5,h6 {font-weight:normal;} img {border:0;} li {margin-top: 8px;} .page {padding: 4px; border-top: 1px #EEEEEE solid} .author {background-color:#EEEEFF; padding: 6px; border-top: 1px #ddddee solid} #nav, #content, #footer {padding: 8px; border: 1px solid #EEEEEE; clear: both; width: 95%; margin: auto; margin-top: 10px;} </style> </head> <body vlink=\"#333333\" link=\"#333333\"> <h2 style=\"text-align: center; margin-top: 20px\"><?php $this->options->title() ?>'s SiteMap </h2> <center></center> <div id=\"nav\"><a href=\"<?php $this->options ->siteUrl(); ?>\"><strong><?php $this->options->title() ?></strong></a> » <a href=\"<?php $this->permalink() ?>\">站点地图</a></div> <div id=\"content\"> <h3>最新文章</h3> <ul> <?php $stat = Typecho_Widget::widget('Widget_Stat'); $this->widget('Widget_Contents_Post_Recent', 'pageSize='.$stat->publishedPostsNum)->to($archives); $year=0; $mon=0; $i=0; $j=0; while($archives->next()){ $year_tmp = date('Y',$archives->created); $mon_tmp = date('m',$archives->created); $y=$year; $m=$mon; if ($year > $year_tmp || $mon > $mon_tmp) { $output .= '</ul>'; } $output .= '<li><a href=\"'.$archives->permalink .'\">'. $archives->title .'</a></li>'; } $output .= '</ul>'; echo $output; ?> </ul> </div> <div id=\"content\"> <li class=\"categories\">分类目录 <ul><?php $this->widget('Widget_Metas_Category_List') ->parse('<li><a href=\"{permalink}\">{name}</a> ({count})</li>'); ?> </ul> </li> </div> <div id=\"content\"> <li class=\"categories\">独立页面</li> <ul class=\"clearfix\" id=\"nav_menu\"> <li><a href=\"<?php $this->options->siteUrl(); ?>\">首页</a></li> <?php $this->widget('Widget_Contents_Page_List') ->parse('<li><a href=\"{permalink}\">{title}</a></li>'); ?> </ul> </div> <div id=\"footer\">查看博客首页: <strong><a href=\"<?php $this->options ->siteUrl(); ?>\"><?php $this->options->title() ?></a></strong></div><br /> <center> <div style=\"text-algin: center; font-size: 11px\"><br /> © <?php echo date('Y'); ?> <strong><a href=\"<?php $this->options ->siteUrl(); ?>\" target=\"_blank\"><?php $this->options->title() ?></a></strong> 版权所有<br /><br /><br /> </div> </center> </body> </html> 2.创建新页面 登录你的网站后台，创建一个新的页面，模板选择上面新创建的 Sitemap网站地图 （其他地方可以不用管，直接发布即可） 实际情况请根据你自己的主题进行微调。 3.打开刚发布的页面，即可看到属于你自己的Sitemap网站地图。 完！","categories":[{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"建站","slug":"建站","permalink":"https://19492035.xyz/tags/%E5%BB%BA%E7%AB%99/"}],"author":"jacktang"},{"title":"给站点加个倒计时","slug":"给站点加个倒计时","date":"2024-05-04T07:49:56.000Z","updated":"2024-05-04T09:48:23.845Z","comments":true,"path":"posts/ec4ef32e.html","link":"","permalink":"https://19492035.xyz/posts/ec4ef32e.html","excerpt":"","text":"公告栏里直接显示 <div class=\"gn_box\"> <h2><center><font color=\"#E80017\" style=\"font-size: 18px;\">距离第六届虚拟现实研讨会还有</font></center></h2> <br/> <center> <div id=\"CountMsg\" class=\"HotDate\"> <span id=\"t_d\" style=\"font-size: 18px;\">X 天</span> <span id=\"t_h\" style=\"font-size: 18px;\">X 时</span> <span id=\"t_m\" style=\"font-size: 18px;\">X 分</span> <span id=\"t_s\" style=\"font-size: 18px;\">X 秒</span> </div> <br> <a href=\"https://19492035.xyz\" style=\"font-size: 16px; color: #0000FF;\">会议报名</a> </center> <script type=\"text/javascript\"> function getRTime() { var EndTime = new Date(\"2024/05/18 08:00:00\"); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = Math.floor(t / 1000 / 60 / 60 / 24); var h = Math.floor(t / 1000 / 60 / 60 % 24); var m = Math.floor(t / 1000 / 60 % 60); var s = Math.floor(t / 1000 % 60); document.getElementById(\"t_d\").innerHTML = d + \" 天\"; document.getElementById(\"t_h\").innerHTML = h + \" 时\"; document.getElementById(\"t_m\").innerHTML = m + \" 分\"; document.getElementById(\"t_s\").innerHTML = s + \" 秒\"; } setInterval(getRTime, 1000); </script> </div>","categories":[{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"建站","slug":"建站","permalink":"https://19492035.xyz/tags/%E5%BB%BA%E7%AB%99/"}],"author":"jacktang"},{"title":"解决Serv00服务器不定时重启机器每三个月内必须要有一次登录面板或者SSH连接问题","slug":"给服务器定时","date":"2024-05-03T09:19:49.000Z","updated":"2024-05-03T09:37:11.097Z","comments":true,"path":"posts/b8fa71c6.html","link":"","permalink":"https://19492035.xyz/posts/b8fa71c6.html","excerpt":"","text":"前言此方法来自大佬 Saika 搭建alist，经过测试很有用！ 再此记录学习下 自动定时SSH在Panel中找到File manager选项卡，进入alist所在的路径，然后找到上方Send按钮左边的+，选择New empty file，文件名命名为auto-renew.sh， 右键点击auto-renew.sh，选择View/Edit > Source Editor，进行编辑，把下面的代码块的内容都复制进去： #!/bin/bash while true; do sshpass -p '密码' ssh -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -tt 用户名@地址 \"exit\" & sleep 259200 #30天为259200秒 done 记得把其中的密码、用户名、ssh的地址修改为你自己的。保存后回到SSH中，进入auto-renew.sh 所在的路径，并使用pm2管理运行它： ~/domains/alist && chmod +x auto-renew.sh && ~/.npm-global/bin/pm2 start ./auto-renew.sh 这样就会每隔一个月自动执行一次SSH连接，自己SSH自己进行续期。 添加开机自启在Panel中找到Cron jobs选项卡，使用Add cron job功能添加任务： Specify time选择After reboot，即为重启后运行。Form type选择Advanced，Command写： /home/你的用户名/.npm-global/bin/pm2 resurrect 记得把你的用户名改为你的用户名添加完之后，在SSH窗口保存pm2的当前任务列表快照： ~/.npm-global/bin/pm2 save 这样每次serv00不定时重启任务时，都能自动调用pm2读取保存的任务列表快照，恢复任务列表。","categories":[{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"服务器","slug":"服务器","permalink":"https://19492035.xyz/tags/%E6%9C%8D%E5%8A%A1%E5%99%A8/"}],"author":"jacktang"},{"title":"serv00免费10年虚拟主机安装搭建各种服务","slug":"serv00","date":"2024-04-30T10:18:16.000Z","updated":"2024-05-03T10:08:48.403Z","comments":true,"path":"posts/a4df0321.html","link":"","permalink":"https://19492035.xyz/posts/a4df0321.html","excerpt":"","text":"本文收录Saika’s Blog只做学习收藏备份！这个平台是个 Virtual Host ，没有 Root ，还是 FreeBSD 的系统，不是 Linux ，不太好用。但是优点是隔离性差， Memory 和 vCPU 能短时间内超过 100% 进行调用。 面板自带功能域名Serv00 上如果想要使用自己的域名，有两种方式，一种是通过 Cloudflare 提供的 Argo 隧道，不仅能绑域名，免配置 ssl ，还可以享受 Cloudflare 的免费 CDN 提速。第二种就是直接使用面板内自带的 DNS 服务器功能绑定自己的域名。 在 Panel 中进入 DNS zones 选项卡，使用 Add new zone 功能添加自己的域名或者自己的域名的子域，然后在 Zone list 中找到刚刚添加的域名，点击 Edit 查看 DNS 记录，把当中列出的全部记录添加到自己的域名的 DNS 记录中即可完成域名的绑定。 Serv00 本身对于绑定在其上的域名提供了许多的服务支持，这里所说的绑定在Serv00上的域名包括自己绑定的自己的域名，以及 Serv00 在注册账户时赠送的域名 USERNAME.serv00.net ，其服务包括免费的一键申请式的 SSL 证书、域名邮箱、 DNS 管理等多种功能。 SSL证书申请在 Panel 中进入 WWW websites 选项卡，点击 Manage SSL certificates ，在你需要申请 SSL 证书的域名的 A 记录指向的那个 IP 地址右侧点击 Manage ，再点击 Add certificate ， Type 选择 Generate Let’s Encrypt certificate ，Domain 选择要申请 SSL 证书的域名，再点击 Add 即可。 域名邮箱Panel 中进入 E-mail 选项卡，注册账号后会自动注册一个域名邮箱，用户名是 USERNAME@USERNAME.serv00.net 是 Serv00 的账户密码。可以使用 Add new e-mail 功能新建邮箱账户。 也可以在 Add new alias 功能中新建别名邮箱，其别名邮箱功能也提供了和 Cloudflare 一样的 Catch-all 的 Advanced settings 选项，用来批量注册东西十分方便。 目前我的测试中，似乎没有在 Manage whitelist 中添加进白名单的域名邮箱发来的邮件全部都会被识别为垃圾邮件。所以有需要的话可以在 Manage whitlist 中添加你需要接受邮件的邮箱的域名，比如 qq.com 、 gmail.com 等等。 如果绑定了自己的域名，想要使用自己的域名配置域名邮箱的话，要在 Domain list 中找到自己的域名，点击最右边的 DKIM ， action 选择 Add DNS record automatically ，然后 Sign domain 以注册域名，使得新的域名邮箱能够通过一些邮件接收服务器的验证。 Open web client 功能就可以进入邮箱的登录页面了，其使用方法与大多数的邮箱相同，不再赘述。 DNS管理DNS zones 选项卡中在自己绑定的域名右侧点击 Edit ，即可查看当前域名的所有 DNS 记录，在 Add new record 中可以手动添加新的 DNS 记录，与大多数的域名服务商提供的 DNS 管理的功能类似。 ProxyWWW websites 选项卡中可以根据语言不同添加多种网站，其中 PHP 的 eval() function 和 exec() function 都要在添加完网站后，在Manage > Details 中打开。不同类型的网页其 Details 中的选项也都有差异，可以按需查看配置，这里重点讲一下 Proxy 类型指向自己的应用程序监听端口的配置。 Add new website 功能中， Domain 填写自己的域名或者 serv00 分配的域名，或者它们的子域，展开 Advanced settings， Website type 选择 Proxy ，Proxy target 选择 localhost ， Proxy port 选择自己的应用监听的端口，其他选项留空或者保持默认，点击 Add 即可。接下来就能使用刚刚填写的域名访问自己部署的对应端口的应用了。如果需要 https 访问，再按前文的步骤去申请 SSL 证书即可。 运行自己的应用Additional services 选项卡中找到 Run your own applications 项目，将其设置为 Enabled 即可。如果不开启这一项，自己的用户目录下的所有文件都无法添加可执行权限。 File manager文件管理，有一定的在线编辑和预览的功能，兼具文件的上传下载，删除新建等各种管理功能，十分便利。 Port reservation需要使用端口都得在这申请。 数据库Serv00 提供了 MySQL 、 PostgreSQL 、 MongoDB 三种数据库，可以按需新建数据库、数据库用户。同时， Serv00 还提供了三种数据库的 webui ，十分便利。 需要注意的是，所有数据库在新建时，其用户名和数据库名都有一个 mxxx_ 的前缀，在使用时容易被忽视。 Cron jobsCron jobs 选项卡提供了一些计划性任务的设置功能，在这里可以设置开机自启任务，或者定时循环任务，当然常用的还是开机自启任务的设定， Specify time 选择 After reboot 即为开机自启。 部署应用前的一些准备工作在部署自己的应用之前，我建议提前安装好 pm2 以及 Cloudflared （可选）。前者是进程管理工具，用来方便开机自启，以及程序崩溃后自启，查阅进程运行情况等等。后者是 Cloudflare 的 Argo 隧道客户端，用它也可以给自己部署的应用加域名。特别是 Uptime Kuma ，更加推荐使用 Cloudflared 加域名，而不建议使用面板自带的 Proxy 。 Pm2这个是重中之重，如果不是成功安装了 pm2 ，我甚至不会尝试探索 Serv00 这个玩具有什么用，所以 pm2 的安装方法记录在开头。 在 SSH 连接 serv00 之后，直接使用一键脚本安装 pm2 ： 1bash <(curl -s https://raw.githubusercontent.com/k0baya/alist_repl/main/serv00/install-pm2.sh) 如果安装完成后执行 pm2 提示命令未找到，你可以断开 SSH 连接，再重新连接，即可。 CloudflaredCloudflared 官方仓库并没有构建 FreeBSD 系统上能够使用的二进制文件，但是同样的，我找到了第三方的构筑。使用第三方构筑的二进制文件，就能愉快的使用隧道了。 关于 Cloudflared 是什么，有什么用，ARGO_TOKEN 如何获取等部分，这里不再赘述，详细可以查看我的关于 CodeSandbox 和 Hax 的文章。 创建并进入Cloudflared 的工作目录： 1mkdir -p ~/domains/cloudflared && cd ~/domains/cloudflared 下载 Cloudflared： 1wget https://cloudflared.bowring.uk/binaries/cloudflared-freebsd-latest.7z && 7z x cloudflared-freebsd-latest.7z && rm cloudflared-freebsd-latest.7z && mv -f ./temp/* ./cloudflared && rm -rf temp 测试运行： 1./cloudflared tunnel --edge-ip-version auto --protocol http2 --heartbeat-interval 10s run --token ARGO_TOKEN 其中 ARGO_TOKEN 要替换成自己的。确定运行没有问题后，按 Ctrl+c即可停止运行。 使用 pm2 启动 Cloudflared： 1pm2 start ./cloudflared -- tunnel --edge-ip-version auto --protocol http2 --heartbeat-interval 10s run --token ARGO_TOKEN 其中 ARGO_TOKEN 要替换成自己的。 接着去 CLoudflare 的面板中设置域名对应端口，即可使用域名访问自己搭建的服务了。 安装 go1.22 如果你有安装自己使用 go build 构建的需求，你可以选择安装最新的 go1.22 ，这里记录其安装过程。 由于 Serv00 服务器上并未提供 go1.22 ，只提供了 go1.20.3 ，无法正常进行构建工作，所以需要手动安装 go1.22 环境。 1234567891011121314# 创建安装目录mkdir -p ~/local/soft && cd ~/local/soft# 下载编译好的 go1.22 的程序包wget https://dl.google.com/go/go1.22.0.freebsd-amd64.tar.gz# 解压tar -xzvf go1.22.0.freebsd-amd64.tar.gz# 删除压缩文件rm go1.22.0.freebsd-amd64.tar.gz# 修改 .profile 文件echo 'export PATH=~/local/soft/go/bin:$PATH' >> ~/.profile# 使 .profile 的修改生效source ~/.profile# 检查 go 版本go version 部署自己的应用 关于设定 PHP 版本、插件、参数等配置均可参考文档的 .htaccess 部分进行配置，由于 PHP 的应用部署实在是太简单，故本文不会过多介绍。 WordPress实际上在 serv00 的文档中有搭建网站的示例，没错，示例就有 WordPress ，实际上 WordPress 确实可以搭建，十分简单好用。这里不做过多介绍，按照文档一步步操作即可。 除了 WordPress 外，文档中还详细介绍了 Redis、Memcached、Imapsync、WP-CLI、Tomcat 等服务的搭建方法，有需求的都可以照着抄。 KodBox虽然 Serv00 能够部署 KodBox，但是实在是不太好用。最直观的感受就是卡，因为 KodBox 运行期间需要调用多个 PHP 组件，而 Serv00 限制同时处理三个 PHP 进程，所以显得特别慢。其次， Serv00 没有 Root 权限，部分 PHP 插件没有安装，也无法安装，导致有一些 KodBox 的插件无法正常运行。 当然如果只是图新奇搭一个玩玩，也是可以的。下面是步骤： 首先在 Panel 中 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type PHP 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着SSH登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 12# 安装KodBoxbash <(curl -s https://pan.rappit.site/d/shell/kodbox1.49/serv00-kodbox-install.sh) 然后去 Panel 中的 MySQL 选项卡，新建数据库和用户，用以接入 KodBox 。再去 WWW Websites 选项卡中找到 用户名.serv00.net ，点击右侧的 Manage > Details 进入设置，把 GZIP compression、Allow PHP eval() function、Allow PHP exec() function 三个功能打开。 然后使用浏览器访问你的 KodBxo 的域名，进行安装配置即可。初次启动需要较长的时间，请耐心等待。 Lsky-Pro一开始看兰空图床的文档没看到 webdav 功能的相关介绍，只看到几个我都不用的存储介质，遂不感兴趣的搁置了，然而群友近日又提起，我打开 GitHub 才发现首页有个 Commit 的标题就是 webdav 相关，即兰空图床支持 webdav 。于是我便部署了一下，体验感觉还不错，简单易用。 本来无意在本篇文章再多写 PHP 相关的站点部署，因为过于简单。但是奈何群友有需求，遂做个简单的步骤记录： 首先在 Panel 中 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type PHP 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着SSH登入，并进入刚刚你新建的域名目录下： 12345# 下载图床应用release_info=$(curl -s https://api.github.com/repos/lsky-org/lsky-pro/releases/latest)asset_url=$(echo \"$release_info\" | jq -r '.assets[] | select(.name != \"source code\") | .browser_download_url')curl -L -o temp.zip \"$asset_url\" && unzip -q temp.zip && rm -f temp.ziprm -rf public_html && ln -s \"$PWD/public\" \"$PWD/public_html\" 接着在 Panel 中 WWW websites 选项卡内，点击自己刚刚创建的用于部署 Lsky-Pro 的域名的 Manage > Details ，在 Open Basedir directories 的最末添加： 1:/usr/home/用户名/domains/xxx.USERNAME.serv00.net 记得把用户名和最末的域名换成自己的。 然后把 GZIP compression 、Allow PHP eval() function 、Allow PHP exec() function 都打开，点击 save changes 保存。 然后去 Panel 中的 MySQL 选项卡，新建数据库和用户，用以接入 Lsky-Pro 。 然后使用浏览器访问你的 Lsky-Pro 的域名，进行安装配置即可。 上面的应用不需要占用端口。 下面的应用每一个都能够 / 需要占用端口。 Vless这个肯定是第一时间部署的，每次遇到这样的平台，第一时间总是想着能不能搭建节点。 ①首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的 USERNAME.serv00.net 删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 Vless 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着SSH登入，并进入刚刚你新建的域名目录下： 12# 克隆源仓库rm -rf public_html && git clone https://github.com/qwer-search/serv00-vless public_html && cd public_html && rm -f README.md 使用vim编辑或者直接去 Panel 中的 File Manager 选项卡在线编辑 app.js 文件，修改端口为刚刚放行的端口。 安装依赖： 1npm install 安装完毕后，使用pm2启动并守护vless进程： 1pm2 start app.js --name vless 接着去你的代理客户端软件中手动添加 vless 配置即可： Key Value 地址 Panel中WWW Websites 选项卡里的你的 Domain name 端口 你放行的端口 用户 id 37a0bd7c-8b9f-4693-8916-bd1e2da0a817 传输协议 ws 伪装域名 同地址 ws path / 上表没有给出的可以不填。 ②首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的 USERNAME.serv00.net 删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 Vless 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着SSH登入，并进入刚刚你新建的域名目录下的 public_html 路径下，再使用 npm 命令安装 @3Kmfi6HP/nodejs-proxy ： 1npm install @3Kmfi6HP/nodejs-proxy 被删库了可以自己换个源安装，比如： 1npm --registry http://r.cnpmjs.org install @3Kmfi6HP/nodejs-proxy 这个源如果也不行了请自己找其他源替换。 再使用 pm2 启动： 12# 记得把 PORT 替换成自己放行的端口。pm2 start npx --name vless -- nodejs-proxy -p PORT 接着访问这个刚刚添加的站点，即可在网页上直接获取配置。哦对，有个小 bug ，端口需要改成 443 ，而网页中默认给的配置是 80 。 之所以说这个 npm 包不安全，是因为其配置在网页上都可以看到，而且网页设计不太合理，有一个不带 uuid 的中转页面，所以可以使用 fofa 、 shodan 等网络空间扫描工具批量扫出来，而且不止 Serv00 一个平台有人使用，如果你感兴趣，你可以去搜搜看，可以收获一大批 Vless 节点。 这里放一个 Serv00 上的，我在 fofa 上搜到的页面作为部署示例：https://pclwgdwv.serv00.net/ AlistAlist 官方仓库没有构筑 FreeBSD 系统下能够运行的 Alist 可执行文件，但是我在 Github 上发现了一个使用 Github Workflow 自动构筑 FreeBSD 适用的 Alist 的仓库，使用这个仓库就可以很便利的在Serv00上部署 Alist。 首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的 USERNAME.serv00.net 删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 Alist 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着 SSH 登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 12# 使用一键命令安装 Alistwget -O alist-freebsd.sh https://raw.githubusercontent.com/k0baya/alist_repl/main/serv00/alist-freebsd.sh && sh alist-freebsd.sh 在 Panel 中进入 MySQL 选项卡，使用 Add database 功能新建一个数据库。 密码要求含有大写字母、小写字母和数字三种字符，且长度必须超过6个字符。 接下来进入 File manager 选项卡，进入 ~/domains/xxx.USERNAME.serv00.net/public_html/data 路径，可以看到一个名为 config.json 的文件，右键点击，选择 View/Edit > Source Editor ，进行编辑： 我主要修改了 CDN、database、scheme 三个部分，其中CDN可以在 Alist 的官方文档找到，请选择你本地网络连接速度最快的一个。 scheme 部分，我选择修改 adress 为 127.0.0.1本地回环，是为了避免被他人使用 http://ip:port的方式进行访问。至于自己怎么访问，我在本文后面的部分会进行介绍。port 要改成自己前面放行的端口。 database 部分，type 需要改成 mysql ，host 填写你在注册邮件中看到的 mysql 的地址， port 是默认的 3306，用户名、密码、数据库名则按照你创建的情况进行填写。 最新版本的 Alist 如果不想开启 S3 Server，请把对应的配置文件中的端口配置为 0 。 改完之后，点击 save 保存，接着回到 SSH 窗口中进行操作： 测试启动 Alist： 1./alist server 确定运行没有问题后，按 Ctrl+c即可停止运行。 使用 pm2 启动并管理 alist： 1pm2 start ./alist -- server 同样的，你还可以使用 Cloudflared 隧道添加域名，而不选择使用 Proxy 。 Synctv群友仿照 alist-freebsd 的仓库的 workflow 进行构筑的。部署简单，与 alist 类似。首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的 USERNAME.serv00.net 删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 Synctv 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着 SSH 登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 1234# 下载可执行文件release_info=$(curl -s https://api.github.com/repos/shangskr/synctv-freebsd/releases/latest)asset_url=$(echo \"$release_info\" | jq -r '.assets[] | select(.name != \"source code\") | .browser_download_url')curl -L -o synctv \"$asset_url\" && chmod +x synctv 新建启动脚本： 12345678cat > start.sh << EOF#!/bin/sh# 如果不希望被使用 http://ip:port 的方式访问，取消注释下一行# export SYNCTV_SERVER_LISTEN=127.0.0.1# 把下一行的最末的PORT改成自己放行的端口export SYNCTV_SERVER_PORT=PORTexec ./synctv server --data-dir ./EOF 添加可执行权限： 1chmod +x start.sh 测试运行： 1./start.sh 确定运行没有问题后，按 Ctrl+c即可停止运行。 使用pm2启动并管理： 1pm2 start ./start.sh --name synctv 同样的，你还可以使用 Cloudflared 隧道添加域名，而不选择使用 Proxy 。 One-api源仓库没有提供freebsd平台的二进制文件，需要自己构建，但是很简单。我已经写了一个仓库用于自动化构建 freebsd 版本的 one-api 二进制文件，可以直接下载使用。 如果你想使用 New-API ，可以使用这个仓库k0baya/new-api-freebsd，用法与本节介绍的 One-API 基本一致，对比One-API添加了一些更方便的功能。也许之后 One-API 也会加入这些功能。 首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 One-API 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着 SSH 登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 1234# 下载 one-apirelease_info=$(curl -s https://api.github.com/repos/k0baya/one-api-freebsd/releases/latest)asset_url=$(echo \"$release_info\" | jq -r '.assets[] | select(.name != \"source code\") | .browser_download_url')curl -L -o one-api \"$asset_url\" && chmod +x one-api 新建启动脚本： 12345678cat > start.sh << EOF#!/bin/sh# 如果你有设置主题的需要，可以取消注释下一行，然后按照自己的需求设置。# export THEME=\"berry\"export TIKTOKEN_CACHE_DIR=\"$PWD\"# 把下一行的 PORT 改为自己放行的端口exec ./one-api --port PORT --log-dir ./logsEOF 添加可执行权限： 1chmod +x start.sh 保存后回到 terminal 中，测试运行： 1./start.sh 确定运行没有问题后，按 Ctrl+c即可停止运行。 使用pm2启动并管理： 1pm2 start ./start.sh --name one-api 同样的，你还可以使用 Cloudflared 隧道添加域名，而不选择使用 Proxy 。 Uptime-Kuma受限于 FreeBSD 的平台限制，1.23版本内置了 PlayWright ，无法运行，所以只能安装 1.22 版本。切记先去 Panel 中放行 TCP 端口。 首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 Uptime-Kuma 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着 SSH 登入，并进入刚刚你新建的域名目录下： 12# 下载 v1.22.1 版本的源代码cd ~/domains && wget https://github.com/louislam/uptime-kuma/archive/refs/tags/1.22.1.zip && unzip 1.22.1.zip && rm -rf public_html && mv -f uptime-kuma-1.22.1 public_html && rm -f 1.22.1.zip && cd public_html 设置生产模式： 1npm ci --production 下载dist文件： 1wget https://github.com/louislam/uptime-kuma/releases/download/1.22.1/dist.tar.gz && tar -xzvf dist.tar.gz && rm dist.tar.gz 安装补充依赖： 1npm install 安装过程中多少会有报错，无视就好，实际上最后可以正常运行。内置的Cloudflared反向代理在FreeBSD平台上无法使用，但是可以使用上述的外置的Cloudflared进行反代，使用自己的域名。 测试运行： 1node server/server.js --port=PORT 记得把PORT替换成你放行的端口。确定运行没有问题后，按 Ctrl+c即可停止运行。 使用pm2管理后台运行： 1pm2 start server/server.js --name uptime-kuma -- --port=PORT 记得把PORT替换成你放行的端口。 如果你不希望自己的Uptime-Kuma被人使用 http://IP:PORT的方式访问，你可以在最后的执行命令添加 --host=127.0.0.1的尾缀，这样就只能通过反向代理的域名进行访问了: 1pm2 start server/server.js --name uptime-kuma -- --port=PORT --host=127.0.0.1 同样的，你还可以使用 Cloudflared 隧道添加域名，而不选择使用 Proxy 。 Bingo（暂时无法正常使用）先放行一个端口。在 Panel 中进入 File manager 选项卡，点击左侧的 My Files 进入你的用户根目录，找到 .profile文件，右键选择 View/Edit > Choose other >Source Editor 进行编辑，在最末加上以上两行并保存： 12alias node='node20'alias npm='npm20' 应用更改： 1source ~/.profile 先新建一个目录用于存放 Bingo 的相关文件，进入目录后执行下述操作。 下载源码： 1git clone https://github.com/weaigc/bingo 进入源码所在目录： 1cd bingo 安装依赖： 1npm20 install 下载build好的 .next资源： 1wget -O next.tar.gz https://pan.saika.free.hr/d/local/next.tar.gz && tar -xzvf next.tar.gz && rm next.tar.gz 添加环境变量文件： 1cp .env.example .env 接着在 Panel 中进入 File manager 选项卡，进入Bingo 源码所在的目录，找到 server.js文件，右键选择 View/Edit > Choose other >Source Editor 进行编辑，修改第7行中的端口为你放行的端口。再编辑 .env文件，添加你的 BING_HEADER。 测试启动： 1npm20 run start 确定运行没有问题后，按 Ctrl+c即可停止运行。 使用pm2启动并管理： 1pm2 start npm --name bingo -- run start Refresh-gpt-chat用来对接 ninja、warpgpt 等能够使用 access_Token 作为 API Key 请求 GPT 的工具，以使用永久有效期的 Refresh_token 来获取更好的体验。 首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的 USERNAME.serv00.net 删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 Refresh-gpt-chat 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着 SSH 登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 12# 下载 refresh-gpt-chatwget -O refresh-gpt-chat.jar https://github.com/Yanyutin753/refresh-gpt-chat/releases/download/v0.0.3/refresh-gpt-chat-0.0.3-SNAPSHOT.jar 使用 pm2 启动： 1pm2 start java19 --name refresh-gpt-chat -- -jar refresh-gpt-chat.jar --server.port=端口 --server.servlet.context-path=/ --getAccessTokenUrl=https://你的ninja地址/auth/refresh_token --chatUrl=https://你的ninja地址/v1/chat/completions 再套域名，接下来就可以直接使用 https://你套的域名/v1/chat/completions/ 当作API端点，使用 refresh_token 做 API_Keys ，使用 ChatGPT 了。 然后在 one-api 中添加自定义渠道， Base URL 填写你 https://你套的域名，模型填入你的 refresh_token 对应的账号所支持的模型，如果和我一样手持大把 3.5 的账号想用来做 API 用，可以选择全部 GPT3.5 的相关模型，然后在 模型重定向中填入以下内容： 12345678{ \"gpt-3.5-turbo-0301\": \"gpt-3.5-turbo\", \"gpt-3.5-turbo-0613\": \"gpt-3.5-turbo\", \"gpt-3.5-turbo-16k\": \"gpt-3.5-turbo\", \"gpt-3.5-turbo-16k-0613\": \"gpt-3.5-turbo\", \"gpt-3.5-turbo-1106\": \"gpt-3.5-turbo\", \"gpt-3.5-turbo-instruct\": \"gpt-3.5-turbo\"} 密钥填写你的 refresh_token即可，如果你有多个账号，可以将批量勾选上，然后一行写一个 refresh_token。 同样的，你还可以使用 Cloudflared 隧道添加域名，而不选择使用 Proxy 。 Gpt4-copilot-java支持 cocopilot 的 ccu 和 copilot 的 ghu 调用 copilot 转 GPT-4 的接口转换工具。 Java 写的，可以在 Serv00 运行。 目前更推荐这个方法：lvguanjun/copilot-to-chatgpt4比起 Gpt4-copilot-java 更轻量更强大。 首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 Gpt4-copilot-java 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着 SSH 登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 1234# 下载 fat jar 包RELEASE_INFO=$(curl -s \"https://api.github.com/repos/Yanyutin753/gpt4-copilot-java-sh/releases/latest\")JAR_DOWNLOAD_URL=$(echo \"$RELEASE_INFO\" | jq -r '.assets[] | select(.name|test(\".jar$\")) | .browser_download_url')curl -L -o gpt4-copilot-java.jar \"$JAR_DOWNLOAD_URL\" 测试运行： 12# 把PORT改为自己放行的端口，最后的server.servlet.context-path参数可以改成自己喜欢的尾缀java19 -jar gpt4-copilot-java.jar --server.port=PORT --server.servlet.context-path=/ 测试没有问题之后，按 Ctrl+c即可停止运行。 使用 pm2 启动并管理： 1pm2 start java19 --name gpt4-copilot-java -- -jar gpt4-copilot-java.jar --server.port=PORT --server.servlet.context-path=/ 始皇的公车：ghu_ThisIsARealFreeCopilotKeyByCoCopilot （已失效） 免费公车白嫖请求示例： 1234567curl --location 'http(s)://ip:port_or_URL/cocopilot/v1/chat/completions' --header 'Content-Type: application/json' --header 'Authorization: Bearer ghu_ThisIsARealFreeCopilotKeyByCoCopilot' --data '{\"model\": \"gpt-4\",\"messages\": [{\"role\": \"user\", \"content\": \"鲁迅打周树人\"}]}' 同样的，你还可以使用 Cloudflared 隧道添加域名，而不选择使用 Proxy 。 Zfile首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 Zfile 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着 SSH 登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 12# 下载 fat jar 包wget --no-check-certificate -O zfile.jar https://c.jun6.net/ZFILE/zfile-release.jar 测试运行： 1java19 -jar -Duser.timezone=Asia/Shanghai zfile.jar --zfile.log.path=$PWD/logs --zfile.db.path=$PWD/zfile --server.port=PORT 记得把端口改成自己的。测试没有问题之后，按 Ctrl+c即可停止运行。 使用pm2启动并管理： 1pm2 start java19 --name zfile -- -jar -Duser.timezone=Asia/Shanghai zfile.jar --zfile.log.path=$PWD/logs --zfile.db.path=$PWD/zfile --server.port=PORT 同样的，你还可以使用 Cloudflared 隧道添加域名，而不选择使用 Proxy 。 Halo 慎重部署，内存会超100%，不知道会不会封号 halo 自从升级 2.0 版本开始，很长时间内都没有提供构筑好的 jar 包，甚至于在GitHub上都出现了第三方的，使用 GitHub workflow 自动化构筑 jar 包的仓库。但是，自从2.12.0-alpha.1版本开始，halo 的官方仓库又开始提供构筑好的 jar 包了，刚好这些天在玩 Serv00 ，遂尝试部署了一下，成功。现记录一下： 首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的 USERNAME.serv00.net 删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 Halo 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 并在 MySQL 选项卡中中新建 MySQL 数据库，用于填入接入 Halo 。 接着 SSH 登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 1234# 下载jar包release_info=$(curl -s https://api.github.com/repos/halo-dev/halo/releases/latest)jar_url=$(echo \"$release_info\" | jq -r '.assets[] | select(.name | endswith(\".jar\")) | .browser_download_url')curl -L \"$jar_url\" -o halo.jar 在 halo.jar 所在路径下新建 .halo2 文件夹，进入其中，新建文件 application.yaml 然后并配置其内容： 12345678910111213141516171819202122# 新建文件夹mkdir -p .halo2# 新建并填入配置cat > .halo2/application.yaml << EOFserver: port: 你在面板中放行的端口 # Response data gzip. compression: enabled: falsespring: #sql: # init.platform: mysql r2dbc: url: r2dbc:pool:mysql://数据库地址:3306/数据库名 username: 数据库用户名 password: 数据库密码halo: # Your admin client path is https://your-domain/{admin-path} admin-path: admin # memory or level cache: levelEOF 在 halo.jar 所在路径下新建 run.sh 运行脚本： 123456cat > run.sh << EOF#!/bin/bashexport HALO_WORK_DIR=\"$PWD/.halo2\"export HALO_EXTERNAL_URL=\"https://你的域名\"exec java17 -server -Xms128m -Xmx256m -jar -Duser.timezone=Asia/Shanghai $PWD/halo.jar --spring.config.additional-location=$PWD/.halo2/application.yamlEOF 测试运行： 1chmod +x run.sh && ./run.sh 确定运行没有问题后，按 Ctrl+c即可停止运行。 使用pm2管理运行： 1chmod +x run.sh && pm2 start ./run.sh --name halo 同样的，你还可以使用 Cloudflared 隧道添加域名，而不选择使用 Proxy 。 Go-proxy-bingai这个仓库是 Bingo 的前身，当初玩 Replit 时我便有在使用，只可惜作者早已弃坑，所以当初我才找到了当时还能用的 Bingo 使用。 在 Bingo 也长期未更新，无法正常使用的如今，我的目光转向了另一个二改仓库。Harry-zklcdc 维护的 Go-proxy-bingai 的分支仓库目前还能够正常使用。而且在与开发者反馈了几个 bug 之后，开发者都会花时间认真复现，并快速修复，其体验实在是不错。 虽然原仓库的 Release 中并未提供 FreeBSD 系统适用的二进制文件，但是我们能够自己构建。我已经构建了一份放在这篇博客底部的QQ群的群文件中。我写了一个仓库用于自动化构建 FreeBSD 版本的 go-proxy-bingai ，可以从我的仓库下载使用。 作者已经开始提供 FreeBSD 的构建，故我的仓库已经存档。 首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的 USERNAME.serv00.net 删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 Go-proxy-bingai 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着 SSH 登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 1234# 下载可执行文件release_info=$(curl -s https://api.github.com/repos/Harry-zklcdc/go-proxy-bingai/releases | jq -r '[.[] | select(.prerelease==false)][0]')download_url=$(echo \"$release_info\" | jq -r '.assets[] | select(.name==\"go-proxy-bingai-freebsd-amd64.tar.gz\") | .browser_download_url')curl -L \"$download_url\" -o go-proxy-bingai-freebsd-amd64.tar.gz&& tar -xzf go-proxy-bingai-freebsd-amd64.tar.gz && rm go-proxy-bingai-freebsd-amd64.tar.gz && chmod +x go-proxy-bingai 新建启动脚本： 12345678910111213141516171819cat > entrypoint.sh << EOF#!/bin/bash# 被注释的环境变量请根据自己的需求，按照原仓库的 wiki 中的介绍进行填入。export BYPASS_SERVER=\"https://bypass.zklcdc.xyz\" # 作者本人的公共bypass服务，可用性未知。# export Go_Proxy_BingAI_USER_TOKEN_1=\"xxx\"# export Go_Proxy_BingAI_USER_TOKEN_2=\"xxx\"# export USER_KievRPSSecAuth=\"xxx\"# export USER_RwBf=\"xxx\"# export USER_MUID=\"xxx\"# export APIKEY=\"sk-xxx\"# export BING_BASE_URL=\"https://www.bing.com\"# export SYDNEY_BASE_URL=\"https://sydney.bing.com\"# export HTTP_PROXY=\"http://172.17.0.1:18080\"# export HTTPS_PROXY=\"http://172.17.0.1:18080\"# export Go_Proxy_BingAI_AUTH_KEY=\"xxx\"# 请把下一行双引号中的内容替换成你放行的端口。export PORT=\"xxx\"chmod +x go-proxy-bingai && exec ./go-proxy-bingaiEOF 运行： 1234# 测试运行chmod +x entrypoint.sh && ./entrypoint.sh# 使用 pm2 管理运行pm2 start ./entrypoint.sh --name go-proxy-bingai 请注意，如果你需要使用其 web 功能，而不仅仅是 api 功能，请务必使用 https 访问，不然无法打开。你可以选择使用面板自带的 proxy 添加域名并申请 ssl 证书，亦或者直接使用 cloudflared 隧道。 同样的，你还可以使用 Cloudflared 隧道添加域名，而不选择使用 Proxy 。 Pentaract 不建议使用，目前 Bug 众多，而且对 Telegram 账号有一定要求，目前暂不清楚 Telegram 限制账号的评定标准。 可以自行构建或者使用使用我构建的成品。由于该应用需要使用具有超级管理员权限的 PostgreSQL ，故不可使用 Serv00 自带的 PostgreSQL ，需要远程连接。 编译成品下载地址：pentaract-freebsd_X64.tar.gz 前端构建简单，这里不再赘述，而且由于其 Dockerfile 内构建前端使用的是 Node.js 21 而目前 FreeBSD Port 最高只有 Node.js 20 ，故不推荐在 FreeBSD 上直接构建，可以使用 GItHub Actions 进行构建，或是自己在 Node.js 21 的环境下构建再复制，甚至干脆直接从作者预构建的 Docker 镜像内打包出来使用。（经过测试，使用 Nodejs20 构建也可以正常使用。） Serv00 上的构建法： 1234567891011# 切换 Node.js 版本为 Nodejs20alias node=node20alias npm=npm20# 全局安装 pnpmnpm install -g pnpmsource ~/.bashrc# 构建前端pnpm installVITE_API_BASE='/api' pnpm run build# 移动构建产物到工作目录mkdir -p ~/pentaract/ui && cp -R ./dist/* ~/pentaract/ui 后端的构建，可以使用 GItHub Actions ，或者本地 FreeBSD 虚拟机，甚至直接在 Serv00 上构建。这里记录一下在 Serv00 上构建的方法： 123456# 克隆仓库到 Serv00 上git clone https://github.com/Dominux/Pentaract && cd Pentaract/pentaract# 构建LIBCLANG_PATH=/usr/local/llvm16/lib cpuset -l 0 cargo build --release# 移动构建产物到工作目录mkdir -p ~/pentaract && cp ./target/release/pentaract ~/pentaract/pentaract 然后去 supabase 注册一个免费的PostgreSQL ，记录下数据库的用户名、密码、数据库名、地址，用于后续填入环境变量。 接着在 ~/pentaract 路径下新建一个启动脚本，按照要求填入所有的环境变量： 123456789101112131415161718cat > start.sh << EOF#!/bin/bashexport PORT=xxxxexport WORKERS=4export CHANNEL_CAPACITY=32export SUPERUSER_EMAIL=xxxx@xxxx.comexport SUPERUSER_PASS=xxxxexport ACCESS_TOKEN_EXPIRE_IN_SECS=1800export REFRESH_TOKEN_EXPIRE_IN_DAYS=14export SECRET_KEY=xxxexport TELEGRAM_API_BASE_URL=https://api.telegram.orgexport DATABASE_USER=xxxxexport DATABASE_PASSWORD=xxxxexport DATABASE_NAME=xxxxexport DATABASE_HOST=xxxxexport DATABASE_PORT=5432chmod +x pentaract && exec ./pentaractEOF 给启动脚本赋权： 1chmod +x start.sh 前端的 index-22eec6d1.js 文件内的 http://localhost:8000 需要更改为 serv00 的 url 或者 ip:port 。你可以去文件管理中编辑，查找替换即可，也可以使用sed命令简单更改一下： 已经重新构建前端并替换，现无需此步。 测试运行： 1./start.sh 使用 pm2 管理： 1pm2 start ./start.sh --name pentaract OneList原作者似乎已经弃坑，故我的仓库没有做自动检测构建。但是体验还不错，有 Emby 既视感了，配合小雅的 Alist 岂不美哉。 首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 OneList 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着SSH登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 1234# 下载 OneListwget https://github.com/k0baya/onelist-freebsd/releases/download/v2.0.5/onelist# 初始化配置chmod +x onelist && ./onelist -run config 接着回到 Panel 中，进入File manager选项卡，进入 OneList 所在路径，可以看到一个名为 config.env 的文件，右键点击，选择View/Edit > Source Editor，进行编辑： 12345678910111213141516171819202122232425# 服务设置# 注意要改为未被占用的端口API_PORT=5245FaviconicoUrl=https://wework.qpic.cn/wwpic/818353_fizV30xbQCGPQRP_1677394564/0API_SECRET=fRVvjcNd11gYGI85StVaeCtPVSmJTRRE# Env有两种模式，Debug及Release，主要用在数据库为mysql时候，需要注意修改Env环境和mysql密码对应Env=Debug# 管理员账户设置，用于初始化管理员账户UserEmail=xxxx.@qq.comUserPassword=xxxxx# 数据库设置DB_DRIVER=sqliteDB_USER=rootDbName=onelist# 如果上面DB_DRIVER类型为mysql，就需要正确填下以下参数DB_PASSWORD_Debug=123456DB_PASSWORD_Release=123456# TheMovieDb Key# 在https://www.themoviedb.org网站申请KeyDb=22f10ca52f109158ac7fe064ebbcf697 你可以按照自己的需求配置端口、管理员账户、数据库。 MySQL 性能更好哦~ 测试运行： 1./onelist -run server 使用 pm2 管理： 1pm2 start ./onelist -- -run server WarpGPT这个没什么多说的，可以使用 access_Token 作为 API Key 请求 ChatGPT 接口，也就是所谓的 chat2api 。配合前文的 Refresh-gpt-chat 就可以把永久有效期的 Refresh_token 作为 API Key 来使用，十分的好用。 源仓库没有 Release ，故我的仓库没有做自动检测构建。如果有更新需求需要手动触发 workflow 。你有需要也可以自己fork一份然后手动触发 workflow 。 首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 WarpGPT 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着SSH登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 12# 下载二进制文件wget https://github.com/k0baya/warpgpt-freebsd/releases/download/latest/warpgpt && chmod +x warpgpt 添加启动脚本： 12345cat > start.sh << EOF#!/bin/bashexport TMPDIR=\"$PWD\"chmod +x warpgpt && exec ./warpgptEOF 给启动脚本赋权： 1chmod +x start.sh 配置环境变量： 1234567891011121314151617cat > .env << EOFproxy = \"http://127.0.0.1:10809\" #代理地址 （选填）port = 5000 #程序运行端口host = '127.0.0.1' #可访问ip，0.0.0.0允许所有ipverify = false #是否对访问进行验证auth_key = \"\" #若开启访问验证，则需要在Header中添加AuthKey字段，且值为auth_key的值才能访问 （选填）arkose_must = false #是否强行gpt3.5进行验证OpenAI_HOST = \"chat.openai.com\" #openai网页api接口地址 （选填）openai_api_host = \"api.openai.com\" #openai官方api接口 （选填）proxy_pool_url=\"\" #ipidea代理池链接 （选填）#示例http://api.proxy.ipidea.io/getProxyIp?num=10&return_type=json&lb=1&sb=0&flow=1&regions=us&protocol=http，根据访问频次设置num值log_level = \"debug\" #日志等级redis_address = \"127.0.0.1:6379\" #redis地址（若不开启代理池可选填）redis_passwd = \"\" #redis密码redis_db = 0 #选择的redis数据库EOF 如果有 redis 需求，可以查阅官方文档：Redis 使用 pm2 管理运行： 1pm2 start bash --name warpgpt -- start.sh Coze-discord-proxy代理 Discord 对话 Coze-Bot ，实现以 API 形式请求 GPT4 模型，提供对话、文生图、图生文、知识库检索等功能。功能不多赘述，详细去源仓库查看。 同样的，我写了一个用于构建 FreeBSD 版本的仓库。在这里感谢论坛用户 Reno 的测试，没有测试人员的测试，也不会有部署的过程记录了。 首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 Coze-discord-proxy 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着SSH登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 1234# 下载二进制文件release_info=$(curl -s https://api.github.com/repos/k0baya/coze-discord-proxy-freebsd/releases/latest)asset_url=$(echo \"$release_info\" | jq -r '.assets[] | select(.name != \"source code\") | .browser_download_url')curl -L -o coze-discord-proxy \"$asset_url\" && chmod +x coze-discord-proxy 添加启动脚本： 1234567891011121314cat > start.sh << EOF#!/bin/bash# 根据你的需求自行填入环境变量export PORT=\"PORT\"export USER_AUTHORIZATION=\"XXXXXX\"export BOT_TOKEN=\"XXXXXX\"export GUILD_ID=\"XXXXXX\"export COZE_BOT_ID=\"XXXXXX\"export PROXY_SECRET=\"XXXXXX\"export CHANNEL_ID=\"XXXXXX\"export TZ=\"Asia/Shanghai\"export DATA_GYM_CACHE_DIR=\"$PWD\"chmod +x coze-discord-proxy && exec ./coze-discord-proxyEOF 给启动脚本赋权： 1chmod +x coze-discord-proxy 添加多机器人配置文件： 12mkdir -p app/coze-discord-proxy/data/configtouch app/coze-discord-proxy/data/config/bot_config.json 然后回到 Panel 中，进入File manager选项卡，进入 bot_config.json 所在路径，右键点击它，选择View/Edit > Source Editor，进行编辑： 1234567891011121314151617181920[ { \"proxySecret\": \"123\", // 接口请求密钥(PROXY_SECRET)(注意:此密钥在环境变量PROXY_SECRET中存在时该Bot才可以被匹配到!) \"cozeBotId\": \"12***************31\", // coze托管的机器人ID \"model\": [\"gpt-3.5\",\"gpt-3.5-16k\"], // 模型名称(数组格式)(与请求参数中的model对应,如请求中的model在该json中未匹配到则会抛出异常) \"channelId\": \"12***************56\" // [可选]discord频道ID(机器人必须在此频道所在的服务器)(目前版本下该参数仅用来活跃机器人) }, { \"proxySecret\": \"456\", \"cozeBotId\": \"12***************64\", \"model\": [\"gpt-4\",\"gpt-4-16k\"], \"channelId\": \"12***************78\" }, { \"proxySecret\": \"789\", \"cozeBotId\": \"12***************12\", \"model\": [\"dall-e-3\"], \"channelId\": \"12***************24\" }] 使用 pm2 管理运行： 1pm2 start bash --name coze-discord-proxy -- start.sh Memos一款开源、轻量级的笔记服务。轻松捕捉并分享您的精彩想法。 这个仓库比较难受的是，其在源码的这个位置强制要求其 gRPC 服务的端口为 Memos 监听端口+1，故这个应用需要占用两个端口，而且必须是两个连续的端口。 同样的，我写了一个用于构建 FreeBSD 版本的仓库。 首先在 Panel 中放行两个相邻的端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 刚刚放行的两个相邻的端口中小的那一个 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着SSH登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 1234API_URL=\"https://api.github.com/repos/k0baya/memos-binary/releases/latest\"DOWNLOAD_URL=$(curl -s $API_URL | jq -r \".assets[] | select(.name == \\\"memos-freebsd-amd64.tar.gz\\\") | .browser_download_url\")curl -L $DOWNLOAD_URL -o memos-freebsd-amd64.tar.gztar -xzvf memos-freebsd-amd64.tar.gz && rm memos-freebsd-amd64.tar.gz && chmod +x memos 关于运行，有两种方式进行： ① SQLite 如果选择使用 SQLite 作为数据库运行，则可以直接运行： 1234567# 假定你的数据文件打算存储在 /home/username/domains/xxx.USERNAME.serv00.net/public_html/data# 新建数据文件夹mkdir -p /home/username/domains/xxx.USERNAME.serv00.net/public_html/data# 测试运行./memos --mode prod --port PORT --data /home/username/domains/xxx.USERNAME.serv00.net/public_html/data# 使用 pm2 管理pm2 start ./memos --name memos -- --mode prod --port PORT --data /home/username/domains/xxx.USERNAME.serv00.net/public_html/data ② 外接 MySQL / PostgreSQL 你可以使用面板自带的 MySQL / PostgreSQL 新建数据库，或者使用其他平台提供的远程数据库： 1234567891011# 假定你的数据文件打算存储在 /home/username/domains/xxx.USERNAME.serv00.net/public_html/data# 新建数据文件夹mkdir -p /home/username/domains/xxx.USERNAME.serv00.net/public_html/data# 测试运行（MySQL）（MySQL需要管理员权限，你可以选择远程连接）./memos --mode prod --port PORT --data /home/username/domains/xxx.USERNAME.serv00.net/public_html/data --driver mysql --dsn mysql://root:password123@localhost:3306/mydb# 测试运行（PostgreSQL）./memos --mode prod --port PORT --data /home/username/domains/xxx.USERNAME.serv00.net/public_html/data --driver postgres --dsn postgresql://user:password123@localhost:5432/mydb?sslmode=disable# 使用 pm2 管理（MySQL）（MySQL需要管理员权限，你可以选择远程连接）pm2 start ./memos --name memos -- --mode prod --port PORT --data /home/username/domains/xxx.USERNAME.serv00.net/public_html/data --driver mysql --dsn mysql://root:password123@localhost:3306/mydb# 使用 pm2 管理（PostgreSQL）pm2 start ./memos --name memos -- --mode prod --port PORT --data /home/username/domains/xxx.USERNAME.serv00.net/public_html/data --driver postgres --dsn postgresql://user:password123@localhost:5432/mydb?sslmode=disable Frps内网穿透嘛，懂的都懂，这里只做服务端的部署记录，客户端可以查看 Frp 的官方文档自行配置。感谢群友的率先测试：youyi 首先在 Panel 中放行两个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来映射转发内网服务的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 同样的，你可以设置多个域名使用 Proxy 指向同一个端口，在 Frpc 客户端配置中使用域名分发不同的服务。具体可以查阅官方文档。 接着SSH登入，并进入刚刚你新建的域名目录下的 public_html 路径下 12345release_info=$(curl -s https://api.github.com/repos/fatedier/frp/releases/latest)download_url=$(echo \"$release_info\" | jq -r '.assets[] | select(.name | contains(\"freebsd_amd64.tar.gz\")) | .browser_download_url')curl -L \"$download_url\" -o frp_freebsd_amd64.tar.gz tar -xzvf frp_freebsd_amd64.tar.gz --strip-components=1rm -rf frp_freebsd_amd64.tar.gz 接着编辑配置文件： 123456# 按照自己的实际情况和需求进行配置，这里只做最简单的http转发配置示例cat > frps.toml << EOFbindPort = 监听端口vhostHTTPPort = 映射转发端口auth.token = \"密码\"EOF 运行： 1pm2 start ./frps -- -c frps.toml 客户端配置示例： 123456789101112131415serverAddr = \"x.x.x.x\"serverPort = Frps 的监听端口auth.token = \"密码\"[[proxies]]name = \"web\"type = \"http\"localPort = 80customDomains = [\"www.yourdomain.com\"][[proxies]]name = \"web2\"type = \"http\"localPort = 8080customDomains = [\"www.yourdomain2.com\"] RcloneRclone 是一款管理云存储文件的命令行程序。它功能丰富，可替代云供应商的网络存储界面。超过 70 种云存储产品支持 Rclone，包括 S3 对象存储、企业和消费者文件存储服务以及标准传输协议。 具体用法与配置请查阅其官方文档。 如果你需要使用 Rclone 的 web ui ，你可以按照前文所述的大多数应用一样，先放行端口，添加域名，申请好 SSL 证书，并进入其目录下的 public_html 路径下再进行程序本体的下载部署。 下载最新版 Rclone： 123456release_info=$(curl -s https://api.github.com/repos/rclone/rclone/releases/latest)download_url=$(echo \"$release_info\" | jq -r '.assets[] | select(.name | contains(\"-freebsd-amd64.zip\")) | .browser_download_url')curl -L \"$download_url\" -o rclone-freebsd-amd64.zipouter_folder=$(unzip -l rclone-freebsd-amd64.zip | grep '/' | sed -n '1p' | sed 's#^.* \\([^/]*\\)/.*$#\\1#')unzip rclone-freebsd-amd64.zipmv \"$outer_folder\"/* . && rm -rf \"$outer_folder\" rclone-freebsd-amd64.zip 经我测试，目前 v1.63.1 之后的版本的 FreeBSD 版的构建都有无法识别 mount 命令的问题，在我查阅其 issue —— #7432 、 #5843 后，确定这个 bug 已经好几个月没有修复了。所以我建议在此 bug 修复前，使用 v1.63.1 版本。 下载 v1.63.1 版本 Rclone ： 1234curl -L https://github.com/rclone/rclone/releases/download/v1.63.1/rclone-v1.63.1-freebsd-amd64.zip -o rclone-freebsd-amd64.zipouter_folder=$(unzip -l rclone-freebsd-amd64.zip | grep '/' | sed -n '1p' | sed 's#^.* \\([^/]*\\)/.*$#\\1#')unzip rclone-freebsd-amd64.zipmv \"$outer_folder\"/* . && rm -rf \"$outer_folder\" rclone-freebsd-amd64.zip 配置 Rclone 的存储： 1./rclone config 启动 web ui： 1./rclone rcd --rc-web-gui --rc-user 用户名 --rc-pass 密码 --rc-addr :端口 pm2 管理 web ui： 1pm2 start ./rclone -- rcd --rc-web-gui --rc-user 用户名 --rc-pass 密码 --rc-addr :端口 CloudreveCloudreve 可助你即刻构建出兼备自用或公用的网盘服务，通过多种存储策略的支持、虚拟文件系统等特性实现灵活的文件管理体验。 同样的，我编写了一个用于自动化构建 FreeBSD 版本的 Cloudreve 的仓库：k0baya/cloudreve-freebsd 前后端分离构建，前端静态文件在 Cloudreve 本体同路径下的 static 文件夹内。 首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 Cloudreve 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着SSH登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 12345release_info=$(curl -s https://api.github.com/repos/k0baya/cloudreve-freebsd/releases/latest)download_url=$(echo \"$release_info\" | jq -r '.assets[] | select(.name | contains(\"freebsd-amd64.tar.gz\")) | .browser_download_url')curl -L \"$download_url\" -o cloudreve-freebsd-amd64.tar.gz tar -xzvf cloudreve-freebsd-amd64.tar.gzrm -rf cloudreve-freebsd-amd64.tar.gz Cloudreve 在首次启动时，会创建初始管理员账号，请注意保管管理员密码，此密码只会在首次启动时出现。如果您忘记初始管理员密码，需要删除同级目录下的 cloudreve.db ，重新启动主程序以初始化新的管理员账户。 Cloudreve 默认会监听 5212 端口。首次启动时，Cloudreve 会在同级目录下创建名为 conf.ini 的配置文件，你可以修改此文件进行一些参数的配置（比如端口），保存后需要重新启动 Cloudreve 生效。 一个完整的配置文件示例如下： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182[System]; 运行模式Mode = master; 监听端口Listen = :5212; 是否开启 DebugDebug = false; Session 密钥, 一般在首次启动时自动生成SessionSecret = 23333; Hash 加盐, 一般在首次启动时自动生成HashIDSalt = something really hard to guss; 呈递客户端 IP 时使用的 HeaderProxyHeader = X-Forwarded-For; SSL 相关[SSL]; SSL 监听端口Listen = :443; 证书路径CertPath = C:\\Users\\i\\Documents\\fullchain.pem; 私钥路径KeyPath = C:\\Users\\i\\Documents\\privkey.pem; 启用 Unix Socket 监听[UnixSocket]Listen = /run/cloudreve/cloudreve.sock; 设置产生的 socket 文件的权限Perm = 0666; 数据库相关，如果你只想使用内置的 SQLite 数据库，这一部分直接删去即可[Database]; 数据库类型，目前支持 sqlite/mysql/mssql/postgresType = mysql; MySQL 端口Port = 3306; 用户名User = root; 密码Password = root; 数据库地址Host = 127.0.0.1; 数据库名称Name = v3; 数据表前缀TablePrefix = cd_; 字符集Charset = utf8mb4; SQLite 数据库文件路径DBFile = cloudreve.db; 进程退出前安全关闭数据库连接的缓冲时间GracePeriod = 30; 使用 Unix Socket 连接到数据库UnixSocket = false; 从机模式下的配置[Slave]; 通信密钥Secret = 1234567891234567123456789123456712345678912345671234567891234567; 回调请求超时时间 (s)CallbackTimeout = 20; 签名有效期SignatureTTL = 60; 跨域配置[CORS]AllowOrigins = *AllowMethods = OPTIONS,GET,POSTAllowHeaders = *AllowCredentials = falseSameSite = DefaultSecure = lse; Redis 相关[Redis]Server = 127.0.0.1:6379Password =DB = 0; 从机配置覆盖[OptionOverwrite]; 可直接使用 `设置名称 = 值` 的格式覆盖max_worker_num = 50 你可以使用 vim 或者 Panel 中的 File manager 选项卡，进入 conf.ini 所在路径路径，右键点击，选择 View/Edit > Source Editor ，进行编辑。 修改完配置文件后，测试启动： 1./cloudreve 使用 pm2 管理： 1pm2 start ./cloudreve PanIndex一个简易的网盘目录列表。 同样的，我编写了一个用于自动化构建 FreeBSD 版本的 PanIndex 的仓库：k0baya/panindex-freebsd。 后台地址（默认）：http://ip:port/admin默认账号：admin默认密码：PanIndex 首先在 Panel 中放行一个端口，接着按照下表 Add a New Website ： Key Value Domain xxx.USERNAME.serv00.net（也可以把原有的USERNAME.serv00.net删掉后重新添加） Website Type proxy Proxy Target localhost Proxy URL 留空 Proxy port 你准备用来部署 PanIndex 的端口 Use HTPPS False DNS support True 添加完新站点后，继续点击上方的 Manage SSL certificates ，接着在出口 IP 的右侧点击 Manage ，再点击 Add certificate ： Type Domain Generate Let’s Encrypted certificate 与刚刚添加的站点域名保持一致（如果是原有的USERNAME.serv00.net ，可以省略此步） 接着SSH登入，并进入刚刚你新建的域名目录下的 public_html 路径下： 123release_info=$(curl -s https://api.github.com/repos/k0baya/panindex-freebsd/releases/latest)asset_url=$(echo \"$release_info\" | jq -r '.assets[] | select(.name != \"source code\") | .browser_download_url')curl -L -o panindex \"$asset_url\" && chmod +x panindex 创建配置文件： 1234567891011121314cat > config.json << EOF{ \"host\": \"0.0.0.0\", \"port\": 5238, \"log_level\": \"info\", \"data_path\": \"\", \"cert_file\": \"\", \"key_file\": \"\", \"config_query\": \"\", \"db_type\": \"\", \"dsn\": \"\", \"ui\": \"\"}EOF 数据库支持 sqlite (默认)、mysql、postgres ，如果需要接入 MySQL 或者 PostgreSQL ，请写成数据库链接的方式填入 dsn 。注意，如果是 Serv00 自带的 PostgreSQL ，请在数据库链接最末加上 ?sslmode=disable 以禁用 SSL 连接。 编写好配置文件后，测试运行： 1./panindex -c=config.json 使用 pm2 管理： 1pm2 start ./panindex -- -c=config.json Artalk似乎有几个群友在用这个，为方便查阅统一收录在本文，具体内容可以去群友的博客查看： 点击图片进入 收尾工作听说 Serv00 会不定时重启机器，所以我们把 pm2 添加开机自启，可以保证每次重启都能由 pm2 调动 Alist 和 Cloudflared 。而且 Serv00 每三个月内必须要有一次登录面板或者 SSH 连接，不然会删号，也可以通过一个脚本解决问题，接下来我会详细说明。 自动续期可以用青龙面板的自动任务定期登录SSH解决。在青龙面板中添加Linux依赖 sshpass，然后添加定时任务：名称随意，命令/脚本 sshpass -p '密码' ssh -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -tt 用户名@地址 \"exit\"，定时规则 1 1 1 * *。这样就会每个月自动ssh连接一次，实现续期。 你还可以使用自身 SSH 自身的方式进行自动续期，操作如下： 进入一个自己喜欢的路径，使用 cat 命令新建 auto-renew.sh 脚本： 12345678cat > auto-renew.sh << EOF#!/bin/bashwhile true; do sshpass -p '密码' ssh -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -tt 用户名@地址 \"exit\" & sleep 259200 #30天为259200秒doneEOF 记得把其中的密码、用户名、ssh的地址修改为你自己的。 给 auto-renew.sh添加可执行权限： 1chmod +x auto-renew.sh 使用pm2启动： 1pm2 start ./auto-renew.sh 这样就会每隔一个月自动执行一次SSH连接，自己SSH自己进行续期。 自动启动听说 Serv00 的主机会不定时重启，所以需要添加自启任务。 在 Panel 中找到 Cron jobs 选项卡，使用 Add cron job 功能添加任务，Specify time 选择 After reboot，即为重启后运行。Form type 选择 Advanced，Command 写： 1/home/你的用户名/.npm-global/bin/pm2 resurrect 记得把你的用户名改为你的用户名 添加完之后，在 SSH 窗口保存 pm2 的当前任务列表快照： 1pm2 save 这样每次 serv00 不定时重启任务时，都能自动调用 pm2 读取保存的任务列表快照，恢复任务列表。如果在保存了任务列表快照后又改变了任务 pm2 的任务列表，需要重新执行 pm2 save 以更新任务列表。 本文收录Saika’s Blog","categories":[{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"技术","slug":"技术","permalink":"https://19492035.xyz/tags/%E6%8A%80%E6%9C%AF/"},{"name":"服务器","slug":"服务器","permalink":"https://19492035.xyz/tags/%E6%9C%8D%E5%8A%A1%E5%99%A8/"}],"author":"jacktang"},{"title":"网站域名迁移引流教程","slug":"网站域名迁移引流教程","date":"2024-04-24T05:06:42.000Z","updated":"2024-05-03T10:09:00.016Z","comments":true,"path":"posts/e89b357b.html","link":"","permalink":"https://19492035.xyz/posts/e89b357b.html","excerpt":"","text":"收藏备用 由于之前网站很长一段时间使用旧域名，导致百度等搜索引擎SEO收录都是旧域名的URL地址。如今网站迁移到新域名，需要将之前各搜索引擎中收录旧域名的所有URL地址自动引流跳转到新域名中。 0x01 环境准备 虚拟主机示例：https://www.46yun.com 旧域名示例：luckyzmj.cn 新域名示例：luckysec.cn 0x02 域名引流 按照视频教程获取免费的虚拟主机，选择香港或者国外的虚拟主机可以免去繁琐的备案流程。 登录虚拟主机控制台，选择基本功能-绑定域名-添加旧域名。 在旧域名控制台中添加域名解析到虚拟主机提供的IP地址。 在主机控制台，选择基本功能-域名跳转-设置旧域名跳转新域名，提交保存。 等几分钟生效以后，在搜索引擎中点击收录的旧域名URL地址，即可自动跳转到新域名对应的URL地址。  上一篇 会话 Cookie 未设置 Secure 属性 Web 应用程序设置了不含 Secure 属性的会话 Cookie，这意味着 Cookie 信息在传递的过程中容易被监听捕获造成信息泄露。标记为 Secure 的 Cookie 只会通过被 HTTPS 协议加密过的请求发送给服务端进行会话验证，它永远不会使用不安全的 HTTP 发送传输（本地主机除外），这意味着中间人攻击者无法轻松访问它。此外，在不安全的站点（在 URL 中带有 `http://`）无法使用 Secure 属性设置的 Cookie 值。 2022-11-20 漏洞篇 下一篇  Weblogic Console弱口令后台getShell Weblogic Server是Oracle公司的一款适用于云环境和传统环境的应用服务器，它提供了一个现代轻型开发平台，支持应用从开发到生产的整个生命周期管理，并简化了应用的部署和管理。Weblogic Console控制台由于管理员配置疏忽没有更改默认密码，或者存在账号弱口令漏洞，攻击者可在获取到账号密码的前提下登录管理后台，通过控制台“部署”功能模块部署恶意war包，进而getShell获取服务器管理权限。 2022-11-12 漏洞篇","categories":[{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"网站","slug":"网站","permalink":"https://19492035.xyz/tags/%E7%BD%91%E7%AB%99/"}],"author":"jacktang"},{"title":"微信公众号如何接入AI大模型——星火认知大模型，通义千问大模型","slug":"open-gzh-ai","date":"2024-04-15T09:57:51.000Z","updated":"2024-04-15T11:18:17.561Z","comments":true,"path":"posts/6a0ec4ee.html","link":"","permalink":"https://19492035.xyz/posts/6a0ec4ee.html","excerpt":"","text":"介绍2种接入方法第一种方法RdChat智能聊天机器人 只需一步：微信公众号接入大模型 只需一步：微信公众号接入大模型​ 只需一步：微信公众号接入大模型 如何让微信公众号接入大模型文案创作能力，实现类似ChatGPT文案创作功能。方法其实很简单，只需打开地址http://www.botaigc.cn:8900/mpauth， 用微信扫码即可给自己申请的公众号进行授权。 下面将分以下4个部分进行介绍 （1）扫码授权 （2）使用方法 （3）GPTs：指定角色 （4）停用接口 1、扫码授权 微信公众号接入大模型文案 ​ 只需一步：微信公众号接入大模型  如何让微信公众号接入大模型文案创作能力，实现类似ChatGPT文案创作功能。方法其实很简单，只需打开地址http://www.botaigc.cn:8900/mpauth， 用微信扫码即可给自己申请的公众号进行授权。      下面将分以下4个部分进行介绍    （1）扫码授权    （2）使用方法    （3）GPTs：指定角色    （4）停用接口   1、扫码授权  微信公众号接入大模型文案创作能力的扫码地址为http://www.botaigc.cn:8900/mpauth，页面如下。     点击授权按钮弹出二维码，扫描授权后即可获得大模型文案创作能力。授权成功后，我们可以在微信公众号后台进行查看。微信公众号后台- -> 内容与互动 –> 自定义回复，显示“你已授权给RdFast智能创作帮助你运营公众号，点击管理已授权的第三方平台”。   2、使用方法  （1）输入问题  扫码完成后，任何公众号用户在公众号内输入问题即可获得大模型创作结果。如下所示，输入“请以公众号快速接入大模型写一段推广用语”。由于公众号不能实时返回结果，所以需要等待全部结果输出之后，才可以返回。通常每秒创作10个字或几十个字，因而文案创作结果内容越长，则所需等待时间越久。     （2）获取创作结果  在等待一段时间后，可以输入任意内容获取返回结果，比如输入“1”。如下图所示。     （3）强制重新开始  如果几分钟过去了，仍然无法获取到创作结果，那么可以通过输入“rdfast”来进行重置。重新进入到创作状态，这时候需要输入新的问题，之前输入内容则已经无效。     （4）清空历史   正常创作过程会结合历史上下文内容，输入“清空历史”后，下次对话将不考虑之前的历史信息，这相当于开始了一个新的会话。   3、GPTs：指定角色  指定角色是指可以假定大模型文案创作系统为特定的角色。设置规则为：    “系统属性设置：xxxx”    例如：“系统属性设置：翻译助手”，从而达到类似GPTs的功能。   4、停用接口  停用大模型创作接口如下所示：     微信公众号后台 –> 设置与开发 –> 公众号设置 –> 授权管理 –> 查看平台详情 – > 取消授权。   支持文本、图片智能生成、语音输入、长文写作（续写）和智能闲聊的ChatGPT高级机器人，邀请您体验！（RdChat微信小程序） 第二种方法qw-wechat-vercel基于vercel的serverless服务，把通义千问大模型接入微信公众号 必要条件 有一个域名 这个条件我觉得已经相当低了，至少成本比服务器要少很多吧。xyz 结尾的纯数字域名只要6块一年，十年才不到50。其次还有很多免费的域名申请等 操作指南 注册阿里云，点击此链接【模型服务灵积】，开通阿里模型服务灵积。 开通成功左侧菜单找到管理中心->API-KEY管理，创建apiKey, 准备一个域名，最便宜的那种就行。买完配置DNS，增加cname解析到cname-china.vercel-dns.com （cloudflare 托管域名还需要【修改SSL模式设置为完全】） 注册微信公众号，个人订阅号就行。后台管理页面上找到设置与开发-基本配置-服务器配置，修改服务器地址url为https://你的域名/api/qw-wechat，TOKEN是自定义的，随便编一个。EncodingAESKey随机生成，我们选明文模式就好了。先不要提交，提交会校验TOKEN，所以等下一步我们部署好了再进行操作。 把下面的变量一项一项的加进去：API_KEY=sk-xxxx KEYWORD_REPLAY={\"测试\":\"关键词回复\"} API_MODEL=qwen-72b-chat WX_TOKEN=xxxx 32位字符，后续公众号服务器配置会用到 SUBSCRIBE_REPLY=欢迎关注，我已经接入了阿里千问智能AI，对我说句哈喽试试吧 这个时候回到微信后台，可以点击提交了，不出意外的话，会提示token验证成功，到外边，启用服务器配置。ok，大功告成。现在你有一个接入阿里通义千问大模型的微信公众号聊天机器人了。 一键部署流程 点击此按钮，一键部署 填写项目名称，点击create按钮创建 部署成功后，点击ADD Domain去添加域名 在图示部分添加域名 点击左侧环境变量选项，填写环境变量，最后点击Save保存 保存完环境变量后需要重新部署一次加载环境变量，点击Deployment选项卡，找到最后一次部署记录，点击...，选择redeploy QA部署完成后为什么访问会404啊？不用纠结为什么会404，我们使用的是vercel的serverless能力，我们项目里没有部署页面。所以访问首页会404，这是正常的。如果要确认是否部署成功，请看一下一个问题。 部署成功的特征是什么？答：访问路径https://你的域名/api/qw-wechat，页面输出failed，即为部署成功，可以去微信公众平台提交开发配置，验证token。 公众号验证token成功，但是发送消息没反应啊？答：检查微信公众平台开发配置有没有启用。Vercel环境变量是否正确，务必注意环境变量的大小写情况以及命名方式是蛇形，不是驼峰。 为什么有时候会忘记之前的对话答：serverless服务是一种无状态的服务，每次请求都是一个新的生命周期，只有在两次请求相距时间很短的情况下才有可能会复用上个生命周期，呈现出记录了上次对话的状态。因此，如果模型忘记了上次对话才是常态，记住了，才是取巧。 通义千问目前模型支持情况限时免费 通义千问72B qwen-72b-chat 通义千问1.8B qwen-1.8b-chat 通义千问 qwen-max 通义千问 qwen-max-1201 通义千问 qwen-max-longcontext 送100wToken 通义千问14B qwen-14b-chat 通义千问7B qwen-7b-chat 通义千问 qwen-plus 送200wToken 通义千问 qwen-turbo 能不能接入其他大模型啊？答：不一定有精力，后续看一下。一般来说，不能白嫖的是不接入的。目前支持的有： 星火认知大模型 通义千问大模型 总结1.注册公众号，个人订阅号就行 2.后台管理页面上找到设置与开发-基本配置-服务器配置，点修改 3.服务器地址url：https://你的域名/api/spark-wechat[5] 4.TOKEN为第4步中使用的WX_TOKEN， 5.EncodingAESKey随机生成(不用这一项) 6.选明文模式就好了，提交会提示token验证成功，然后点启用服务器配置。","categories":[{"name":"公众号篇","slug":"公众号篇","permalink":"https://19492035.xyz/categories/%E5%85%AC%E4%BC%97%E5%8F%B7%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"技术","slug":"技术","permalink":"https://19492035.xyz/tags/%E6%8A%80%E6%9C%AF/"}],"author":"jacktang"},{"title":"2024 Office 365 E5 账号申请及永久续期教程","slug":"office365","date":"2024-04-12T04:23:20.000Z","updated":"2024-04-13T08:13:10.771Z","comments":true,"path":"posts/ee2a51ed.html","link":"","permalink":"https://19492035.xyz/posts/ee2a51ed.html","excerpt":"","text":"防止失效本博客来源Logi阅读可跳转 自动续期订阅的有效期是 90 天。到期前，如果微软检测到账号被用于开发，即 API 被频繁且无规律调用，将自动续期。因此，只需编写几行代码，定时高频调用其 API 即可。 Github Action 是 Github 提供给开发者使用的 虚拟 Linux 环境，可 根据条件，例如指定时间，执行指定代码。 添加任务此视频流程并不全面，请对照下文观看。为节省流量，你必须手动点击播放按钮，等待 30s 后若仍未播放，请刷新网页后再次点击。 首先 登录或注册 一个 Github 账号，在此不再赘述。随后打开 该仓库，点击右上角的 Fork（会遭到攻击，想收藏可以 Star，禁止 Fork）。随后导入私有仓库，在 Your old repository’s clone URL 里填写 https://gitlab.com/vcheckzen/KeepAliveE5.git Privacy 务必选择 Private。 点击 Begin Import，稍等片刻，你的账号下便会复制一份该项目。 现在，创建一个具有 workflow 权限的个人访问密钥，用于同步上流代码。首先访问 密钥创建页面，按照下图填写信息，随后将页面拉到最下方，点击绿色的 Generate token 按钮。 接着，页面会跳转到创建成功页面，点击图中的 复制 图标，复制生成的 PAT 密钥备用。 现在只需为仓库添加下表中的三个密钥，具体过程请查看上方视频（视频中未添加 PAT，你要自己加上）。 Name Value PAT Github 个人访问密钥，需要具有 workflow 权限 USER E5 管理员邮箱（支持多个，每行一个，不要填写子号） PASSWD E5 管理员密码（支持多个，每行一个，顺序必须和邮箱一致） 现在按照 链接 说明，关闭 E5 管理员账号的 两步验证（多因素认证、安全默认值）。 一定要按照链接里的1-5步关闭两步验证（多因素认证、安全默认值），否则无法注册成功，进而无法调用 API。 现在转到 Action 面板，在 All workflows 下找到 Register APP，手动触发它完成注册流程，2 分钟左右。如果确认一切操作正确仍然 Register 失败，可等待 10-30min 后再操作，因为关闭安全默认值后，微软系统要过一段时间才会刷新。 如果 Action 面板找不到 Register APP，则修改 .github/workflows 目录下的两个文件，随便添加一行注释保存，详细过程见上方视频。如果 Action 面板不显示，则到仓库的 Settings -> Actions -> Actions permissions 勾选 Allow all actions 后保存，具体参考 该链接。部分用户账号由于之前跑其它违规项目被封禁 Action 功能的，自行注册新账号。 务必确保运行日志如下图一样包含成功字样，否则必须按照提示解决问题后再重新启动注册动作，直到注册成功。 再找到 Invoke API 手动触发它看能否成功调用 API。如无错误，任务会定时执行，基本可保证续订成功。最后如果你想使用 OneDrive 搭建个人网盘，可参考 这些文章。","categories":[{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"Office 365 E5","slug":"Office-365-E5","permalink":"https://19492035.xyz/tags/Office-365-E5/"}],"author":"jacktang"},{"title":"hexo matery主题博客优化图片懒加载代码压缩CDN加速","slug":"hexo-matery优化","date":"2024-04-11T13:30:58.000Z","updated":"2024-04-13T08:13:42.176Z","comments":true,"path":"posts/85f7a4bb.html","link":"","permalink":"https://19492035.xyz/posts/85f7a4bb.html","excerpt":"","text":"博客优化当东西多了以后, 博客的运行速度就会被拖慢. 所以优化访问速度是非常有必要的. 本文参考了Yafine的这篇博客和Sky03的博客对访问进行了优化. 图片懒加载 经过多次尝试, 懒加载虽然带来了访问速度的提升, 但即使加大了懒加载的范围, 还是能够看到Loading图, 总是会给人产生一种网速慢的感觉. 对于现在大家的网速来说, 似乎体验的重要性要大于性能的重要性, 建议不开启懒加载. 预加载和懒加载 图片预加载：顾名思义，图片预加载就是在网页全部加载之前，提前加载图片。当用户需要查看时可直接从本地缓存中渲染，以提供给用户更好的体验，减少等待的时间。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，这样浏览者可能以为图片预览慢而没兴趣浏览，把网页关掉，这时，就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。图片懒加载（缓载）：延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数，因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。 预加载会在用户没看到图片之前, 就将图片显示加载好. 而懒加载恰恰相反, 当用户快要看到图片之前(或满足某个触发条件时), 才会进行加载. 图片是一种非常吃流量的内容, 所以当点入一篇新文章时, 预加载会导致瞬间流量过大, 用户等待的时间会增加. 其实完全没必要让图片在用户看不见的时候就去加载, 最好是用户即将看到图片之前, 再对图片进行加载. 这样可以减缓访问的压力, 提高用户体验. 加入懒加载懒加载需要安装hexo-lazyload-image插件. 在blog根目录命令行输入: npm install hexo-lazyload-image --save 然后在Hexo配置文件末尾加入: lazyload: enable: true # 是否开启图片懒加载 onlypost: false # 是否只对文章的图片做懒加载 loadingImg: # eg ./images/loading.gif 这里的loadingImg路径起始就从主题的source下开始算的. 最后执行hexo clean && hexo g && hexo s就能看到懒加载效果了. Matery的bug针对Matery主题这个插件有两个小bug, 感谢原博主的解决. 查看大图, 发现全是loading加载图: 原因是因为懒加载插件与 lightgallery 插件冲突. 在 blog\\themes\\hexo-theme-matery\\source\\jsmatery.js中，在 108 行左右添加以下代码 $(document).find('img[data-original]').each(function(){ $(this).parent().attr(\"href\", $(this).attr(\"data-original\")); }); 点击首页 logo 不是跳转到首页, 而是查看 logo 图片: 修改blog\\themes\\matery\\layout\\_partial\\header.ejs. <div class=\"brand-logo\"> <a href=\"<%- url_for() %>\" class=\"waves-effect waves-light\"> <% if (theme.logo !== undefined && theme.logo.length > 0) { %> <img src=\"<%= theme.logo %>\" class=\"logo-img\" alt=\"LOGO\"> <% } %> <span class=\"logo-span\"><%- config.title %></span> </a> </div> 修改为: <div class=\"brand-logo\"> <a href=\"<%- url_for() %>\" class=\"waves-effect waves-light\"> <div> <% if (theme.logo !== undefined && theme.logo.length > 0) { %> <img src=\"<%= theme.logo %>\" class=\"logo-img\" alt=\"LOGO\"> <% } %> <span class=\"logo-span\"><%- config.title %></span> </div> </a> </div> 懒加载优化每次加载完后本地应该都会有图片缓存, 但是还是会显示loading的logo. 所以需要对插件进行修改, 提前显示出图片. 打开blogtest\\node_modules\\hexo-lazyload-image\\lib\\simple-lazyload.js, 第九行修改为: && rect.top <= (window.innerHeight + 360 || document.documentElement.clientHeight + 360) 能够在图片前360个pix加载图片, 我这里试了试360效果比较好, 可以自行修改. 代码压缩其实Hexo生成的所有html, css, js全是有空行和空格的, 但是空格和空行是需要占用空间的. 这就是为什么js总是发布一个完整版和一个min版, min版是压缩后的, 不利于代码的阅读, 但是使用起来会比原版快. 我这里网络问题很大, cnpm安装这个库有各种权限问题, 所以就没有采用gulp的方式. 如果没有条件建议尝试hexo-neat, 比较简单快捷. 我没有对比过二者的压缩效率, 但后者对某些比较大的文件能够压缩**38.13%**左右的空间, 效果已经很不错了. gulp利用gulp进行代码的压缩. 先在博客根目录下安装好gulp: # 全局安装gulp模块 npm install gulp -g # 安装各种小功能模块 执行这步的时候，可能会提示权限的问题，最好以管理员模式执行 npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save # 额外的功能模块 npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save 在博客根目录下创建gulpfile.js(必须是这个文件名), 并复制以下内容: var gulp = require(\"gulp\"); var debug = require(\"gulp-debug\"); var cleancss = require(\"gulp-clean-css\"); //css压缩组件 var uglify = require(\"gulp-uglify\"); //js压缩组件 var htmlmin = require(\"gulp-htmlmin\"); //html压缩组件 var htmlclean = require(\"gulp-htmlclean\"); //html清理组件 var imagemin = require(\"gulp-imagemin\"); //图片压缩组件 var changed = require(\"gulp-changed\"); //文件更改校验组件 var gulpif = require(\"gulp-if\"); //任务 帮助调用组件 var plumber = require(\"gulp-plumber\"); //容错组件（发生错误不跳出任务，并报出错误内容） var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件) var isDebug = true; //是否调试显示 编译通过的文件 var gulpBabel = require(\"gulp-babel\"); var es2015Preset = require(\"babel-preset-es2015\"); var del = require(\"del\"); var Hexo = require(\"hexo\"); var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象 // 清除public文件夹 gulp.task(\"clean\", function () { return del([\"public/**/*\"]); }); // 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return // 创建静态页面 （等同 hexo generate） gulp.task(\"generate\", function () { return hexo.init().then(function () { return hexo .call(\"generate\", { watch: false }) .then(function () { return hexo.exit(); }) .catch(function (err) { return hexo.exit(err); }); }); }); // 启动Hexo服务器 gulp.task(\"server\", function () { return hexo .init() .then(function () { return hexo.call(\"server\", {}); }) .catch(function (err) { console.log(err); }); }); // 部署到服务器 gulp.task(\"deploy\", function () { return hexo.init().then(function () { return hexo .call(\"deploy\", { watch: false }) .then(function () { return hexo.exit(); }) .catch(function (err) { return hexo.exit(err); }); }); }); // 压缩public目录下的js文件 gulp.task(\"compressJs\", function () { return gulp .src([\"./public/**/*.js\", \"!./public/libs/**\"]) //排除的js .pipe(gulpif(!isScriptAll, changed(\"./public\"))) .pipe(gulpif(isDebug, debug({ title: \"Compress JS:\" }))) .pipe(plumber()) .pipe( gulpBabel({ presets: [es2015Preset] // es5检查机制 }) ) .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩 .pipe(gulp.dest(\"./public\")); //输出到目标目录 }); // 压缩public目录下的css文件 gulp.task(\"compressCss\", function () { var option = { rebase: false, //advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）] compatibility: \"ie7\" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式] //keepBreaks: true, //类型：Boolean 默认：false [是否保留换行] //keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀 }; return gulp .src([\"./public/**/*.css\", \"!./public/**/*.min.css\"]) //排除的css .pipe(gulpif(!isScriptAll, changed(\"./public\"))) .pipe(gulpif(isDebug, debug({ title: \"Compress CSS:\" }))) .pipe(plumber()) .pipe(cleancss(option)) .pipe(gulp.dest(\"./public\")); }); // 压缩public目录下的html文件 gulp.task(\"compressHtml\", function () { var cleanOptions = { protect: /<\\!--%fooTemplate\\b.*?%-->/g, //忽略处理 unprotect: /<script [^>]*\\btype=\"text\\/x-handlebars-template\"[\\s\\S]+?<\\/script>/gi //特殊处理 }; var minOption = { collapseWhitespace: true, //压缩HTML collapseBooleanAttributes: true, //省略布尔属性的值 <input checked=\"true\"/> ==> <input /> removeEmptyAttributes: true, //删除所有空格作属性值 <input id=\"\" /> ==> <input /> removeScriptTypeAttributes: true, //删除<script>的type=\"text/javascript\" removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type=\"text/css\" removeComments: true, //清除HTML注释 minifyJS: true, //压缩页面JS minifyCSS: true, //压缩页面CSS minifyURLs: true //替换页面URL }; return gulp .src(\"./public/**/*.html\") .pipe(gulpif(isDebug, debug({ title: \"Compress HTML:\" }))) .pipe(plumber()) .pipe(htmlclean(cleanOptions)) .pipe(htmlmin(minOption)) .pipe(gulp.dest(\"./public\")); }); // 压缩 public/medias 目录内图片 gulp.task(\"compressImage\", function () { var option = { optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级） progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染 multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化 }; return gulp .src(\"./public/medias/**/*.*\") .pipe(gulpif(!isScriptAll, changed(\"./public/medias\"))) .pipe(gulpif(isDebug, debug({ title: \"Compress Images:\" }))) .pipe(plumber()) .pipe(imagemin(option)) .pipe(gulp.dest(\"./public\")); }); // 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器 gulp.task( \"build\", gulp.series( \"clean\", \"generate\", \"compressHtml\", \"compressCss\", \"compressJs\", \"compressImage\", gulp.parallel(\"deploy\") ) ); // 默认任务 gulp.task( \"default\", gulp.series( \"clean\", \"generate\", gulp.parallel(\"compressHtml\", \"compressCss\", \"compressJs\",\"compressImage\") ) ); //Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数 最后在根目录下命令行输入gulp或者gulp default, 相当于输入了hexo cl && hexo g, 然后再压缩图片和代码. hexo-neat使用hexo-neat更为简单, 美中不足的是这个插件有俩小bug: 压缩.md文件会使 markdown 语法的代码块消失. 会删除全角空格. 但是它避免了国内npm的使用问题. 所以我推荐这种方式. 在博客根目录命令行输入: npm install hexo-neat --save 然后在Hexo配置文件末尾加入(已针对matery的bug优化): #hexo-neat 优化提速插件（去掉HTML、css、js的blank字符） neat_enable: true neat_html: enable: true exclude: - '**/*.md' neat_css: enable: true exclude: - '**/*.min.css' neat_js: enable: true mangle: true output: compress: exclude: - '**/*.min.js' - '**/**/instantpage.js' - '**/matery.js' CDN加速因为Github在国内访问速度比较慢, 所以用CDN加速来优化网站访问速度. jsDelivr + Github就能免费实现博客网站的访问加速. CDN 的全称是 Content Delivery Network，即内容分发网络。CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。 在Matery主题的配置文件末尾已经有相应的配置: jsDelivr: url: #https://cdn.jsdelivr.net/gh// 配置文件中有关于jsDelivr相应的注释, 即在内容没有被部署到github仓库之前, 是没法使用cdn在本地查看效果的, 只有部署之后才能看到效果. CDN访问加速第一次使用本功能，一定要先配置url，再hexo cl && hexo g && hexo d部署到GitHub的仓库，注意！必须是GitHub的仓库！如果必须要使用国内的coding或者gitee，可以采用双部署，同时将网站部署到两个仓库（其中一个必须是GitHub的仓库）URL配置规则（例子如下）： https://cdn.jsdelivr.net/gh/你的GitHub用户名/你的仓库名如果想关闭此功能，将 url地址 注释或删除即可！ 注：配置了此项，就代表着本地调试的时候，网站依然会去GitHub请求资源（原来的资源），本地调试的时候记得将 此项配置 注释或者删除掉. jsDelivr 不支持加载超过 20M 的资源.","categories":[{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"博客优化","slug":"博客优化","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E4%BC%98%E5%8C%96/"}],"author":"jacktang"},{"title":"基于 Hexo GitHub 从零开始搭建个人博客：Matery 主题（DIY 版）详细配置教程","slug":"Hexo Git Matery","date":"2024-04-10T15:08:04.000Z","updated":"2024-04-13T08:14:06.605Z","comments":true,"path":"posts/541756ae.html","link":"","permalink":"https://19492035.xyz/posts/541756ae.html","excerpt":"","text":"遇到任何问题，优先在本页面搜索，看看是否已经有该配置教程；不懂得可以百度或者 Google；还有弄不明白的可以在本站点留言 这是一个采用 Material Design 和响应式设计的 Hexo 博客主题。 前言阅读本篇前，请确保你已经能够自己在 GitHub Pages 上搭建一个属于自己的初始化博客了。 本篇是关于 matery 主题的一个介绍和配置教程！Demo:https://crawlmkt.github.io/ 阅读完本篇，你的博客基本上已经完全可以使用了。如果有不清楚的地方，也可以阅读本系列后面的文章，或者留言提问 效果截图 博客特性 简单漂亮，文章内容美观易读 Material Design 设计 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现 首页轮播文章及每天动态切换 Banner 图片 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替） 时间轴式的归档页 词云的标签页和雷达图的分类页 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能等） 可自定义的数据的友情链接页面 支持文章置顶和文章打赏 支持 MathJax TOC 目录 可设置复制文章内容时追加版权信息 可设置阅读文章时做密码验证 Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk） 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能 支持在首页的音乐播放和视频播放功能 绚丽彩虹播放器 全站支持 PWA 看板娘 支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。 支持 DaoVoice、Tidio 在线聊天功能。 支持 jsdelivr CDN 加速 使用教程当你看到这里的时候，应该已经有一个自己的 Hexo 博客了。如果还没有的话，不妨使用 Hexo 和 Markdown 来写博客和文章。 第一步，点击这里 下载博客源码到本地 第二步，安装 npm 依赖包 第三步，修改下面的配置，DIY 你的个人博客 第四步，部署 Hexo 博客到 GitHub 上 安装 npm 依赖包下载博客源码后，进入项目根目录安装 npm 依赖包 1npm install 检测 hexo 版本1hexo --version 输出内容： 123456789101112131415161718hexo: 4.1.1hexo-cli: 3.1.0os: Windows_NT 10.0.18363 win32 x64node: 13.5.0v8: 7.9.317.25-node.23uv: 1.34.0zlib: 1.2.11brotli: 1.0.7ares: 1.15.0modules: 79nghttp2: 1.40.0napi: 5llhttp: 2.0.1openssl: 1.1.1dcldr: 36.0icu: 65.1tz: 2019cunicode: 12.1 查看 hexo 版本，如果不是 hexo: 4.1.1 请运行如下命令 1npm i hexo@4.1.1 因为 hexo 版本问题会导致博客运行报错 配置清单在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分： 博客基本信息 标题 副标题 简介 关键词 作者 url favicon Logo 菜单栏 基本菜单信息 二级菜单配置 手机二级菜单 博客首页的配置 首页壁纸 菜单栏右侧 Fork Me 配置 轮播图配置 轮播图中的第二个按钮配置 个人信息 首页语句 首页音乐播放器 首页视频播放器 首页推荐文章名称和按钮配置 博客分页 网站显示的日期格式 博客页脚信息 博客文章页配置 文章基本信息 文章字数统计 TOC 目录 文章打赏信息 复制文章内容时追加版权信息 MathJax 配置 emoji 表情 转载限制配置 文章阅读密码 文章分享模块 博客关于页配置 个人信息 项目信息 技能信息 博客留言板配置 Gitalk Gitment Disqus Livere Valine miniValine 博客友链的配置 博客搜索的配置 博客特效的配置 单机页面爱心效果 背景 Canvas-nest 博客统计的配置 不蒜子 Google Analytics Baidu Analytics 站长之家 博客其他功能配置 jsdelivr 加速 是否每日切换背景（首页背景） 图片懒加载 网页预加载 在线聊天功能 绚丽彩虹播放器 博客导流公众号 豆瓣书单影单 博客看板娘 博客添加 PWA 功能 博客其他样式配置 修改主题颜色 修改 banner 图和文章特色图 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图 修改博客基本信息配置博客基本信息 title：网站的标题 subtitle：网站副标题，默认打字效果 description: 网站简介 keywords：便于搜索引擎收录，分类 author：网站作者 url：你的网站主 URL（如：https://xxx.github.io）,如果你后期绑定了自己的域名，切记修改成你的域名。 favicon：favicon 就是站点标签栏的小图标，选择新的图标文件覆盖即可，文件位置：themes/matery/source/favicon.ico logo：网站的 Logo 选择新的图标文件覆盖即可，文件位置：themes/matery/source/apple-touch-icon.png 配置网站文章链接格式hexo-abbrlink 插件 可以生成非中文的链接。 插件作用：自动为每篇文章生成一串数字作每篇文章的 URI 地址。每篇文章的 Front-matter 中会自动增加一个配置项：abbrlink: xxxxx，该项的值就是当前文章的 URI 地址。 执行安装命令： 1npm install hexo-abbrlink --save 修改以下配置： 1234permalink: posts/:abbrlink.html # 此处可以自己设置，也可以直接使用 :abbrlink.htmlabbrlink: alg: crc16 # 算法选项： crc16(default) and crc32 rep: dec # 输出进制： dec(default) and hex 这样站点结构就变成了：域名/posts/xxx.html 修改博客菜单栏配置配置基本菜单导航信息 菜单导航名称可以是中文也可以是英文(如：Index 或主页) 图标 icon 可以在 Font Awesome 中查找 12345678910111213141516171819202122menu: Index: url: / icon: fa-home Tags: url: /tags icon: fa-tags Categories: url: /categories icon: fa-bookmark Archives: url: /archives icon: fa-archive About: url: /about icon: fa-user-circle-o Contact: url: /contact icon: fa-envelope Friends: url: /friends icon: fa-address-book 二级菜单配置方法如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作 在需要添加二级菜单的一级菜单下添加 children 关键字(如：Media 菜单下添加 children) 在 children 下创建二级菜单的 名称 name,路径 url 和图标 icon. 注意每个二级菜单模块前要加 -. 注意缩进格式 123456789101112131415161718192021222324252627282930313233menu: Index: url: / icon: fa-home Tags: url: /tags icon: fa-tags Categories: url: /categories icon: fa-bookmark Archives: url: /archives icon: fa-archive About: url: /about icon: fa-user-circle-o Contact: url: /contact icon: fa-envelope Friends: url: /friends icon: fa-address-book Media: # url: / icon: fa-list children: - name: 影单 url: /movies icon: fa-film - name: 书单 url: /books icon: fa-book 手机二级菜单配置123navMenu: mleft: true # 二级侧栏子菜单是否对齐左边 bgColor: \" \" # 二级侧栏子菜单背景颜色,留空即为全局背景色 修改博客首页的配置菜单栏最右侧是否显示 fork me on github 的图标默认为 true，你可以修改为你的仓库地址. 1234githubLink: enable: true # 是否开启 url: https://github.com/sitoi/sitoi.github.io # GitHub 仓库地址 title: Fork Me # 显示文字 首页轮播图相关配置123456cover: showPrevNext: false # 是否显示左右切换按钮 showIndicators: false # 是否显示指示器 autoLoop: false # 是否自动轮播 duration: 120 # 切换延迟时间，默认单位 秒 intervalTime: 5000 # 自动切换下一张的间隔时间 首页轮播图中第二个按钮配置首页 banner 中的第二个按钮的配置，包括按钮的显示名称、font awesome图标和按钮的超链接. 12345indexbtn: enable: true # 是否启动第二个按钮 name: Github # 按钮名称 icon: fa-github-alt # 按钮图标 url: https://github.com/Sitoi/ # 按钮超链接 首页轮播图中的个人信息首页轮播图中、页脚、以及关于页面都会出现的个人信息，留空即不启用 1234567891011socialLink: qq: 1333397418 # QQ github: Sitoi # GitHub facebook: # Facebook twitter: # Twitter weibo: # Weibo email: 133397418@qq.com # 邮箱 zhihu: # 知乎 jianshu: 0289c6c3a717 # 简书 rss: true # RSS 订阅 true 表示启动、false 表示关闭 wechat: true # 微信好友二维码 true 表示启动、false 表示关闭 除 rss 和 wechat 外，其他的都需填写对应的信息即可 RSS 订阅基于 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下： 1npm install hexo-generator-feed --save 微信好友二维码需要修改微信二维码的图片，图片位置：themes/matery/source/wechat.jpg 配置首页语句12345dream: enable: true # 是否开启 showTitle: false # 是都显示标题 title: 我的梦想 # 标题内容 text: 放弃不难，但坚持一定很酷。——《解忧杂货铺》 # 梦想语句 配置首页音乐要支持音乐播放，就必须开启音乐的播放配置和音乐数据的文件。 首先，在你的博客 source 目录下的 _data 目录（没有的话就新建一个）中新建 musics.json 文件，文件内容如下所示： 12345678910111213141516[{ \"name\": \"五月雨变奏电音\", \"artist\": \"AnimeVibe\", \"url\": \"http://xxx.com/music1.mp3\", \"cover\": \"http://xxx.com/music-cover1.png\"}, { \"name\": \"Take me hand\", \"artist\": \"DAISHI DANCE,Cecile Corbel\", \"url\": \"/medias/music/music2.mp3\", \"cover\": \"/medias/music/cover2.png\"}, { \"name\": \"Shape of You\", \"artist\": \"J.Fla\", \"url\": \"http://xxx.com/music3.mp3\", \"cover\": \"http://xxx.com/music-cover3.png\"}] 注：以上 JSON 中的属性：name、artist、url、cover 分别表示音乐的名称、作者、音乐文件地址、音乐封面。 然后，在 _config.yml 配置文件中激活配置即可： 12345678910111213music: enable: false # 是否开启 showTitle: false # 是否显示标题 title: 听听音乐 # 标题内容 fixed: false # 开启吸底模式 autoplay: true # 是否自动播放 theme: '#542674' # 颜色 loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none' order: 'list' # 音频循环顺序, 可选值: 'list', 'random' preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto' volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效 listFolded: false # 列表默认折叠 listMaxHeight: \"197px\" # 列表最大高度 配置首页视频12345678910111213video: enable: false # 是否开启视频 showTitle: false # 是否显示标题 title: 治愈视频 # 标题内容 url: https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 # 视频超链接 pic: # 图片超链接 thumbnails: height: # 高度 autoplay: false # 是否自动播放 theme: '#42b983' # 颜色 loop: true # 是否循环播放 preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto' volume: 0.7 # 音量大小 配置推荐文章12recommend: showTitle: true # 是否显示推荐文章的标题 配置博客分页1234index_generator: order_by: -date # 排序设置 （默认按日期降序排列）per_page: 12 # 分页，每页文章数目pagination_dir: page # 分页目录 per_page：推荐使用 3 的倍数，3，6，9，12… 设置为 0 表示不分页，以瀑布流的形式展示 配置网站显示日期的格式12date_format: YYYY-MM-DD # 日期格式time_format: HH:mm:ss # 时间格式 配置页脚信息页脚总字数统计，激活前请确认你已经安装了 hexo-wordcount 插件，安装命令: npm i --save hexo-wordcount 12totalCount: enable: true 站点运行开始时间配置 12345678time: enable: true # 是否启动 year: 2018 # 年份 month: 09 # 月份 date: 24 # 日期 hour: 00 # 小时 minute: 00 # 分钟 second: 00 # 秒 ICP 备案信息页脚显示 12345icp: enable: true # 是否启动备案信息 url: http://beian.miit.gov.cn/ # 备案链接 text: 沪ICP备xxxxxxxxx号 # 备案信息 icon: /medias/icp.png # 图标 修改博客文章页配置配置文章基本信息123456789101112131415161718new_post_name: :title.md # 新文章的文件名称default_layout: post # 预设布局auto_spacing: false # 在中文和英文之间加入空格titlecase: false # 把标题转换为 title caseexternal_link: # 在新标签中打开链接 enable: true # 在新标签中打开链接 field: # 对整个网站（site）生效或仅对文章（post）生效 exclude: # 需要排除的域名。主域名和子域名如 www 需分别配置 []filename_case: 0 # 把文件名称转换为 (1) 小写或 (2) 大写render_drafts: false # 显示草稿，默认为：falsepost_asset_folder: true # 启动 Asset 文件夹relative_link: false # 把链接改为与根目录的相对位址future: true # 显示未来的文章highlight: # 代码块的设置 enable: false # 开启代码块高亮 line_number: false # 显示行数 auto_detect: false # 如果未指定语言，则启用自动检测 tab_replace: # 用 n 个空格替换 tabs；如果值为空，则不会替换 tabs 配置代码高亮及样式由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下： 1npm i -S hexo-prism-plugin 然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下： 12345prism_plugin: mode: 'preprocess' # realtime/preprocess theme: 'tomorrow' line_number: false # default false custom_css: 配置代码的样式 12345code: lang: true # 代码块是否显示名称 copy: true # 代码块是否可复制 shrink: false # 代码块是否可以收缩 break: false # 代码是否折行 修改文章字数统计如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount 插件。 安装命令如下： 1npm i --save hexo-wordcount 123456postInfo: date: true # 发布日期 update: true # 更新日期 wordCount: true # 文章字数统计 min2read: true # 文章阅读时长 readCount: false # 文章阅读次数 配置文章 TOC 功能是否激活文章 TOC 功能，并配置 TOC 支持选中哪些标题类型，这是全局配置。可以在某篇文章的 Front-matter 中再加上 toc: false，使该篇文章关闭 TOC 目录功能 1234toc: enable: true heading: h2, h3, h4, h5 showToggleBtn: true # 是否显示切换TOC目录展开收缩的按钮 配置文章末尾打赏功能默认激活（请替换为的你自己的微信、支付宝二维码图片、或者使用网络图片也可以） 12345reward: enable: true # 是否开启打赏 title: 你的赏识是我前进的动力! # 打赏标题 wechat: /medias/reward/wechat.jpg # 微信打赏二维码路径 alipay: /medias/reward/alipay.jpg # 支付宝打赏二维码路径 配置复制追加版权信息是否激活复制文章时追加博客和作者的版权信息。 1234copyright: enable: false minCharNumber: 120 # 至少复制多少个字符就追加版权信息. description: 本文章著作权归作者所有，任何形式的转载都请注明出处。 配置 mathjax 数学公式是否激活 mathjax 数学公式，这是全局配置，但文章仍然不会都开启 mathjax 渲染，考虑到 mathjax 加载比较耗时，你还需要在需要渲染的文章的 Front-matter 中再加上 mathjax: true 才行。 123mathjax: enable: true cdn: https://cdn.bootcss.com/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML 配置 emoji 表情支持本主题新增了对 emoji 表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下： 1npm install hexo-filter-github-emojis --save 123456githubEmojis: enable: true className: github-emoji inject: true styles: customEmojis: 配置是否启用转载限制模块123reprint: enable: false #是否启用“转载规则限定模块” default: cc_by 文章转载规则，可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个 配置文章阅读密码功能阅读文章的密码验证功能，如要使用此功能请激活该配置项，并在对应文章的 Front-matter 中写上 password 的键和加密后的密文即可。 请注意：为了保证密码原文不会被泄露到网页中，文章的密码必须是通过 SHA256 加密的，这样就不会被破解。 1234verifyPassword: enable: true promptMessage: 请输入访问本文章的密码 errorMessage: 密码错误，将返回主页！ 配置文章分享模块sharejs 文章分享模块。 支持顺序，可选项目为 twitter, facebook, google, qq, qzone, wechat, weibo, douban, linkedin。 123sharejs: enable: true sites: wechat,qq,weibo,twitter,facebook,linkedin addthis 文章分享模块。 123addthis: enable: false pubid: #前往https://www.addthis.com/获取 修改博客关于页配置配置关于页个人信息在关于页面中配置个人信息，包括头像、职业和个人介绍. 1234profile: avatar: /medias/avatars/avatar.jpg # 头像 career: IIoT | Python 研发工程师 # 职业 introduction: 活到老，学到老 # 个人介绍 配置关于页项目信息在关于页面配置我的项目信息，如果你不需要这些信息则可以将其设置为不激活或者将其删除。 123456789101112131415161718myProjects: enable: true data: private-network-ipfs: icon: fa-cubes iconBackground: 'linear-gradient(to bottom right, #29B6F6 0%, #1E88E5 100%)' url: https://github.com/Sitoi/private-network-ipfs desc: 利用 Docker 搭建 IPFS 私有网络 scrapy-redis-sentinel: icon: fa-github iconBackground: 'linear-gradient(to bottom right, #66BB6A 0%, #81C784 100%)' url: https://github.com/Sitoi/scrapy-redis-sentinel desc: scrapy-redis-sentinel 基于 scrapy-redis 的基础上 新增 哨兵（sentinel）连接模式 以及 集群（cluster）连接模式。 SystemdClash: icon: fa-plane iconBackground: 'linear-gradient(to bottom right, #29B6F6 0%, #1E88E5 100%)' url: https://github.com/Sitoi/SystemdClash desc: Clash 以 systemd 服务的方式开机自启 配置关于页技能信息在关于页面配置我的技能信息，如果你不需要这些信息则可以将其设置为不激活或者将其删除. 123456789101112131415161718192021222324252627282930313233mySkills: enable: true data: Python: background: 'linear-gradient(to right, #FF0066 0%, #FF00CC 100%)' percent: 80% Docker: background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)' percent: 80% OpneShift: background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)' percent: 70% Ambari: background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)' percent: 60% HDFS: background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)' percent: 65% Spark: background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)' percent: 60% Flask: background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)' percent: 80% MongoDB: background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)' percent: 70% MySQL: background: 'linear-gradient(to right, #4CAF50 0%, #81C784 100%)' percent: 65% Vue: background: 'linear-gradient(to right, #FFEB3B 0%, #FFF176 100%)' percent: 35% 修改博客留言板配置contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下： 1hexo new page \"contact\" 编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容： 123456---title: contactdate: 2018-09-30 17:25:30type: \"contact\"layout: \"contact\"--- /source/contact/index.md 中的 markdown 内容，回展示在留言板的页面上，例子如下： 1234567891011---title: contactdate: 2019-10-14 13:14:00type: \"contact\"layout: \"contact\"---## 畅所欲言---在这里可以留下你的足迹，欢迎在下方留言，欢迎交换友链，一起交流学习！ 注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。可同时开启多个留言板~ 配置 Gitalk 评论模块默认为不激活 123456789gitalk: enable: false owner: sitoi repo: Sitoi.github.io oauth: clientId: clientSecret: admin: - sitoi 获取 clientId 和 clientSecret首先，你得有一个Github账号（这个就不多说了吧），下面，打开 https://github.com/settings/applications/new，具体填法如下： Application name：应用名称，随便填 Homepage URL：没有过多要求，可以填自己的博客地址 Application description：应用描述，描述一下，无要求 Authorization callback URL：这个就有要求了，填自己要使用 Gitalk 的博客地址，不可乱填 接着，你就可以得到 Client ID 和 Client Secret 进行配置，修改配置文件： 123456789gitalk: enable: false owner: sitoi repo: Sitoi.github.io oauth: clientId: clientSecret: admin: - sitoi enable：true # 指的是是否开启 Gitalk owner：sitoi # 这个项目名的拥有者（GitHub账号或组织） repo：Sitoi.github.io # 你要存放的项目名，下文会详细再说 clientId：xxxxxx # 之前的 Client ID ClientSecret：xxxxxx # 之前的 Client Secret admin：sitoi # 管理员用户，下文也会详细讲 repo：Gitalk 是基于 GitHub 的 issues 功能的，所以，你要为他建一个库或用现成的库，我个人建议新建一个，而 repo 就是你要用的库的名称。 比如，我就为 Gitalk 专门建了一个叫 gitalk 的库，所以在 repo: 处填 gitalk。 admin：即管理员帐号。如果你是个人账号，那么这里就填你的账户名和协作者的账户名。以数组形式。 配置 Gitment 评论模块默认为不激活 1234567gitment: enable: false owner: repo: oauth: clientId: clientSecret: 获取 clientId 和 clientSecret 教程和上文一样 配置 Disqus 评论模块注册 Disqus 帐号至 Disqus 首页注册账号并登录，接着点击首页的「GET STARTED」： 选择「I want to install Disqus on my site」选项： 需要输入的栏目： Websit Name：自定义 short name，且是唯一，像我是设置为 sitoi。short name 会在设置 Hexo 時需要 Category：类别，自行选择 Language：语言，自行选择 填写后点击「Create Site」 修改配置文件123disqus: enable: false shortname: sitoi # 全部小写 配置 Livere 来必力评论模块注册 LiveRe 获取 uid进入 LiveRe，注册账号。 LiveRe 有两个版本： City 版：是一款适合所有人使用的免费版本； Premium 版：是一款能够帮助企业实现自动化管理的多功能收费版本。 我们 City 版就够了。 填写完成后，进入到 管理页面 -> 代码管理 -> 一般网站 代码中，data-uid 即为所需 uid。 修改配置文件将获取到的 uid 填入对应的配置文件 123livere: enable: false uid: 配置 Valine 评论模块的配置获取 appId 和 appKey 请参考官方文档 默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey。 1234567891011valine: enable: true appId: APP_ID appKey: APP_KEY notify: true verify: true visitor: true avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide pageSize: 10 placeholder: 'just go go' # Comment Box placeholder background: /medias/comment_bg.png 配置 miniValine 评论模块的配置获取 appId 和 appKey 请参考官方文档 默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey。 12345678910111213minivaline: enable: true appId: APP_ID appKey: APP_KEY placeholder: 'just go go' # Comment box placeholder adminEmailMd5: # The MD5 of Admin Email to show Admin Flag. math: true # Support MathJax. md: true # Support Markdown. # MiniValine's display language depends on user's browser or system environment # If you want everyone visiting your site to see a uniform language, you can set a force language value # Available values: en | zh-CN | (and many more) # More i18n info: https://github.com/MiniValine/minivaline-i18n lang: en 修改博客友链的配置friends 页是用来展示友情连接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下： 1hexo new page \"friends\" 编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容： 123456---title: friendsdate: 2018-12-12 21:25:30type: \"friends\"layout: \"friends\"--- 同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示： 1234567891011121314151617181920212223[ { \"name\": \"Sitoi\", \"avatar\": \"https://sitoi.cn/medias/avatars/avatar.jpg\", \"url\": \"https://sitoi.cn/\", \"introduction\": \"活到老，学到老\", \"title\": \"访问主页\" }, { \"name\": \"闪烁之狐\", \"avatar\": \"https://blinkfox.github.io/medias/avatar.jpg\", \"url\": \"https://blinkfox.github.io\", \"introduction\": \"编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬\", \"title\": \"访问主页\" }, { \"name\": \"Licardo\", \"avatar\": \"https://licardo.cn/medias/avatar.png\", \"url\": \"https://licardo.cn/\", \"introduction\": \"一个医学生的成才之路\", \"title\": \"访问主页\" }] 修改博客搜索的配置本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下： 1npm install hexo-generator-search --save 在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项： 123search: path: search.xml field: post 配置网站各种特效单击页面爱心效果12clicklove: enable: true 背景 canvas-nest1234567canvas_nest: enable: false color: 0,0,255 #线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割 pointColor: 0,0,255 #交点颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割 opacity: 0.8 # 线条透明度（0~1）, 默认: 0.5 zIndex: -1 # 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1 count: 150 # 线条的总数量, 默认: 99 配置网站统计功能不蒜子统计1234busuanziStatistics: enable: false totalTraffic: true # 总访问量 totalNumberOfvisitors: true # 总人次 Google Analytics至 Google Analytics 注册账号，获取 ID 123googleAnalytics: enable: true id: GOOGLE_ID Baidu Analytics至 百度统计 注册账号，获取 ID 123baiduAnalytics: enable: true id: BAIDU_ID 站长之家统计登录并注册帐号至 站长之家 注册账号，进入工作台 点击创建新应用，选择创建 Web 应用 创建 WEB 应用，需要输入的栏目 网站名称：输入你的网站名称 网站域名：填入你汪涵的域名 例如：sitoi.cn 网站首页：填写你网站的首页，注意 HTTP 还是 HTTPS 网站类型：选择网站的类型 网站地区：选择网站的地区 网站简介：填写网站的简介 点击确认添加站点 获取站长之家代码 点击获取代码 选择你喜欢的代码样式 点击复制到剪贴板 修改 footer.ejs 代码代码文件：themes/matery/layout/_partial/footer.ejs代码行数：大约 28 ~ 34 行代码内容如下： 1234567<% if (theme.cnzz) { %> <script type=\"text/javascript\"> var cnzz_protocol = ((\"https:\" == document.location.protocol) ? \"https://\" : \"http://\"); document.write(unescape(\"%3Cspan id='cnzz_stat_icon_1278109894'%3E%3C/span%3E%3Cscript src='\" + cnzz_protocol + \"v1.cnzz.com/z_stat.php%3Fid%3D1278109894%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E\")); </script> <br><% } %> 替换里面的 <script>...</script> 为你复制的统计代码。 修改配置文件将 配置文件中的 cnzz 设置为 true 表示启动，false 表示关闭 1cnzz: true 配置 jsdelivr 加速启动 jsdelivr 的 cdn 加速，只需要添加 jsdelivr url 地址即可，url 地址获取方式请参考 GitHub + jsDelivr + PicGo + Imagine 打造稳定快速、高效免费图床 默认不启动，填空。 123jsDelivr: # url: https://cdn.jsdelivr.net/gh/crawlmkt/crawlmkt.github.io url: 配置每日切换背景（首页背景）banner 是否每日切换。若为 false, 则 banner 默认为 /medias/banner/0.jpg 12banner: enable: false 修改 banner 图和文章特色图你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中： 修改对应的地址即可 12345678910<% if (theme.banner.enable) { %> <script> // 每天切换 banner 图. Switch banner image every day. $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/' + new Date().getDay() + '.jpg') %>)'); </script><% } else { %> <script> $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.jpg') %>)'); </script><% } %> 如果使用本地的图片，创建 /source/medias/banner 文件夹，添加图片，每个图片必须是jpg 结尾，使用数字进行编号，并需要在 _config.yml 做同步修改。 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图。 1234567891011121314151617181920212223242526featureImages: - /medias/featureimages/0.jpg - /medias/featureimages/1.jpg - /medias/featureimages/2.jpg - /medias/featureimages/3.jpg - /medias/featureimages/4.jpg - /medias/featureimages/5.jpg - /medias/featureimages/6.jpg - /medias/featureimages/7.jpg - /medias/featureimages/8.jpg - /medias/featureimages/9.jpg - /medias/featureimages/10.jpg - /medias/featureimages/11.jpg - /medias/featureimages/12.jpg - /medias/featureimages/13.jpg - /medias/featureimages/14.jpg - /medias/featureimages/15.jpg - /medias/featureimages/16.jpg - /medias/featureimages/17.jpg - /medias/featureimages/18.jpg - /medias/featureimages/19.jpg - /medias/featureimages/20.jpg - /medias/featureimages/21.jpg - /medias/featureimages/22.jpg - /medias/featureimages/23.jpg - /medias/featureimages/24.jpg 配置网页预加载本主题整体采用预加载模式，预加载就是进入项目前提前加载资源，避免在项目中加载缓慢，影响用户体验,这样可以在我们访问其他页面的时候会稍微快点。 12instantpage: enable: true 配置图片懒加载懒加载一般是当图片滚动进可视窗口内才加载图片，可视窗口之外的图片则不加载 本主题图片进行懒加载，这样做效果就是 html、css、js 加载之后，图片再加载。既保证了网页的打开速度，也不会因图片的庞大体积而拖累了整个页面的加载。 1234lazyload: enable: false onlypost: true loadingImg: /medias/loading/orange.square-circle-preloader.svg 配置在线聊天功能DaoVoice 在线聊天功能前往 DaoVoice 官网注册并且获取 app_id，并将 app_id 填入主题的 _config.yml 文件中。 123daovoice: enable: false app_id: Tidio 在线聊天功能前往 Tidio 官网注册并且获取 Public Key，并将 Public Key 填入主题的 _config.yml 文件中。 123tidio: enable: false public_key: 配置绚丽彩虹播放器致 绚丽彩虹播放器 注册并登录，播放器 Key 官方教程视频：https://www.bilibili.com/video/av8153459 123badApplePlayer: enable: false # 是否启动 XlchKey: Sitoi # 播放器 Key 配置博客看板娘默认关闭 12345678910111213141516171819# 看板娘配置live2d: enable: false scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false log: false model: use: live2d-widget-model-shizuku display: position: left width: 150 height: 200 mobile: show: false react: opacity: 0.7 博客添加 PWA 功能详细教程请阅读基于 Hexo GitHub 从零开始搭建个人博客（四）：让你的博客完美支持 PWA 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556pwa: manifest: path: /manifest.json body: name: Sitoi short_name: Sitoi theme_color: white background_color: white display: standalone orientation: portrait scope: / start_url: / icons: - src: /medias/logo_48.png type: image/png sizes: 48x48 - src: /medias/logo_96.png type: image/png sizes: 96x96 - src: /medias/logo_128.png type: image/png sizes: 128x128 - src: /medias/logo_144.png type: image/png sizes: 144x144 - src: /medias/logo_180.png type: image/png sizes: 180x180 - src: /medias/logo_192.png type: image/png sizes: 192x192 - src: /medias/logo_512.png type: image/png sizes: 512x512 - src: /apple-touch-icon.png type: image/png sizes: 180x180 serviceWorker: path: /sw.js preload: urls: - / posts: 12 opts: networkTimeoutSeconds: 30 routes: - pattern: !!js/regexp /hm.baidu.com/ strategy: networkOnly - pattern: !!js/regexp /www.google-analytics.com/ strategy: networkOnly - pattern: !!js/regexp /.*\\.(js|css|jpg|jpeg|png|gif)$/ strategy: cacheFirst - pattern: !!js/regexp /\\// strategy: networkFirst priority: 5 PWA 适配苹果图标 1appletouchicon: /apple-touch-icon.png 修改博客样式修改主题颜色在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色： 123456789101112/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */.bg-color { background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);}@-webkit-keyframes rainbow { /* 动态切换背景颜色. */}@keyframes rainbow { /* 动态切换背景颜色. */} 文章 Front-matter 介绍Front-matter 选项详解Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。 配置选项 默认值 描述 title Markdown 文件标题 文章标题，强烈建议填写此选项 date 文件创建时的日期时间 发布时间，强烈建议填写此选项，且最好保证全局唯一 author 跟 _config.yml 中的 author 文章作者 img featureImages 中的某个值 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg top true 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章 cover false 表示该文章是否需要加入到首页轮播封面中 coverImg 无 表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片 password 无 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项 toc true 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项 mathjax false 是否开启数学公式支持，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行 summary 无 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要 categories 无 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类 tags 无 文章标签，一篇文章可以多个标签 keywords 文章标题 文章关键字，SEO 时需要 reprintPolicy cc_by 文章转载规则，可以是 cc_by,cc_by_nd,cc_by_sa,cc_by_nc,cc_by_nc_nd,cc_by_nc_sa,cc0,noreprint 或 pay 中的一个 注意: 如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。 date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则 以下为文章的 Front-matter 示例。 最简示例1234---title: 基于 Hexo GitHub 从零开始搭建个人博客date: 2019-12-30 09:25:00--- 最全示例12345678910111213141516171819---title: 基于 Hexo GitHub 从零开始搭建个人博客date: 2019-12-30 09:25:00author: Sitoiimg: /source/images/xxx.jpgtop: truecover: truecoverImg: /images/1.jpgpassword: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92toc: falsemathjax: falsesummary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要categories: Hexokeywords: Hexo GitHub blogtags: - Hexo - Blog - GitHub--- 本地运行预览安装依赖包运行如下命令： 1npm i 启动 hexo 博客运行如下命令： 1hexo server 输出如下： 12INFO Start processingINFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. 查看博客打开浏览器，输入地址：http://localhost:4000/ 看到下面的效果，说明的你博客已经构建成功了 部署到 GitHub Pages登录 GitHub 打开你的项目，获取 GitHub ssh repo 地址，替换配置中的 repo github 的 123456# 自动部署配置deploy: - type: git repo: github: git@github.com:Sitoi/Sitoi.github.io.git # 修改这里为你项目的地址 branch: master 运行 如下命令进行部署： 123hexo cleanhexo generatehexo deploy 部署成功 你就可以上你的网站查看效果啦。 参考 https://hexo.io/zh-cn/ https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/ https://yafine-blog.cn/posts/4ab2.html","categories":[{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"博客搭建","slug":"博客搭建","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/"}],"author":"jacktang"},{"title":"如何优雅的搭建自己风格的博客","slug":"风格的博客","date":"2024-04-10T14:56:44.000Z","updated":"2024-04-10T15:14:50.857Z","comments":true,"path":"posts/adfb6d52.html","link":"","permalink":"https://19492035.xyz/posts/adfb6d52.html","excerpt":"","text":"一、引言随着网络技术迭代以及网络巨头的成长，博客、论坛等形式仿佛已经成为历史。 但是，你是否觉得 现在的网站千篇一律，我想要另辟蹊径展现个人风采； 现有的博客网站的功能冗杂陈旧，我那颗热情澎湃的心想要追求自由与极致； 网络巨头不停的窥探隐私，我好想要拥有一个属于自己的空间； 简历过于扁平化，我想让HR眼前一亮，发现我的与众不同。 那么来搭建个人博客吧。这是一个属于你的空间，在这里你可以放飞自我，构建属于自己的世界。 本文面向 初学者 ，介绍如何使用Hexo框架以及Github搭建个人博客。 但是在正文之前，还是要多说两句： 对于一个博客网站来说最重要的不是技术而是内容。博客搭建的技术容易实现，但是连续的、高质量的输出很难。 如果没有连续输出的经历，建议先到博客网站适用一段时间，养成写作习惯后，在来折腾自己的博客。 别忘了博客的初心是记录。 二、为什么要选择hexo+github page搭建自己的博客（常见的博客框架对比）本段内容均来自网络，主要参考了计算机瞎鼓捣能手和曹历鑫)文章。常见的博客框架见下表： 框架 优点 缺点 主页 Hexo 1.支持Markdowm; 2.开源且免费；3. 静态部署，操作简单；4.中文社区；5.中文支持；6.在 GitHub Pages 部署简单。 https://hexo.io/ jekyll 1. 支持Markdowm;2. 开源且免费；3. 静态部署，操作简单；4. 社区成熟；5. 强大的 GitHub Pages 支持。 当网站内容不断增加后，构建速度会明显变慢。 https://jekyllrb.com/ hugo 1. 免费开源；2.速度非常快，对构建速度做了优化；3.内置支持很多功能（动态 API 请求的内容、无限制内容类型、shortcakes， 一个灵活的 Markdown 替代、别名重定向）：4. 预制的 Go 模版和模式；5. 无需依赖（不用安装 Go，因为它是编译好的二进制）； 1. 主题使用 Go 模版，所以需要熟悉 Go；2.没有内置默认主题；3. 缺少扩展性和插件。 https://www.gohugo.org/ solo 1. 可以在动态博客和静态博客之间进行切换；2.具有一定活跃度的社区；3.图床免费；4.自带备份功能；5.可以导入 Hexo 博客的 Markdown 文章。 1.Docker 快速部署难以自定义博客内的样式因此只能采用 Java 源码的方式进行部署；2.博客刷新使用了 Pjax，很多时候自定义的js很容易失效了；3.评论的时候只能登录社区账号。 https://solo.b3log.org/ wordpress 1.功能强大、扩展性强，这主要得益于其插件众多;2.对seo搜索引擎友好，收录也快，排名靠前;3.适合DIY;4.主题很多;5.备份和网站转移比较方便;6.有强大的社区支持。 1.只提供一个框架内容需要自己DIY；2.不能安装太多插件，否则会拖累网站速度和降低用户体验；3.服务器空间选择自由较小；4.不能适应大数据。5.只能“伪静态化”。 https://wordpress.org/ 我本身不从事计算机与软件相关工作，因此很多问题还需要依靠社区来解决。作为第一个自建博客，希望选择一个上手简单一点的框架，综上，我选择使用hexo。搭建博客之初，并不能确定这个博客会持续更新多久，因此不想有太多的投入，所以选择在托管再Github Page。等到内容足够多或者想玩其他的内容的时候再购买服务器和网址。 三、本文涉及到的基础知识 下载并安装node.js; 下载并安装Git； 申请一个Github账号； 创建Github仓库； 配置Git； 上述内容涉及广泛，如果细细讲起来会涉及很大的篇幅。因此只介绍最基本的安装操作，至于如何进阶还要诸君探索。都能自己搭建博客的各位，肯定拥有很强的信息搜集能力。 下载并安装node.js和Gitnode.js和Git安装过程十分相似，都可以分为三步： 到官网下载应用；直接在官网中下载长期支持的版本（即LTS版本，Long Term Support）。这是node.js中文网的下载页面，这是Git的下载页面。 安装应用。只需要注意把安装位置设置在系统盘以外的盘，其余均可以无脑“下一步”。 测试安装是否成功。两个软件测试方法相同： 打开CMD窗口。 先测试Git，向窗口中输入：git --version; 如果窗口中出现Git的版本号，说明安装成功；结果见下图。 再测试node.js，向窗口中输入：node --version; 如果窗口中出现node.js的版本号，说明安装成功；结果见下图。 申请一个Github账号并创建仓库在网站进行用户注册的过程，我就不向大家罗嗦了，如果大家还有疑问，可以参考wqMV的GitHub 新手教程 一，GitHub 注册以及GitHub的官方指导文件。需要注意的一点是：用户名最好兼具私密性和趣味性。不论是在Github主页还是博客，用户名都会反应在Url中，因此最好仔细考虑一下用户名。如果无法加载出来验证信息，可以尝试使用手机注册。 创建博客仓库（repository）与创建一般的项目仓库的过程几乎相同，但是有几点注意事项，因此我详细列出所有的步骤。 点击Github主页右上角的“+”，并选择“New repository”。 “Repository name”必须设置为“Owner”+“.github.io”，即下图2号蓝色框线中的内容是1号的内容加上“.github.io”。如果之前没有注意到这一步，可以查看博主”老肖79”的hexo搭建Github博客上传后，网页显示404问题解决方案中方法进行补救。不过我建议你把仓库删除，然后重新创建一个。 最后不要更改其他任何设置，直接拉到最后，点击“Create repository”。 配置Git，以使用SSH为例（可选）理论上，使用Git把本地博文推送到到Github时，需要输入Github的用户名和密码用于校验。每次更新都要输入密码比较麻烦，可以通过设置SSH简化输入账户和密码这一步。操作如下：注意：这一步最好在第一次向Github中push内容之前操作。配置过程大致分为六步： 配置用户信息： git init git config –global user.name ‘用户名’ git config –global user.email ‘用户邮箱’ 检查本机是否有SSH。打开Git，键入cd ~/.ssh #检查本机已存在的ssh密钥。如果显示结果为：No such file or directory，表明本机没有ssh密钥，可以新建。 执行生成公钥和私钥的命令：ssh-keygen -t rsa -C \"邮件地址\"出现如图字样，说明安装成功，再连续回车3次即可。 安装成功会显示密钥路径，根据路径找到文件，打开id_rsa.pub文件，将其内容全部复制。 打开github网站，点击“Setting”，如下图。在设置页面中选择“SSH and GPG keys”。点击“New SSH Key”粘贴上一步复制的内容到Key位置，Title随便输入。 测试是否链接成功：在Git的Bash窗口，输入ssh -T git@github.com，如果出现You've successfully authenticated, but GitHub does not provide shell access.则表明配置成功。 本部分内容和部分图片参考“echo 曦”的git 配置 https和ssh 免密码登录 常用操作命令 四、Hexo博客的搭建搭建过程主要分为四步，hexo的安装、hexo的配置、文章发布和博客模板更换。 hexo安装hexo的安装非常简单，只要在Git中（点击鼠标右键，选择“Git Bash Here”即可打开Git）按照顺序执行以下命令即可： 使用npm进行全局安装：npm install -g hexo-cli -g； 在合适的位置新建一个文件夹，用于存放博客的内容，名字随便取； 初始化刚才新建的文件夹：hexo init blog； 进入到项目文件中：cd blog 安装依赖程序：npm install 完成上述步骤，hexo就安装完成了。 hexo的配置hexo有很丰富的样式配置方法，需要大家自己去探索，这是hexo的官方配置文档，如果有需要可以自行查阅。我这里只介绍将将博客push到Github的配置要求。 打开blog文件下的_config.yml文件。 找到“deploy”，在其中的“type”后输入“git”，在“repo”后输入你的SSH，在“branch”后输入“master”。这其中有两点需要注意： 冒号后面必须有一个空格，否则可能会出问题。 SSH是Github博客仓库主页中复制，参考下图。 五、博文发布博客的意义就是写文章并发布出去让公众看到，这里将文章发布分成两部分：文章编辑和发布。 文章编辑在博客文件夹中打开Git Bash，执行命令hexo new 测试文件。新建文章默认会放到source/_posts/目录下。文件的后缀默认为md。可以使用Markdown格式对文件进行编辑，也可以直接用文本文档编辑文件。从便于文件管理角度，我更建议另外一种方式，先在草稿文件上编辑，完成所有编辑后再发布。 source文件夹中至少有两个子文件夹：_posts和_drafts，他们分别代表着提交文件和草稿文件。_posts中的文件不论是否完成编辑，每次执行部署命令时均会上传到网站上。_drafts中的文件通过hexo new draft 测试文件2命令创建，则只能在本地浏览，完成编辑后执行hexo publish _drafts 测试文件2命令，hexo会将文件转移到_posts文件夹中。待下次部署时一并发布。 发布hexo可以先在本地预览确认无误之后再push到Github上。因此这里分为本地的预览和远程发布。 本地预览 在Git中执行hexo g命令，该命令作用是将网站资源放在public目录下，相当于执行了hexo generate； 在Git中执行hexo s命令，该命令作用是启动服务，本地预览，相当于执行了hexo server； 打开http://localhost:4000，即可预览博客。 远程发布 在Git中执行hexo g命令。 在Git中执行hexo d命令，进行部署。 如果执行命令之后出现ERROR Deployer not found: git，则需要安装一个插件 hexo-deployer-git，执行npm install hexo-deployer-git --save命令即可。 再次在Git中执行hexo d命令，进行部署即可。 打开http://（你的Github用户名）.github.io/即可访问你的博客。 博客模板更换这是Hexo的官网上的主题页面，点开每个主题都会教授如何更换主题，因此不在这里过多介绍。 六、总结你以为这就结束了吗？这才是一个开始，是最简单的一步，只要按图索骥就能实现。不断的写文章，不断的写好一篇文章这才是最重要的。加油吧，少年！ 本文在很多内容上都参考了“thanksblog”的博文hexo+github搭建个人博客以及毕小朋的《了不起的Markdown》 七、博客迁移到其他电脑2021 年更换了办公的电脑。这时我想将Hexo博客迁移到新电脑中。经过实地测试，对于Windows系统，可以按照“ eternity1118_”的博文hexo：更换电脑，如何继续写博客操作。对于Mac系统，推荐参考“wj’blog”的文章hexo博客迁移到另一台电脑。 七、参考内容 [1] “别忘了博客的初心是记录” [2] 计算机瞎鼓捣能手 [3] 曹历鑫 [4] Sanarous [5] php中文网 [6] wqMV [7] echo 曦 [8] hexo+github搭建个人博客 [9] 《了不起的Markdown》 [10] hexo：更换电脑，如何继续写博客 [11] hexo博客迁移到另一台电脑","categories":[{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"博客搭建","slug":"博客搭建","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/"}],"author":"jacktang"},{"title":"Hexo Matery主题博客搭建教程（珍藏）","slug":"hexodajian","date":"2024-04-10T14:34:02.000Z","updated":"2024-04-13T08:13:55.841Z","comments":true,"path":"posts/e4393438.html","link":"","permalink":"https://19492035.xyz/posts/e4393438.html","excerpt":"","text":"好多博客教程就这样没了，于是就此保存一份恭后者学习备份 本博客教程来源于洪卫博主 更多详情教程，强烈推荐看博主写的：Hexo+Github博客搭建完全教程 有什么问题可以在文章最后评论区留言和讨论，当然，欢迎点击文章最后的打赏按键，请博主一杯冰阔乐，笑～ 最后，如果项目和教程对你有所帮助或者你看见了还算比较喜欢，欢迎给我star，谢谢您！ 前言 去年在博客园注册了自己的第一个博客，当时初衷就是想拿来作为自己的在线笔记本，做做学习记录，分享一些学到的东西，使用第三方提供的博客服务其实也挺方便，现在市面上提供类似服务的博客网站也很多，如CSDN，博客园，简书等平台，可以直接在上面发表，用户交互做的好，写的文章百度也能搜索的到。但是缺点是比较不自由，会受到平台的各种限制和恶心的广告，个性化不足。而自己购买域名和服务器，搭建博客的成本实在是太高了，不光是说这些购买成本，单单是花力气去自己搭这么一个网站，还要定期的维护它，对于我们大多数人来说，也是没有这样的精力和时间。那么，我们能不能自己定制一个自己喜欢的个性化博客，同时也不用付出太高的成本啦？ 这就引出了第三种选择，基于开源框架搭建博客，然后直接在github page平台上托管我们的博客。这样就可以安心的来写作，又不需要定期维护，基于这个想法，今年8月初的时候开始搭建第一个属于自己的独立博客，前后断续弄了近一周，到现在稍微有点模样了。我想可能有很多小伙伴应该也想过搭建一个自己的博客，当然，网上也有一堆详细教程。写这篇博客的目的大概有两个，第一个是当做自己的搭建记录，方便以后自己随时查看提示修改，第二个是稍稍总结一下具体的搭建步骤以及一些支持个性化定制的博客源码修改的教程，稍稍分享一下这些修改经验，当然，更多的一些个性化操作需要你自己以后在这个基础上慢慢去摸索，有些写的不太好的地方还希望看到的小伙伴多多包涵。 本博客基于Hexo，所以首先要了解一下我们搭建博客所要用到的框架。Hexo是高效的静态网站生成框架，它基于Node.js，快速，简单且功能强大，是搭建博客的首选框架。大家可以进入hexo官网进行详细查看，因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。通过Hexo，你可以直接使用Markdown语法来撰写博客。相信很多小伙伴写工程都写过README.md文件吧，对，就是这个格式的！写完后只需两三条命令即可将生成的网页上传到github或者coding等代码管理托管平台，然后别人就可以浏览你的博客网页啦。是不是很简单？你无需关心网页源代码的具体生成细节，只需要用心写好你的博客文章内容就行了。 简单总结：Hexo, 产品成熟，使用简单，功能强大，有丰富的各种插件资源；但，像发布后台、站内搜索，评论系统类似诉求，虽然有对应的工具，但也需要自己折腾下，后续我们一步一步介绍。 教程大致分三个部分， 第一部分：hexo的初级搭建还有部署到github page上，以及个人域名的绑定。 第二部分：hexo的基本配置，更换主题，实现多终端工作，以及在coding page部署实现国内外分流 第三部分：hexo添加各种功能，包括搜索的SEO，阅读量统计，访问量统计和评论系统等。 第一部分 搭建 hexo的初级搭建还有部署到github page上，以及个人域名的绑定。 Hexo搭建步骤 1.安装Git 2.安装Node.js 3.安装Hexo 4.GitHub创建个人仓库 5.生成SSH添加到GitHub 6.将hexo部署到GitHub 7.设置个人域名 8.发布文章 1. 安装Git 为了把本地的网页文件上传到github上面去，需要用到工具———Git[下载地址]。Git是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。Git非常强大，建议每个人都去了解一下。廖雪峰老师的Git教程写的非常好，大家可以看一下。Git教程 windows：到git官网上下载.exe文件,Download git,安装选项还是全部默认，只不过最后一步添加路径时选择Use Git from the Windows Command Prompt，这样我们就可以直接在命令提示符里打开git了。 顺便说一下，windows在git安装完后，就可以直接使用git bash来敲命令行了，不用自带的cmd，cmd有点难用。 linux：对linux来说实在是太简单了，因为最早的git就是在linux上编写的，只需要一行代码 sudo apt-get install git 安装完成后在命令提示符中输入git --version来查看一下版本验证是否安装成功。 2. 安装nodejs Hexo是基于node.js编写的，所以需要安装一下node.js和里面的npm工具。 windows：下载稳定版或者最新版都可以Node.js，安装选项全部默认，一路点击Next。最后安装好之后，按Win+R打开命令提示符，输入node -v和npm -v，如果出现版本号，那么就安装成功了。 linux：命令行安装： sudo apt-get install nodejs sudo apt-get install npm 不过不推荐命令行安装，有时候有问题，建议直接到官网去下载编译好的压缩文件，如下所示:然后解压到你指定的文件夹即可，比如我解压到我系统的/home/shw/MySoftwares目录下了，如图: 注意本压缩包是.tar.xz格式的，需要两次解压 配置一下环境变量 sudo vim /etc/profile 复制下面两行到刚打开的profile文件最底部(注意node的安装地址/home/shw/MySoftwares/node-v12.8.0-linux-x64换成自己的)： export NODE_HOME=/home/shw/MySoftwares/node-v12.8.0-linux-x64 export PATH=$PATH:$NODE_HOME/bin 保存后退出，再执行下面命令将环境变量生效： source /etc/profile 将目录软链接到全局环境下（命令后面的/usr/local/bin/node是固定的） sudo ln -s /home/shw/MySoftwares/node-v12.8.0-linux-x64/node /usr/local/bin/node sudo ln -s /home/shw/MySoftwares/node-v12.8.0-linux-x64/npm /usr/local/bin/npm 这样安装好了以后使用npm安装的包(比如：ionic serve)，使用包的命令时可能会提示找不到命令，没关系，在用户目录下终端执行下面命令(固定写法)： echo -e \"export PATH=$(npm prefix -g)/bin:$PATH\" >> ~/.bashrc && source ~/.bashrc 这样我们在所有用户下，都可以使用npm，也可以使用npm安装的包的命令。成功的将nodejs安装并配置到全局环境下。 安装完后，打开命令行终端，输入: node -v npm -v 检查一下有没有安装成功 添加国内镜像源如果没有梯子的话，可以使用阿里的国内镜像进行加速。 npm config set registry https://registry.npm.taobao.org 3. 安装Hexo 前面git和nodejs安装好后，就可以安装hexo了，你可以先创建一个文件夹MyBlog，用来存放自己的博客文件，然后cd到这个文件夹下（或者在这个文件夹下直接右键git bash打开）。 比如我的博客文件都存放在D:\\Study\\MyBlog目录下。 在该目录下右键点击Git Bash Here，打开git的控制台窗口，以后我们所有的操作都在git控制台进行，就不用Windows自带的cmd了。 定位到该目录下，输入npm install -g hexo-cli安装Hexo。可能会有几个报错，无视它就行。 npm install -g hexo-cli 安装完后输入hexo -v验证是否安装成功。 至此hexo就安装完了。 接下来初始化一下hexo,即初始化我们的网站，输入hexo init初始化文件夹 hexo init MyBlog 这个MyBlog可以自己取什么名字都行，然后，接着输入npm install安装必备的组件。 cd MyBlog //进入这个MyBlog文件夹 npm install 新建完成后，指定文件夹MyBlog目录下有： node_modules: 依赖包 public：存放生成的页面 scaffolds：生成文章的一些模板 source：用来存放你的文章 themes：主题** _config.yml: 博客的配置文件** 这样本地的网站配置也弄好啦，输入hexo g生成静态网页，然后输入hexo s打开本地服务器， hexo g hexo server(或者简写:hexo s）) 然后浏览器打开http://localhost:4000/，就可以看到我们的博客啦，效果如下： 按ctrl+c关闭本地服务器。 4. 注册Github账号创建个人仓库 接下来就去注册一个github账号，用来存放我们的网站。大多数小伙伴应该都有了吧，作为一个合格的程序猿（媛）还是要有一个的。 打开https://github.com/，新建一个项目仓库New repository，如下所示：然后如下图所示，输入自己的项目名字，后面一定要加.github.io后缀，README初始化也要勾上。 要创建一个和你用户名相同的仓库，后面加.http://github.io，只有这样，将来要部署到`GitHub page的时候，才会被识别，也就是http://xxxx.github.io，其中xxx就是你注册GitHub`的用户名。例如我的：http://shw2018.github.io 5. 生成SSH添加到GitHub 生成SSH添加到GitHub，连接Github与本地。右键打开git bash，然后输入下面命令： git config --global user.name \"yourname\" git config --global user.email \"youremail\" 这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。例如我的： git config --global user.name \"shw2018\" git config --global user.email \"hwsun@std.uestc.edu.cn\" 可以用以下两条，检查一下你有没有输对 git config user.name git config user.email 然后创建SSH,一路回车 ssh，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。 ssh-keygen -t rsa -C \"youremail\" 这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。或者git bash中输入 cat ~/.ssh/id_rsa.pub 将输出的内容复制到框中，点击确定保存。 打开github，在头像下面点击settings，再点击SSH and GPG keys，新建一个SSH，名字随便取一个都可以，把你的id_rsa.pub里面的信息复制进去。如图：在git bash输入ssh -T git@github.com，如果如下图所示，出现你的用户名，那就成功了。 6. 将hexo部署到GitHub 这一步，我们就可以将hexo和GitHub关联起来，也就是将hexo生成的文章部署到GitHub上，打开博客根目录下的_config.yml文件，这是博客的配置文件，在这里你可以修改与博客配置相关的各种信息。 修改最后一行的配置： deploy: type: git repository: https://github.com/shw2018/shw2018.github.io branch: master repository修改为你自己的github项目地址即可，就是部署时，告诉工具，将生成网页通过git方式上传到你对应的链接仓库中。 这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。 npm install hexo-deployer-git --save 然后 hexo clean hexo generate hexo deploy 其中 hexo clean清除了你之前生成的东西，也可以不加。 hexo generate顾名思义，生成静态文章，可以用 hexo g缩写 ，hexo deploy部署文章，可以用hexo d缩写 注意deploy时可能要你输入username和password。 得到下图就说明部署成功了，过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了！！ 7. 设置个人域名 现在你的个人网站的地址是yourname.github.io，如果觉得这个网址逼格不太够，这就需要你设置个人域名了。但是需要花钱。 不过，这一步不是必要的，如果目前还不想买域名可以先跳过，继续看后面的，以后想买域名了在还看这块 首先你得购买一个专属域名，xx云都能买，看你个人喜好了。 这篇以腾讯云为例，腾讯云官网购买：然后实名认证后进入腾讯云控制台，点云解析进去，找到你刚买的域名，点进去添加两条解析记录，如下图所示： 然后打开你的github博客项目，点击settings，拉到下面Custom domain处，填上你自己的域名，保存： 这时候你的项目根目录应该会出现一个名为CNAME的文件了。如果没有的话，打开你本地博客/source目录，我的是D:\\Study\\MyBlog\\source，新建CNAME文件，注意没有后缀。然后在里面写上你的域名，保存。最后运行hexo g、hexo d上传到github。 过不了多久，再打开你的浏览器，输入你自己的专属域名，就可以看到搭建的网站啦！ 8. 写文章、发布文章 首先在博客根目录下右键打开git bash，安装一个扩展npm i hexo-deployer-git。 然后输入hexo new post \"article title\"，新建一篇文章。 然后打开D:\\Study\\MyBlog\\source\\_posts的目录，可以发现下面多了一个文件夹和一个.md文件，一个用来存放你的图片等数据，另一个就是你的文章文件啦。你可以会直接在vscode里面编写markdown文件，可以实时预览，也可以用用其他编辑md文件的软件的工具编写。编写完markdown文件后，根目录下输入hexo g生成静态网页，然后输入hexo s可以本地预览效果，最后输入hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章啦。 到这儿基本第一部分就完成了，已经完整搭建起一个比较简陋的个人博客了，接下来我们就可以对我们的博客进行个性化定制了。 第二部分 定制 我们要定制自己的博客的话，首先就要来了解一下Hexo博客的一些目录和文件的作用，以及如何平滑更换漂亮的主题模板并加入自己的定制源代码实现个性化定制 1. Hexo相关目录文件1.1 博客目录构成介绍 从上图可以看出，博客的目录结构如下： - node_modules - public - scaffolds - source - _data - _posts - about - archives - categories - friends - tags - themes node_modules是node.js各种库的目录，public是生成的网页文件目录，scaffolds里面就三个文件，存储着新文章和新页面的初始设置，source是我们最常用到的一个目录，里面存放着文章、各类页面、图像等文件，themes存放着主题文件，一般也用不到。 我们平时写文章只需要关注source/_posts这个文件夹就行了。 1.2 hexo基本配置 在文件根目录下的_config.yml，就是整个hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。 1.2.1 网站 参数描述title网站标题subtitle网站副标题description网站描述author您的名字language网站使用的语言timezone网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。 其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。 1.2.2 网址 参数描述url网址root网站根目录 permalink文章的永久链接格式permalink_defaults永久链接中各部分的默认值 在这里，你需要把url改成你的网站域名。 permalink，也就是你生成某个文章时的那个链接格式。 比如我新建一个文章叫temp.md，那么这个时候他自动生成的地址就是http://yoursite.com/2018/09/05/temp。 以下是官方给出的示例，关于链接的变量还有很多，需要的可以去官网上查找 永久链接 。 参数结果:year/:month/:day/:title/2019/08/10/hello-world :year-:month-:day-:title.html 2019-08-10-hello-world.html :category/:titlefoo/bar/hello-world 再往下翻，中间这些都默认就好了。 theme: landscap theme就是选择什么主题，也就是在themes这个文件夹下，在官网上有很多个主题，默认给你安装的是lanscape这个主题。当你需要更换主题时，在官网上下载，把主题的文件放在themes文件夹下，再修改这个主题参数就可以了。 1.2.3 Front-matter Front-matter 是md文件最上方以 ---分隔的区域，用于指定个别文件的变量，举例来说： title: Hexo+Github博客搭建记录 date: 2019-08-10 21:44:44 下是预先定义的参数，您可在模板中使用这些参数值并加以利用。 参数描述layout布局title标题date建立日期updated更新日期comments开启文章的评论功能tags标签（不适用于分页）categories分类（不适用于分页）permalink覆盖文章网址 其中，分类和标签需要区别一下，分类具有顺序性和层次性，也就是说Foo，Bar不等于Bar，Foo；而标签没有顺序和层次。 --- title: Hexo+Github博客搭建记录 date: 2019-08-10 21:44:44 author: 洪卫 img: /medias/banner/7.jpg coverImg: /medias/banner/7.jpg top: true cover: true toc: true password: 5f15b28ffe43f8be4f239bdd9b69af9d80dbafcb20a5f0df5d1677a120ae9110 mathjax: true summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要 tags: - Hexo - Github - 博客 categories: - 软件安装与配置 --- 1.2.4 layout（布局） 1.2.4.1 post 当你每一次使用代码 hexo new XXX 它其实默认使用的是post这个布局，也就是在source文件夹下的_post里面。 Hexo有三种默认布局：post、page和draft，它们分别对应不同的路径，而您自定义的其他布局和post相同，都将储存到source/_posts文件夹。 而new这个命令其实是： hexo new [layout] <title> 只不过这个layout默认是post罢了。 1.2.4.2 page 如果你想另起一页，那么可以使用 hexo new page newpage 系统会自动给你在source文件夹下创建一个newpage文件夹，以及newpage文件夹中的index.md，这样你访问的newpage对应的链接就是http://xxx.xxx/newpage 1.2.4.3 draft draft是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以 hexo new draft newdraft 这样会在source/_draft中新建一个newdraft.md文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用 hexo server --draft 在本地端口中开启服务预览。 如果你的草稿文件写完了，想要发表到post中， hexo publish draft newdraft 就会自动把newdraft.md发送到post中。 2. 更换主题 我们在了解Hexo博客文件基础之后，知道主题文件就放在themes文件下，那么我们就可以去Hexo官网下载喜欢的主题，复制进去然后修改参数即可。网上大多数主题都是github排名第一的Next主题，但是我个人不是很喜欢，我在网上看到一个主题感觉还不错：hexo-theme-matery，地址在传送门。这个主题看着比较漂亮，并且响应式比较友好，点起来很舒服，功能也比较很多。 当然，人各有异，这个主题风格也不一定是你喜欢，那么你也可以跟着这教程类似的方法替换成你喜欢的就行了。 特性： 简单漂亮，文章内容美观易读 Material Design 设计 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现 首页轮播文章及每天动态切换 Banner 图片 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替） 时间轴式的归档页 词云的标签页和雷达图的分类页 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等） 可自定义的数据的友情链接页面 支持文章置顶和文章打赏 支持 MathJax TOC 目录 可设置复制文章内容时追加版权信息 可设置阅读文章时做密码验证 Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk） 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能 支持在首页的音乐播放和视频播放功能 他的介绍文档写得非常的详细，还有中英文两个版本。效果图如下： 首先先按照文档教程安装一遍主题，然后是可以正常打开的，如果你是一般使用的话，基本没啥问题了。不过有些地方有些地方可以根据你自己的习惯和喜好修改一下， 下面记录一下我这个博客修改了的一些地方。 2.1 新建文章模板修改 首先为了新建文章方便，我们可以修改一下文章模板，建议将/scaffolds/post.md修改为如下代码： --- title: {{ title }} date: {{ date }} author: img: coverImg: top: false cover: false toc: true mathjax: false password: summary: tags: categories: --- 这样新建文章后 一些Front-matter参数不用你自己补充了，修改对应信息就可以了。 2.2 添加404页面 原来的主题没有404页面，我们加一个。首先在/source/目录下新建一个404.md，内容如下： title: 404 date: 2019-08-5 16:41:10 type: \"404\" layout: \"404\" description: \"Oops～，我崩溃了！找不到你想要的页面 :(\" 然后在/themes/matery/layout/目录下新建一个404.ejs文件，内容如下： <style type=\"text/css\"> /* don't remove. */ .about-cover { height: 75vh; } </style> <div class=\"bg-cover pd-header about-cover\"> <div class=\"container\"> <div class=\"row\"> <div class=\"col s10 offset-s1 m8 offset-m2 l8 offset-l2\"> <div class=\"brand\"> <div class=\"title center-align\"> 404 </div> <div class=\"description center-align\"> <%= page.description %> </div> </div> </div> </div> </div> </div> <script> // 每天切换 banner 图. Switch banner image every day. $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)'); </script> 2.3“关于”页面增加简历（可选） 修改/themes/matery/layout/about.ejs，找到<div class=\"card\">标签，然后找到它对应的</div>标签，接在后面新增一个card，语句如下： <div class=\"card\"> <div class=\"card-content\"> <div class=\"card-content article-card-content\"> <div class=\"title center-align\" data-aos=\"zoom-in-up\"> <i class=\"fa fa-address-book\"></i>  <%- __('myCV') %> </div> <div id=\"articleContent\" data-aos=\"fade-up\"> <%- page.content %> </div> </div> </div> </div> 这样就会多出一张card，然后可以在/source/about/index.md下面写上你的简历了，当然这里的位置随你自己设置，你也可以把简历作为第一个card。 2.4 数学公式渲染和代码高亮 2.4.1 解决mathjax与代码高亮的冲突 如果你按照教程安装了代码高亮插件hexo-prism-plugin，单独使用是没有问题的，但如果你又使用了mathjax，并且按照网上教程，安装kramed插件并修改了js文件里的正则表达式（为了解决markdown和mathjax的语法冲突），那你的代码就无法高亮了。解决方法很简单，别用kramed插件了，还用原来自带的marked插件，直接改它的正则表达式就行了。 2.4.2 加数学公式显示 打开/themes/matery/layout中的post.ejs文件，在最下方粘贴如下代码： <script type=\"text/javascript\" src=\"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default\"></script> 由于markdown语法与mathjax语法存在冲突，所以还需要修改源文件。 打开/node_modules/marked/lib中的marked.js文件，第539行的escape:处替换成： escape: /^$[`*\\[\\]()#$+\\-.!_>])/ 第553行的em:处替换成： em: /^\\*((?:\\*\\*|[\\s\\S])+?)\\*(?!\\*)/ 这时在文章里写数学公式基本没有问题了，但是要注意：数学公式中如果出现了连续两个{，中间一定要加空格！ 举个例子:行内公式：$y = f(x)$代码： $y = f(x)$ 行间公式：\\[y = {f_{ {g_1}}}(x)\\]代码： \\\\[y = {f_{ {g_1}}}(x)\\\\] 注意上面花括号之间有空格！ 2.5 增加建站时间 修改/themes/matery/layout/_partial中的footer.ejs，在最后加上： <script language=javascript> function siteTime() { window.setTimeout(\"siteTime()\", 1000); var seconds = 1000; var minutes = seconds * 60; var hours = minutes * 60; var days = hours * 24; var years = days * 365; var today = new Date(); var todayYear = today.getFullYear(); var todayMonth = today.getMonth() + 1; var todayDate = today.getDate(); var todayHour = today.getHours(); var todayMinute = today.getMinutes(); var todaySecond = today.getSeconds(); /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳) year - 作为date对象的年份，为4位年份值 month - 0-11之间的整数，做为date对象的月份 day - 1-31之间的整数，做为date对象的天数 hours - 0(午夜24点)-23之间的整数，做为date对象的小时数 minutes - 0-59之间的整数，做为date对象的分钟数 seconds - 0-59之间的整数，做为date对象的秒数 microseconds - 0-999之间的整数，做为date对象的毫秒数 */ var t1 = Date.UTC(2017, 09, 11, 00, 00, 00); //北京时间2018-2-13 00:00:00 var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond); var diff = t2 - t1; var diffYears = Math.floor(diff / years); var diffDays = Math.floor((diff / days) - diffYears * 365); var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours); var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes); var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds); document.getElementById(\"sitetime\").innerHTML = \"本站已运行 \" +diffYears+\" 年 \"+diffDays + \" 天 \" + diffHours + \" 小时 \" + diffMinutes + \" 分钟 \" + diffSeconds + \" 秒\"; }/*因为建站时间还没有一年，就将之注释掉了。需要的可以取消*/ siteTime(); </script> 然后在合适的地方（比如copyright声明后面）加上下面的代码就行了： <span id=\"sitetime\"></span> 2.6 修改不蒜子初始化计数 因为不蒜子至今未开放注册，所以没办法在官网修改初始化，只能自己动手了。和上一条一样，我们在/themes/matery/layout/_partial里的footer.ejs文件最后加上： <script> $(document).ready(function () { var int = setInterval(fixCount, 50); // 50ms周期检测函数 var pvcountOffset = 80000; // 初始化首次数据 var uvcountOffset = 20000; function fixCount() { if (document.getElementById(\"busuanzi_container_site_pv\").style.display != \"none\") { $(\"#busuanzi_value_site_pv\").html(parseInt($(\"#busuanzi_value_site_pv\").html()) + pvcountOffset); clearInterval(int); } if ($(\"#busuanzi_container_site_pv\").css(\"display\") != \"none\") { $(\"#busuanzi_value_site_uv\").html(parseInt($(\"#busuanzi_value_site_uv\").html()) + uvcountOffset); // 加上初始数据 clearInterval(int); // 停止检测 } } }); </script> 然后把上面几行有段代码： <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %> <span id=\"busuanzi_container_site_pv\"> <i class=\"fa fa-heart-o\"></i> 本站总访问量 <span id=\"busuanzi_value_site_pv\" class=\"white-color\"></span> </span> <% } %> <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %> <span id=\"busuanzi_container_site_uv\"> 人次, 访客数 <span id=\"busuanzi_value_site_uv\" class=\"white-color\"></span> 人. </span> <% } %> 修改为： <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %> <span id=\"busuanzi_container_site_pv\" style='display:none'> <i class=\"fa fa-heart-o\"></i> 本站总访问量 <span id=\"busuanzi_value_site_pv\" class=\"white-color\"></span> </span> <% } %> <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %> <span id=\"busuanzi_container_site_uv\" style='display:none'> 人次, 访客数 <span id=\"busuanzi_value_site_uv\" class=\"white-color\"></span> 人. </span> <% } %> 其实就是增加了两个style='display:none'而已。 2.7 添加动漫人物 其实三步就行了，不用像网上有些教程那么复杂。 第一步： npm install --save hexo-helper-live2d 第二步： npm install live2d-widget-model-shizuku 这里的动漫模型可以改，只需要下载对应模型就行了，你可以官方仓库去看有哪些模型，下载你喜欢的就行。 第三步：在根目录配置文件中添加如下代码： live2d: enable: true scriptFrom: local pluginRootPath: live2dw/ pluginJsPath: lib/ pluginModelPath: assets/ tagMode: false log: false model: use: live2d-widget-model-shizuku display: position: right width: 150 height: 300 mobile: show: false react: opacity: 0.7 然后hexo g再hexo s就能预览出效果了，但是有个注意的地方，这个动漫人物最好不要和不蒜子同时使用，不然不蒜子会显示不出来。至于解决办法后续更新。 解决动漫人物和不蒜子不能同时使用的bug（2019.08.11）： 打开themes\\matery\\layout\\_partial中的footer.ejs，将本站总访问量和访客数的代码改为如下： <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %> <span id=\"busuanzi_container_site_pv\" style='display:none'></span> <i class=\"fa fa-heart-o\"></i> 本站总访问量 <span id=\"busuanzi_value_site_pv\" class=\"white-color\"></span> <% } %> <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %> <span id=\"busuanzi_container_site_uv\" style='display:none'></span> 人次, 访客数 <span id=\"busuanzi_value_site_uv\" class=\"white-color\"></span> 人. <% } %> 变化就在下面两句，将源代码对应字段后面的＜/span＞写在前面了。 <span id=\"busuanzi_container_site_pv\" style='display:none'></span> <span id=\"busuanzi_container_site_uv\" style='display:none'></span> 发现按照上面改了过后，又出现一个新bug：文章头部的阅读次数不显示了，解决办法：（2019.08.11）： 打开themes\\matery\\layout\\_partial中的post-detail.ejs，找到对应代码字段： <% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %> <div id=\"busuanzi_container_page_pv\" class=\"info-break-policy\"> <i class=\"fa fa-eye fa-fw\"></i><%- __('readCount') %>:   <span id=\"busuanzi_value_page_pv\" ></span> </div> <% } %> 修改为下面的就可以了： <% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %> <span id=\"busuanzi_container_site_pv\" style='display:none'></span> <i class=\"fa fa-eye fa-fw\"></i><%- __('readCount') %>:   <span id=\"busuanzi_value_page_pv\" ></span> <% } %> 2.8 添加评论插件 由于这个主题自带了gittalk、gitment、valine等评论插件，所以我们只需要对应插件参数就行了，这个博客用的是gittalk，如下： 当然也可以用其他评论插件，只需要配置对应项就是了，不是自带的可以照着网上的教程自己弄一个，类似的文章有很多，可以搜索关键字就行了。 2.9 添加网易云音乐BGM 写文章的时候，想插入一段BGM怎么办？ 其实我们可以借助一些在线音乐的外链播放方式，首先打开网易云网页版，找到想听的歌曲，然后点击生成外链： 可能你会遇到问题，比如点击生成外链会提示你由于版权原因，不能生成，那么可以用下面办法(目前还有效，不知道后面会不会失效) (以 Chrome为例，其他浏览器类似) 打开歌单页面，在“生成外链播放器”上右击，点击审查元素（检查）ctrl+shift+i； 接着找到生成外链播放器这段文字直接双击复制前面的/outchain/2/20707408/ 然后在浏览器地址栏修改歌单链接，示例：http://music.163.com/#//outchain/2/20707408/ 然后就转到外链设置页面了。 复制如下代码： 粘贴到文章对应位置就行了，为了美观，设置一下居中，具体代码如下： <div align=\"middle\">这里粘贴刚刚复制的代码</div> 2.10 博客音乐板块 如果我们自己写博客写疲劳了，想放松一下听听歌又不想切出博客主页，那么我们可以自己定制一个博客音乐播放界面，把自己喜欢的歌曲都放进来，这里用到是Aplayer插件，但是歌曲来源需要我们自己定义，但是，因为各大音乐平台，由于版权原因，很多歌曲是不支持外链播放的，难道我们就必须每首歌下载然后上传云空间，再获取词曲封面么？这就比较麻烦了。其实不然，研究了半个小时，我发现可以采取下面的办法，很方便： 首先我们找到网易云在线平台，任意找到一首歌点进去播放，可以在地址栏拿到音乐ID号 然后通过下面网址：http://music.163.com/song/media/outer/url?id=XXXXXX.mp3， XXXXXX就是歌曲ID号，每一首歌我们只需要换掉这个ID号就行了,就相当于每一首的外链了 最后封面图也可以按F12去找页面元素的链接，填到对应的musics.jason文件中就可以，批量填入，听到好听的歌曲随时更换随时新增，很方便。 操作如下图： 2.11 增加emoji支持 为博客新增对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：😄 :smile:）转变成会跳跃的emoji表情，安装命令如下： npm install hexo-filter-github-emojis --save 在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项： githubEmojis: enable: true className: github-emoji inject: true styles: customEmojis: 执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用emoji语法写的表情了。如下图： 2.12 Valine评论模块修改 matery主题已经集成Valine评论模块，在主题配置文件.yml中配置相应的字段就行了。enable: true，XXX字段是需要自己注册登录leancloud官网，创建应用然后获取appId和appKey，其他参数根据自己的需求修改就是，如下： valine: enable: true appId: XXXXXXXXXXXXXXXXXXXXX appKey: XXXXXXXXXXXXXXXXXXXX notify: true verify: true visitor: true avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide pageSize: 10 placeholder: 'just go go' # Comment Box placeholder 注意：Valine用在matery主题上有个bug就是第一条评论位置会错位 如下图： 解决办法：F12开发者模式，控制台定位bug位置，修改参数，调整对应主题源文件参数，得以解决，如下图示： 2.13 添加博客动态标签 原理就是给博客增加一个事件判断，如下图所示： 打开博客主题文件夹，路径：themes/matery/layout/layout.ejs，在对应位置添加如下代码： <script type=\"text/javascript\"> var OriginTitile = document.title, st; document.addEventListener(\"visibilitychange\", function () { document.hidden ? (document.title = \"看不见我🙈~看不见我🙈~\", clearTimeout(st)) : (document.title = \"(๑•̀ㅂ•́) ✧被发现了～\", st = setTimeout(function () { document.title = OriginTitile }, 3e3)) }) </script> 然后 hexo clean && hexo g 即可。 2.14 添加鼠标点击烟花爆炸效果 在 /themes/matery/source/js 新建文件 fireworks.js，并添加如下代码 Download Now 然后在 /themes/matery/layout/_partial/footer.ejs 中添加如下代码： <% if (theme.fireworks.enable) { %> <canvas class=\"fireworks\" style=\"position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;\" ></canvas> <script type=\"text/javascript\" src=\"//cdn.bootcss.com/animejs/2.2.0/anime.min.js\"></script> <script type=\"text/javascript\" src=\"/js/fireworks.js\"></script> <% } %> 在主题配置文件 .yml中配置: # 鼠标点击烟花爆炸动效 fireworks: enable: true 2.15 添加页面樱花飘落动效 在 /themes/matery/source/js 新建文件 sakura.js，并添加如下代码 Download Now 然后在 /themes/matery/layout/_partial/head.ejs 中添加如下代码： <% if (theme.sakura.enable) { %> <script type=\"text/javascript\"> //只在桌面版网页启用特效 var windowWidth = $(window).width(); if (windowWidth > 768) { document.write('<script type=\"text/javascript\" src=\"/js/sakura.js\"></script>'); } </script> <% } %> 在主题配置文件 .yml中配置: # 页面樱花飘落动效 sakura: enable: true 2.16 添加鼠标点击文字特效 在 /themes/matery/source/js 新建文件 wenzi.js，并添加如下代码 Download Now 然后在 /themes/matery/layout/_partial/head.ejs 中添加如下代码： <% if (theme.wenzi.enable) { %> <script type=\"text/javascript\"> //只在桌面版网页启用特效 var windowWidth = $(window).width(); if (windowWidth > 768) { document.write('<script type=\"text/javascript\" src=\"/js/wenzi.js\"></script>'); } </script> <% } %> 在主题配置文件 .yml中配置: # 页面樱花飘落动效 wenzi: enable: true 2.17 添加页面雪花飘落动效 在 /themes/matery/source/js 新建文件 xuehuapiaoluo.js，并添加如下代码 Download Now 然后在 /themes/matery/layout/_partial/head.ejs 中添加如下代码： <% if (theme.xuehuapiaoluo.enable) { %> <script type=\"text/javascript\"> //只在桌面版网页启用特效 var windowWidth = $(window).width(); if (windowWidth > 768) { document.write('<script type=\"text/javascript\" src=\"/js/xuehuapiaoluo.js\"></script>'); } </script> <% } %> 在主题配置文件 .yml中配置: # 页面樱花飘落动效 xuehuapiaoluo: enable: true 2.18 添加博客天气插件 在搜寻插件的过程中无意间用 google 搜到的一个网站，使用非常简单，在这里附上插件添加的方法 中国天气网：https://cj.weather.com.cn/plugin/pc 选择自定义插件—>自定义样式——>生成代码，然后会生成这样一段代码 <!-- Weather Widget --> <script type=\"text/javascript\"> WIDGET = {FID: 'your FID'}</script> <script type=\"text/javascript\" src=\"https://apip.weatherdt.com/float/static/js/r.js?v=1111\"></script> 在 /themes/matery/source/layout/_widget 新建文件 weather.ejs，把上面生成的代码添加进入,可以设置只有桌面端显示,如下修改: <!-- 天气接口 洪卫 shw2018 add 2019.09.09 --> <script type=\"text/javascript\"> WIDGET = {FID: '1tFpFZ5Mtj'} </script> <!-- <script type=\"text/javascript\" src=\"https://apip.weatherdt.com/float/static/js/r.js?v=1111\"></script> --> <script type=\"text/javascript\"> //只在桌面版网页启用特效 var windowWidth = $(window).width(); if (windowWidth > 768) { document.write('<script type=\"text/javascript\" src=\"https://apip.weatherdt.com/float/static/js/r.js?v=1111\"><\\/script>'); } </script> 然后在 /themes/matery/layout/_partial/layout.ejs 中添加如下代码： <!-- 天气接口控件 洪卫 shw2018 add 2019.09.09 --> <% if (theme.weather.enable) { %> <%- partial('_widget/weather') %> <% } %> 在主题配置文件 .yml中配置: # 天气接口插件 weather: enable: true 展示效果可以参考我的主页 当然,如果你不想搞这么复杂,可以直接将下面代码插入 /themes/matery/layout/_partial/layout.ejs 中即可使用: <script type=\"text/javascript\"> WIDGET = {FID: '1tFpFZ5Mtj'} </script> <script type=\"text/javascript\" src=\"https://apip.weatherdt.com/float/static/js/r.js?v=1111\"></script> 2.19 修复 Valine 头像不显示问题关于头像显示问题，先去注册Gravatar，之前看文档说是七天的同步时间，结果一直也没有显示头像，检查查看头像链接，发现把&v=1.3.x 去掉就可以了，于是下载 js 文件 valine，下载后然后编辑，搜索关键字 &v=，找到 g.params=”?d=”+(i.indexOf(a)>-1?a:”mp”)+”&v=”+o+d，将 \"&v=\"+o+d 删除即可，然后在 Gravatar 拿到头像的 url 填上去就行了 valine: enable: true appId: appKey: notify: true verify: true visitor: true # avatar: 'mp' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide avatar: https://s.gravatar.com/avatar/0007991f99268c04f1aa4cdd9bea93b4?s=80 pageSize: 10 placeholder: '没有Github账号的在这里留言评论～' # Comment Box placeholder 原因就是链接后跟了个 &v=1.3.x，解决就是将这段删掉就可以了，具体到 Valine.mini.js 文件就是删掉 &v=\"+o+d即可 2.20 增加二级菜单都知道，我们标题栏宽度有限，我们项目一多了，就放不下了，这时候你肯定就需要一个二级菜单来拆分一下项目，既可以减少标题栏项目数，使之更加清爽，又可以间项目分类，逻辑清晰。 好了，如果你用的matery主题，那么废话不多说，直接上教程，其实需要修改的就四个地方：matery.css/matery.js/navgation.ejs/mobile-nav.ejs 第一步，在 /themes/matery/layout/_partial 中找到 mobile-nav.ejs ，找到下面这段代码： <ul class=\"menu-list mobile-menu-list\"> <% Object.keys(theme.menu).forEach(function(key) { %> <li> <a href=\"<%- theme.menu[key].url %>\" class=\"waves-effect waves-light\"> <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %> <i class=\"fa fa-fw <%- theme.menu[key].icon %>\"></i> <% } else { %> <i class=\"fa fa-fw fa-link\"></i> <% } %> <%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %> </a> </li> <% }); %> <% if (theme.githubLink && theme.githubLink.enable) { %> <li><div class=\"divider\"></div></li> <li> <a href=\"<%- theme.githubLink.url %>\" class=\"waves-effect waves-light\" target=\"_blank\"> <i class=\"fa fa-github-square fa-fw\"></i><%- theme.githubLink.title %> </a> </li> <% } %> </ul> 替换成下面的： <!-- 支持二级菜单特性 洪卫 shw2018 modify 2019.09.17 --> <ul class=\"menu-list mobile-menu-list\"> <% Object.keys(theme.menu).forEach(function(key) { %> <li class=\"m-nav-item\"> <% if(!theme.menu[key].children) { %> <a href=\"<%- theme.menu[key].url %>\" class=\"waves-effect waves-light\"> <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %> <i class=\"fa fa-fw <%- theme.menu[key].icon %>\"></i> <% } else { %> <i class=\"fa fa-fw fa-link\"></i> <% } %> <%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %> </a> <% } else { %> <a href=\"javascript:;\"> <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %> <i class=\"fa fa-fw <%- theme.menu[key].icon %>\"></i> <% } else { %> <i class=\"fa fa-fw fa-link\"></i> <% } %> <%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %> <span class=\"m-icon\"><i class=\"fa fa-chevron-right\"></i></span> </a> <ul> <% for(let childrenLink of theme.menu[key].children){ %> <li> <a href=\"<%- url_for(childrenLink.url)%>\" > <% if (childrenLink.icon && childrenLink.icon.length > 0) { %> <i class=\"fa <%- childrenLink.icon %>\" style=\"left: 25px; position: absolute;\"></i> <% } %> <span><%- childrenLink.name %></span> </a> </li> <% } %> </ul> <% } %> </li> <% }); %> <% if (theme.githubLink && theme.githubLink.enable) { %> <li><div class=\"divider\"></div></li> <li> <a href=\"<%- theme.githubLink.url %>\" class=\"waves-effect waves-light\" target=\"_blank\"> <i class=\"fa fa-github-square fa-fw\"></i><%- theme.githubLink.title %> </a> </li> <% } %> </ul> 第二步，在 /themes/matery/layout/_partial 中找到 navagtion.ejs ，找到下面这段代码： <a href=\"#\" data-target=\"mobile-nav\" class=\"sidenav-trigger button-collapse\"><i class=\"fa fa-navicon\"></i></a> <ul class=\"right\"> <% Object.keys(theme.menu).forEach(function(key) { %> <li class=\"hide-on-med-and-down\"> <a href=\"<%- theme.menu[key].url %>\" class=\"waves-effect waves-light\"> <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %> <i class=\"fa <%- theme.menu[key].icon %>\"></i> <% } %> <span><%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %></span> </a> </li> <% }); %> <li> <a href=\"#searchModal\" class=\"modal-trigger waves-effect waves-light\"> <i id=\"searchIcon\" class=\"fa fa-search\" title=\"<%= __('search') %>\"></i> </a> </li> </ul> 替换成下面的： <!-- 支持二级菜单特性 洪卫 shw2018 modify 2019.09.17 --> <a href=\"#\" data-target=\"mobile-nav\" class=\"sidenav-trigger button-collapse\"><i class=\"fa fa-navicon\"></i></a> <ul class=\"right nav-menu\"> <% Object.keys(theme.menu).forEach(function(key) { %> <li class=\"hide-on-med-and-down nav-item\" > <% if(!theme.menu[key].children) { %> <a href=\"<%- theme.menu[key].url %>\" class=\"waves-effect waves-light\"> <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %> <i class=\"fa <%- theme.menu[key].icon %>\"></i> <% } %> <span><%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %></span> </a> <% } else { %> <a href=\"<%- theme.menu[key].url %>\" class=\"waves-effect waves-light\"> <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %> <i class=\"fa <%- theme.menu[key].icon %>\"></i> <% } %> <span><%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %></span> <i class=\"fa fa-chevron-down\" aria-hidden=\"true\"></i> </a> <ul class=\"sub-nav menus_item_child \"> <% for(let childrenLink of theme.menu[key].children){ %> <li> <a href=\"<%- url_for(childrenLink.url)%>\" > <% if (childrenLink.icon && childrenLink.icon.length > 0) { %> <i class=\"fa <%- childrenLink.icon %>\" style=\"margin-top: -20px;\"></i> <% } %> <span><%- childrenLink.name %></span> </a> </li> <% } %> </ul> <% } %> </li> <% }); %> <li> <a href=\"#searchModal\" class=\"modal-trigger waves-effect waves-light\"> <i id=\"searchIcon\" class=\"fa fa-search\" title=\"<%= __('search') %>\"></i> </a> </li> </ul> 第三步，在 /themes/matery/source/css 中找到 matery.css ，在最后添加下面这段代码： /* 二级菜单样式定义 洪卫 shw2018 add 2019.09.17 */ .nav-menu {} .nav-menu li .sub-nav { position: absolute; top: 77px; list-style: none; margin-left: -20px; display: none; } .nav-menu li .sub-nav li { text-align: center; clear: left; width: 140px; height: 35px; line-height: 35px; position: relative; } .nav-menu li .sub-nav li a { height: 34px; line-height: 34px; width: 138px; padding: 0px; display: inline-block; border-radius: 5px; color: #000; } .nav-show i[aria-hidden=true] { -webkit-transform: rotate(180deg) !important; -moz-transform: rotate(180deg) !important; -o-transform: rotate(180deg) !important; -ms-transform: rotate(180deg) !important; transform: rotate(180deg) !important; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } .menus_item_child { background-color: rgba(255, 255, 255, .8); width: fit-content; border-radius: 10px; -webkit-box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5); box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5); display: none; opacity: 0.98; -ms-filter: none; filter: none; -webkit-animation: sub_menus .3s .1s ease both; -moz-animation: sub_menus .3s .1s ease both; -o-animation: sub_menus .3s .1s ease both; -ms-animation: sub_menus .3s .1s ease both; animation: sub_menus .3s .1s ease both; } .menus_item_child:before { content: \"\"; position: absolute; top: -20px; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: transparent transparent rgba(255, 255, 255, .8) } .m-nav-item { /* position: relative; */ left: 45px } .m-nav-item ul { display: none; background: rgba(255, 255, 255, .1); } .m-nav-item ul li { width: 245px; height: 50px; line-height: 50px; text-align: center; } .m-nav-show .m-icon { -webkit-transform: rotate(90deg) !important; -moz-transform: rotate(90deg) !important; -o-transform: rotate(90deg) !important; -ms-transform: rotate(90deg) !important; transform: rotate(90deg) !important; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } .m-nav-show .m-nav-item>a:hover { color: #FFF; background: rgba(255, 255, 255, .8); } .m-nav-show>a:before, .m-nav-item>a:hover:before { opacity: 1; } .m-nav-item .m-icon { position: absolute; right: 65px; height: 50px; padding: 0px; margin: 0px; } .nav-item li:hover a { color: #FFF; background: rgba(0, 0, 0, .1); } 第四步，在 /themes/matery/source/js 中找到 matery.js ，在最后一个 });前添加下面这段代码： // 增加二级菜单功能 洪卫 shw2018 add 2019.09.17 $(\".nav-menu>li\").hover(function(){ $(this).children('ul').stop(true,true).show(); $(this).addClass('nav-show').siblings('li').removeClass('nav-show'); },function(){ $(this).children('ul').stop(true,true).hide(); $('.nav-item.nav-show').removeClass('nav-show'); }) $('.m-nav-item>a').on('click',function(){ if ($(this).next('ul').css('display') == \"none\") { $('.m-nav-item').children('ul').slideUp(300); $(this).next('ul').slideDown(300); $(this).parent('li').addClass('m-nav-show').siblings('li').removeClass('m-nav-show'); }else{ $(this).next('ul').slideUp(300); $('.m-nav-item.m-nav-show').removeClass('m-nav-show'); } }); 第五步，在主题配置文件.yml修改标题栏内容，按下面格式更改: 标题一级: url: /XXX icon: fa-XXXX children: - name: 标题二级1 url: /XXX/XXX icon: fa-XXXX - name: 标题二级2 url: /XXX/XXX icon: fa-XXXX 第六步，source 文件夹新疆对应的标题目录，并放 index.md 模板就行了。 到这一步就大功告成了，快去体验吧。 第三部分 优化 hexo添加各种优化功能，比如SEO优化等。待续…… 1. 网站SEO优化 网站推广是一个比较烦人的事情，特别是对于专心搞技术的来说，可能就不是很擅长，那么怎么才能让别人知道我们网站呢？也就是说我们需要想办法让别人通过搜索就可以搜索到博客的内容，给我们带来自然流量，这就需要seo优化,让我们的站点变得对搜索引擎友好 SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。 1.1 让百度收录你的站点 首先要做的就是让各大搜索引擎收录你的站点，我们在刚建站的时候各个搜索引擎是没有收录我们网站的，在搜索引擎中输入site:<域名>,如果如下图所示就是说明我们的网站并没有被百度收录。我们可以直接点击下面的“网址提交”来提交我们的网站 1.1.1 验证网站所有权 登录百度站长搜索资源平台：http://zhanzhang.baidu.com， 只要有百度旗下的账号就可以登录，登录成功之后在站点管理中点击添加网站然后输入你的站点地址。 注意，这里需要输入我们自己购买的域名,不能使用xxx.github.io之类域名.因为github是不允许百度的spider（蜘蛛）爬取github上的内容的，所以如果想让你的站点被百度收录，只能使用自己购买的域名 在填完网址选择完网站的类型之后需要验证网站的所有权，验证网站所有权的方式有三种： 文件验证。 html标签验证 CNAME解析验证（推荐使用） 其实使用哪一种方式都可以，都是比较简单的。 但是一定要注意，使用文件验证文件存放的位置需要放在sourc文件夹下，如果是html文件那么hexo就会将其编译，所以必须要在html头部加上的layout:false，这样就不会被hexo编译。（如果验证文件是txt格式的就不需要） 其他两种方式也是很简单的，个人推荐文件验证和CNAME验证，CNAME验证最为简单，只需加一条解析就好~ 1.1.2 生成网站地图 我们需要使用npm自动生成网站的sitemap，然后将生成的sitemap提交到百度和其他搜索引擎 1.1.2.1 安装sitemap插件 npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save 1.1.2.2 修改博客配置文件 在根目录配置文件.yml中修改url为你的站点地址 # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' # url: https://shw2018.github.io/ url: https://sunhwee.com root: / permalink: :year/:month/:day/:title/ permalink_defaults: 执行完hexo g命令之后就会在网站根目录生成sitemap.xml文件和baidusitemap.xml文件，可以通过：https://sunhwee.com/baidusitemap.xml, 查看该文件是否生成，其中sitemap.xml文件是搜索引擎通用的文件，baidusitemap.xml是百度专用的sitemap文件。 1.1.3 向百度提交链接 然后我们就可以将我们生成的sitemap文件提交给百度，还是在百度站长平台，找到链接提交，这里我们可以看到有两种提交方式，自动提交和手动提交，自动提交又分为主动推送、自动推送和sitemap 如何选择链接提交方式 主动推送：最为快速的提交方式，推荐您将站点当天新产出链接立即通过此方式推送给百度，以保证新链接可以及时被百度收录。 自动推送：最为便捷的提交方式，请将自动推送的JS代码部署在站点的每一个页面源代码中，部署代码的页面在每次被浏览时，链接会被自动推送给百度。可以与主动推送配合使用。 sitemap：您可以定期将网站链接放到sitemap中，然后将sitemap提交给百度。百度会周期性的抓取检查您提交的sitemap，对其中的链接进行处理，但收录速度慢于主动推送。 手动提交：一次性提交链接给百度，可以使用此种方式。 一般主动提交比手动提交效果好，这里介绍主动提交的三种方法 从效率上来说： 主动推送>自动推送>sitemap 1.1.3.1 设置主动推送 安装插件hexo-baidu-url-submit npm install hexo-baidu-url-submit --save 然后再根目录的配置文件中新增字段 baidu_url_submit: count: 80 # 提交最新的一个链接 host: www.sunhwee.com # 在百度站长平台中注册的域名 token: xxxxxxxxxxxxxx # 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里! path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里 再加入新的deploy： deploy: - type: baidu_url_submitter 如图所示： *注意,**这里多个 type 的写法应该这么写\\*,前面那个 type 是我推送到 Github 与 Coding的page页面的配置,后面再讲这个。 密钥的获取位置在网页抓取中的链接提交这一块,如下所示: 这样执行hexo deploy的时候，新的链接就会被推送了。 推送成功时,会有如下终端提示 各种不同的推送反馈字段说明在这里查看,一般来说,推送失败基本都是地址不相符造成的,我们只需对比baidu_url_submit在public中生成的baidu_urls.txt的地址,与自己填写在host字段中的地址对比看是否一样即可。 1.1.3.2 设置自动推送 在主题配置文件下设置,将baidu_push设置为true: # Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO baidu_push: true 然后主题文件目录加入下面代码，一般在目录/themes/matery/layout/_partial中的head.ejs中加入下面JS代码（有可能你的目录不是这样，原理类似），这样全站都有了： <% if (theme.baidu_push) { %> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName(\"script\")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <% } %> 这样每次访问博客中的页面就会自动向百度提交sitemap 1.1.3.3 sitemap方式 将我们上一步生成的sitemap文件提交到百度就可以了~我记得被百度收录过程还是蛮久的，一度让我以为我的方法有问题，提交链接在站长工具中有显示大概是有两天的时候，站点被百度收录大概花了半个月= =，让大家看一下现在的成果在百度搜索site:sunhwee.com已经可以搜索到结果在搜索框输入域名也可以找到站点输入关键字的名字也可以在第二页就找到呢，好开森~ 1.2 让google收录你的站点 1.2.1 操作步骤相比于百度，google的效率实在不能更快，貌似十分钟左右站点就被收录了，其实方法是和百度是一样的。 google站点平台：https://www.google.com/webmasters/ 注册账号 验证站点 提交sitemap 向 google 添加 sitemap 后: 进入 Google Search Console - 抓取 - 站点地图,点击「添加/测试站点地图」,输入你的博客网址. 若无报错则站点地图提交成功 一步一步来就好，过不了过久就可以被google收录了 1.2.2 提交 robots.txt:robots.txt 是一种存放于网站根目录下的 ASCII 编码的文本文件，它的作用是告诉搜索引擎此网站中哪些内容是可以被爬取的，哪些是禁止爬取的。robots.txt 放在博客目录下的 source 文件夹中，博客生成后在站点目录 /public/ 下。 我的 robots.txt 文件内容如下： User-agent: * Allow: / Allow: /archives/ Allow: /categories/ Allow: /about/ Disallow: /js/ Disallow: /css/ Disallow: /fonts/ Disallow: /vendors/ robots.txt 文件更新至网站后可进入 Google Search Console - 抓取 - robots.txt 测试工具进行测试。 这里部分参考自Hexo博客搜索 SEO优化-谷歌篇 1.3 让其他搜索引擎收录你的站点 除了百度和google两大搜索引擎，还有搜狗、360等其他的搜索引擎，流程都是一样的，大家就自行选择添加哈，这里就不再赘述了~ 1.4 优化你的url seo搜索引擎优化认为，网站的最佳结构是用户从首页点击三次就可以到达任何一个页面，但是我们使用hexo编译的站点打开文章的url是：sitename/year/mounth/day/title四层的结构，这样的url结构很不利于seo，爬虫就会经常爬不到我们的文章，于是，我们需要优化一下网站文章url 方案一： 我们可以将url直接改成sitename/title的形式，并且title最好是用英文，在根目录的配置文件下修改permalink如下： url: https://sunhwee.com root: / permalink: :title.html permalink_defaults: 方案二： 使用插件优化url 插件hexo-abbrlink实现了这个功能，它将原来的URL地址重新进行了进制转换和再编码。 安装hexo-abbrlink。 npm install hexo-abbrlink --save 配置博客根目录下的_config.yml文件。 # permalink: :title/ permalink: archives/:abbrlink.html abbrlink: alg: crc32 # 算法：crc16(default) and crc32 rep: hex # 进制：dec(default) and hex 运行hexo clean和hexo g命令来重新生成文件看看，可以清楚的看到，URL结构成功变为了3层。 1.5 其他seo优化 seo优化应该说是一个收益延迟的行为，可能你做的优化短期内看不到什么效果，但是一定要坚持，seo优化也是有很深的可以研究的东西，从我们最初的网站设计，和最基础的标签的选择都有很大的关系，网站设计就如我们刚刚说的，要让用户点击三次可以到达网站的任何一个页面，要增加高质量的外链，增加相关推荐（比如说我们经常见到右侧本站的最高阅读的排名列表），然后就是给每一个页面加上keyword和描述 在代码中，我们应该写出能让浏览器识别的语义化HTML，这样有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；并且对外链设置nofollow标签，避免spider爬着爬着就爬出去了（减少网站的跳出率），并且我们要尽量在一些比较大的网站增加我们站点的曝光率，因为spider会经常访问大站，比如我们在掘金等技术社区发表文章中带有我们的站点，这样spider是很有可能爬到我们中的站点的，so…. 网站外链的推广度、数量和质量 网站的内链足够强大 网站的原创质量 网站的年龄时间 网站的更新频率（更新次数越多越好） 网站的服务器 网站的流量：流量越高网站的权重越高 网站的关键词排名：关键词排名越靠前，网站的权重越高 网站的收录数量：网站百度收录数量越多，网站百度权重越高 网站的浏览量及深度：用户体验越好，网站的百度权重越高 2. 优化代码块样式 由于代码高亮插件prism_plugin的样式没有行号显示和代码块整体复制功能，不是很方便，为了优化观感和易用性，我们可以对其进行修改：待续…… 2.1 给代码块开启行号 我们在配置文件.yml中找到prism_plugin配置项line_number: false（# default false）改为true，开启行号，但是在我们这个matery主题中中是无效的，有bug需要改一下matery.css样式参数,在第95行位置将： pre { padding: 1.5rem !important; margin: 1rem 0 !important; background: #272822; overflow: auto; border-radius: 0.35rem; tab-size: 4; } 改为： pre { padding: 1.5rem 1.5rem 1.5rem 3.3rem !important; margin: 1rem 0 !important; background: #272822; overflow: auto; border-radius: 0.35rem; tab-size: 4; } 注释掉紧接着的code代码块里面的font-size项，如下： code { padding: 1px 5px; font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace; /*font-size: 0.91rem;*/ color: #e96900; background-color: #f8f8f8; border-radius: 2px; } 好了这下可以显示行号了，如图： 2.2 添加代码块复制功能 3. 优化网站加载速度 3.1 优化图片加载 issue问题：优化网站加载逻辑问题：图片最后加载，加入图片懒加载方法 hexo-lazyload-image的作用原理是讲你博客里面img标签的src属性替换为一个loading image，把真实的图片地址放在data-origin属性下面。然后当你的网页翻到那张图片时（也就是图片在窗口中完全可见时），他会有一段js用data-origin的内容替换src，打到懒加载的目的。 一般情况下懒加载和gallery插件会发生冲突，比如按照我上面所说，最终结果就会变成，可能只有第一张图片在gallery中打开是原图，右翻左翻都会是那张loading image，需要你掌握js，可以修改matery.js里面的内容，甚至可能换一个gallery，比如photosiwpe之类的 解决方法：修改/themes/matery/source/js中的matery.js文件 第103行： $('#articleContent, #myGallery').lightGallery({ selector: '.img-item', // 启用字幕 subHtmlSelectorRelative: true, showThumbByDefault: false //这句加上 }); 后面加上： $(document).find('img[data-original]').each(function(){ $(this).parent().attr(\"href\", $(this).attr(\"data-original\")); }); 再装个插件，https://github.com/Troy-Yang/hexo-lazyload-image在博客根目录配置.yml文件加入对应字段，如下： # lazyload configuration 2019.08.23 lazyload: enable: true onlypost: false loadingImg: # eg ./images/loading.gif 好了，这样实现了博客网站的图片懒加载。 3.2 Gulp实现代码压缩 Gulp实现代码压缩，以提升网页加载速度。 1 首先我们需要安装Gulp插件和5个功能模块，依次运行下面的两条命令。 npm install gulp --save #安装gulp # 安装功能模块 npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save # 额外的功能模块 npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del --save 2 接下来在博客的根目录下新建gulpfile.js文件，并复制下面的内容到文件中。 var gulp = require(\"gulp\"); var debug = require(\"gulp-debug\"); var cleancss = require(\"gulp-clean-css\"); //css压缩组件 var uglify = require(\"gulp-uglify\"); //js压缩组件 var htmlmin = require(\"gulp-htmlmin\"); //html压缩组件 var htmlclean = require(\"gulp-htmlclean\"); //html清理组件 var imagemin = require(\"gulp-imagemin\"); //图片压缩组件 var changed = require(\"gulp-changed\"); //文件更改校验组件 var gulpif = require(\"gulp-if\"); //任务 帮助调用组件 var plumber = require(\"gulp-plumber\"); //容错组件（发生错误不跳出任务，并报出错误内容） var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件) var isDebug = true; //是否调试显示 编译通过的文件 var gulpBabel = require(\"gulp-babel\"); var es2015Preset = require(\"babel-preset-es2015\"); var del = require(\"del\"); var Hexo = require(\"hexo\"); var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象 // 清除public文件夹 gulp.task(\"clean\", function() { return del([\"public/**/*\"]); }); // 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return // 创建静态页面 （等同 hexo generate） gulp.task(\"generate\", function() { return hexo.init().then(function() { return hexo .call(\"generate\", { watch: false }) .then(function() { return hexo.exit(); }) .catch(function(err) { return hexo.exit(err); }); }); }); // 启动Hexo服务器 gulp.task(\"server\", function() { return hexo .init() .then(function() { return hexo.call(\"server\", {}); }) .catch(function(err) { console.log(err); }); }); // 部署到服务器 gulp.task(\"deploy\", function() { return hexo.init().then(function() { return hexo .call(\"deploy\", { watch: false }) .then(function() { return hexo.exit(); }) .catch(function(err) { return hexo.exit(err); }); }); }); // 压缩public目录下的js文件 gulp.task(\"compressJs\", function() { return gulp .src([\"./public/**/*.js\", \"!./public/libs/**\"]) //排除的js .pipe(gulpif(!isScriptAll, changed(\"./public\"))) .pipe(gulpif(isDebug, debug({ title: \"Compress JS:\" }))) .pipe(plumber()) .pipe( gulpBabel({ presets: [es2015Preset] // es5检查机制 }) ) .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩 .pipe(gulp.dest(\"./public\")); //输出到目标目录 }); // 压缩public目录下的css文件 gulp.task(\"compressCss\", function() { var option = { rebase: false, //advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）] compatibility: \"ie7\" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式] //keepBreaks: true, //类型：Boolean 默认：false [是否保留换行] //keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀 }; return gulp .src([\"./public/**/*.css\", \"!./public/**/*.min.css\"]) //排除的css .pipe(gulpif(!isScriptAll, changed(\"./public\"))) .pipe(gulpif(isDebug, debug({ title: \"Compress CSS:\" }))) .pipe(plumber()) .pipe(cleancss(option)) .pipe(gulp.dest(\"./public\")); }); // 压缩public目录下的html文件 gulp.task(\"compressHtml\", function() { var cleanOptions = { protect: /<\\!--%fooTemplate\\b.*?%-->/g, //忽略处理 unprotect: /<script [^>]*\\btype=\"text\\/x-handlebars-template\"[\\s\\S]+?<\\/script>/gi //特殊处理 }; var minOption = { collapseWhitespace: true, //压缩HTML collapseBooleanAttributes: true, //省略布尔属性的值 <input checked=\"true\"/> ==> <input /> removeEmptyAttributes: true, //删除所有空格作属性值 <input id=\"\" /> ==> <input /> removeScriptTypeAttributes: true, //删除<script>的type=\"text/javascript\" removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type=\"text/css\" removeComments: true, //清除HTML注释 minifyJS: true, //压缩页面JS minifyCSS: true, //压缩页面CSS minifyURLs: true //替换页面URL }; return gulp .src(\"./public/**/*.html\") .pipe(gulpif(isDebug, debug({ title: \"Compress HTML:\" }))) .pipe(plumber()) .pipe(htmlclean(cleanOptions)) .pipe(htmlmin(minOption)) .pipe(gulp.dest(\"./public\")); }); // 压缩 public/uploads 目录内图片 gulp.task(\"compressImage\", function() { var option = { optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级） progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染 multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化 }; return gulp .src(\"./public/medias/**/*.*\") .pipe(gulpif(!isScriptAll, changed(\"./public/medias\"))) .pipe(gulpif(isDebug, debug({ title: \"Compress Images:\" }))) .pipe(plumber()) .pipe(imagemin(option)) .pipe(gulp.dest(\"./public\")); }); // 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器 gulp.task( \"build\", gulp.series( \"clean\", \"generate\", \"compressHtml\", \"compressCss\", \"compressJs\", \"compressImage\", gulp.parallel(\"deploy\") ) ); // 默认任务 gulp.task( \"default\", gulp.series( \"clean\", \"generate\", gulp.parallel(\"compressHtml\", \"compressCss\", \"compressImage\", \"compressJs\") ) ); //Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数 3 最后 hexo clean && hexo g && gulp && hexo d 就可以了。 注意，很可能你会运行到第三步，也就是运行gulp压缩命令时会报错，如图所示： 那是因为gulp安装的本地版本和hexo自带的版本不对应导致，第三步gulp压缩可以用下面命令强制使用本地版本： node ./node_modules/gulp/bin/gulp.js 3.3 Github & Coding Pages 双部署 Github & Coding Pages 双部署,对国内,国外用户进行分流访问,以提升网站的访问速度.Github Pages 的部署前面已经说了,这里就讲一讲 Coding Pages 如何部署.其实与 Github Pages 也类似,先到coding官网注册,创建一个与用户名同名的仓库,添加仓库地址到配置文件中,在根目录_config.yml对应地方添加如下: # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: - type: git repo: github: https://github.com/shw2018/shw2018.github.io.git # github 仓库地址 coding: https://git.dev.tencent.com/sunhwee/sunhwee.git # coding 仓库地址 branch: master - type: baidu_url_submitter 把本地生成 SSH 公匙添加到 Coding 这一步看我前面的教程,原理类似. 然后 hexo clean && hexo g && hexo d 部署上去就是了． 当然，部署上去后，你需要开启 page 服务. 你可以在 pages 设置里面自定义域名，区域名解析控制台，添加两条 CNAME 记录，将域名指向RepoName.coding.me就可以的，申请 ssl 证书，强制开启https 可能遇到的问题: ［coding pages 申请ssl 证书总是提示：错误！］这里提一句，如果你是github pages 和 coding pages双部署，用同一个域名的话，可以将xxx.github.io 解析成 境外, xxx.coding.me 解析成 默认,这个时候如果你之前就申请过 ssl 证书的话，再在 coding 里面申请 ssl证书会一直提示 失败,解决办法： 先去域名解析控制台，将境外解析的两条 CNAME 记录 暂停,过个五六分钟，回到 coding 点击申请 ssl,很快就会提示，申请成功！ 刚好我过程中遇到了这个问题，所以把它记下来，方便后面的小伙伴看到． 3. 一些注意事项 3.1 备份博客源文件 有时候我们想换一台电脑继续写博客，最简单的方法就是把博客整个目录拷贝过去，就是这么暴力。不过，这种方法有个问题就是要是那天电脑崩了，本地源文件丢失了，比较麻烦，所以这时候就可以将博客目录下的所有源文件都上传到github上面。 首先在github博客仓库下新建一个分支hexo，然后git clone到本地，把.git文件夹拿出来，放在博客根目录下。 然后git branch -b hexo切换到hexo分支，然后git add .，然后git commit -m \"xxx\"，最后git push origin hexo提交就行了。 具体效果可以看我的博客源文件仓库：传送门。 大家也可以先用下文hexo安装方法安装完hexo，然后直接git clone -b hexo https://github.com/shw2018/shw2018.github.io.git克隆我的所有源文件，这是我目前修改完的基本没bug的定制化的博客，可以直接拿来用。 持续更新中…，如果遇到问题欢迎联系我，在文章最后评论区【留言和讨论】，当然，欢迎点击文章最后的打赏按键，请博主一杯冰阔乐，笑～ 参考： Blinkfox godweiyang","categories":[{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客搭建","slug":"博客搭建","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/"},{"name":"Matery","slug":"Matery","permalink":"https://19492035.xyz/tags/Matery/"}],"author":"jacktang"},{"title":"元宇宙赋能教育产业主题沙龙报告","slug":"yuanyuzhou","date":"2024-04-08T13:53:27.876Z","updated":"2024-04-09T05:37:43.725Z","comments":true,"path":"posts/18d197ad.html","link":"","permalink":"https://19492035.xyz/posts/18d197ad.html","excerpt":"","text":"元宇宙赋能教育产业主题沙龙报告(内部学习使用) 报告一人工智能时代增强现实(AR)赋能虚拟仿真教学 报告二ChatGPT:高等教音求变创新的机遇和挑战 报告三元宇宙数字内容智能生成与交互 报告四Web3.0推动职业教育新生态 报告五解决方案：AI多数字人元宇宙平台","categories":[{"name":"学术篇","slug":"学术篇","permalink":"https://19492035.xyz/categories/%E5%AD%A6%E6%9C%AF%E7%AF%87/"}],"tags":[{"name":"学术","slug":"学术","permalink":"https://19492035.xyz/tags/%E5%AD%A6%E6%9C%AF/"},{"name":"讲座","slug":"讲座","permalink":"https://19492035.xyz/tags/%E8%AE%B2%E5%BA%A7/"},{"name":"元宇宙","slug":"元宇宙","permalink":"https://19492035.xyz/tags/%E5%85%83%E5%AE%87%E5%AE%99/"}],"author":"jacktang"},{"title":"如何给hexo博客文章加密和实现【matery主题】弹出欢迎弹窗","slug":"how hexo jiami","date":"2024-04-07T02:49:52.000Z","updated":"2024-04-13T08:13:26.270Z","comments":true,"path":"posts/e1554a4.html","link":"","permalink":"https://19492035.xyz/posts/e1554a4.html","excerpt":"","text":"前言介绍一种给博客文章加密的方法，很多时候当我们写了一篇博客，但并不想所有人能够访问它。所以得设置密码。也有时候需要弹窗提醒用户。对于WordPress这很容易做到，但是对于hexo，由于是静态网页，并不能做到完全的加密。 0x001 安装npm install --save hexo-blog-encrypt 或者 yarn add hexo-blog-encrypt (require Yarn) 找到根目录下的_config.yml文件，添加如下: # Security encrypt: enable: true 在博客开头写上密码 password: message: 输入密码访问 参考资料 0x002 弹窗功能实现1.下载sweetalert2.all.min.js我们需要将sweetalert.js和sweetalert.css放到自己博客下，防止CDN炸裂导致的错误。(这2个文件用CTRL+S保存吧) sweetalert.js放在博客根目录\\themes\\matery\\source\\js sweetalert.css放在博客根目录\\themes\\matery\\source\\css 2.引入到主题中打开主题配置文件，在\\themes\\matery\\layout\\layout.ejs中写入 <head> <script type=\"text/javascript\" src =\"/js/welcome.js\" ></script> <script src=\"/js/sweetalert.js\"></script> <link rel=\"stylesheet\" href=\"/css/sweetalert.css\"> </head> 3.自动弹窗欢迎设置 (例子)创建welcome.js放在博客根目录\\themes\\matery\\source\\js function welcome(){ let welcome_text = '欢迎光顾本网站~' if(document.referrer!==''){ let referrer=document.referrer.split(\"/\")[2]; welcome_text=\"欢迎你，来自\"+referrer.toUpperCase()+\"的用户！\"; if(referrer.toUpperCase()==document.domain.toUpperCase())return; } swal({ title: \" 欢迎！\", text: welcome_text+'\\n打开页面下方音乐以获得更佳体验！', imageUrl: \"/img/avatar.jpg\", timer: 3000, showConfirmButton: false }); } $(document).ready(()=>{ welcome() }) 这样，就大功告成了。参考【Butterfly主题】弹出欢迎弹窗 其他主题原理类似，欢迎交流讨论!!!","categories":[{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客加密","slug":"博客加密","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E5%8A%A0%E5%AF%86/"},{"name":"博客弹窗","slug":"博客弹窗","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E5%BC%B9%E7%AA%97/"}],"author":"jacktang"},{"title":"解决不算子统计失效问题","slug":"busuanzi","date":"2024-04-06T12:41:33.000Z","updated":"2024-05-05T14:25:24.577Z","comments":true,"path":"posts/86a643d.html","link":"","permalink":"https://19492035.xyz/posts/86a643d.html","excerpt":"","text":"失效原因分析看了下官网感觉许久没更新了 解决办法找到一个开源的方法，但是忘保存地址了，找到的朋友麻烦通知我下，感谢！ 过程：找到主题配置文件themes\\matery\\_config.yml找到busuanzi: https://cn.vercount.one/js 换成这个就ok了 本人是hexo matery主题博客，其他博客估计也类似 最后希望朋友找到开源地址，万分感谢","categories":[{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"纠错","slug":"纠错","permalink":"https://19492035.xyz/tags/%E7%BA%A0%E9%94%99/"}],"author":"JackTang"},{"title":"LuckyBlog开源搭建教程","slug":"BlogOpen","date":"2020-09-16T16:00:00.000Z","updated":"2024-04-07T03:40:25.993Z","comments":true,"path":"posts/d74d8b76.html","link":"","permalink":"https://19492035.xyz/posts/d74d8b76.html","excerpt":"","text":"前言之前在B站上发布了个人博客的视频，播放量也破千了，有网友私聊也想要搭建一个这样的博客。经过一段时间的准备，现将本人博客的源代码公布出来，大家只需要根据以下的步骤，即可快速搭建一个漂亮完善的博客。 0x01 LuckyBlog 介绍上一个LuckyBlog版本发布于2020年的9月份，是在 洪卫の博客 基础上进行修改的。自从发布以来有很多网友都私信搭建了博客，同时也发现了旧版本中存在的一些问题需要解决，例如：搜索框不适配XML代码搜索，部分图片失效，代码块问题以及各种小问题。现在将最新的LuckyBlog版本代码发布出来，修复改进了不少的BUG，使其更加稳定运行。同时完善了博客的基础功能，例如：音乐、视频、相册、百宝箱等页面。同时增加了不少的新功能，例如：适配Hexo5.x、黑白天浏览模式、仿Windows页面，站点统计等。 博客演示地址：http://luckyzmj.cn/ 开源项目地址：https://github.com/LuckyZmj/LuckyBlog 主题特性 简单漂亮，文章内容美观易读 Material Design 设计 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现 首页轮播文章及每天动态切换 Banner 图片 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替） 时间轴式的归档页 词云的标签页和雷达图的分类页 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等） 可自定义的数据的友情链接页面 支持文章置顶和文章打赏 支持 MathJax TOC 目录，优化了目录显示效果 可设置复制文章内容时追加版权信息 可设置阅读文章时做密码验证 Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Valine） 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能 支持在首页的音乐播放和视频播放功能 修改了原主题以及基础主题中的一些BUG 加入图片懒加载功能，在根目录配置文件开启和关闭 增加留言板功能 在关于板块,加入简历功能页 增加完善音乐、相册、视频等功能页面 支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情 增加网站运行时间显示 增加live2d 动漫人物模型 整体替换Banner图片和文章特色图片 增加实用的快捷导航栏功能 修改了一些控件的参数以及部分样式 优化了代码显示块的效果 增加页面樱花飘落动效 增加鼠标点击烟花爆炸动效 增加页面雪花飘落动效 增加博客白云背景效果 增加天气接口控件 加入鼠标点击文字特效 增加DaoVoice在线聊天插件 增加博客代码、图片压缩功能 增加黑白天浏览模式功能 增加仿Windows功能 增加站点统计功能 增加留言版一言功能 其他 0x02 LuckyBlog 安装1. 安装GitGit是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。Git的作用是将本地的网页文件传到github上。 Git下载地址 Git教程 windows： 到git官网上下载.exe文件,Download git,安装选项全部默认即可。 2. 安装node.jsHexo是基于node.js编写的，所以需要安装一下node.js和里面的npm工具。 windows： 到Node.js官网下载.exe文件，安装选项全部默认。安装好之后，按Win+R打开cmd命令提示符，输入node -v和npm -v，若出现版本号，则说明安装成功。 3. 添加npm国内源使用阿里的国内镜像进行加速下载 npm config set registry https://registry.npm.taobao.org 4. 安装Hexo前面git和nodejs安装好后，就可以安装hexo了，你可以先创建一个文件夹MyBlog，用来存放自己的博客文件，然后cd到这个文件夹下（或者在这个文件夹下直接鼠标右键git bash打开）。 比如我的博客文件都存放在C:\\MyBlog目录下。 在该目录下右键点击Git Bash Here，打开git的控制台窗口，以后我们所有的操作都在git控制台进行，就不用Windows自带的cmd了。 定位到该目录下，输入npm install -g hexo-cli安装Hexo。可能会有几个报错，不用理会。 npm install -g hexo-cli 安装完后输入hexo -v验证是否安装成功。 接下来初始化一下hexo,即初始化我们的博客网站。例如我的在C:\\MyBlog文件夹下的命令行中，输入hexo init初始化文件夹 hexo init 新建完成后，指定文件夹MyBlog目录下有： node_modules: 依赖包 public：存放生成的页面 scaffolds：生成文章的一些模板 source：用来存放你的文章 themes：主题** _config.yml: 博客的配置文件** 到此为止，本地的Hexo基础环境搭建完成了。 5. 安装LuckyBlog下载源代码到本地文件下 git clone https://github.com/LuckyZmj/LuckyBlog.git 将下载好的LuckyBlog全部复制到MyBlog目录下，如果复制过程中出现重复文件，点击替换。 最后使用 npm i 或者 npm install 安装依赖环境包即可。 如果安装依赖环境出错，可以参考这篇文章。 最后执行 hexo clean 和 hexo s -g 启动Hexo本地预览，即可看到效果。 到此为止LuckyBlog安装完成，接下来就是个性化设置了。 0x03 LuckyBlog 个性化 注意！注意！注意！在阅读以下博客个性化之前，最好希望大家有Hexo博客配置主题的基础。如果是完全小白，建议去网上搜索学习相关Hexo搭建博客的过程，另外去B站上也有很多视频教程。博客个性化是需要大家有耐心的，因为每个人的操作不同，在配置过程中可能会遇到一些不可预期的问题，希望大家可以克服这些困难，如有需要帮助，也可以私信博主帮助大家解决问题。 1. 修改部署平台编辑根目录下的配置文件MyBlog/_config.yml，找到如下内容并修改 deploy: - type: git repo: git@github.com:LuckyZmj/LuckyZmj.github.io.git # 替换为你的部署平台地址 branch: master 2. 修改网站信息编辑根目录下的配置文件MyBlog/_config.yml，找到如下内容并修改 # Site title: Luckey subtitle: 'Luckeyの博客' description: '本科 | 计算机科学与技术 | 网络安全' keywords: 'luckyzmj 计算机 网络安全 渗透测试' # 博客网站关键词 author: Luckey # 博主名称 language: zh-CN timezone: '' # URL ## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/' url: http://www.luckyzmj.cn # 更改为你的博客地址 root: / # permalink: :year/:month/:day/:title/ permalink: posts/:abbrlink.html # p 是自定义的前缀 abbrlink: alg: crc32 #算法： crc16(default) and crc32 rep: hex #进制： dec(default) and hex permalink_defaults: pretty_urls: trailing_index: true # Set to false to remove trailing 'index.html' from permalinks trailing_html: true # Set to false to remove trailing '.html' from permalinks 3. 修改博客头像编辑主题目录下的配置文件MyBlog/themes/matery/_config.yml，找到如下内容并修改 # Configure website favicon and LOGO # 将以下改为自己的头像链接即可 favicon: https://s1.ax1x.com/2020/05/17/YR20js.jpg logo: https://s1.ax1x.com/2020/05/17/YRWsYT.png 4. 修改留言板简介演示效果如下： 编辑 /MyBlog/contact/index.md，修改你想要内容即可 --- title: contact date: 2019-10-25 00:00:00 type: \"contact\" layout: \"contact\" --- ## 畅所欲言 --- 在这里可以留下你的足迹，欢迎在下方留言，欢迎交换友链，一起交流学习！ ## 友链 --- Lucky_Meの友链信息 博客名称: Lucky_Meの博客 博客网址: http://luckyzmj.cn 博客头像: https://s1.ax1x.com/2020/05/17/YRWsYT.png 博客介绍: 知识面决定攻击面，知识链决定攻击深度！ 5. 修改音乐列表想要修改自己喜欢的音乐之前，需要先获取音乐列表的id。 以QQ音乐为例：先登录QQ音乐网页版，点击打开自己喜欢的音乐列表，在网页的URL处包含了音乐列表的id，如下图所示 编辑主题目录下的配置文件MyBlog/themes/matery/_config.yml，找到如下内容并修改 # 默认是博主的QQ音乐的id，大家可以改为自己音乐喜欢列表的id # 更新完id，就可以同步加载自己喜欢的列表音乐了 # Whether to display the musics. # 是否在首页显示音乐. music: enable: true title: #非吸底模式有效 enable: true show: 听听音乐 autoHide: true # hide automaticaly server: tencent #require music platform: netease, tencent, kugou, xiami, baidu type: playlist #require song, playlist, album, search, artist id: 1776127550 #require song id / playlist id / album id / search keyword fixed: true # 开启吸底模式 autoplay: false # 是否自动播放 theme: '#42b983' loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none' order: 'random' # 音频循环顺序, 可选值: 'list', 'random' preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto' volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效 listFolded: true # 列表默认折叠 hideLrc: true # 隐藏歌词 # Whether to display the musics. # 单独的音乐页面. musics: enable: true title: #非吸底模式有效 enable: true show: 听听音乐 server: tencent #require music platform: netease, tencent, kugou, xiami, baidu type: playlist #require song, playlist, album, search, artist id: 1776127550 #require song id / playlist id / album id / search keyword fixed: false # 开启吸底模式 autoplay: true # 是否自动播放 theme: '#42b983' loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none' order: 'random' # 音频循环顺序, 可选值: 'list', 'random' preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto' volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效 listFolded: false # 列表默认折叠 listMaxHeight: \"525px\" #列表最大高度 6. 绑定 Valine 评论编辑主题目录下的配置文件MyBlog/themes/matery/_config.yml，找到如下内容并修改 # Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey. valine: enable: true appId: Ucrxxxxxxxxxxxxxxxx-xxxxsz # 自行注册valine获取 appKey: zPsLxxxxxxxxxxxxxxerLmd # 自行注册valine获取 notify: true verify: true visitor: true avatar: 'monsterid' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide pageSize: 10 placeholder: '留下你的足迹..' # Comment Box placeholder background: /medias/comment_bg.png count: true enableQQ: 16463223 # 改为自己的QQ号 recordIP: true requiredFields: - nick - mail guest_info: - nick - mail - link master: - 46606772953bed0812789d6dc955614e # md5加密后的博主邮箱 metaPlaceholder: # 输入框的背景文字 nick: 昵称/QQ号(必填) mail: 邮箱(必填) link: 网址(https://) lang: zh-CN tagMeta: # The String Array of Words to show Flag.[Just Only xCss Style mode] - 博主 - 小伙伴 - 访客 friends: # The MD5 String Array of friends Email to show friends Flag.[Just Only xCss Style mode] - cb3e577ff029d6073400d5557effd41f - 7. 绑定 DaoVoice 在线聊天编辑主题目录下的配置文件MyBlog/themes/matery/_config.yml，找到如下内容并修改 daovoice: enable: true app_id: 4xxxxxxxe #DaoVoice中的app_id 8. 快捷导航页面个性化编辑文件MyBlog/source/tools/index.html，以下简单标记出几处，还有其他涉及到博客信息的内容都需要改为你自己的博客信息即可。 9. 添加友情链接编辑文件MyBlog/suorce/_data/friends.json，按如下格式添加友情 [ { \"avatar\": \"https://s1.ax1x.com/2020/05/17/YRWsYT.png\", \"name\": \"Luckey\", \"introduction\": \"越努力，越幸运\", \"url\": \"http://www.luckyzmj.cn\", \"title\": \"访问主页\" },{ \"avatar\": \"https://sunhwee.com/hwsun.jpg\", \"name\": \"洪卫の博客\", \"introduction\": \"UESTC CVer\", \"url\": \"http://sunhwee.com\", \"title\": \"访问主页\" } ] 10. 添加相册比如你的图片上传图床后，链接地址如下 https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/璀璨星空/01.jpg https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/璀璨星空/02.jpg https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/动漫风景/01.jpg https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/动漫风景/02.jpg ... 首先提取出图片链接公共的部分，作为图床地址 https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/ 然后再提取图片地址中不同的部分，作为图片地址 璀璨星空/01.jpg 璀璨星空/02.jpg 动漫风景/01.jpg 动漫风景/03.jpg ... 具体怎么分割根据你自己图床的链接格式而定，以上为我的github图床格式为例。 将相册图床的地址改为你自己的图床地址，需要更改两处文件 # 例如我的图床地址为： https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed/galleries/ themes/matery/layout/galleries.ejs themes/matery/layout/gallerie.ejs 为每个相册添加链接地址，在根目录/source/List/galleries/下新建 相册名称 文件夹，并在该文件夹下新建 index.md 最后，在根目录/source/_data/galleries.json中添加图片链接，格式如下, [ { \"name\": \"璀璨星空\", \"cover\": \"璀璨星空/01.jpg\", \"description\": \"璀璨星空\", \"photos\": [ \"璀璨星空/01.jpg\", \"璀璨星空/02.jpg\", \"璀璨星空/03.jpg\", \"璀璨星空/04.jpg\", \"璀璨星空/05.jpg\", \"璀璨星空/06.jpg\", \"璀璨星空/07.jpg\", \"璀璨星空/08.jpg\", \"璀璨星空/09.jpg\", \"璀璨星空/10.jpg\", \"璀璨星空/11.jpg\", \"璀璨星空/12.jpg\", \"璀璨星空/13.jpg\", \"璀璨星空/14.jpg\", \"璀璨星空/15.jpg\", \"璀璨星空/16.jpg\" ] }, { \"name\": \"动漫风景\", \"cover\": \"动漫风景/01.jpg\", \"description\": \"动漫风景\", \"photos\": [ \"动漫风景/01.jpg\", \"动漫风景/02.jpg\", \"动漫风景/03.jpg\", \"动漫风景/04.jpg\", \"动漫风景/05.jpg\", \"动漫风景/06.jpg\", \"动漫风景/07.jpg\", \"动漫风景/08.jpg\", \"动漫风景/09.jpg\", \"动漫风景/10.jpg\", \"动漫风景/11.jpg\", \"动漫风景/12.jpg\", \"动漫风景/13.jpg\", \"动漫风景/14.jpg\", \"动漫风景/15.jpg\", \"动漫风景/16.jpg\" ] } ] 11. 站点统计功能站点统计的数据来源于百度统计,当你的网站被百度收录后就会在百度统计中出现数据，具体效果如下： 由于博客的统计页面数据不能直接从百度站点中调用，因此需要自行从百度站点中将相应数据填入博客站点统计页面的源代码文件中，个人建议每隔一个月手动更新一次数据。 打开MyBlog\\themes\\matery\\layout\\census.ejs文件，将百度统计中的数据填入源代码中，修改代码如下： 11. 仿Windows个性化仿Windows页面是采用YLUI实现的，YLUI提供了社区版本供大家学习使用，具体效果如下： 大家可以查看YLUI官方的开发文档进行开发，有不懂的可以加官方的QQ群：191372634 进行讨论。 12. 博客动漫风格背景图因为在上一个LuckyBlog版本发布的网站风格是偏向动漫风格的，如果大家喜欢动漫风格，只需要替换以下配置即可。 博客每日轮播图： 以下链接图片全部下载保存到MyBlog\\themes\\matery\\source\\medias\\banner中，以0~7.jpg的文件名格式命名即可。 https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/0.jpg https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/1.jpg https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/2.jpg https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/3.jpg https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/4.jpg https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/5.jpg https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/6.jpg https://cdn.jsdelivr.net/gh/LuckyZmj/LuckyBlog@master/themes/matery/source/medias/banner/7.jpg 无文章特色背景图： 打开主题配置文件MyBlog\\themes\\matery\\_config.yml，修改替换如下代码即可： # The post featured images that needs to be displayed when there is no image. # 无文章特色图片时需要显示的文章特色图片. featureImages: - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/01.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/02.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/04.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/06.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/07.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/10.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/11.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/12.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/09.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/14.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/15.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/16.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E4%BA%8C%E6%AC%A1%E5%85%83%E9%A3%8E/06.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/02.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/03.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/04.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/07.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/08.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/11.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/10.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/09.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/12.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/13.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/14.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/16.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/15.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/11.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/09.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/03.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/08.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/03.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E9%A3%8E%E6%99%AF/13.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/01.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E5%8A%A8%E6%BC%AB%E6%8F%92%E7%94%BB/05.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/14.jpg - https://cdn.jsdelivr.net/gh/LuckyZmj/imgbed@master/galleries/%E7%92%80%E7%92%A8%E6%98%9F%E7%A9%BA/01.jpg 0x04 更多内容优化以上简单介绍了 LuckyBlog 中一些要修改的个性化地方，其他更详细的优化参考其他关于Matery的文章。以下几篇文章都是基于hexo-theme-matery主题优化的教程，大家如果遇到问题，可以参考其中的方法。 个人博客搭建 Hexo+Github博客搭建完全教程 hexo-theme-matery作者教程 Hexo+github搭建博客(超级详细版，精细入微) hexo（matery）背景、滚动条优化+增加点击跳评论","categories":[{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"hexo-blog-lucky","slug":"hexo-blog-lucky","permalink":"https://19492035.xyz/tags/hexo-blog-lucky/"},{"name":"博客搭建教程","slug":"博客搭建教程","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B/"}],"author":"luckyzmj"},{"title":"Hexo之渲染绕过","slug":"Hexo-xr","date":"2020-04-27T16:00:00.000Z","updated":"2024-04-06T07:48:46.218Z","comments":true,"path":"posts/17fd92ae.html","link":"","permalink":"https://19492035.xyz/posts/17fd92ae.html","excerpt":"","text":"0x001 Hexo 渲染 在Hexo部署时会默认渲染source下的所有html页面，但有时候想在Hexo博客上单独自定义html页面或README.md时，却不希望被Hexo渲染。因此对某个文件或者目录进行排除渲染是非常必要的。 0x002 方法一：font matterHexo新建网站页面，然后将你的代码直接写入 index.md 中 在 Front matter 中添加 layout: false，此方法适用于单一的纯HTMLCSS 页面。 --- title: tools date: 2020-04-28 00:00:00 type: \"tools\" layout: false --- 0x003 方法二：skip render在博客根目录下的 _config.yml，找到 skip_render，大概在32行左右，写入你想要的跳过渲染的路径，注意缩进和空格。 # 指定目录跳过hexo渲染 skip_render: - 'tools/*' - 'tools/**' 注释：tools/* 表示在目录 source/fireworks 下的文件全部跳过渲染，tools/** 表示在博客根目录 source/tools/ 文件夹下的文件全部跳过渲染（例如页面的 js、css 在另一个文件夹中）。 0x004 案例：webstack 导航webstack是一个纯静态的网址导航网站，内容均由viggo收集并整理。项目基于bootstrap前端框架开发。 Github：https://github.com/WebStackPage/WebStackPage.github.io 在博客根目录 source/下新建tools，然后新建index.html,将webstack网页源码全选复制粘贴到里面。 本站的webstack源码：view-source:http://luckyzmj.cn/tools/ 注意：将源码里的部分信息以及跳转链接按照你真实个人博客的环境进行修改。 然后打开博客根目录下配置文件_config.yml，找到skip_render，做如下修改： skip_render: - 'tools/*' - 'tools/**' 最后执行hexo clean和hexo s -g 本地预览，检查无误后hexo g -d部署到服务器上即可。 参考文章 https://xiabor.com/2020/04/21/hexo3/#%E5%A6%82%E4%BD%95%E8%B7%B3%E8%BF%87hexo%E7%9A%84%E6%B8%B2%E6%9F%93","categories":[{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"渲染绕过","slug":"渲染绕过","permalink":"https://19492035.xyz/tags/%E6%B8%B2%E6%9F%93%E7%BB%95%E8%BF%87/"}],"author":"Luckey"},{"title":"文字背景粒子特效","slug":"jQuery+CSS3","date":"2020-03-26T16:00:00.000Z","updated":"2024-04-06T07:48:46.219Z","comments":true,"path":"posts/4b3510a4.html","link":"","permalink":"https://19492035.xyz/posts/4b3510a4.html","excerpt":"","text":"前言一款jQuery+CSS3的文字背景粒子动画特效，一共6种粒子效果，每种文字背景的粒子效果都不同，有漂浮的有坠落的等等。 0x001 特效演示 This is fires This is lines This is hearts This is bubbles This is confetti This is sunbeams .particletext { } .fire > .particle { position: absolute; background-color: rgba(255, 193, 7, 0.5); border-radius: 40px; border-top-right-radius: 0px; -webkit-animation: fires 0.8s linear infinite; animation: fires 0.8s linear infinite; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } /*css keyframes 动画*/ @-webkit-keyframes fires { 0% { -webkit-transform: rotate(-70deg) translateY(0%); transform: rotate(-70deg) translateY(0%); } 25% { -webkit-transform: rotate(-20deg) translateY(-5%); transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { -webkit-transform: rotate(-70deg) translateY(-10%); transform: rotate(-70deg) translateY(-10%); } 75% { -webkit-transform: rotate(-20deg) translateY(-20%); transform: rotate(-20deg) translateY(-20%); } 100% { -webkit-transform: rotate(-70deg) translateY(-40%); transform: rotate(-70deg) translateY(-40%); opacity: 1; } } @keyframes fires { 0% { -webkit-transform: rotate(-70deg) translateY(0%); transform: rotate(-70deg) translateY(0%); } 25% { -webkit-transform: rotate(-20deg) translateY(-5%); transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { -webkit-transform: rotate(-70deg) translateY(-10%); transform: rotate(-70deg) translateY(-10%); } 75% { -webkit-transform: rotate(-20deg) translateY(-20%); transform: rotate(-20deg) translateY(-20%); } 100% { -webkit-transform: rotate(-70deg) translateY(-40%); transform: rotate(-70deg) translateY(-40%); opacity: 1; } } function fire() { $.each($(\".particletext.fire\"), function(){ var firecount = ($(this).width()/50)*20; for(var i = 0; i .particle { position: absolute; background-color: rgba(244, 67, 54, 0.5); -webkit-animation: lines 3s linear infinite; animation: lines 3s linear infinite; } @-webkit-keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } function lines() { $.each($(\".particletext.lines\"), function(){ var linecount = ($(this).width()/50)*10; for(var i = 0; i .particle { opacity: 0; position: absolute; background-color: #cc2a5d; -webkit-animation: hearts 3s ease-in infinite; animation: hearts 3s ease-in infinite; } .hearts > .particle:before,.hearts > .particle:after { position: absolute; content: ''; border-radius: 100px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #cc2a5d; } .hearts > .particle:before { -webkit-transform: translateX(-50%); transform: translateX(-50%); } .hearts > .particle:after { -webkit-transform: translateY(-50%); transform: translateY(-50%); } @-webkit-keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); } } @keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); } } function hearts() { $.each($(\".particletext.hearts\"), function(){ var heartcount = ($(this).width()/50)*5; for(var i = 0; i .particle { opacity: 0; position: absolute; background-color: rgba(33, 150, 243, 0.5); -webkit-animation: bubbles 3s ease-in infinite; animation: bubbles 3s ease-in infinite; border-radius: 100%; } @-webkit-keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); } } @keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); } } function bubbles() { $.each($(\".particletext.bubbles\"), function(){ var bubblecount = ($(this).width()/50)*10; for(var i = 0; i .particle { opacity: 0; position: absolute; -webkit-animation: confetti 3s ease-in infinite; animation: confetti 3s ease-in infinite; } .confetti > .particle.c1 { background-color: rgba(76, 175, 80, 0.5); } .confetti > .particle.c2 { background-color: rgba(156, 39, 176, 0.5); } @-webkit-keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); } } @keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); } } function confetti() { $.each($(\".particletext.confetti\"), function(){ var confetticount = ($(this).width()/50)*10; for(var i = 0; i .particle { position: absolute; background-color: rgba(253, 216, 53, 0.5); -webkit-animation: sunbeams 3s linear infinite; animation: sunbeams 3s linear infinite; } @-webkit-keyframes sunbeams { 0% { -webkit-transform: translateY(40%) rotate(0deg); transform: translateY(40%) rotate(0deg); } 50% { -webkit-transform: translateY(-40%) rotate(180deg); transform: translateY(-40%) rotate(180deg); } 100% { -webkit-transform: translateY(40%) rotate(360deg); transform: translateY(40%) rotate(360deg); } 0%,14%,17%,43%,53%,71%,80%,94%,100% { opacity: 0; } 6%,15%,24%,28%,48%,55%,78%,82%,99% { opacity: 1; } } @keyframes sunbeams { 0% { -webkit-transform: translateY(40%) rotate(0deg); transform: translateY(40%) rotate(0deg); } 50% { -webkit-transform: translateY(-40%) rotate(180deg); transform: translateY(-40%) rotate(180deg); } 100% { -webkit-transform: translateY(40%) rotate(360deg); transform: translateY(40%) rotate(360deg); } 0%,14%,17%,43%,53%,71%,80%,94%,100% { opacity: 0; } 6%,15%,24%,28%,48%,55%,78%,82%,99% { opacity: 1; } } function sunbeams() { $.each($(\".particletext.sunbeams\"), function(){ var linecount = ($(this).width()/50)*10; for(var i = 0; i","categories":[{"name":"前端篇","slug":"前端篇","permalink":"https://19492035.xyz/categories/%E5%89%8D%E7%AB%AF%E7%AF%87/"}],"tags":[{"name":"jQuery+CSS3","slug":"jQuery-CSS3","permalink":"https://19492035.xyz/tags/jQuery-CSS3/"},{"name":"粒子特效","slug":"粒子特效","permalink":"https://19492035.xyz/tags/%E7%B2%92%E5%AD%90%E7%89%B9%E6%95%88/"}],"author":"Luckey"},{"title":"阿里云服务器部署Hexo博客","slug":"blog-aliyun","date":"2020-02-26T16:00:00.000Z","updated":"2024-04-06T07:48:46.218Z","comments":true,"path":"posts/19d2a4e6.html","link":"","permalink":"https://19492035.xyz/posts/19d2a4e6.html","excerpt":"","text":"前言 相信大部分人使用Hexo搭建个人博客都会部署到一些免费的代码托管平台上，但这些免费的平台总是差强人意，比如国外的GitHub平台虽然完全免费，但在国内访问加载速度非常慢，又或者是国内的码云平台免费版有许多功能被阉割掉了，比如不能自定义域名，不能每次自动刷新提交的代码，需要到码云平台上手动刷新，如此一来非常繁琐。 为了有效解决上诉的一些问题，有条件的话，不妨在自己的云服务器上搭建Hexo博客。 效果演示 这是Hexo博客部署到GitHub上的网站测速效果 这是Hexo博客部署到阿里云服务器后的网站测速效果 环境准备 本地环境：Windows 10 云服务器环境：阿里云ECS（CentOS7.x） 开始部署 本地环境搭建1.安装Git 到git官网上下载.exe文件,Download git,安装选项还是全部默认，最后一步添加路径时选择Use Git from the Windows Command Prompt。 Git下载地址 Git教程 2.安装Nodejs 到Node.js官网下载.exe文件，安装选项全部默认。安装好之后，按Win+R打开cmd命令提示符，输入node -v和npm -v，若出现版本号，则说明安装成功。 使用npm阿里的国内镜像进行加速下载 npm config set registry https://registry.npm.taobao.org 4.安装Hexo 先创建一个文件夹MyBlog，用来存放自己的博客文件，然后cd到这个文件夹下（或者在这个文件夹下直接右键git bash here打开）。 定位到该目录下，输入npm install -g hexo-cli安装Hexo。可能会有几个报错，不用理会。 npm install -g hexo-cli 安装完后输入hexo -v,若出现版本号则，说明安装成功。 接下来初始化一下hexo,即初始化我们的博客，输入hexo init初始化文件夹 hexo init MyBlog 新建完成后，指定文件夹MyBlog目录下有： node_modules: 依赖包 public：存放生成的页面 scaffolds：生成文章的一些模板 source：用来存放你的文章 themes：主题** _config.yml: 博客的配置文件** 输入hexo g生成静态网页，然后输入hexo s打开本地服务器预览 hexo g hexo s 生成ssh公钥在本地桌面点击右键Git Bash Here打开Git终端，执行如下命令`,一路回车 ssh-keygen -t rsa 这个时候它会告诉你已经生成了.ssh的文件夹。在git bash中输入 cat ~/.ssh/id_rsa.pub 输出的内容就是公钥信息了 阿里云服务器环境搭建安装Git yum install git 创建Git账户 adduser git 添加账户权限 chmod 740 /etc/sudoers vim /etc/sudoers 找到 ## Allow root to run any commands anywhere root ALL=(ALL) ALL 添加以下内容 git ALL=(ALL) ALL 保存退出并改回权限 chmod 400 /etc/sudoers 设置git账户密码 sudo passwd git 切换至git用户，创建 ~/.ssh 文件夹和 ~/.ssh/authorized_keys 文件，并赋予相应的权限 su git mkdir ~/.ssh vim ~/.ssh/authorized_keys # 然后将win10中生成的id_rsa.pub文件中的公钥复制到authorized_keys chmod 600 /home/git/.ssh/authorized_keys chmod 700 /home/git/.ssh 在本地Git终端中测试是否能免密登录git，其中SERVER为填写自己的云主机IP，执行输入yes后不用密码就说明好了 ssh -v git@SERVER 创建目录 #repo作为为Git仓库目录 mkdir /var/repo chown -R git:git /var/repo chmod -R 755 /var/repo #hexo作为网站根目录 mkdir /var/www/hexo chown -R git:git /var/www/hexo chmod -R 755 /var/www/hexo 然后创建一个裸的 Git 仓库 cd var/repo git init --bare hexoBlog.git 创建一个新的 Git 钩子，用于自动部署 在 /var/repo/hexoBlog.git 下，有一个自动生成的 hooks 文件夹。我们需要在里边新建一个新的钩子文件 post-receive。 vim /var/repo/hexoBlog.git/hooks/post-receive 按 i 键进入文件的编辑模式，在该文件中添加两行代码（将下边的代码粘贴进去)，指定 Git 的工作树（源代码）和 Git 目录（配置文件等） #!/bin/bash git --work-tree=/var/www/hexo --git-dir=/var/repo/hexoBlog.git checkout -f 然后，按 Esc 键退出编辑模式，输入”:wq” 保存退出。 修改文件权限，使得其可执行 chown -R git:git /var/repo/hexoBlog.git/hooks/post-receive chmod +x /var/repo/hexoBlog.git/hooks/post-receive 到此为止 Git 仓库就搭建完成了。 阿里云服务器配置Nginx用宝塔面板来一键部署Nginx Linux面板6.0安装命令(暂时仅兼容Centos7.x，其它系统版本请安装5.9稳定版)： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh Linux面板6.0升级专业版 curl http://download.bt.cn/install/update6.sh|bash 安装完成后会显示面板后台地址·账号·密码。打开面板后台地址登陆面板，选择Nginx的部署方案，静静等待部署。 部署完成，点击网站-添加站点-输入域名(没有域名的输入自己的IP地址)-底部的PHP版本选择”纯静态”-提交。 网站创建完成后点击设置-配置文件 server { listen 80; # server_name 填写自己的域名 server_name luckyzmj.cn blog.luckyzmj.cn; index index.php index.html index.htm default.php default.htm default.html; # 这里root填写自己的网站根目录，修改为/var/www/hexo root /var/www/hexo; -保存 点击设置-网站目录，修改为/var/www/hexo ，保存 重启宝塔面板服务 service bt restart 本地Hexo部署到阿里云服务器进入到本地Hexo博客的文件夹MyBlog,右键点击Git Bash Here，输入命令 #定义邮箱(更换为你的邮箱地址就行) git config --global user.email \"you@example.com\" #定义名称(更换自定义一个名称就行) git config --global user.name \"Your Name\" 配置_config.yml,完成自动化部署 打开本地Hexo博客的文件夹MyBlog文件夹下的_config.yml, 找到deploy deploy: type: git #server改为你的服务IP地址或解析后的域名 #例如我改为repo: git@luckyzmj.cn:/var/repo/blog.git repo: git@server:/var/repo/blog.git branch: master 保存后，即可测试部署 再进入到本地Hexo博客的文件夹MyBlog,右键点击Git Bash Here，输入命令 hexo clean hexo g -d 不报错说明完成，打开浏览器输入你的域名或ip地址就可以看到你部署的Hexo博客了。 到此为止，我们已经成功部完成，并且访问自己的服务器端比访问Github快多了。 小贴士 在部署过程中，执行 hexo d发现部署老是出错，什么权限不允许之类的，这里我们需要检查我们在上述的git操作部署是否使用了git用户操作，若是没有，需要给相应的目录更改用户组 使用 chown -R git:git /var/repo/ 这条命令递归的将repo目录及其子目录用户组设置为git。 同时使用 chown -R git:git /var/www/hexo 这样即可解决此类问题。 还有一个问题就是绑定域名后不能访问。原因是在国内任何域名只要绑定到国内的服务器主机上都必须去工信部和公安部备案完后才能正常使用。如果是港澳台的服务器或者是国外的服务器则可以不需要备案。 参考文章 https://blog.csdn.net/weixin_33907511/article/details/91398208?utm_source=distribute.pc_relevant.none-task","categories":[{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"阿里云","slug":"阿里云","permalink":"https://19492035.xyz/tags/%E9%98%BF%E9%87%8C%E4%BA%91/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"}],"author":"Luckey"},{"title":"个人博客搭建","slug":"Blog","date":"2019-08-27T03:41:03.000Z","updated":"2024-04-07T03:41:10.212Z","comments":true,"path":"posts/e3e08109.html","link":"","permalink":"https://19492035.xyz/posts/e3e08109.html","excerpt":"","text":"0x001 效果演示 0x002 简单介绍 前前后后大概花了一周多的时间，目前个人博客已经完善的差不多了，现在写个文章做个阶段总结，后续如果有更新的地方，会及时补充。本博客基于Hexo框架，采用hexo-theme-matery主题，在这里非常感谢作者洪卫的hexo-blog-fly博客开源，极大简化了构建博客的工作量和复杂度。在此开源博客的基础上做了改进，修复了一些bug，顺利搭建完成了我的个人博客。大家对此主题有兴趣的可以下载源代码，搭建属于自己的个性化博客。 个人博客 演示：http://luckyzmj.cn 0x003 Hexo 初级搭建 1. 安装GitGit是目前世界上最先进的分布式版本控制系统，可以有效、高速的处理从很小到非常大的项目版本管理。Git的作用是将本地的网页文件传到github上。 Git下载地址 Git教程 windows： 到git官网上下载.exe文件,Download git,安装选项还是全部默认，最后一步添加路径时选择Use Git from the Windows Command Prompt。 2. 安装node.jsHexo是基于node.js编写的，所以需要安装一下node.js和里面的npm工具。 windows： 到Node.js官网下载.exe文件，安装选项全部默认。安装好之后，按Win+R打开cmd命令提示符，输入node -v和npm -v，若出现版本号，则说明安装成功。 3. 添加npm国内源使用阿里的国内镜像进行加速下载 npm config set registry https://registry.npm.taobao.org 4. 安装Hexo前面git和nodejs安装好后，就可以安装hexo了，你可以先创建一个文件夹MyBlog，用来存放自己的博客文件，然后cd到这个文件夹下（或者在这个文件夹下直接右键git bash打开）。 比如我的博客文件都存放在E:\\MyBlog目录下。 在该目录下右键点击Git Bash Here，打开git的控制台窗口，以后我们所有的操作都在git控制台进行，就不用Windows自带的cmd了。 定位到该目录下，输入npm install -g hexo-cli安装Hexo。可能会有几个报错，不用理会。 npm install -g hexo-cli 安装完后输入hexo -v验证是否安装成功。 到此为止hexo就安装完了。 接下来初始化一下hexo,即初始化我们的网站，输入hexo init初始化文件夹 hexo init MyBlog 新建完成后，指定文件夹MyBlog目录下有： node_modules: 依赖包 public：存放生成的页面 scaffolds：生成文章的一些模板 source：用来存放你的文章 themes：主题** _config.yml: 博客的配置文件** 到此为止，本地的网站配置完成了。 输入hexo g生成静态网页，然后输入hexo s打开本地服务器 hexo g hexo s 5. 注册Github账号创建个人仓库接下来就去注册一个github账号，用来存放我们的网站。 打开https://github.com/，新建一个项目仓库New repository，如下所示： 然后如下图所示，输入自己的项目名字，后面一定要加.github.io后缀，README初始化也要勾上 要创建一个和你用户名相同的仓库，后面加.github.io，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是http://xxxx.github.io，其中xxx就是你注册GitHub的用户名。例如我的：http://LuckyZmj.github.io 6. 生成SSH添加到GitHub生成SSH添加到GitHub，连接Github与本地。右键打开git bash here，然后输入下面命令： git config --global user.name \"注册GitHub用户名\" git config --global user.email \"注册GitHub的邮箱\" 用以下两条，检查一下你有没有输对 git config user.name git config user.email 然后创建SSH,一路回车 ssh-keygen -t rsa -C \"注册GitHub的邮箱\" 这个时候它会告诉你已经生成了.ssh的文件夹。在git bash中输入 cat ~/.ssh/id_rsa.pub 将输出的内容复制到框中，点击确定保存。 打开github，在头像下面点击settings，再点击SSH and GPG keys，新建一个SSH，名字随便取一个都可以，把你的id_rsa.pub里面的信息复制进去。如图： 在git bash输入ssh -T git@github.com，如果如下图所示，出现你的用户名，那就成功了。 ssh -T git@github.com 7. 将hexo部署到GitHub将hexo生成的文章部署到GitHub上，打开博客根目录下的_config.yml文件，这是博客的配置文件，在这里你可以修改与博客配置相关的各种信息。找到如下配置进行修改： deploy: type: git repository: https://github.com/LuckyZmj/LuckyZmj.github.io branch: master repository修改为你自己的github项目地址即可，就是部署时，告诉工具，将生成网页通过git方式上传到你对应的链接仓库中。 这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。 npm install hexo-deployer-git --save 然后就可以部署提交到github，过一会儿就可以在http://yourname.github.io 这个网站看到你的博客了 hexo clean hexo generate hexo deploy 其中 hexo clean清除了你之前生成的东西。 hexo generate，生成静态文章，可以用 hexo g缩写 ，hexo deploy部署文章，可以用hexo d缩写 注意deploy时可能要你输入username和password。 8. 写文章和发布文章首先在博客根目录下右键打开git bash here，安装一个扩展npm i hexo-deployer-git。 npm i hexo-deployer-git 然后输入hexo new post \"article title\"，新建一篇文章。 hexo new post \"article title\" 然后打开E:\\MyBlog\\source\\_posts的目录，可以发现下面多了一个文件夹和一个.md文件，一个用来存放你的图片等数据，另一个就是你的文章文件。 另外推荐直接使用有道云编写markdown文章，不仅可以实时预览，还可以快捷的生成markdown语法格式，具体效果如下图所示。 编写完markdown文件后，根目录下输入hexo g生成静态网页，然后输入hexo s可以本地预览效果，最后输入hexo d上传到github上。这时打开你的github.io主页就能看到发布的文章了。 到此为止，Hexo初级搭建就已经完成了。 0x004 Hexo 优化定制 1. Hexo相关目录文件1.1 博客目录构成介绍node_modules是node.js各种库的目录，public是生成的网页文件目录，scaffolds里面就三个文件，存储着新文章和新页面的初始设置，source是我们最常用到的一个目录，里面存放着文章、各类页面、图像等文件，themes存放着主题文件，一般也用不到。 我们平时写文章只需要关注source/_posts这个文件夹就行了。 - node_modules - public - scaffolds - source - _data - _posts - about - archives - categories - friends - tags - themes 1.2 hexo基本配置在文件根目录下的_config.yml，就是整个hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。 1.2.1 网站参数描述title网站标题subtitle网站副标题description网站描述author您的名字language网站使用的语言timezone网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。 其中，description主要用于SEO，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。 1.2.2 网址参数描述url网址root网站根目录 permalink文章的永久链接格式permalink_defaults永久链接中各部分的默认值 在这里，你需要把url改成你的网站域名。 permalink，也就是你生成某个文章时的那个链接格式。 比如我新建一个文章叫temp.md，那么这个时候他自动生成的地址就是http://yoursite.com/2018/09/05/temp。 以下是官方给出的示例，关于链接的变量还有很多，需要的可以去官网上查找永久链接 。 参数结果 :year/:month/:day/:title /2019/08/10/hello-world :year-:month-:day-:title.html 2019-08-10-hello-world.html :category/:titlefoo /bar/hello-world 2. 定制主题这里推荐作者洪卫的hexo-blog-fly博客主题，该主题是基于hexo-theme-matery优化的，需要把博客相关信息换成您自己的就可以部署了，极大简化了构建博客的工作量和复杂度。 2.1 简单使用方法 安装Git, 安装nodeJS，安装Hexo 你可以直接fork一份源码到你的仓库，clone到本地博客文件夹内 在本地博客仓库运行npm i命令安装依赖包 直接修改配置信息，改成自己的信息 运行命令hexo clean（清除生成文件），hexo g（生成网页）， hexo s（本地预览），hexo d（部署） 2.2 原主题特性: 简单漂亮，文章内容美观易读 Material Design 设计 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现 首页轮播文章及每天动态切换 Banner 图片 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替） 时间轴式的归档页 词云的标签页和雷达图的分类页 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等） 可自定义的数据的友情链接页面 支持文章置顶和文章打赏 支持 MathJax TOC 目录 可设置复制文章内容时追加版权信息 可设置阅读文章时做密码验证 Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk） 集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能 支持在首页的音乐播放和视频播放功能 2.3 新增加特性: 修改了原主题的一些很多bug 加入图片懒加载功能，在根目录配置文件开启和关闭 增加留言板功能 在关于板块,加入简历功能页 增加视听[视觉听觉影音]板块 支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。 增加网站运行时间显示 增加动漫模型 整体替换Banner图片和文章特色图片 增加分类相册功能 修改了一些控件的参数 修改部分样式,比如: 文章卡片,固定高度,使其不至于因为文章摘要的长短不同导致卡片大小不一使页面布局很不美观,类似的还有友链卡片,优化了页面内容布局,视觉更整齐美观 解决首页文章列表卡片上方 border-radius圆角失效的bug 添加页面樱花飘落动效 添加鼠标点击烟花爆炸动效 加入天气接口控件 加入鼠标点击文字特效 添加页面雪花飘落动效 添加在线聊天插件 调整线聊天插件参数，使之能够随着鼠标滑动位置自适应调整 持续更新… 2.4 切换主题如果想自己动手对hexo-theme-matery优化的话，可以修改Hexo根目录下的 _config.yml的 theme 的值 theme: hexo-theme-matery _config.yml 文件的其它修改建议: 请修改 _config.yml 的 url 的值为你的网站主 URL（如：http://xxx.github.io）。 建议修改两个 per_page 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示。 如果你是中文用户，则建议修改 language 的值为 zh-CN。 2.5 新建分类 categories 页categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下： hexo new page \"categories\" 编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容： --- title: categories date: 2018-09-30 17:25:30 type: \"categories\" layout: \"categories\" --- 2.6 新建标签 tags 页tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下： hexo new page \"tags\" 编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容： --- title: tags date: 2018-09-30 18:23:38 type: \"tags\" layout: \"tags\" --- 2.7 新建关于我 about 页about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下： hexo new page \"about\" 编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容： --- title: about date: 2018-09-30 17:25:30 type: \"about\" layout: \"about\" --- 2.8 新建留言板 contact 页（可选的）contact 页是用来展示留言板信息的页面，前提是已经开启了第三方评论系统才能显示。如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下： hexo new page \"contact\" 编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容： --- title: contact date: 2018-09-30 17:25:30 type: \"contact\" layout: \"contact\" --- 2.9 新建友情链接 friends 页（可选的）friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下： hexo new page \"friends\" 编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容： --- title: friends date: 2018-12-12 21:25:30 type: \"friends\" layout: \"friends\" --- 同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示： [{ \"avatar\": \"http://image.luokangyuan.com/1_qq_27922023.jpg\", \"name\": \"码酱\", \"introduction\": \"我不是大佬，只是在追寻大佬的脚步\", \"url\": \"http://luokangyuan.com/\", \"title\": \"前去学习\" }, { \"avatar\": \"http://image.luokangyuan.com/4027734.jpeg\", \"name\": \"闪烁之狐\", \"introduction\": \"编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬\", \"url\": \"https://blinkfox.github.io/\", \"title\": \"前去学习\" }, { \"avatar\": \"http://image.luokangyuan.com/avatar.jpg\", \"name\": \"ja_rome\", \"introduction\": \"平凡的脚步也可以走出伟大的行程\", \"url\": \"https://me.csdn.net/jlh912008548\", \"title\": \"前去学习\" }] 2.10 一级菜单导航配置配置基本菜单导航的名称、路径url和图标icon 菜单导航名称可以是中文也可以是英文(如：Index或主页) 图标icon 可以在Font Awesome 中查找 menu: Index: url: / icon: fas fa-home Tags: url: /tags icon: fas fa-tags Categories: url: /categories icon: fas fa-bookmark Archives: url: /archives icon: fas fa-archive About: url: /about icon: fas fa-user-circle Friends: url: /friends icon: fas fa-address-book 2.11 二级菜单配置方法如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作 在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children) 在children下创建二级菜单的 名称name,路径url和图标icon. 注意每个二级菜单模块前要加 -. 注意缩进格式 menu: Index: url: / icon: fas fa-home Tags: url: /tags icon: fas fa-tags Categories: url: /categories icon: fas fa-bookmark Archives: url: /archives icon: fas fa-archive About: url: /about icon: fas fa-user-circle-o Friends: url: /friends icon: fas fa-address-book Medias: icon: fas fa-list children: - name: Musics url: /musics icon: fas fa-music - name: Movies url: /movies icon: fas fa-film - name: Books url: /books icon: fas fa-book - name: Galleries url: /galleries icon: fas fa-image 执行 hexo clean && hexo g 重新生成博客文件。 2.12 代码高亮由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下： npm i -S hexo-prism-plugin 然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下： highlight: enable: false prism_plugin: mode: 'preprocess' # realtime/preprocess theme: 'tomorrow' line_number: false # default false custom_css: 更多代码块优化详细内容请访问：http://luckyzmj.cn/posts/1b9a9e28.html 2.13 搜索本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下： npm install hexo-generator-search --save 在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项： search: path: search.xml field: post 2.14 文章字数统计插件（建议安装）如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount 插件。 安装命令如下： npm i --save hexo-wordcount 然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可： postInfo: date: true update: false wordCount: false # 设置文章字数统计为 true. totalCount: false # 设置站点文章总字数统计为 true. min2read: false # 阅读时长. readCount: false # 阅读次数. 2.15 添加emoji表情支持（可选的）本主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下： npm install hexo-filter-github-emojis --save 在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项： githubEmojis: enable: true className: github-emoji inject: true styles: customEmojis: 2.16 添加 RSS 订阅支持（可选的）本主题中还使用到了hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下： npm install hexo-generator-feed --save 在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项： feed: type: atom path: atom.xml limit: 20 hub: content: content_limit: 140 content_limit_delim: ' ' order_by: -date 执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了。 2.17 添加 DaoVoice 在线聊天功能（可选的）前往 DaoVoice 官网注册并且获取 app_id，并将 app_id 填入主题的 _config.yml 文件中。 2.18 添加 Tidio 在线聊天功能（可选的）前往 Tidio 官网注册并且获取 Public Key，并将 Public Key 填入主题的 _config.yml 文件中。 2.19 修改页脚页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。 2.20 修改社交链接在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码： <% if (theme.socialLink.github) { %> <a href=\"<%= theme.socialLink.github %>\" class=\"tooltipped\" target=\"_blank\" data-tooltip=\"访问我的GitHub\" data-position=\"top\" data-delay=\"50\"> <i class=\"fab fa-github\"></i> </a> <% } %> 其中，社交图标（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考： Facebook: fab fa-facebook Twitter: fab fa-twitter Google-plus: fab fa-google-plus Linkedin: fab fa-linkedin Tumblr: fab fa-tumblr Medium: fab fa-medium Slack: fab fa-slack Sina Weibo: fab fa-weibo Wechat: fab fa-weixin QQ: fab fa-qq Zhihu: fab fa-zhihu 注意: 本主题中使用的 Font Awesome 版本为 5.11.0。 2.21 修改打赏的二维码图片在主题文件的 source/medias/reward 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。 2.22 配置音乐播放器（可选的）要支持音乐播放，在主题的 _config.yml 配置文件中激活music配置即可 # 是否在首页显示音乐 music: enable: true title: #非吸底模式有效 enable: true show: 听听音乐 server: netease #require music platform: netease, tencent, kugou, xiami, baidu type: playlist #require song, playlist, album, search, artist id: 503838841 #require song id / playlist id / album id / search keyword fixed: false # 开启吸底模式 autoplay: false # 是否自动播放 theme: '#42b983' loop: 'all' # 音频循环播放, 可选值: 'all', 'one', 'none' order: 'random' # 音频循环顺序, 可选值: 'list', 'random' preload: 'auto' # 预加载，可选值: 'none', 'metadata', 'auto' volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效 listFolded: true # 列表默认折叠 提示： server可选netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）。 type可选song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手） id获取示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，地址栏有一串数字，playlist的id即为这串数字。 2.23文章 Front-matter 介绍Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。 配置选项 默认值 描述 title Markdown 的文件标题 文章标题，强烈建议填写此选项 date 文件创建时的日期时间 发布时间，强烈建议填写此选项，且最好保证全局唯一 author 根 _config.yml 中的 author 文章作者 img featureImages 中的某个值 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg top true 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章 cover false v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中 coverImg 无 v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片 password 无 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项 toc true 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项 mathjax false 是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行 summary 无 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要 categories 无 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类 tags 无 文章标签，一篇文章可以多个标签 keywords 文章标题 文章关键字，SEO 时需要 reprintPolicy cc_by 文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个 注意: 如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章都的特色图各有特色。 date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则 以下为文章的 Front-matter 示例。最简示例 --- title: typora-vue-theme主题介绍 date: 2018-09-07 09:25:00 --- 最全示例 --- title: theme主题介绍 date: 2018-09-07 09:25:00 author: 赵奇 img: /source/images/xxx.jpg top: true cover: true coverImg: /images/1.jpg password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92 toc: false mathjax: false summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要 categories: Markdown tags: - Typora - Markdown --- 2.24 自定制修改在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分： 菜单 我的梦想 首页的音乐播放器和视频播放器配置 是否显示推荐文章名称和按钮配置 favicon 和 Logo 个人信息 TOC 目录 文章打赏信息 复制文章内容时追加版权信息 MathJax 文章字数统计、阅读时长 点击页面的’爱心’效果 我的项目 我的技能 我的相册 Gitalk、Gitment、Valine 和 disqus 评论配置 不蒜子统计和谷歌分析（Google Analytics） 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图 我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：修改主题颜色 在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色： /* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */ .bg-color { background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); } @-webkit-keyframes rainbow { /* 动态切换背景颜色. */ } @keyframes rainbow { /* 动态切换背景颜色. */ } body { /* background-color: #eaeaea; */ /* 增加背景壁纸*/ background: url(\"https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png\"), url(\"http://luckyzmj.cn/img/yun.jpg\") 0px 0px; background-attachment: fixed; margin: 0; color: #34495e; } 2.25 修改 banner 图和文章特色图你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中： $('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)'); 在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。 2.26 优化目录栏在 themes\\Matery\\layout\\_partial\\post-detail-toc.ejs，修改内容如下： .toc-widget { padding-left: 20px; width: 345px; background-color: rgb(255, 255, 255,0.7); border-radius: 10px; box-shadow: 0 10px 35px 2px rgba(0, 0, 0, .15), 0 5px 15px rgba(0, 0, 0, .07), 0 2px 5px -5px rgba(0, 0, 0, .1) !important; } #toc-content { margin-bottom: 20px; } 0x005 更多详细教程以下几篇文章都是基于Hexo框架和hexo-theme-matery主题优化的教程，大家如果遇到问题，可以参考其中的方法。 Hexo+Github博客搭建完全教程 hexo-theme-matery作者教程 Hexo+github搭建博客(超级详细版，精细入微) hexo（matery）背景、滚动条优化+增加点击跳评论","categories":[{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"Github","slug":"Github","permalink":"https://19492035.xyz/tags/Github/"}],"author":"Luckey"}],"categories":[{"name":"小程序篇","slug":"小程序篇","permalink":"https://19492035.xyz/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AF%87/"},{"name":"技术篇","slug":"技术篇","permalink":"https://19492035.xyz/categories/%E6%8A%80%E6%9C%AF%E7%AF%87/"},{"name":"博客篇","slug":"博客篇","permalink":"https://19492035.xyz/categories/%E5%8D%9A%E5%AE%A2%E7%AF%87/"},{"name":"公众号篇","slug":"公众号篇","permalink":"https://19492035.xyz/categories/%E5%85%AC%E4%BC%97%E5%8F%B7%E7%AF%87/"},{"name":"学术篇","slug":"学术篇","permalink":"https://19492035.xyz/categories/%E5%AD%A6%E6%9C%AF%E7%AF%87/"},{"name":"前端篇","slug":"前端篇","permalink":"https://19492035.xyz/categories/%E5%89%8D%E7%AB%AF%E7%AF%87/"}],"tags":[{"name":"Hexo","slug":"Hexo","permalink":"https://19492035.xyz/tags/Hexo/"},{"name":"微信小程序","slug":"微信小程序","permalink":"https://19492035.xyz/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/"},{"name":"灵沐","slug":"灵沐","permalink":"https://19492035.xyz/tags/%E7%81%B5%E6%B2%90/"},{"name":"星宿","slug":"星宿","permalink":"https://19492035.xyz/tags/%E6%98%9F%E5%AE%BF/"},{"name":"建站","slug":"建站","permalink":"https://19492035.xyz/tags/%E5%BB%BA%E7%AB%99/"},{"name":"wordpress","slug":"wordpress","permalink":"https://19492035.xyz/tags/wordpress/"},{"name":"博客","slug":"博客","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2/"},{"name":"博客弹窗","slug":"博客弹窗","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E5%BC%B9%E7%AA%97/"},{"name":"服务器","slug":"服务器","permalink":"https://19492035.xyz/tags/%E6%9C%8D%E5%8A%A1%E5%99%A8/"},{"name":"技术","slug":"技术","permalink":"https://19492035.xyz/tags/%E6%8A%80%E6%9C%AF/"},{"name":"网站","slug":"网站","permalink":"https://19492035.xyz/tags/%E7%BD%91%E7%AB%99/"},{"name":"Office 365 E5","slug":"Office-365-E5","permalink":"https://19492035.xyz/tags/Office-365-E5/"},{"name":"博客优化","slug":"博客优化","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E4%BC%98%E5%8C%96/"},{"name":"博客搭建","slug":"博客搭建","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/"},{"name":"Matery","slug":"Matery","permalink":"https://19492035.xyz/tags/Matery/"},{"name":"学术","slug":"学术","permalink":"https://19492035.xyz/tags/%E5%AD%A6%E6%9C%AF/"},{"name":"讲座","slug":"讲座","permalink":"https://19492035.xyz/tags/%E8%AE%B2%E5%BA%A7/"},{"name":"元宇宙","slug":"元宇宙","permalink":"https://19492035.xyz/tags/%E5%85%83%E5%AE%87%E5%AE%99/"},{"name":"博客加密","slug":"博客加密","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E5%8A%A0%E5%AF%86/"},{"name":"纠错","slug":"纠错","permalink":"https://19492035.xyz/tags/%E7%BA%A0%E9%94%99/"},{"name":"hexo-blog-lucky","slug":"hexo-blog-lucky","permalink":"https://19492035.xyz/tags/hexo-blog-lucky/"},{"name":"博客搭建教程","slug":"博客搭建教程","permalink":"https://19492035.xyz/tags/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%95%99%E7%A8%8B/"},{"name":"渲染绕过","slug":"渲染绕过","permalink":"https://19492035.xyz/tags/%E6%B8%B2%E6%9F%93%E7%BB%95%E8%BF%87/"},{"name":"jQuery+CSS3","slug":"jQuery-CSS3","permalink":"https://19492035.xyz/tags/jQuery-CSS3/"},{"name":"粒子特效","slug":"粒子特效","permalink":"https://19492035.xyz/tags/%E7%B2%92%E5%AD%90%E7%89%B9%E6%95%88/"},{"name":"阿里云","slug":"阿里云","permalink":"https://19492035.xyz/tags/%E9%98%BF%E9%87%8C%E4%BA%91/"},{"name":"Github","slug":"Github","permalink":"https://19492035.xyz/tags/Github/"}]}