在侧边栏添加个性定位欢迎信息2.0样式预览 本教程来源于梦爱吃鱼大佬 [点击跳转原帖]: https://blog.bsgun.cn/posts/ef58a648 “梦爱吃鱼” 1. 申请API密钥首先需要在 https://api.76.al/ 申请一个API密钥 2. 创建JS文件在博客目录的 source 文件夹下创建 card-welcome.js 文件(也可以在source文件夹下另外新建文件夹)。 3. 配置信息 可以通过下表获取经纬度信息: 获取地址 获取方式 百度地图 1. 访问百度地图拾取坐标系统 2. 在搜索框输入地址 3. 点击地图上的点获取经纬度 4. 复制对应的经度(lng)和纬度(lat)值 高德地图 1. 打开高德地图 2. 在搜索框输入地址 3. 点击地图上的点获取经纬度 4. 复制对应的经度(lng)和纬度(lat)值 将以下内容复制到 card-welcome.js 中,并修改文件顶部配置信息 12345678910111213141516171819202122232425262728293031323334353637383 ...
Kouseki式首页背景图渐进式加载 · 改[点击前往]: https://satera.cn/posts/6a8fb549/ “小旦” 新建文件 新建文件source/js/imgloaded.js新增以下内容,并按照注释调整图片路径 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113// 首页头图加载优化/** * @description 实现medium的渐进加载背景的效果 */ // 定义ProgressiveLoad类class ProgressiveLoad { constructor(smallSrc, largeSrc) { ...
⛳️Markdown 引用1.1 🔔引用Markdown 区块引用是在段落开头使用 > 符号 ,然后后面紧跟一个空格符号(简记:> + ' ')。Markdown语法如下: 123> 区块引用> 来CSDN> 学的不仅是技术更是梦想 区块引用来CSDN学的不仅是技术更是梦想 1.2 🔔嵌套引用另外,引用也是可以嵌套的,一个>符号是最外层,两个>符号是第一层嵌套,以此类推。Markdown语法如下: 123> 最外层嵌套>> 第一层嵌套>>> 第三层嵌套 最外层嵌套 第一层嵌套 第三层嵌套 1.3 🔔列表与引用混合使用1.3.1 👻引用中使用列表引用不仅可以引用段落,还可以引用列表、文字样式、以及后面所学的图片、超链接等等,有兴趣的同学可以自行去尝试,这里仅简单演示一下引用中使用列表。Markdown语法如下: 123456789> 引用中使用列表> 有序列表:> 1. 第一项> 2. 第二项>> ...
CF Worker部署Umami的API 引用站外地址 原文链接 梦爱吃鱼 第一步使用 Vercel 自建 Umami 服务前期准备GitHub 账号,Vercel 账号,Umami 账号。 操作步骤登录 Vercel ,点击 Storage 创建 Postgres 数据库。 创建成功后查看数据库的 .env.local,点击 Show secret 复制 POSTGRES_PRISMA_URL 的值(引号里面的部分)。 根据 Umami 官方文档 ,可以直接一键 Deploy 到 Vercel。点击后页面如下。 在红色框内填入对应内容,然后分别点击 Create 和 Deploy,等待部署完成。 部署结束后进入项目的 Deployment 页面点击 Visit 访问 Umami。 首次进入需输入账号密码,初始账号为 admin,密码为 umami,可自行在设置中更改。记住网址和 ...
hexo图片懒加载图片懒加载 图片懒加载是提升网站性能和用户体验的一个非常很好方式,并且几乎所有的大型网站都使用到了,比如微博,仅把用户可见的部分显示图片,其余的都暂时不加载,做法就是:让所有图片元素src指向一个小的站位图片比如loading,并新增一个属性(如data-original)存放真实图片地址。每当页面加载(或者滚动条滚动),使用JS脚本将可视区域内的图片src替换回真实地址,并做请求重新加载。 Hexo-lazy-image 使用插件地址: 引用站外地址 插件地址 图片懒加载 安装步骤: 1npm install hexo-lazyload-image --save 然后 _config.yml 文件加入下面内容 123456lazyload: enable: true # 是否开启图片懒加载 onlypost: true # 是否只对文章的图片做懒加载,ru ...
侧边栏组件 - 日历新建 widget.yml在source/_data路径下新建一个widget.yml文件 以后所有自定义的侧边栏组件都可以写在这里面,具体写法参考 butterfly 官方文档 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162top: - class_name: card-times id_name: card-widget-calendar name: icon: html: <div id="calendar-area-left"> <div id="calendar-week"></div> <div id="calendar-date"></div> <div id=&qu ...
在侧边栏添加个性定位欢迎信息样式预览 引用站外地址 点击跳转原帖 Kouseki 引用站外地址 在侧边栏添加个性定位欢迎信息 铭心石刻 操作步骤 打开腾讯位置服务,登录你的账号 点击创建应用,填一下名称和类型,随意即可 点击添加Key,key名称随意,勾选WebServiceAPI,此处白名单可以自选例如我选的是域名白名单,注意此处本地部署localhost是有效的,需带上端口号。部署至公网填写域名即可,不需要端口号。例如本站:blog.kouseki.cn。 记录下得到的Key 在_config.anzhiyu.yml主题配置文件下inject配置项中的bottom引入jqu ...
violet留言板(店长)详见信笺样式留言板 在[BlogRoot]运行指令 1npm install hexo-butterfly-envelope --save 在站点配置文件_config.yml或主题配置文件_config.butterfly.yml添加以下配置项 1234567891011121314151617181920# envelope_comment# see https://akilar.top/posts/e2d3c450/envelope_comment: enable: true #控制开关 custom_pic: cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片 line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片 beforeimg: https://npm.elemecdn.com/hexo-butterf ...
自定义字体 准备好字体文件后,在[BlogRoot]\source\css\custom.css(没有就自己创建)中添加以下代码: 123456789101112@font-face { /* 为载入的字体取名字(随意) */ font-family: 'YSHST'; /* 字体文件地址(相对或者绝对路径都可以) */ src: url(/font/优设好身体.woff2); /* 定义加粗样式(加粗多少) */ font-weight: normal; /* 定义字体样式(斜体/非斜体) */ font-style: normal; /* 定义显示样式 */ font-display: block;} 各个属性的定义: font-family属性值中使用webfont来声明使用的是服务器端字体,即设置文本的字体名称。 src属性值中首先指定了字体文件所在的路径。 format声明字体文件的格式,可以省略文件格式的声明,单独使用src属性值。 font-style:设置文本样式。取值:normal:不使用斜体;it ...
文章加密插件 在根目录执行以下命令 1npm install --save hexo-blog-encrypt Front matter配置方法 123456789101112---title: Hello Worldtags:- 作为日记加密date: 2016-03-30 21:12:21password: mikemessiabstract: 有东西被加密了, 请输入密码查看.message: 您好, 这里需要密码.theme: xraywrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.--- 配置文件[BlogRoot]\_config.yml中针对tags的加密 12345678910# Securityencrypt: # hexo-blog-encrypt abstract: 有东西被加密了, 请输入密码查看. message: 您好, 这里需要密码. tags: - {name: tagName, passwo ...
hexo博客配置页面配置标签页配置 前往你的 Hexo 博客的根目录 在 Hexo 博客根目录 [blog]下打开终端,输入 1hexo new page tags 你会找到 source/tags/index.md 这个文件 修改这个文件: 记得添加 type: "tags" 1234567---title: 标签date: 2021-04-06 12:01:51type: "tags"comments: falsetop_img: false--- 参数 解释 type 【必须】页面类型,必须为 tags comments 【可选】是否显示评论 top_img 【可选】是否显示顶部图 orderby 【可选】排序方式 :random/name/length order 【可选】排序次序: 1, asc for ascending; -1, desc for descending 分类页配置 前往你的 Hexo 博客的根目录 在 Hexo 博客根目录 [blog]下打开终端,输 ...
侧边栏新年倒计时 添加侧边栏:新建文件[BlogRoot]\source\_data\widget.yml,建议查看butterfly官方文档:自定义侧边栏 12345678910111213# top: 创建的 widget 会出现在非 sticky 区域(即所有页面都会显示)# bottom: 创建的 widget 会出现在 sticky 区域(除了文章页都会显示)top: - class_name: id_name: newYear name: icon: order: 1 html: '<div id="newYear-main"><div class="mask"></div> <p class="title"></p> <div class="newYear-time"></div> <p class="today" ...