唐志远の博客

注意：请将文章中涉及到 https://cdn.jsdelivr.net 替换成 https://fastly.jsdelivr.net。 更新记录 2022-05-22 valine获取评论失败 请将文章中涉及到 https://cdn.jsdelivr.net 替换成 https://fastly.jsdelivr.net。之后抽空会更新从零搭建Hexo的教程，敬请期待。更新valine表情包数据(不想更新的话，请将valine.json中的 https://cdn.jsdelivr.net 替换成 https://fastly.jsdelivr.net。 2021-11-27 valine获取评论失败 新增valine获取评论失败说明。 2021-11-22 持续优化 新增禁止右键及F12等事件说明。新增部分动效说明。新增部分页面插入视频。 2021-09-17 介入外挂标签 教程篇幅过长，对读者阅读不是很友好，所以在形式上进行了整改，希望效果能比之前好。有什么建议，也可以提出来，谢谢！ 2021-08-26 持续优化 新增首页分类磁铁。新增侧边栏电子时钟。更换字体。 ...

前言之前有小伙伴留言问我博客悬挂灯笼如何实现的？ 那现在写一篇简单的教程。 悬挂灯笼效果还是先看效果，如果没有达到您的审美高度，建议不要使用。 PCMobile 步骤 新建CSS样式在 themes\Butterfly\source\css 文件下新建 CSS 文件，并命名为 lantern.css( 当然名字随便取，只要在主题配置文件中引入对应的CSS文件即可 )，将以下代码复制到新建的lantern.css中。/* 灯笼 Start */* { box-sizing: border-box;}/* 移动端显示/隐藏 /none/block，可自定义显示一个 */@media screen and (max-width: 970px) { .d-box1 { display: none; } .dengl .d-box { right: 0px; top: -40px; /* 自定义灯笼大小 */ transform: scale(0.4); }}. ...

本文摘自：Akilarの外挂标签引入 更新记录 2021-04-27 butterfly3.4.0 -> 3.7.1 更新v3.7.1适配方案注意一点的是，butterfly_v3.6.0取消了缓存配置，转为完全默认，需要将{cache:theme.fragment_cache} 改为 { cache:true }。 点开查看外挂标签配置教程 下载资源文件 下载Tag_Plugins_v1.5.zip 将下载的Tag_Plugins.zip解压得到butterfly文件夹。将butterfly文件夹复制到[Blogroot]\node_modules\hexo-theme-butterfly目录下，覆盖当前的butterfly主题文件夹，提示重复则选择替换。(如果担心覆盖自己的其他魔改内容，可以根据静态文件内容自主比对修改)修改[Blogroot]\_config.butterfly.yml的inject配置项，添加CDN依赖项。由于issues写入timeline和site-car ...

更新记录 2021-06-18 新增几款后台管理系统模板。注意一点的是，在原基础上直接加在后面（未按starts数排序）。 2021-03-06 推荐一些 Vue 常用后台管理系统模板。 前言Vue.js 是一个目前比较流行的前端框架，已经到了前端人人都会的地步，今天这里为大家罗列一下基于 Vue 的后端管理的框架。目前比较流行和 Vue 搭配的 UI组件 有Element-UI、iview、Bootstrap-Vue、Ant-Design-Vue，另外还有Vuetify、Buefy （Bulma css）、Vue Material 等等。基于这些组件库封装的后台管理模板，推荐一些常用 VUE后台模板 给大家。按照 Github 星标数量来依次介绍。 vue-element-admin (68.6k)Vue-Element-Admin（github上的标星数为63.3k）是一个后台前端解决方案，它基于 Vue 和 Element-UI 实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快 ...

今天分享的主题是：「一种自动化生成骨架屏的方案」， 先看下市场上常见的骨架屏优化效果。 某宝 PC端 某东 PC端 某推 APP 某博 APP 今天的分享主要分为三个部分： 首屏加载状态演进 如何构建骨架屏 将骨架屏打包的项目中 首屏加载的演进我们先来看一些权威机构所做的研究报告。 一份是 Akamai 的研究报告，当时总共采访了大约 1048 名网上购物者，得出了这样的结论： 大约有 47% 的用户期望他们的页面在两秒之内加载完成。 如果页面加载时间超过 3s，大约有 40% 的用户选择离开或关闭页面。 这是 TagMan 和眼镜零售商 Glasses Direct 合作进行的测试，研究页面加载速度和最终转化率的关系： 在这份测试报告中，发现了网页加载速度和转化率呈现明显的负相关性，在页面加载时间为1~2 秒时的转化率是最高的，而当加载时间继续增长，转化率开始呈现一个下降的趋势，大约页面加载时间每增加 1s 转化率下降6.7个百分点。 另外一份研究报告是 MIT 神经科学家在 2014 年做的研究，人类可以在 13ms 内感知到离散图片的存在，并将图片的大概 ...

前言最近关于H5和APP的开发中使用到了webSocket，由于web/app有时候会出现网络不稳定或者服务端主动断开，这时候导致消息推送不了的情况，需要客户端进行重连。查阅资料后发现了一个心跳机制，也就是客户端间隔一段时间就向服务器发送一条消息，如果服务器收到消息就回复一条信息过来，如果一定时间内没有回复，则表示已经与服务器断开连接了，这个时候就需要进行重连。 被动断开则进行重连，主动断开的不重连。 说明：下图针对两个Tab项（Open Trades 和 Closed Trades），只希望在 tabIndex = 0 （Open Trades 高亮时）触发webSocket , 如果点击第二个栏目 , tabIndex = 1（Closed Trades高亮时）则主动关闭webSodket连接。 TabIndex = 0 时 ，被动断开则自动重连。 效果 webScoket连接并接收推送的消息 将接收的消息转换成目标数据，并渲染 如果主动关闭，则不进行重连，监听关闭事件 显示已关闭，不重连 监听错误事件，比如地址，协议错误等，则会自动重连五次，五次重连仍失败后则需要进行手动重连 ...

这里有一些值得分享的网站，快快添加到你的收藏夹吧。 Random Image via API网址：https://source.unsplash.com/ 世界上最强大的照片引擎。Unsplash API 是一种现代 JSON API，它显示了为用户构建任何体验所需的所有信息 Embeddable Widget Apps for Notion网址：http://apption.co/ 这个网站上面有很多小工具，你可以将它们直接添加到自己的网站上，或者自定义更改后嵌入到网站上，非常简单方便 Carbon这个网站可以把你的代码转成一张精美海报，我一直在用，非常不错，carbon 具有以下功能特性： 从GitHub的要点导入：只需将一个 GitHub gist id 追加到url 定制：自定义图片的语法主题，窗口样式等等 快速分享：点击一下即可保存您的图片或者点击链接 网址：http://carbon.now.sh Peppertype利用AI可以在几秒钟内生成内容，扩写你的博客内容，假如你平常不写博客，这个网站用处应该不大。 网址：https://www.peppert ...

这里将记录自己工作或学习中关于Vue+element-ui的系列问题，如果您有有更好的解决方法可以在下面进行评论喔~ DatePicker快捷选项/* * @name: range-pick-opt.js 日期选择器快捷选项 * @Author: tzy1997 * @Date: 2020-11-18 17:30:20 * @LastEditors: tzy1997 * @LastEditTime: 2021-11-22 15:16:14 */import i18n from '@/lang' // 如果不需要 中英文则注释掉//时间选择const rangePickerOptions = { shortcuts: [{ // text: "今天", text: i18n.t('shortcuts.t1'), onClick(picker) { const end = new Date(); const start = new Date(); ...

新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。 原生名词有几个叫法，Neumorphism / soft ui，翻译过来是新拟态或者是软ui。国内的翻译叫，新拟物风格。Neumorphism，是New +Skeuomorphism的组合词。按照我个人的通俗理解，就是将界面的一部分凸起来，另一部分凹下去，形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」 新拟态 UI 风格与扁平、投影风格的对比 从上面这张对比图可以看出，扁平风格就像是一张纸贴在墙面上，投影风格像是浮在半空中，而新拟态风格则像是墙面上直接凸起了一块。要实现这种风格，精髓在于一个白色的阴影+一个常规阴影。一个示例如下图所示： Neumorphism css 在线生成器地址：https://neumorphism.io 前端实现的效果： 代码如下： <!DOCTYPE html><html lang="en"><head> <meta chars ...

前言随着开发经验的积累，很多人会有自己的常用站点，一些网址收藏，自己造的轮子或者别人的轮子，工具函数库等等。这里提供一些常用的工具函数，如果你也有一些觉得挺不错的库，欢迎在下方评论💓。 格式化时间戳export function formatDateTimeStamp(date, fmt) { // 格式化时间戳 : formatDateTimeStamp(new Date(time),'yyyy-MM-dd hh:mm:ss') if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': d ...