接上一篇，右边侧边栏上展示所有文章的标签，typecho有提供相应的Widget

直接进入 后台>外观>编辑当前外观>sidebar.php

在你想要展示标签的位置插入代码:

<?php if (!empty($this->options->sidebarBlock)): ?>
    <section class="widget">
    <h3 class="widget-title">
          <?php _e('标签列表'); ?>
    </h3>    
    <ul class="widget-list">
          <?php $this->widget('Widget_Metas_Tag_Cloud')->to($taglist); ?><?php while($taglist>next()): ?>
          <li class="tags">
              <a href="<?php $taglist->permalink(); ?>" ><?php $taglist->name(); ?>
              </a>
           </li>
          <?php endwhile; ?>
     </ul>
    </section>
<?php endif; ?>

然后在style.css中加上样式.tags{display: inline-block; padding: 0 2px;}

参考: http://docs.typecho.org/themes/tag-cloud

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标签

未完

属性相关

常用的nodeType返回值

节点.nodeType用来获取当前节点的节点类型，一共有12种不同的类型，具体如下

其中，常用的有元素节点，属性节点和文本节点

- 阅读剩余部分 -

嗯，在适配移动端页面的时候都会用的的标签

<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

- 阅读剩余部分 -

express是node中很强大的web开发框架,通过使用它,可以快速的的开发一个web应用

先看一下一个express应用的目录结构

- 阅读剩余部分 -

盒模型分为两种，分别是IE盒模型和标准盒模型

一个盒子的组成部分包括width，height，border，padding，margin：

• width：盒子内容的宽度
• height：盒子内容的高度
• border：盒子的边框
• padding：盒子内边距
• margin：盒子外边距

标准盒模型

一个标准的W3C盒模型的宽度width表示的是内容的宽度，高度height表示的是内容的高度，具体如下

- 阅读剩余部分 -