博客主页 🎤
分类

图库

下的文章

Count:

计 0 篇
没有找到内容
专注于生活记录的Typecho卡片主题MyDiary,现已上架
注意前言非常开心,这款专注于生活记录的Typecho卡片主题MyDiary,非常顺利的上架了。作为火喵的第一款主题,倾尽了全部的心思,制作了数月,现在终于和大家见面了。有许多的小伙伴参与了测试,也帮助火喵发现了许多之前未发现的瑕疵。作为一款专注于生活记录的主题,主要的面向对象,还是那些用博客来记录生活的朋友们。主题分为许多板块,从多方面来综合记录生活上的琐事。下面会较为详细的介绍一下这款主题的nb之处🙈如果想购买这款主题,请详细阅读MyDiary 主题页,及MyDiary 使用手册。此这篇文章仅仅作为主题的功能介绍,也可以查看演示站来查看实际演示。介绍主题每一项的设置功能,已经写入主题文档,此处不再重复。这款主题也完美兼容超宽屏,考虑到部分小伙伴无法看到超宽屏的样式,在此放出截图:文章(post)作为博客,以及typecho的核心功能之一的文章(post),将会被细分为七个类别:文章,相册,书籍,视频,音乐,游戏,旅行。相册作为大部分生活类博客主题都会欠缺的必要属性,本主题将相册作为文章类型,使其整理起来非常方便。文章类型文章页面功能贴近原生markdown,仅保留附加的几处核心需求:bilibili视频,网易云音乐,回复可见以及tips样式。在日后更换主题时可有效避免自定义短代码过多导致的文章页内容杂乱。且文章核心功能还包括了文章版权信息的选择。在原创的文章会主动提醒来访者注意版权保护;对于转载和引用的文章也很方便的填写来源出处。此处内容会展示在标题图片处醒目位置,避免了页面底部经常错过看不到的问题,对于文章作者也很方便。可决定让当前文章是否显示标题序号,在阅读排版时体验会更加舒服。且文章自带文章目录,在无法形成目录时会自动隐藏按钮。文章可以选择多篇不同分类的文章作为一个专题集合显示,这有区别于分类(category),并显示在专题页面中。文章自带字号调节功能,可一键调节字体大小,满足阅读者不同习惯。同时文章的点赞和分享也没用落下。统计文章的点赞数,阅读数,文章字数,需要的文章信息都在标题图片显眼处。文章的分类也支持图标了,提升阅读辨识度。正文加上格式线,一本生活笔记本。相册类型提供了两种不同的相册图片排版,且支持缩放查看,搭配最新的Fancybox4.0灯箱插件,相册照片一目了然。相册可进行不同的分类,使得不同种类的相册方便的分类在所属的分类之中,寻找当年的照片?得心应手!可以在相册开头写上一段话,记录下当时的心情,也可以写下相册的介绍。书籍,视频,音乐,游戏类型四者作为文章的类型,主要是作为读后感,观后感,电影/小说的评析,佳句的摘录,音乐的鉴赏,玩游戏时的感动。可以关闭评论区,并开启个人摘录功能,每当读到佳文好句,快速的记录下来。收纳归类于专题页面,找某一篇影评?快准狠!旅行类型相册里全是图片,而旅行是图片+文字,还有……地图!搭配高德地图API,记录下你的每一个足迹。每一次旅行,所走过的地方,都会整和到一张大地图,那里是你曾经存在过的地方。切换到卫星图,看的更清晰。页面(page)页面作为文章的延伸,以及内容的板块,可以选择多种组合方式,比如隐藏正文部分,将评论区切换为摘录区,来作为公告页面使用,也可以作为个人的心情微博。但是本站默认的几处页面类型,包含着一个更好的呼应主题名字的功能,那就是——日记。日记页面日记都要有天气,主题也不例外,除了天气,也可以记录每日的心情,当时的气温,以及日记的配图。采用黄金分割比,左图右文,跟随光标移动,动态展示日记照片;过多的评论自动收纳,简洁明了。日记页面特有的点赞功能,对标QQ空间,每个人的点赞你都知道,看看是哪位小伙伴最关心你。文章页面所有文章的收纳,按最新时间排序,每一篇都不能错过。不同的文章类型,展示不同的卡片风格,不再千篇一律。文章的标签,分类,简洁,一目了然。个人用户页面方便的查看近期回复我的评论,不再找不到评论的位置。哪条评论的回复最多,也归纳到了一起,点开一键直达。评论使用的邮箱,我的首条留言,累计留言数量,只有自己能知道!专题页面文章的专题,相册的分类,旅行所到的位置统计,全都在这!一键生成我的bilibili追番页面,读者看到哪部番你在追,了解你的喜好。一键生成我的steam游戏页面,什么游戏你最爱玩,读者看到开车喊你一起玩。页面集合页面独立的单独页面都在这里,可以快捷的添加在右侧侧栏。自己写一个关于页面,然后将快捷按钮放在右侧侧栏,或者首页。独立的内容不想写到文章?那就新建一篇页面,添加一个个性图标吧,支持remixicon和emoji。好友页面订阅你的好友rss,最新的文章会自动生成朋友圈,看到大家的新动态。多种方式订阅好友,随机展示顺序,达成你自己的好友卡片。一键生成十年订阅博客,人生百态,朋友圈外更大的圈子。留言板页面是谁评论区最活跃?累计评论第一名给他一枚金奖牌。最近的来访者都有谁?右侧侧边栏展示一个月内最活跃的读者。简洁无杂乱,单纯的留言板,评论功能(comment)显示用户近期留言的小圆点,是不是很久都没来访了呢。自动加上来访者的卡片标签,还有评论者的等级,是常来访的好友的评论,还是偶然经过的路人。显示评论者的设备,地理位置,大家来自五湖四海,但是此时此刻我们聚集在博客。左右分栏设计,对话框的样式,祝你区分每一条留言。弹出式的打字框,不再找不到打字框跑哪里了。滑动解锁方式,验证更有趣,安全又便捷。三重反垃圾保护(无中文 审核、敏感词 垃圾评论、违禁词 禁止评论)评论区php级防xxs注入,保障环境安全。支持图片(仅博主),音乐,视频的插入,甚至可以自定义短代码。每一次评论对话框按时间整和,评论区不再杂乱无章。高级功能完美的PWA整合,使用PWA缓存技术,不仅节省服务器流量,也使得网站访问速度超超超超快!!!屏蔽复制,屏蔽右键菜单,屏蔽控制台快捷键等,让你的博客无人打扰。Html压缩,首页静态化,还是快快快!页面个性化多套皮肤可以选择,无论是牛皮纸的笔记本风格,还是加上锯齿印的邮票风。两种显示模式可以选择,默认的全宽自适应,以及小清新的单栏风格。三种轮换的昼夜模式,朝阳,星光,静夜,每一个不同的时间点上都是不同的心情。两种标题显示样式,都好看!自定义字体,自定义头像,自定义壁纸,自定义主题色,自定义缩略图,想自定义的都有简单的方法来实现。侧栏自定义音乐播放列表,音乐传递情感,让读者安静享受这个阅读的下午时光。因演示站使用的默认的宽屏模式,朋友们可能不方便浏览到单栏模式,现在将单栏模式的部分截图样式发出来供个位参考:想说的话写着写着就有点跑题了,总而言之这款主题是我制作、调整了无数的时光才完成的。在测试期间的十四天时间里,高强度更新发布了9个版本。以及零星的许多小版本。如此集中精力在这件事情上,一是自己挖过的坑,测试14天后正式发售,二是初次测试时竟然没想到会有如此之多的bug,只能一一解决掉。在此特别的感谢在测试期间帮助过我的小伙伴们。因为有你们帮我找的问题,主题才能如今这样近乎完美,因为有你们的夸奖,才有了我每天都在更新的动力,如此,才有了这款主题的今天。这款主题定价为39CNY。我之前和 @泠风寒声 聊过定价,他说一杯咖啡的钱就足够了。我只喝过速溶咖啡,也没有接触过其他的主题,但是我想,作为一款火喵的处女主题,也有这么多的小伙伴的支持,还是定一个便宜的价位比较合适。而最终决定定价为39CNY的原因,是十余天之前某位公主殿下的生日,让我决定了。39CNY不贵,更多是为了让更多的小伙伴用上并喜欢上我的这款主题,也希望这款主题有着更加美好的未来。作为发售日,感谢那些支持过我的小伙伴们,现在入群可以享受9折的优惠(39x0.9≈35CNY)。优惠有效期持续5天到9月16日(当日24时)。17日开始恢复原价39CNY。毕竟主题很便宜,仅仅差了一瓶饮料的价格,所以也说不准日后会涨价。爱你们!
MyDiary,一款自适应多功能的Typecho个人生活主题
2022.12这篇文章的介绍,已经和现有版本有了许多出入,但是现版本只会更好而不会比之前差,因此可以以实际的演示站,或者本站来了解实际功能。如果想购买这款主题,请详细阅读MyDiary 主题页,及MyDiary 使用手册。此这篇文章仅仅作为主题的功能介绍。前言之前上架的时候写过一篇主题的介绍,但是那一篇只是大量的文字和少量的图片,并没有太过于直观的感受。这次逢十一,主题更新了一些新功能,也完善了许多不足,因此这次详细的以图文的方式,对上一次的介绍做一个全面的补充说明。昼夜模式主题自带三色昼夜模式,支持时间自动切换,也支持用户手动切换,并拥有朝阳、星光、静夜三种模式,满足夜间阅读护眼需求。合理布局的主页主页布局更加合理,并相比之前的杂乱,做了优化处理,使之简洁一目了然。多功能的相册相册具有分类归纳功能,将自己不同的影集分类放整齐,找齐相册不再杂乱无章。相册具备两种不同的展示模式,适用于不同的相册环境。并可以一键切换至预览模式,再多图片找起图来也不费吹灰之力。每一张图片可以备注文字信息,这会使图片得到更好的展示。多功能的文章内页功能文章分为不同而功能,旅行模式可以展示旅行过的地标位置;图书模式可以方便的在侧栏展示书籍封面;影片模式可以在侧面方便的浏览视频。文章上方可以显示多达七种不同的信息展示框。精美的文章排版不同的文章类型,也会在文章列表做不同的展示,不再单一枯燥无味!在普通的文章方面,也有精心处理过的排版布局,可以在这里查看文章内页格式演示。并且拥有两种不同的模板,满足不同的审美需求。独一无二的日记方式日记作为主题核心之一,打造的也是独一无二的日记风格。天气,心情,随点随记。你的好友给你一个赞你也知道会是他!精心合理的页面布局,打造一流日记风格。多姿多彩的页面页面作为仅次于文章的重要组成部分,这里也做了精心的布置。不仅页面列表风格统一,还有多种不同的特殊页面,也是经过精心编写。譬如支持输入bilibili或steam的id,一键生成属于自己的追番页面和游戏库页面。旅行地图会将你如果的地点统和成为大地图,去过哪里也一目了然。统计页面会使用图标,做出针对博客详细的统计信息,不再敷衍。友链页面是主题特色的地方之一。区别于普通博客的简单友链,这里可以订阅朋友的rss,实时看到朋友们最近更了些什么。可以结合所有的友链建立友链朋友圈,朋友们最近在做什么呢?后记我打字真的不多,主要精力这段时间都放在了博客上面。最近博客刚放出,也更了很多很多的内容,精力实在是有限。但是好在朋友们对我的主题还是赞誉有佳的。
HEXO的美化——Butterfly的美化整理
本页部分内容来自互联网,并附带转载链接;提取的内容仅仅指代本站实际使用内容,可能更换成本站主题适配的内容,仅适合本站主题使用,其他主题雷同;更多的共同内容请看原链接右下方看板娘https://blog.csdn.net/qq_36759224/article/details/85420403获取 live2d输入如下命令获取 live2d : $ npm install save hexo helper live2d 输入以下命令,下载相应的模型,将 packagename 更换成模型名称即可,更多模型选择请点击此处,各个模型的预览请访问原作者的博客,或者访问这里本小站使用的是live2d widget model shizuku添加如下代码打开站点目录下的 _config.yml 文件,添加如下代码:live2d: enable: true scriptFrom: local model: use: live2d widget model haruto #模型选择 display: position: right #模型位置 width: 150 #模型宽度 height: 300 #模型高度 mobile: show: false #是否在手机端显示 设置好过后我们就拥有了一个卡通人物自定义鼠标指针样式选好指针样式本站使用的是奥日与黑暗森林,下载地址在这里,你也可以换成自己喜欢的指针样式应用到本博客参考过本博客主题结构,定位到\hexo\themes\butterfly\source\css\index.styl将以下代码复制到最开头/**普通指针样式**/ body cursor url('xxxx.cur'),default /**链接指针样式**/ a &:hover cursor url('xxxx.cur'),pointer这样就好了~右侧小工具栏添加网易云音乐先去找网易云外链这部比较简单恕不详细说明,百度一大堆,举个例子,比如这首打上花火,播放页下侧就能找到外链的页面并取得下面的HTML代码修改主题文件首先模仿公告的样式,在hexo\themes\butterfly\layout\includes\widget多复制出来一个card_announcement.pug文件并更名将新文件中的最后一行.announcement_content= theme.announcement.content替换成网易云音乐外链,并在<iframe前加条竖线,例如这样|<iframe修改第一行和倒数第二号内容为自定义的命名...总之最后的我是这种效果...我也说不清楚惹qaq .card widget.card netmusic .card content .item headline i.fa.fa music(aria hidden="true") span= _p('aside.card_netmusic') |<iframe 吧啦吧啦在hexo\themes\butterfly\layout\includes\widget\index.pug中加入新的小工具列表,例如我的: if theme.aside.card_netmusic include ./card_netmusic.pug然后应该emmm没了吧,应该可以了~ps.果然忘了,在hexo\themes\butterfly\languages\zh CN.yml和butterfly.yml的aside:里添加对应名称浏览器网页标题修改♂(欺骗)在hexo\themes\butterfly\source\js中添加crash_cheat.js填入内容(别忘了修改成自己喜欢的):<! 崩溃欺骗 > var OriginTitle = document.title; var titleTime; document.addEventListener('visibilitychange', function () { if (document.hidden) { $('[rel="icon"]').attr('href', "/joke.ico"); document.title = '!!这里这里 ◕ ں ◕ '; clearTimeout(titleTime); } else { $('[rel="icon"]').attr('href', "/favicon.ico"); document.title = '(ฅ>ω<*ฅ) 喵喵爱你哟~' + OriginTitle; titleTime = setTimeout(function () { document.title = OriginTitle; }, 2000); } });然后在hexo\themes\butterfly\layout\includes\layout.pug文件中添加如下代码: script(type='text/javascript', src='/js/crash_cheat.js') 雪花背景特效雪花特效有两种,使用方法雷同上一个浏览器标题欺骗,在hexo\themes\butterfly\source\js中建立snow.js 文件,粘贴以下代码:/*样式一*/ (function($){ $.fn.snow = function(options){ var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z index':'9999', 'top': ' 50px'}).html('&#10052;'), documentHeight = $(document).height(), documentWidth = $(document).width(), defaults = { minSize : 10, maxSize : 20, newOn : 1000, flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */ }, options = $.extend( , defaults, options); var interval= setInterval( function(){ var startPositionLeft = Math.random() * documentWidth 100, startOpacity = 0.5 + Math.random(), sizeFlake = options.minSize + Math.random() * options.maxSize, endPositionTop = documentHeight 200, endPositionLeft = startPositionLeft 500 + Math.random() * 500, durationFall = documentHeight * 10 + Math.random() * 5000; $flake.clone().appendTo('body').css({ left: startPositionLeft, opacity: startOpacity, 'font size': sizeFlake, color: options.flakeColor }).animate({ top: endPositionTop, left: endPositionLeft, opacity: 0.2 },durationFall,'linear',function(){ $(this).remove() }); }, options.newOn); }; })(jQuery); $(function(){ $.fn.snow({ minSize: 5, /* 定义雪花最小尺寸 */ maxSize: 50,/* 定义雪花最大尺寸 */ newOn: 300 /* 定义密集程度,数字越小越密集 */ }); });或者/*样式二*/ /* 控制下雪 */ function snowFall(snow) { /* 可配置属性 */ snow = snow || ; this.maxFlake = snow.maxFlake || 200; /* 最多片数 */ this.flakeSize = snow.flakeSize || 10; /* 雪花形状 */ this.fallSpeed = snow.fallSpeed || 1; /* 坠落速度 */ } /* 兼容写法 */ requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); }; cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || window.webkitCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame; /* 开始下雪 */ snowFall.prototype.start = function(){ /* 创建画布 */ snowCanvas.apply(this); /* 创建雪花形状 */ createFlakes.apply(this); /* 画雪 */ drawSnow.apply(this) } /* 创建画布 */ function snowCanvas() { /* 添加Dom结点 */ var snowcanvas = document.createElement("canvas"); snowcanvas.id = "snowfall"; snowcanvas.width = window.innerWidth; snowcanvas.height = document.body.clientHeight; snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z index: 1; pointer events: none;"); document.getElementsByTagName("body")[0].appendChild(snowcanvas); this.canvas = snowcanvas; this.ctx = snowcanvas.getContext("2d"); /* 窗口大小改变的处理 */ window.onresize = function() { snowcanvas.width = window.innerWidth; /* snowcanvas.height = window.innerHeight */ } } /* 雪运动对象 */ function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) { this.x = Math.floor(Math.random() * canvasWidth); /* x坐标 */ this.y = Math.floor(Math.random() * canvasHeight); /* y坐标 */ this.size = Math.random() * flakeSize + 2; /* 形状 */ this.maxSize = flakeSize; /* 最大形状 */ this.speed = Math.random() * 1 + fallSpeed; /* 坠落速度 */ this.fallSpeed = fallSpeed; /* 坠落速度 */ this.velY = this.speed; /* Y方向速度 */ this.velX = 0; /* X方向速度 */ this.stepSize = Math.random() / 30; /* 步长 */ this.step = 0 /* 步数 */ } flakeMove.prototype.update = function() { var x = this.x, y = this.y; /* 左右摆动(余弦) */ this.velX *= 0.98; if (this.velY <= this.speed) { this.velY = this.speed } this.velX += Math.cos(this.step += .05) * this.stepSize; this.y += this.velY; this.x += this.velX; /* 飞出边界的处理 */ if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) { this.reset(canvas.width, canvas.height) } }; /* 飞出边界 放置最顶端继续坠落 */ flakeMove.prototype.reset = function(width, height) { this.x = Math.floor(Math.random() * width); this.y = 0; this.size = Math.random() * this.maxSize + 2; this.speed = Math.random() * 1 + this.fallSpeed; this.velY = this.speed; this.velX = 0; }; // 渲染雪花 随机形状(此处可修改雪花颜色!!!) flakeMove.prototype.render = function(ctx) { var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size); snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)"); /* 此处是雪花颜色,默认是白色 */ snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色,请自行查 */ snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)"); /* 找16进制的RGB 颜色代码。 */ ctx.save(); ctx.fillStyle = snowFlake; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); ctx.restore(); }; /* 创建雪花 定义形状 */ function createFlakes() { var maxFlake = this.maxFlake, flakes = this.flakes = [], canvas = this.canvas; for (var i = 0; i < maxFlake; i++) { flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed)) } } /* 画雪 */ function drawSnow() { var maxFlake = this.maxFlake, flakes = this.flakes; ctx = this.ctx, canvas = this.canvas, that = this; /* 清空雪花 */ ctx.clearRect(0, 0, canvas.width, canvas.height); for (var e = 0; e < maxFlake; e++) { flakes[e].update(); flakes[e].render(ctx); } /* 一帧一帧的画 */ this.loop = requestAnimationFrame(function() { drawSnow.apply(that); }); } /* 调用及控制方法 */ var snow = new snowFall({maxFlake:60}); snow.start(); 然后在hexo\themes\butterfly\layout\includes\layout.pug文件里引用即可:<! 雪花特效 > <script type="text/javascript" src="\js\snow.js"></script>如果没效果,请确认网页是否已载入JQurey,如果没有请在下雪代码之前引入JQ即可:<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>樱花背景特效https://yremp.live/sakura js/因雪花特效有点问题,打算换成樱花特效。在雪花特效处直接换成樱花特效的Jsdelivr缓存即可。网站底部设置已运行时间在主题设置中找到个性化页脚内容设置框,或者在footer.php代码中添加如下代码即可: 网站已运行:<span id="run_time" style="color: black;"></span> <script> function runTime() { var d = new Date(), str = ''; BirthDay = new Date("2018 12 31"); today = new Date(); timeold = (today.getTime() BirthDay.getTime()); sectimeold = timeold / 1000 secondsold = Math.floor(sectimeold); msPerDay = 24 * 60 * 60 * 1000 msPerYear = 365 * 24 * 60 * 60 * 1000 e_daysold = timeold / msPerDay e_yearsold = timeold / msPerYear daysold = Math.floor(e_daysold); yearsold = Math.floor(e_yearsold); //str = yearsold + "年"; str += daysold + "天"; str += d.getHours() + '时'; str += d.getMinutes() + '分'; str += d.getSeconds() + '秒'; return str; } setInterval(function () { $('#run_time').html(runTime()) }, 1000); </script>本小站使用的是这个:<! 网站运行时间的设置 > <span id="timeDate">载入天数...</span> <span id="times">载入时分秒...</span> <script> var now = new Date(); function createtime() { var grt= new Date("03/09/2019 13:14:21"); now.setTime(now.getTime()+250); days = (now grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); hours = (now grt ) / 1000 / 60 / 60 (24 * dnum); hnum = Math.floor(hours); if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now grt ) / 1000 /60 (24 * 60 * dnum) (60 * hnum); mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} seconds = (now grt ) / 1000 (24 * 60 * 60 * dnum) (60 * 60 * hnum) (60 * mnum); snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; } setInterval("createtime()",250); </script>右键菜单美化在主题设置中加入如下js:var options = {items:[ {header: '欢迎做客 喵窝・札记'}, {divider: true}, {text: '↜&nbsp;&nbsp;回到首页', href: 'https://dorcandy.cn'}, {text: '↷&nbsp;&nbsp;刷新页面', onclick: function() {alert("功能添加中,先请手动是用F5或者ctrl+F5刷新页面")}}, {divider: true}, {text: '☍&nbsp;&nbsp;友情链接', href: '/link/'}, {text: '✓&nbsp;&nbsp;留言板', href: '/guestbook/'}, {text: 'ฅ&nbsp;&nbsp;关于火喵', href: '/about/'}, {divider: true}, {text: '☇&nbsp;&nbsp;百度搜索', ======}, {text: '☄&nbsp;&nbsp;更多...', onclick: function() {alert("噗qaq,更完善的右键菜单 火喵 正在努力攻克中...")}} ]} $('body').contextify(options);引入js<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery contextify/1.0.8/jquery.contextify.min.js"></script>还要引入bootstrap.min.css,但是需要做适量修改。主页头图上升气泡效果在butterfly中的cdn use—>js里添加一行即可: https://cdn.jsdelivr.net/gh/sunchaser lilu/sunchaser cdn@master/js/circleMagic.min.js引入steam游戏展示小工具代码如下:<iframe src="https://store.steampowered.com/widget/{%APPID%}/" frameborder="0" width="100%" height=190"></iframe>代码中的APPID可查询SteamDB效果如下:关于背景样式的修改自动更换随机背景butterfly.yml里的background:可以直接填写api接口,这里推荐使用岁月小筑大佬提供的API,实现背景自动更换,效果如下:https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302实现背景重复平铺butterfly.yml里的background:修改成素材图片地址css\_global\index.styl→#web_bg内最后两行 background size: cover background repeat: no repeat修改为 background size: 400px //cover // background repeat: no repeat400px为自定义尺寸实现独立页面无侧边栏定位到hexo\themes\butterfly\layout\page.pug仿照在else处加上注释之间的内容 //...................... else if page.type === 'nosidebar' article#page h1= page.title .article container!= page.content //else...................... 在想要设置无侧边栏的页面,上方加上type: "nosidebar"完成,其中nosidebar可以换自己喜欢的名字,具体效果参照我的关于页
利用element显示Notification通知,复制提醒,禁用F12或右键菜单提醒
前言之前博客默认的是Qmsg,虽然很简单但是不容易看到,因此全站都换成了Notification通知。今天刚改好就被朋友催,因为很简单就记一下作为备忘了,具体效果可见图,本博客也用的这个方法,可查看实际效果。引用cdn资源<! 引入VUE > <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> <! 引入样式 > <script src="https://cdn.jsdelivr.net/npm/element ui@2.15.6/lib/index.js"></script> <! 引入组件库 > <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element ui@2.15.6/packages/theme chalk/lib/index.css">代码放在头部(比如header.php)就可以了代码复制提醒在任意引用全局js的文件内添加: - 隐藏 - 禁用右键菜单并提醒在任意引用全局js的文件内添加: - 隐藏 - 禁用F12按键并提醒在任意引用全局js的文件内添加: - 隐藏 - 相关扩展禁用左键选择//禁用左键选择 document.onselectstart = function () { return false; }禁用复制//禁用复制 document.oncopy = function () { return false; }禁用Ctrl+Shift+I//禁用Ctrl+Shift+I if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) { return false; }
我的第一款Typecho主题做好啦
注意原文我的第一款Typecho主题做好啦,现在开始为期十四天的免费测试(2022年8月30日至2022年9月12日)。有兴趣的朋友们欢迎进群下载体验♥(群号103659317)。因为虽然是测试,但是估计和正式版的差距并不大,在测试期十四天满之后,火喵会把一些测试期间朋友们所反馈的严重的bug进行修复并放出来正式版,届时需要朋友们付费购买。 - 隐藏 - 在群内拿到主题之后,需要和火喵(群主)小窗说明你的域名以及qq号码。本主题无需任何插件支援便可以独立运行。安装前请详细阅读此主题文档,以免造成不必要的麻烦。因为是测试主题,安装主题期间记得备份好博客文件及数据库,谨防数据丢失。MyDiary 使用手册地址:https://note.dorcandy.cn/share/MyDiary喵喵爱你们♥
今天又吃了好吃的
本想去吃那个巨好吃的【香酥爆全腰】,可惜去了告诉说菜品下架了,只有一个腰花,量又少,问了服务员,说那道菜太费时间了所以下架了,以后也没有了!!!巨难受!!!第一张是今天去吃的,后面三(两)张是上次去吃的!撑死我了
博客主页 绯色之喵・火喵博客 记录喵喵美好生活 51统计 百度统计 🌸
萌ICP备20210005号 辽ICP备2021005644号-1 辽公网安备 21021102000984号 十年之约 3 年 17 天 4 小时 36 分 🌸 本站由 Typecho 建站,并搭配自制 MyDiary 主题 Copyright © 2009 ~ 2023. 火喵酱 All rights reserved.
打赏图
打赏博主
欢迎
欢迎
欢迎访问绯色之喵・火喵博客
欢迎来看望喵喵!
搜 索
足 迹
分 类
  • 日常
  • 晒物
  • 🦙 代码
  • 🏗️ 建站
  • 📷 生活
  • 测试