blue 发布的文章

记一个Nginx配置文件目录

今天想改一下Nginx的配置文件,发现忘了在哪个目录了

可以运行nginx -t

这个命令是检查nginx配置文件的语法是否正确,同时会输出nginx配置文件的路径,会看到这样:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

get

typecho输出标签云

接上一篇,右边侧边栏上展示所有文章的标签,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文章分类下的文章数量

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的裁剪功能丰富,满足了各种需求,预览链接:cropperjs预览

裁剪图片的两种思路:

1.在前端裁剪,通过html5的HTMLCanvasElement.toBlob方法,把裁剪后的图片通过表单方式用ajax提交给后台,或者使用HTMLCanvasElement.toDataURL 把图片转换为base64提交到后台。

2.在后台裁剪,在前端裁剪后把裁剪的坐标和裁剪之前的原图发送到后台,让后台执行裁剪,把裁剪后的图片返回

以上两种方法使用cropperjs都是支持的,自己选择了第一种方案,减轻后台工作。

- 阅读剩余部分 -

thymeleaf基本用法

输出文本

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

未完

DOM基本操作

属性相关

常用的nodeType返回值

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

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

- 阅读剩余部分 -

viewport的一些理解

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

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

viewport的几个属性

  • width:控制 viewport的大小,你可以给它指定一个值,如:600,或者甚至还可以给它一个特殊的值,如:device-widthdevice-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();

浅谈JavaScript的类型判断

最近在看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

- 阅读剩余部分 -