函数部分比较少用，有时间我再来细看，这里扒了一下简书的文章。文章来自：链接1. 字符串函数unquote（$string）：删除字符串中的引号；quote（$string）：给字符串添加引号；To-upper-case（$string）：将字符串小写字母转换为大写字母To-lower-case（$string）：将字符串大写字母转换为小写字母（1） unquote（$string）unquote函数主要功能是删除字符串中的引号：不管是双引号还是单引号包裹的字符串，引号皆被去掉；只能删除字符串最前边和最后边的引号，没法去掉中间的引号；如果字符串没有带引号，则返回原字符串；若引号中，有半个不...
sass支持继承css属性，一般来说，我们的css继承是从父元素继承一部分可以继承的属性，比如color，font啊，这些，但是如果我们书写一个button按钮，样式会复杂很多，我们会修改它的颜色，边框，内边距等等一系列的属性，但是这些属性我们可能复用很多部分。但一般来说我们不可能对button这个元素名进行样式修改，而是单独建立一个class名来进行样式定制，但就是因为这样，后面如果还有多个button元素，我们可能会不断重复书写一些相同的代码。sass可以通过@extend 去继承某一个class的属性，并且本身也能够进行变动。.button-basic { border: ...
@minxin为混入，实际上可以理解为一个通用的变量，这个变量会将自身里面的属性全部return出去，和function一样，你调用我，我就给你返回一个内容。定义一个混入@mixin important-text { color: red; font-size: 25px; font-weight: bold; border: 1px solid blue; }混入的名字为：important-text，并且这个名字使用了连接符号-，和class的命名一样，并且sass的连接符除了这个还可以使用下划线_，也就是可以写成：important_text调用混入body { ...
sass可以将文件分割成多个片段文件，并通过一个scss文件引入这些片段，从而生成一个完整的css文件。首先我们要知道css3有一个 @import的属性，它可以引入本地或者外部文件，但是会生成一个http的请求，这就会导致网页的css渲染会发生延迟。而sass也支持这个属性，但是它的作用远不止如此。@import假设我们现在有两个sass文件，一个是主要的style.scss，一个用于初始化的reset.scss文件，我们要在style中引入reset；@import "reset"; body { font-family: Helvetica, sans-s...
sass最大的也是最常用的功能就是嵌套了。#nav { ul { color:red; } }这种写法可以理解为：#nav ul { color:red; }当我们要对#nav下多个元素控制css样式的时候，嵌套就显得非常方便，因为父选择器我们只需要写一次。虽然说可以无限嵌套下去，但是如果你根据dom树的结构进行嵌套，你会发现维护起来非常麻烦，因为内容一多，你可能都不知道这个class的父级是谁，所以一般来说，sass的嵌套最好保持在四层以内。嵌套属性我们写css经常会有很多重复的前缀名，比如说font系列的前缀，background的前缀，前面都是相同的，只有后面部...
sass支持变量，开头使用$符号表示，并且可以存储多种数据类型。字符串数字颜色值布尔值列表null 值例子$myFont: Helvetica, sans-serif; $myColor: red; $myFontSize: 18px; $myWidth: 680px; body { font-family: $myFont; font-size: $myFontSize; color: $myColor; } #container { width: $myWidth; }变量也是有作用域的。$myColor: red; h1 { $myColor: green...
本地创建的demo项目一般来说不需要git，但是默认的话，是会自动创建的，我暂时没有发现有什么办法可以在已经创建好的项目上直接去除，但是可以在项目创建时进行选择。vue create demo -n-n表示不需要git仓库。
本来是想基于谷歌的firebase服务进行单页app开发，但是遇到了一些问题，但是大概的结构已经摸清楚了，经历了几天头痛欲裂的查看官方文档日子。。。痛并快乐着，又成长了许多。首先介绍一下目前已经做好的功能：功能用户注册用户登录无登录状态可获取公共内容，也就是书签书签分类添加书签二级分类添加书签具体信息添加，包括：logo，title，href三个值，并且增加了对应的表单验证书签分类修改&删除书签二级分类修改&删除书签信息修改&删除搜索功能用户登录后才允许出现新建和编辑功能用户登录有效期（暂时只设置了临时有效）目前就很潦草的开发了这些功能，因为一个人要做很多事情，还要阅读大量莫名其妙的文档...
在使用搜索跳转路由时我遇到了一个问题，我的使用要求是，当我在顶部搜索框输入文字并回车时，要跳转至搜索页，并且搜索页要根据我传入的路由的查询参数进行处理。首次运行的时候很正常，路由页面能够进入，处理也能进行。但是当我第二次的时候，也就是已经进入搜索页的情况下，再次回车搜索时，就会报错，因为我重复进入同一个路由页面了。那么第一个问题：如何避免重复进入同一个路由报错如何避免重复进入同一个路由报错找了半天发现一串有意思的代码：this.$router.push({query: {plan: 'private'}})也就是说，我们路由跳转的时候，只传一个对象，这个对象只包含qu...
Reach 基于Bootsarp4的响应式博客主题，目的是为了更好的阅读体验，更快捷的使用方式，更优质的UI而存在。预览图功能特性[x] todo列表[x] 目录树[x] 评论表情[x] 轮播[x] 面包[x] 分享功能[x] bnner轮播[x] 代码高亮[x] 图箱[x] 主题切换[x] 文章自定义缩略图[x] 图片预加载[x] loading动画[x] 天气......下一版开发进度[ ] 锁屏功能[ ] 新的缓存方式[ ] ......更新内容v1.1修复nav菜单链接不支持非伪静态增加手机端搜索评论表单样式优化天气功能增加文章样式微调loading加载动画图片预加载文章缩略图也...
终于把站点迁移过来了，期间遇到一些问题，很蛋疼，比如，把站点文件夹整个打包备份后，数据库也一并备份，然后还原的时候会遇到一个神奇的bug。你的邮件回复提醒功能再也无法生效了，哪怕你重新设置账户信息。[hide]数据库备份为此我试了好久，发现只有一个办法可以完美解决这问题，就是会比较麻烦一些，但是文章数据，评论，分类信息，标签都可以完美保留。我们的效果就是，博客的设置信息全部丢弃，只保留文章数据，评论，分类信息，标签。所以我们首先要进入数据库管理，找到对应的几个表：accesscommentscontentsfieldsmetasrelationships如果你用的是默认前缀，那么其完整表...
之前有一段时间我发现网站功能都加载完了，但是浏览器还是显示转圈，找了半天发现是个人的头像加载太慢了，于是今天特意去找了下有什么快速的源，于是看到了七牛的一个源...真香....233话不多说，上教程首先我们要打开typecho根目录配置文件config.inc.php,在里面加上这句话！/** 更换gravatar头像源*/ define('__TYPECHO_GRAVATAR_PREFIX__', 'https://dn-qiniu-avatar.qbox.me/avatar/'); 完事！如果你自己反代了源，也可以把https这个链接改为你自己的。
在写《MUFlow》主题的时候，我遇到一个很头疼的问题，就是点击分类会显示分类菜单，但是这个菜单还会有子级菜单，按照嵌套规则，我对这个子级的菜单元素，用一个div包裹，并且加上了class类名dropdown-menu，然后里面的内容就按照官方的标准书写，但是就出现了一个问题。当我点击子级菜单后，整个菜单都消失了。一脸蒙蔽，什么鬼，难道我做错了，什么情况，在不断的对照不同人写的例子后，我崩溃了，然后无意间看到开发者控制台的class变化后，我大概有点知道为什么了。当我点击子级菜单后，子级菜单对应的dropdown-menu元素是显示的，它的class有了show类名，但是一级菜单就没了，...
关于自定义字体，我一开始只以为只能本地加载，也就是css里面定义的字体，都只能从本地加载到，但是后来我了解到字符图标，一开始也是照本宣科使用本地字体，这就导致了一个问题，如果服务器网速带宽不够，就会产生字符字体文件未加载完整时，有一个占位字符显示，时间一长就显得极度的难看。然后我使用了阿里矢量字体库里面的字体，是可以直接下载一个css文件，然后本地引用，就可以直接用了，我就奇了怪了，怎么做到的，当然，这个疑问到今天也就完全明白了。首先要明确一点，阿里巴巴的那个css文件虽然写的很多，但是个人测试的时候好像也不支持ie9以下，也不知道是代码问题还是什么，不过现在能兼容ie11就不错了。自定...
很多项目里面会用到复制和粘贴两个功能，但是我平时也用不到，这里就详细学习一下是怎么运作的。剪贴板事件了解剪贴板有6个事件，其中现代浏览器火狐只支持三个，ie和谷歌则支持全部。事件名说明beforecopy复制事件触发之前触发copy复制beforecut剪切事件触发之前触发cut剪切beforepaste粘贴事件触发之前触发paste粘贴其中火狐浏览器只支持 copy，cut，paste三个事件。其中ie和谷歌浏览器的话是都支持的，并且在ie中使用右键菜单进行复制剪切粘贴的操作，事件会触发多次，而在现代浏览器中，你复制一次，只会触发一次copy事件和beforecopy事件这种，哪怕是右...
去年一时冲动买了追风者218，被迫买了一块itx主板，但是坑爹的因为垃圾风道搞得我显卡风扇坏了，然后又没有地方有卖风扇，新显卡又买不起，无奈走上了垃圾的不归路。首先我们看下娱乐大师跑分：这个分数玩网游，吃鸡，包括程序员代码，都不是问题了，甚至用于办公都游刃有余。配置：主板主板是去年买来闲置的七彩虹H110 pro v20;因为垃圾追风者被迫购买，后来换了先马米立方，itx就闲置了，过年的时候就一直想着怎么把这个板子用上，于是打起了itx的主意。主板带m.2固态接口，但是走的sata带宽，对于我来说足够了，因为我用了几年这种接口，做个系统完全足够，对于我这个半吊子小白前端就是ojbk。况且...
独立页面目前只做了友链和关于页面，像分类页和时间归档这些基本没什么用，也就没有做，而FAQ页面准备设置为主题的帮助页面，但是目前太忙也没来得及做，到时候更新的时候加上去。创建友链和关于页面：如果你之前也有独立页面并且不是下面两个，我建议是删除，不删除虽然也会在导航栏输出，但是进去不会有内容，本主题暂时只适配这两个独立页面，有能力者也可以自行开发友链撰写 --- 创建页面 --- 标题填：友链 --- 链接自定义填：links --- 自定义模板选：links截图忘记写了，友链右侧的页面顺序填1友链的内容格式为表格，md的写法，格式如下：| LOGO | 站点名称 | 站点...
一般来说，vue的本地资源引入是由index.html文件进行引入的，但是我做页面的时候遇到一个问题，就是在首页刷新没有问题，在其他路由页面刷新，就会出现报错，提示 某某某js文件或者方法不错在，或者资源文件，如css，img这些引入出错。原因就是因为引入时在开头加./，按道理来说，加这个也没有问题，因为在vue-cli3里面，index.html文件是和静态文件在同一个目录的，这样引入并不会报错。但是错也错在这里，由于打包后，目录结构发生了变化，之前的./可能无法正确的获取，所以解决办法就是不要.了。目录结构示意图：正确的引入方式：<link rel="styleshe...
一般我们认为启用history模式只是去掉地址栏的#符号，然后Nginx服务器为了实现这个效果需要添加一段代码用于支持该效果。但实际上并不是表面上那么简单，给Nginx添加这段代码后，我们可以直接在地址栏输入路由链接，从而进入到对应的路由页面，如果没有使用该段代码，地址栏的#号依旧会消失，但是你无法通过直接输入路由地址直接进入到对应的页面。代码：## 启用history模式（ 什么请求都只返回index.html） location / { try_files $uri $uri/ /index.html; }
升级到3之后，静态的文件都统一存放在public目录下，但是这个目录下，你在index.html的时候很好引入，在组件中，就不行了，因为webpack打包后路径就变了，所以我们要使用一个动态的参数。动态参数绑定这种情况一般出现在我们用v-for遍历一个对象，在对象里面会有对于的图片的地址，但是这个地址一般来说可能只写图片的名字，因为路径是一样的，直接在遍历的时候统一就行了，但是这个时候我们会发现地址是失效的。<img v-for="item in imgarr" :src="'../../images/'+item.src"...
逛高斯键盘官网的时候，应该是去年的时候，官网改版后有一个特效挺有意思的，就是数字跳动，之前一直没空研究，今天抽空去看了下，js有一个开源的插件：countUp.js 先看看高斯的效果图：效果就是这样，我们先去下载js文件CountUp.js下载完我们找到dist目录下的countUp.min.js文件，拿出来在你需要的项目中。再新建一个js文件，名称自定义，这里是用于调用countUp的，你可以命名为：start.counUp.js教程注意，使用该功能你需要一个服务器环境，本地直接打开是不行的!引用由于版本更新后，采用了es6的模块写法，引入js文件的时候需要注意不能使用传统的type属...
以前写过一篇关于字体渐变效果的文章，那时候初出茅庐，啥都不太懂，就只会个静态，这次逛animate.css网站的时候发现他的字体是动态渐变效果的，这就有点刺激了，于是研究了一下。效果图教程主要是利用了css3的滤镜效果，也就是hue-rotate()色调转盘，他会根据当前的颜色进行调整，大概可以理解为ps中的调整色相吧。 p { font-size: 60px; color: #f35626; background-image: linear-gradient(92deg, #f35626 0%, #feab3a 100%); -webkit-ba...
最近评论