typecho默认主题侧边栏下的分类展示是没有具体的文章数量，平时看起来很不方便，于是改了一下默认的模板。
找到\var\Widget\Metas\Category目录下的list.php
在分类回调函数treeViewCategoriesCallback中找到这一句:
echo '"><a href="' . $this->permalink . '">' . $this->name . '</a>';把它修改为
echo '"><a href="' . $this->permalink . '">' . $this->name . '</a><span>('. $this->count . ')</span>';
最近在做一个项目，其中包括了一个图片在线裁剪功能，于是找到了cropperjs，cropperjs的裁剪功能丰富，满足了各种需求，预览链接：cropperjs预览
裁剪图片的两种思路：
1.在前端裁剪，通过html5的HTMLCanvasElement.toBlob方法，把裁剪后的图片通过表单方式用ajax提交给后台，或者使用HTMLCanvasElement.toDataURL 把图片转换为base64提交到后台。
2.在后台裁剪，在前端裁剪后把裁剪的坐标和裁剪之前的原图发送到后台，让后台执行裁剪，把裁剪后的图片返回
以上两种方法使用cropperjs都是支持的，自己选择了第一种方案，减轻后台工作。
输出文本
th:text="${text}"
<p th:text="${text}"><p>
text是一个变量，th:text命令输出的内容会替换当前标签里面的全部内容，上面输出：
<p>这里是输出内容<p>
注意th:text会把输出全部转换为字符串，如果你的变量里面有标签，也会解析为字符串，想要标签正常的被浏览器解析，要使用th:utext
循环数组列表
th:each=${item:list}
<p th:each="${item:list}" th:text="${item.text}" > </p>
list是数组,item是数组的每一项
判断一个列表是否为空
${#lists.isEmpty(list)}
<p th:if="${!#lists.isEmpty(list)} > </p>
上面的list不为空才显示p标签
未完
嗯，在适配移动端页面的时候都会用的的标签
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
viewport的几个属性
width：控制 viewport的大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width为设备的宽度（单位为缩放为100% 时的 CSS 的像素）
height：与 width 相对应，指定viewport 高度
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：是否允许用户手动缩放
viewport指的是窗口视窗，一般有三种：layout viewport（布局视窗），visual viewport（视觉视窗）和ideal viewport（理想视窗）
function A() {
this.arr = [1,2];
}
A.prototype.showName = function () {
console.log(this.arr);
}
function B() {
A.call(this);
}
var F = function(){};
F.prototype = A.prototype;
B.prototype = new F();
B.prototype.constructor = B;
var b = new B();
b.arr.push(4);
b.showName();
console.log(b.constructor)
var b2 = new B();
b2.showName();
最近在看jQuery源码的时候发现通过Object下面的toString()方法判断数据类型非常好使，大概是这样的
var arr = [];
console.log(Object.prototype.toString.call(arr)=='[object Array]');//true
var obj = {};
console.log(Object.prototype.toString.call(obj)=='[object Object]');//true
var date = new Date();
console.log(Object.prototype.toString.call(date)=='[object Date]');//true
var reg = new RegExp();
console.log(Object.prototype.toString.call(reg)=='[object RegExp]');//true
var oNull = null;
console.log(Object.prototype.toString.call(oNull)=='[object Null]');//[true
盒模型分为两种，分别是IE盒模型和标准盒模型
一个盒子的组成部分包括width，height，border，padding，margin：
width：盒子内容的宽度height：盒子内容的高度border：盒子的边框padding：盒子内边距margin：盒子外边距标准盒模型
一个标准的W3C盒模型的宽度width表示的是内容的宽度，高度height表示的是内容的高度，具体如下
script元素主要的属性
async:可选，表示立即下载脚本（异步），但是不影响页面的其他操作，只对引入外部脚本文件有效
defer：可选，表示脚本延时到文档完全被解析和显示后再执行，相当于告诉浏览器立即下载，延时执行。只对引入的外部脚本文件有效
src:表示包含要要执行的外部文件
注意
1.当有多个脚本设置了defer属性的时候，脚本延时执行仍然按照脚本引入的先后顺序执行
2.当有多个脚本设置了async属性的时候，脚本的执行顺序不一定按照脚本引入的先后顺序执行
<script src = "XXX.js" defer = "defer" ></script>
<script src = "XXX.js" async ></script>