通用一键复制代码的方法

前言js有一个31k多的star的开源复制库：clipboard.js；但是一些简单复制并不想安装一个库来解决，所以就想自己写一个。copy所需要的东西Selection 对象用于获取被用户选中的部分，通过toString()方法可以获取被选中的文本内容，以及js操作选中。MDN文档：SelectionexecCommand 对象用于以命令的形式来操作网页的内容，说白了就是用它来实现复制文本操作，复制的是选中的文本MDN文档：execCommand 需要注意的是，execCommand在未来将会被遗弃，因为这个api本身是从ie浏览器那边继承的，久而久之各大浏览器都对其做了兼容，虽然...

前言写这个主题花了一些时间，我的想法是希望有一个优秀的阅读体验，毕竟本人喜欢记笔记，分享一些平遇到的问题和解决方法。于是乎看中了掘金的样式，挺适合阅读的，加上个人审美确实不太行，就想仿一下样式。随着现在前端的发展，一些新的特性增加，如果还是保持在旧的思维上，我觉得限制了开发者的自我提升，所以，本主题采用了大量es6的js语法，css上采用scss编译，如果你有兴趣，可以一起参与开发。主题预览github地址《Typecho_Theme_JJ》

以前写过一个关于自定义评论的文章，时至如今来看，还是有很多不足的，昨晚再新写主题的时候，也重新写了一次自定义评论，嗯，有了新的理解，因为其实真的很简单，仔细阅读本篇文章，相信你会有收获的。[hide]自定义评论模板到底要怎么做很简单，可以理解为两步：编写自定义评论的模板通过php渲染出自定义模板评论而为什么大多数人不会，其实就是因为官方的文档真的是，如果懂php的人，可能看了一两遍后明白了怎么回事，但是如果是小白入门，纯前端的童鞋，可能看的一脸蒙蔽。就算是原封不动的copy官方的示例代码也还是会报错，心累...因为，你不知道他要做什么，我编写了自定义模板函数threadedComment...

css3新增了三个伪类：:required、:valid、:invalid:required 表示input不能为空时使用的:valid 表示通过，表单元素和form表单都有的伪类:invalid 表示不通过，表单元素和form表单都有的伪类其实如果要做一个表单css校验样式，:valid和:invalid就行了，但是实际操作上，:invalid还是有一些问题的。当表单元素有required属性的时候，该表单元素默认就是:invalid，也就说，必填的表单元素，一开始就是不通过。所以，如果此时设置:invalid伪类样式，是不合适的。解决办法就是：使用:placeholder-shown...

这个问题还是同事发现的，毕竟我这种穷人根本用不起苹果，更何况也用不来，毕竟，我爱安卓。废话不多说，主要问题就是 iPhoneX底部小黑条问题，他的宽度也会被网页占据，导致小黑条显示在网页上头，第一是触发上会出现问题，第二是难看。解决办法就是通过css处理。解决方案首先对meta标签添加一条属性。<meta name="viewport" content="width=device-width, viewport-fit=cover">如果你已经有了viewport声明，那么就在后面content里加上viewport-fit=cover...

目前前端对字体的选择，最好的做法就是用系统的默认字体，这样省去了对每个操作系统的字体判断，谁知道我们指定的这个字体用户安装没有，而且字体文件一向都很大，特别是中文字体。但是对于指定系统字体，其实也是需要兼容的，这里就放上一个专业的字体文章：《奇思妙想 CSS 文字动画》；虽然这个文章名字叫动画，但是里面内容很丰富，自己学习。以css-tricks的为模板，提取其中精华，大概是这么一条信息：{ font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, ...

当我们给父元素设置flex布局的时候，子元素为了能够等分，常常flex-grow: 1;，但是你会发现，当里面有内容的时候，宽度就发生了变化，变得不是等分了。所以我们可以理解：flex-grow: 1其实他不是真正意义上的等分宽度，而是等分剩余宽度，而剩余宽度是总宽度减去内容宽度，再进行等分。而且这个等分甚至还是根据内容多少来等分，有的内容多，他等分还多一些。所以这就很尴尬。为此，如果想要真正的等分，就需要设置相同的width宽度。如：.value { width: 0; flex-grow: 1; }这样就行了。width的值0我感觉是最好的，如果你设置其他宽度也行，具体看自己...

Lay 是一个精心制作的侧边栏主题，提高了响应速度，优化了诸多地方历经时间打磨，更贴合需求预览特性基于Layui框架制作，模块化结构，异步加载js，加快页面响应响应式布局html5+css3+es5+es6基于Layui框架模块化结构异步js加载优秀的灯箱比较全面的代码高亮，精选四种高亮主题，支持常用的语言，还支持：shell、sass、scss、styles、less、c++、go、php、nginx、等语言。缩略文章无刷新加载，增加用户体验支持主题可视化配置侧边栏导航三种主题，可设置支持微信、支付宝二维码赞助符合国内的分享功能支持评论表情，更新了一些表情支持前台登录支持前台注册点赞效...

之前写过一篇typecho上一篇下一篇的文章，但是当时是对官方的代码进行小改，虽然文章标题，链接都能获取到，但是没法获取到更多，包括文章缩略图。为此我是绞尽脑汁啊，还参考了一些有这种效果的作品，发现，不行，没有我想要的效果。他们的效果都是获取文章的自定义字段，也就是和自定义文章缩略图的那种路子，你只有设置了，他这里才能显示，他不能自动去获取，有的好像连个随机不够做吧。终于，有一天晚上，我一时兴起，想解决下这个问题，于是有了这篇文章，首先我们需要两段代码，这两段代码我是通过网上的代码进行修改的，去掉了一些部分。[hide]获取文章上一篇，下一篇cid/** * 显示上一篇 * * 如果没有...

关于评论表单的这个头像，其实挺麻烦的，动不动代码就会报错，超蛋疼的，于是我琢磨了下，想了个思路。用户未登录使用固定头像用户登录了使用登录头像用户是访客，已经留言了，使用留言的邮箱获取头像众所周知，typecho的头像是使用全球头像Gravatar的，Gravatar他本身也是通过邮箱来设置账户的，所以我们通过邮箱也能获取到头像地址。不多说，上代码[hide]<?php //已登录?> <?php if ($this->user->hasLogin()) : ?> <?php $this->author->g...