博客主页 🎤
标签

博客美化

下的文章

Blog:

火喵博客・日记本
为Joe主题添加更多,新的表情
前言评论区小伙伴留言,也想要在joe主题里添加更多新的表情。之前本来也想水一篇,但是很麻烦很麻烦。但是为了帮助新朋友们美化自己的主题,还是写一篇简单的教程吧。正好我也经常分享一些好看的表情,正好搭配实用。教程并非傻瓜式复制粘贴,需要耐心自制。步骤修改前请及时备份找好新表情本站也分享过许多好看的表情,可以直接食用。将表情收集好后重命名为简单的名称方便辨认。譬如:文件夹apple1.jpgapple2.jpgapple3.jpgapple4.jpgapple5.jpg然后将这些表情放入一个文件夹,这里例举假设是apple文件夹。将apple文件夹上传到usr/themes/Joe/assets/owo/目录下。修改json定位到usr/themes/Joe/assets/json/joe.owo.json文件,打开并全部复制打开json解压网站,譬如 Jsonla、Bejson ,将内容粘贴进去,并格式化后,复制出来。 按照格式,在文档最末端添加内容: - 隐藏内容 - 在上方代码//这里空出来添加内容位置,加入举例的代码,依据自己实际情况修改增删 - 隐藏内容 - 检查无误后,重新用 Jsonla、Bejson 进行压缩,后覆盖源文件。修改phpphp文件有两个,一个显示评论区表情,一个显示邮件提醒的表情定位到core/factory.php找到以下代码$text = preg_replace_callback( '/\:\@\(\s*(高兴|小怒|脸红|内伤|装大款|赞一个|害羞|汗|吐血倒地|深思|不高兴|无语|亲亲|口水|尴尬|中指|想一想|哭泣|便便|献花|皱眉|傻笑|狂汗|吐|喷水|看不见|鼓掌|阴暗|长草|献黄瓜|邪恶|期待|得意|吐舌|喷血|无所谓|观察|暗地观察|肿包|中枪|大囧|呲牙|抠鼻|不说话|咽气|欢呼|锁眉|蜡烛|坐等|击掌|惊喜|喜极而泣|抽烟|不出所料|愤怒|无奈|黑线|投降|看热闹|扇耳光|小眼睛|中刀)\s*\)/is', function ($match) { return '<img style="max-height: 22px;" src="' . Helper::options()->themeUrl . '/assets/owo/aru/' . str_replace('%', '', urlencode($match[1])) . '_2x.png"/>'; }, $text );在上方代码的下面,复制出一份,并修改成我们需要的格式,这里一份作为参考: - 隐藏内容 - 定位到core/parse.php找到以下代码 $text = preg_replace_callback( '/\:\@\(\s*(高兴|小怒|脸红|内伤|装大款|赞一个|害羞|汗|吐血倒地|深思|不高兴|无语|亲亲|口水|尴尬|中指|想一想|哭泣|便便|献花|皱眉|傻笑|狂汗|吐|喷水|看不见|鼓掌|阴暗|长草|献黄瓜|邪恶|期待|得意|吐舌|喷血|无所谓|观察|暗地观察|肿包|中枪|大囧|呲牙|抠鼻|不说话|咽气|欢呼|锁眉|蜡烛|坐等|击掌|惊喜|喜极而泣|抽烟|不出所料|愤怒|无奈|黑线|投降|看热闹|扇耳光|小眼睛|中刀)\s*\)/is', function ($match) { return '<img class="owo_image lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="' . Helper::options()->themeUrl . '/assets/owo/aru/' . str_replace('%', '', urlencode($match[1])) . '_2x.png" alt="表情"/>'; }, $text );在上方代码的下面,复制出一份,并修改成我们需要的格式,这里一份作为参考: - 隐藏内容 - 然后就能在表情中看到了,最后注意几点:如果出错,请重新仔细查看本教程示例代码,注意文件路径,图片格式等是否填错推荐使用cdn代替本地图片,加快速度
利用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-JOE主题- 在任意位置显示最新公告或日记 (替换原有公告)
本来打算typecho不写什么修改记录了,但是经常有小伙伴留言的话我也记不住都是怎么改的,所以、还是偶尔随缘记录一下吧~本文火喵原创,禁止转载 有的小伙伴来访可能已经注意到了,右侧侧边栏下侧有最新心情记录,还有头图下侧的公告那里,也能直接点进去看到记录,那么怎么样做呢~我在网上翻到了这样一篇文章 《Typecho调用单独页面评论代码》 。因为我们的公告还有心情(日记,随笔,微博)页面的记录,都是以评论的方式记录下的,所以我们只需要调用单独页面的最新评论即可。因为博客的登录特效,所以我们的公告,心情页面需要设置成仅登录时显示留言文本框,具体的页面设置方法和现成模板可以参考我的这一篇文章—— 《添加了一个随记页面》 假如我们做一个公告,以此替换joe自带的公告,在我们设置好独立模板后,需要记住页面缩略名,也就是页面的slug,比如我们的是gonggao,然后在网站的根目录下新建 commlist.php 文件,内容如下: - 隐藏内容 - 然后,在joe主题目录下\themes\Joe\index.php,在147行处(如图)使用以下代码替换红框中代码 <?php include "commlist.php";?>这样就完成了,快去发布一条公告试一下吧!参考 https://mrasong.com/a/typecho-comment-list
免插件为HEXO博客添加侧边栏日历
{alert type="success"}之前一直在用hexo的butterfly主题,找到了一个日历插件,但是当时完全不能用,修改了好久终于和主题完美适配了,一直懒的写教程,但是也用了很久一直没发现问题,故而分享给大家,因为是针对butterfly主题修改的css,但是核心部分是通用的,希望大家喜欢!{/alert}{message type="error" content="本文火喵原创,禁止转载"/}{alert type="error"}本方法可能已经失效{/alert}{callout color="#f0ad4e"}首先展示一下效果,各位更可以前往 旧站点 查看效果{/callout}{dotted startColor="#ff6c6c" endColor="#1989fa"/}Butterly主题准备工作{message type="info" content="如果你用的是Butterfly主题,需要提前做好侧边栏,其他主题相应的在侧边栏为日历腾出位置"/}​先贴上净土大神写的日历插件,直接在在命令行窗口安装。前提是你要装的有node.jsnpm install --save git://github.com/howiefh/hexo-generator-calendar.git安装完毕以后,运行一下 hexo g ,然后去hexo目录下的public 目录下看看是是否有一个calendar.json 文件,这个很重要的。在\hexo\themes\butterfly\layout\includes\widget目录下新建calendar.pug,内容如下.card-widget.card-calendar .card-calendar include ./calendar.html在同目录中打开index.pug,选取适当位置类比添加如下内容if theme.aside.card_calendar include ./calendar.pug在同目录下新建calendar.html,内容如下 - 隐藏内容 - {message type="error" content="上方代码中,css及js需换成自己的链接,也可以用我的,但是!calendar.js文件中需要修改下方步骤,而且上方代码中的网站(第32行)需要换成自己的"/}三个文件css+jscalendar.js - 隐藏内容 - {message type="error" content="上方代码的第823行处地址,需换成自己的地址"/}{dotted startColor="#ff6c6c" endColor="#1989fa"/}calendar.css - 隐藏内容 - {message type="warning" content="上方css为本人个人优化,须以实际情况为准,可以做相应修改"/}{callout color="#f0ad4e"}参考来源 https://www.cnblogs.com/kingning/p/11078782.html{/callout}
萌ICP备20210005号 辽ICP备2021005644号-1 辽公网安备 21021102000984号 本站已运行 2 年 205 天 19 小时 19 分 51统计 百度统计 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2020 ~ 2022. 火喵博客・日记本 All rights reserved.
历史足迹
分类目录
  • 日常
  • 晒物
  • 🦙 代码
  • 🏗️ 建站
  • 📷 生活