小胖墩er

本文作者：xugaoyi 链接：https://xugaoyi.com 来源：Evan's blog 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 使用Gitalk实现静态博客无后台评论系统前言Gitalk，一个基于 Github Issue 和 Preact 开发的评论插件。 下面我们来用它在vuepress搭建的博客中搭建评论区吧 准备使用一个新的东西首先当然是要了解它 Gitalk demo：https://gitalk.github.io/ Gitalk github：https://github.com/gitalk/gitalk 实现如何实现？最好的方法我认为是看官方文档，这里我只是记录一下实现的步骤。 使用一个别人已经开发好的 vuepress-plugin-comment 插件来帮助我们把Gitalk应用到vuepress搭建的静态博客。 安装1npm install --save vuepress-plugin-comment 使用options的配置和Gitalk的配置相同 123456789101112 ...

本文作者：xugaoyi 链接：https://xugaoyi.com 来源：Evan's blog 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 解决百度无法收录搭建在GitHub上的静态博客的问题 如果你正在寻找本博客的搭建文档，博主建议您查看这个仓库的README。 背景由于GitHub禁止百度爬虫访问，造成托管在GitHub Pages上的博客无法被百度收录。相关问题可以通过百度站长平台的抓取诊断再现，每次都是403 Forbidden的错误。 解决方案同时将博客同时同步托管到GitHub Pages和coding pages上，解决百度不收录问题。最后发现在国内使用coding pages打开速度特别快，而且还会被百度收录，因此我把coding pages的站点作为主站点，原本在github pages的作为分站点。 步骤： 1、注册coding账号，创建仓库，把代码推送到coding仓库，并开启pages服务。 git 操作部分和使用github的差不多，不了解git操作的可以看我的另一篇文章：Git使用手册 ...

前言写博客文章时，图片的上传和存放是一个问题，我们也许会在不同的平台发布同一篇文章，这样一来每个平台都要上传图片。 为了解决这些问题，做法是把图片统一上传到一个在线的第三方静态资源库中，我们把这个资源库称为图床。其返回一个图片的URL，使用markdown+图片url的方式写作文章，然后就可以直接使用链接引入图片。然后整篇文章复制即可，再也不用担心图片的问题了。 介绍PicX，基于 GitHub API 开发的图床管理神器，图片外链使用 jsDelivr 进行全球 CDN 加速。免费、稳定、高效。免下载、免安装，只需一个 GitHub 账号，打开网站即可进行配置使用，轻松解决图床难题。 一共3个步骤就完成设置了 创建 GitHub 仓库 获取 GitHub Token 配置图床 作者：@XPoet 网站：https://picx.xpoet.cn/ 仓库：https://github.com/XPoet/picx 文档：https://github.com/XPoet/picx/blob/master/README.md 1. 创建 GitHub 仓库这创建仓库相信大家都会了啊，那 ...

前言上一篇我们介绍了Element-UI使用的三个小技巧(Element-UI 使用合集)，今天我们再来看另外2个。一起掌握更多知识叭！ 1、Vue Element-ui 表格单独设置行背景色效果图如下: 需求假设我们从后端返回的数据，根据某个字段对每一行的数据添加背景颜色，便于用户区分筛选，这里我们用到el-table的row-style属性，参数如下； 行的style回调方法(Function({row, rowIndex})/Object),这里我们直接用row就够了，我们打印看一下，row就是当前行的数据 代码 123456789101112<template> <el-table :data="tableData" style="width: 100%" border :row-style="tableRowStyle" > <el-table-column prop="date" label="日期" ...

vue Element-ui 表格多选 修改选中行背景色先来看看效果图： 整体思路方式： 给获取到的数据添加自定义的className 在点击行(row-click)和手动点击勾选框的事件(select-all)中获取到当前的row的className,直接修改className即可 点击查看事件说明 在行的 className 的回调方法中(row-class-name)直接返回className 还有另一种方式通过获取row进行循环，判断当前点击row的id或者index与数据的是否相等，然后存放点击后的row到新的数组中，这种方式因为触及到遍历。当我有500行数据或者很多行数据，可想而知这里要遍历多少次，还有另一个就是连续点行的颜色发生变化会有延迟，相对来说性能就不好了。 步骤如下 　　1、给数据添加自定义className, 由于这里演示的是本地数据，是直接添加的className; 真实开发是通过接口去加载数据，获取到的数据 直接遍历 赋值就可以，后面就不用管遍历了 1234567891011121314151617181920212223242526272 ...

1、first-childfirst-child表示选择列表中的第一个标签。例如：li:first-child{background:#fff} 2、last-childlast-child表示选择列表中的最后一个标签，例如：li:last-child{background:#fff} 3、nth-child(3)表示选择列表中的第3个标签，例如：li:nth-child(3){background:#fff}，代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。 4、nth-child(2n)这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签，例如：li:nth-child(2n){background:#fff} 5、nth-child(2n-1)这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签，例如：li:nth-child(2n-1){background:#fff} 6、nth-child(n+3)这个表示选择列表中的标签从第3个开始到最后。 7、nth-child(-n+3)这个表示选择列表中的标签从0到3，即小于3的标签 ...

前言我们以前传统的动画可以是用js写的多一点，但是随之css3的出现，对动画的开发也比js简单，代码量也相对的会少一点。那我们今天就搞几个动画看看到底有多神奇。 用到的知识点 伪元素：::before和::after transform animation 伪类选择器nth-child @keyframes skew 2D转换3D文字简单来说就是实现一个可以翻转的文字，悬浮字体，字体会产生一种感觉像立体的效果。其实是使用了skew2D转换加上一个rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 效果图 我们先来分析分析。 我们可以看到文字有两种，一个是黑色不动的，另一个是可以动的白色。那我们是写两份一样的还是怎么样呢？第二个就是翻转位置,我们这里是向左翻转的，这个也简单，transform-origin就能改变翻转位置的中心点。 其实不用这么复杂，这么我们直接使用伪元素就好了，伪元素里的content不就刚好可以自定义内容嘛，再配合一个自定义属性，方便快捷，我们只需写一份文字就搞定。 布局 自定义属性：data-xxx123456<div class=& ...

绘制一个SVG基本流程 绘制一个svg根标签 绘制一个rect标签，它是一个绘制矩形的标签，宽高设置100%也就是把父级元素占满，fill属性为设置背景颜色 绘制一个circle标签，它是一个绘制圆形的标签，cx和cy是偏移的属性（默认是0，即圆心在坐标0，0中绘画），r是半径大小 1234<svg width='300' height='200'> <rect width='100%' height='100%' fill='green'/> <circle cx='50' cy='50' r='50' fill='yellow'></circle></svg>

实现的是登录与注册之间相互切换，背景也会跟着改变的效果 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102body { background-color: #ededed; display: flex; width: 100vw; height: 100vh; overflow: hidden;}.flexCenter { display: flex; align-items: center; justify-content: center;}.main { position: relative; width: 900px; height: 550px; margin ...

本文作者：Alaso 链接：https://juejin.cn/post/6924206099193135111 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 毛玻璃效果就是模糊效果，关键是让谁模糊？对元素运用filter: blur(30px)会让它的子元素也变模糊，所以不能让class=”content”元素模糊； 这里文本所在的区域宽高是不定的，所以没办法用一个空div做模糊效果，然后“垫”在class=”content”元素下面。于是，我们想到了伪类 。 1234567891011121314<div class="poem"> <div class="content"> <p> 明月别枝惊鹊，<br> 清风半夜鸣蝉。<br> 稻花香里说丰年，<br> 听取蛙声一片。<br> ...