互联网资源多样化分享,丰富的计算机技术分享 - 吱吱工具箱butterPig

`前端技术`分类下的文章

前端技术

nginx禁止恶意ip访问

如果我们的网站有一定的流量之后,很可能会遭受到一些恶意的攻击和访问,从而导致服务瘫痪或者云服务器遭殃。所以我们要通过nginx来禁止某些ip的访问和攻击。本文介绍了如何使用Nginx屏蔽IP来防止意外发生,当然也可以通过iptable来实现。

阅读文章详情

前端技术

修改hexo博客ejs主题模板

前端时间在考虑搭建博客的时候,调研了挺多博客建站系统和框架,结果最后选择了hexo框架,因为感觉还是挺轻量化挺清爽的,并且不喜欢wordpress那种php的框架。hexo官网里面有琳琅满目的主题模板,可以随意选择进行装载。当时我选来选去,总算选到一个比较中意的模板,然而后来才发现那个模板挺坑的,里面很多功能都没有,很不全面,但是我没有换其他模板,因为好在这个模板还比较有个性,没有太同质化,所以挺多功能和优化最后都是靠我自己动手加进去的。我用的那个模板是用的ejs模板引擎写的,作为一个前端开发人员,可以基本看懂ejs文件内容,因为说白了就是把html和js糅合到一起,并且加入了一些不太认识的符号和函数,影响总体的理解。但是要自己动手修改,就有些难度了,毕竟对ejs完全不了解。所以现在分享一下ejs的基本用法。

阅读文章详情

前端技术

识别百度蜘蛛判断蜘蛛真伪

我们经常听到有站长们提问,爬虫蜘蛛抓取是什么?最近百度蜘蛛来的太频繁服务器抓爆了,最近百度蜘蛛都不来了怎么办,还有很多站点想得到百度蜘蛛的IP段,想把IP加入白名单,但IP是不固定的,因此无法对外界公布等等疑问。我们经常在网站日志中看到各种爬虫抓取记录,最常见的就是百度蜘蛛谷歌机器人等搜索引擎的抓取记录。以百度为例,通常我们判断是否是百度蜘蛛的抓取,主要是通过看用户代理字符串,也就是User-Agent,但是User-Agent是可以模拟的,所以很多时候也会有虚假的蜘蛛,冒名顶替伪装成百度蜘蛛来抓取,这时候我们就需要学会分辨真伪。

阅读文章详情

前端技术

nginx将不带www域名301永久重定向到带www域名

很多新手个人站长在配置web服务器时,往往没有配置web服务器将不带www的网站域名,重定向到带www的网站域名。毕竟就算不弄重定向,对网站的访问没有什么实质性的区别。此时,通过在地址栏输入例如butterpig.top或者www.butterpig.top,都可以正常访问。然而经过学习了解到,这种方式不利于网站权重的集中,对seo很不利。因此我们必须修改配置,将不带www的域名访问,通过201重定向,直接指向到带www的域名。这样一来,就保证了该网站所有权重的集中,其实也相当于是让网站的访问路径更加同一规范吧。所以下面介绍一下怎样修改nginx的配置文件,达到我们想要的效果。

阅读文章详情

前端技术

vue动态路径参数和查询参数的区别及使用

众所周知,使用http进行网页的查询和导航时,是有两种url方式的,以前传统的方式是查询参数,也就是比如”xxx.com/?id=zzz”这种形式,”?”后面的id和内容,就是需要传递查询的参数。还有一种url方式,使用的是路径参数,是符合现代化restful风格的。也就是”/“后直接带上查询的路径,例如”xxx.com/user/zzz”,这种restful的接口形式,逻辑清晰、符合标准、易于理解、扩展方便,所以现在很多网站都在用了。那么在vue项目中,动态路径和查询参数这两种url形式如何实现呢。

阅读文章详情

前端技术

nginx中的try_files配置项,解决应用出现404和301重定向问题

nginx的使用非常广泛,但是其实它的配置方面并不是特别友好,换句话说nginx配置方面的坑其实还挺多,易用性不是那么强,但是真正配置好了,就会感觉挺好用了。nginx中有一个try_files配置,很多人在配置location的时候,没有加上这句配置,就会导致一些莫名其妙的问题。最典型的问题就是比如vue单页面项目,打包后通过nginx来映射,如果用户在点击浏览器刷新按钮,那么会出现一种情况就是,刷新后会显示404 not found,或者301重定向到了某个静态页面中去了。这些bug都是因为没有配置try_files的原因。

阅读文章详情

前端技术

在网站中引入无后端的valine评论系统,使用leancloud作为免费存储和评论管理

首先引用官网的介绍:Valine 诞生于2017年8月7日,是一款基于LeanCloud的快速、简洁且高效的无后端评论系统。理论上支持但不限于静态博客,目前已有Hexo、Jekyll、Typecho、Hugo、Ghost 等博客程序在使用Valine。官方地址
相信这对于很多不想自己搭建评论系统后台的人而言,是很有诱惑力的。然而类似的社会化评论系统也不少,国内以前有一些评论系统比如友言之类的,都因为变现困难等原因倒闭了。目前用户使用比较多的一般是畅言和来必力这俩,一开始我也想用这两家的评论系统,然而经过一番调研,他们俩都不太符合我的需求。因为我需要的是一个网友能够直接评论,不需要使用第三方账号授权登录的评论系统。恰巧国内大部分的评论系统都是在评论之前要使用第三方社交账号授权登录才行。这样一来反而打消了很多人在网页上发表评论的热情,把简单的事情弄复杂了。valine正好就符合了我的需求,首先它很简单就可以引入到网页中,然后评论不需要第三方授权登录,并且不需要搭建自己的后台接口来处理评论。

阅读文章详情

前端技术

在hexo博客文章中让图片居中显示的两种简单方法

在markdown语法的插入图片功能中,是天生不支持设置图片居中以及图片显示宽高这些属性的。好在markdown是支持html语法的,因此曲线救国的办法倒是相当多,下面介绍两种实现markdown中图片水平居中的办法,不然写博文时,图片总是靠左显示。

阅读文章详情

前端技术

elementui中跑马灯组件如何实现高度自适应的方法

elementui中有一个el-carousel跑马灯组件,这个组件作为滚动循环广告等来使用是非常合适的。但是在实际使用中也是有坑的,比如跑马灯的高度是通过vue组件属性props固定的。默认是300px高。然而在实际项目中,往往需要跑马灯的高度能够动态改变,来达到需要的显示效果。特别是如果跑马灯里面的item的高度比外层总的固定高度更高,那么跑马灯里面item的内容就会显示不全。

阅读文章详情

返回顶部