admin 发布的文章

CREAMy 简洁大气源码


CREAMy 简洁大气源码
2020年01月02日
一个比较简洁大气的模板,单栏结构。
在线演示   购买源码

请输入图片描述

安装教程:

首先下载主题-->解压缩后将文件夹改名为您喜欢的名字-->放入“theme”文件夹中-->进入博客后台-->外观-->启动即可。

功能介绍
自定义 Gravatar 源
自定义静态镜像源(如七牛云)
无后端评论系统(Valine)
How to user Valine
前往这里以获取APP ID 和 APP Key,然后再去后台设置相应的选项即可。

更新日志
v1.0.7
优化代码
文章列表AJAX加载
更新自带评论样式
每页文章数目只能设置为偶数
添加分类目录背景图片设置(请在分类描述填入你的图片URL)
v1.0.5
添加搜索
添加全站PJAX
评论采用AJAX
完善图片懒加载
v1.0.4
添加自带评论系统
v1.0.3
优化代码
页面小改动
添加图片懒加载功能
友情提醒:如果有不会安装的,或者不懂的,可以联系客服,他会一步一步教你搭建。
在线演示   购买源码


TIME 时光相册源码


TIME 时光相册
2020年01月02日
一个图片的相册模板,很漂亮。
在线演示   购买源码

请输入图片描述

安装教程:
这个一个基于typecho的相册模板。前端采用Multiverse,由钻芒适配并优化
使用方法
将主题上传到typecho模板目录 /usr/themes/
使用前需前往typecho后台,设置-阅读,调整每页文章显示替换为 999
首页只会输出5篇文章。需调整大一些,即可实现无限滚动

图片添加方式:
考虑到国内的IDc带宽,为了用户的访问速度。图片采用外链方式插入。(推荐搭配图床使用)
图片链接填充在文章编辑器下面的自定义段落的图片链接一栏
关于图片问题
网页中图片一直是占用资源最大的。图片站当然更了不得。太大会影响访问速度。说一下现有解决方案
压缩图片 推荐tinyPNG 更多压缩工具可以查看极客导航
列表项 图片转换成webp格式,webp由Google开发,可无损大幅减少图片内存。原生支持Chrome Firefox,安卓。ios不支持(可代码适配,后续加入)
国内的云存储一般都支持格式转换,如阿里云,又拍云等
阿里云快速将图片转换成webp格式。在阿里云oss可使用样式将图片转换成webp

例如:
转换前 jpg格式 268kb https://a-oss.zmki.cn/2019/20191121-9d2f622305c0c.jpg 转换后 webp格式 140kb https://a-oss.zmki.cn/2019/20191121-9d2f622305c0c.jpg-webp
更新
V1.0.2更新
修复进场加载特效(黑色瀑布)
优化访问速度
V1.0.1 第一个版本
多字段后台可调
友好的SEO,后台可设置tkd
关于联系方式后台可调
友情提醒:如果有不会安装的,或者不懂的,可以联系客服,他会一步一步教你搭建。
在线演示   购买源码


Cuckoo 双栏源码


Cuckoo 双栏模板
2020年02月11日
一个简单的模板,基本MDUI框架,双栏。
在线演示   购买源码

Cuckoo 双栏模板

源码安装教程:

这是一款适用于“Typecho”,基于 [MDUI] 框架的双栏主题。

主题的名字翻译为中文即为“布谷鸟”,其寓意是“不咕”~希望大家可以当一只“不咕”鸟。

使用方式:

下载主题-->解压缩后将文件夹改名为“Cuckoo”-->放入“theme”文件夹中-->进入博客后台-->外观-->启动即可。

功能介绍:

全站PJAX,AJAX评论
可自由选择静态文件源,支持自定义
可自由添加联系方式(目前支持QQ、Github、Telegram、Twitter、Bilibili、Email,后续会根据需求逐步添加)
友人帐(需要“Link”插件支持)
文章目录树
图片懒加载(lazyload)
等等...

友情提醒:如果有不会安装的,或者不懂的,可以联系客服,他会一步一步教你搭建。
在线演示   购买源码


前端最主流框架,插件库,组件库


前端三大框架Angular、react、vue

插件网址:http://www.htmleaf.com

1、Amaze Ui(妹子UI):中国首个html5跨屏前端框架

http://amazeui.org/

2、WebUploader:一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。

http://fex.baidu.com/webuploader/

3、myFocus:一个专注于焦点图/轮换图制作的JS库,是轻量级的,好用。

http://demo.jb51.net/js/myfocus/

4、Swiper:移动端网站的内容触摸滑动插件,能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

http://www.swiper.com.cn/

5、jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。插件引用地址为:

http://bassistance.de/jquery-plugins/jquery-plugin-validation

6、clipboard.js 是一个不需要flash,将文本复制到剪贴板的插件

https://www.jianshu.com/p/3f8867de041e

7、Animate.css 一款强大的预设css3动画库

http://www.jq22.com/jquery-info819/

8、Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

http://fontawesome.dashgame.com/

9、漂亮实用的js提示框插件SweetAlert。SweetAlert 是一个 JavaScript 插件,能够完美替代 JavaScript 自带的 alert 弹出框,并且功能强大、设计优美。

http://www.bootcdn.cn/sweetalert/

10、ExtJs通常简称为Ext,它是一个非常优秀的Ajax框架,用Javascript编写,它与后台技术无关,可以用来开发具有炫丽外观的富客户端应用。Ext所开发的多彩界面吸引了许多程序员的眼球,同时也吸引了众多客户,它似乎一夜之间就速讯流行开来,对于企业应用系统,成MIS类型的系统而言,Ext非常适合。

https://www.sencha.com/products/extjs/

11、一款漂亮的类似于Bootstrap 3 风格的 jQuery 菜单插件,允许用户创建类似手风琴效果的可折叠菜单,允许自动折叠效果。

http://mm.onokumus.com/

https://www.cnblogs.com/hughdong/p/7337863.html

12、slimscroll是一个4.6kb的jQuery插件,把任何div元素包裹的内容区加上具有好的滚动条。slimscroll不占用任何视觉空间,它只出现在一个用户启动的鼠标。用户可以拖动滚动条或使用鼠标滚轮改变滚动值。

https://www.js-css.cn/a/openframe/jqueryapi/other/2013/1222/1070.html

13、layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。

在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性。

http://layer.layui.com/

14、H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版采用源生html语言,完全免费,简单灵活,兼容性好让您快速搭建中小型网站后台H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版采用源生html语言,完全免费,简单灵活,兼容性好让您快速搭建中小型网站。

http://www.h-ui.net/H-ui.admin.shtml

http://demo.mycodes.net/houtai/hAdmin/

15、使用 jquery.validate.messages_cn.js 插件实现表单自动验证,出现中文乱码

https://segmentfault.com/a/1190000010899435

16 、和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件。

https://scrollrevealjs.org/

颜色库:
http://xh.5156edu.com/page/z1015m9220j18754.html


数组去重12种方案


兜个小圈 先总结一下我们数组的方法:
pop
push
shift
unshift
slice
splice
sort
reverse
concot
join
indexOf
lastIndexOf
map
forEach
还有其他可以处理数组的几个方法~
– includes:返回一个布尔值,如果存在返回false
– find:返回第一次找到的那一项
– some:返回一个布尔值,只要一个是true,就返回true
– every:返回一个布尔值,需要每一项都是true,才返回true
– filter:返回一个过滤后的新数组;如果返回true就留下,false就过滤掉
– reduce:收敛
下面我们进入正题~(希望能对你有帮助~小编有点皮!!哈哈哈哈哈哈)

方法一:set :不是一种数据类型,是一种数据结构;成员唯一
let arr = [12,1,12,3,1,88,66,9,66];
function unique(ary) {

    let s  = new Set(ary);
    // Array.from : 将set数据结构转成真正的数组;
    return  Array.from(s)
}
unique(arr);

方法二:对象属性名不能重复
let arr = [12,1,12,3,1,88,66,9,66];
function unique(ary) {

    let obj = {};
    for(let i=0;i<ary.length;i++){
        let cur = ary[i];
        if(obj[cur]){
            //ary.splice(i,1);// 导致数组塌陷
            ary[i]=ary[ary.length-1];
            ary.length--;// 删除最后一项
            i--;
            continue;
        }
        obj[cur]=cur;// 给obj新增键值对;属性名和属性值是一样的
    }
}
unique(arr);

方法三:indexOf
let arr = [12,1,12,3,1,88,66,9,66];
function unique(ary) {

    let newAry = [];
    for(let i=0;i<ary.length;i++){
        let  cur = ary[i];
        if(newAry.indexOf(cur)===-1){
            newAry.push(cur);
        }
    }
    return newAry;
}
unique(arr)

方法四:sort
let arr = [12,1,12,3,1,88,66,9,66];
function unique(ary) {

   let a = ary.sort(function (a,b) {
       return a-b;
   });
   for(let i=0;i<a.length;i++){
       if(a[i]===a[i+1]){
           a.splice(i+1,1);
           i--;
       }
   }
   return a;

}
unique(arr)

方法五:includes :包含;如果数组包含那一项,返回true;不包含返回false;
let arr = [12,1,12,3,1,88,66,9,66];
function unique(ary) {

    let newAry = [];
    let len = ary.length;
    for(let i=0;i<len;i++){
        let cur = ary[i];
        if(!newAry.includes(cur)){
            newAry.push(cur);
        }
    }
    return newAry;
}
console.log(unique(arr));

方法六:hasOwnProperty : 检测属性名是否是对象的一个私有属性;返回一个布尔值;
let arr = [12,1,12,3,1,88,66,9,66];
function unique(ary) {

    let obj = {};
    return ary.filter(function (item,index,a) {
        // item : 数组每一个成员
        // index: 成员对应的索引
        // a : 整个数组
        // hasOwnProperty来校验的该属性是否出现过;
       return  obj.hasOwnProperty(typeof item+item)?false:obj[typeof item+item]=true;
       if(obj.hasOwnProperty(typeof item+item)){
           return false
       }else{
           obj[typeof item+item]=true;
           return true;
       }
    })
}
console.log(unique(arr))

方法七:filter+indexOf
let arr = [12,1,12,3,1,88,66,9,66];

function unique(ary) {
    return ary.filter(function (item,index,a) {
        return ary.indexOf(item)===index;
    })
}
console.log(unique(arr));

方法八:splice
let arr = [12,1,12,3,1,88,66,9,66];
function unique(ary) {

    for(let i=0;i<ary.length;i++){
        for(j=i+1;j<ary.length;j++){
            if(ary[i]===ary[j]){
                ary.splice(j,1);
                j--;
            }
        }
    }
    return ary;
}
unique(arr);

方法九:递归
let arr = [12,1,12,3,1,88,66,9,66];
function unique(ary) {

    let  len= ary.length;
    ary = ary.sort(function (a,b) {
        return a-b;
    });
    function loop(index) {
        if(index>=1){
            if(ary[index]===ary[index-1]){
                ary.splice(index,1);
            }
            loop(index-1)
        }
    }
    loop(len-1);
    return ary;
}
console.log(unique(arr));

方法十:Map :利用了Map数据结构存值的特点;
let arr = [12,1,12,3,1,88,66,9,66];
function unique(ary) {

    let newAry =[];
    let map = new Map();
    for(let i=0;i<ary.length;i++){
        if(!map.has(ary[i])){
            map.set(ary[i],true);
            newAry.push(ary[i]);
        }
    }
}
unique(arr);

方法十一:reduce
let arr = [12,1,12,3,1,88,66,9,66];
function unique(ary) {

    // reduce : 第一个是函数,第二个参数会传给第一次回调的prev;
    return ary.reduce((prev,next)=>{
        // 该函数返回值是下一次执行的prev;
        return prev.includes(next)?prev:[...prev,next];
    },[])
}
console.log(unique(arr));

方法十二:类似于方法一的set,用了剩余运算符…
let arr = [12,1,12,3,1,88,66,9,66];

let a = [...new Set(arr)];
console.log(a);