使用Gitalk实现静态博客无后台评论系统
本文作者: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 ...
解决百度无法收录搭建在GitHub上的个人博客的问题
本文作者: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使用手册
...
PicX图床管理
前言写博客文章时,图片的上传和存放是一个问题,我们也许会在不同的平台发布同一篇文章,这样一来每个平台都要上传图片。
为了解决这些问题,做法是把图片统一上传到一个在线的第三方静态资源库中,我们把这个资源库称为图床。其返回一个图片的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使用合集2
前言上一篇我们介绍了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="日期" ...
Element使用合集1
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 ...
CSS选取第n个标签元素
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的标签 ...
这些CSS3动画你get了吗?
前言我们以前传统的动画可以是用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基本流程
绘制一个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> ...