友人C - 文章
type: channel
link: https://www.ihewro.com/tag/文章/
items: 全设备markdown写作使用指南
items: Focus——不只是RSS订阅器
items: 终端与shell的区别
items: 2019北邮考研我的个人经历
items: typecho文章和首页头图设计
items: typecho博客实现ajax评论
items: typecho评论模块入门
items: lazyload.js 减轻图片加载负担
items: 什么是创作共用许可证（Creative Commons licenses）
items: 怎么学JavaScript？

全设备markdown写作使用指南
type: item
date: 2019-10-05T17:21:00+08:00
description: 我的选择Mac端：mweb 2.0移动端 ： 1writer这样我的跨平台写作流程是：在iCloud里面设置一个文件夹 写作文档。电脑端使用mweb的外部模式，打开该文件夹，进行写作。同时iCloud会进行同步。移动端使用1writer 打开外部文件夹，可以继续写作。[album type='photos'][/album]其他同类型应用使用体验一点吐槽首先统一吐槽一些软件，非得自己搞什么“文档库”，文档都不知道被软件存储到什么位置，然后必须使用软件内部的iCloud同步才能跨平台写作。最关键的是文件也不知道存储在iCloud的什么位置。我个人觉得写作软件：首先做好显示外部文件夹层次和文件就可以了。现在手机、电脑设备的文件系统都比较完善了。没必要搞什么应用内部的文档库，给我一种不安全感，因为我不知道文件存哪了其次应用内部也完全没必要搞iCloud同步，如果软件本身就支持打开iCloud外部文件夹，同步问题就自然解决了。而不是把用户的文档数据转成应用内部的数据，然后再用iCloud同步，这不是多此一举吗。评分标准满分100分。写作软件只要有以下优点，我个人就觉的是一款完美的软件：价格合理（20分）细节处理（比如主题切换、空格习惯设置、实时预览等等）（20分）支持对文件夹、标题和内容快速搜索，搜索结果呈现简单明了（10分）显示外部文件夹的层次结构以及相应的内容（20分）markdown解析流畅，对中文支持好，支持大部分的markdown语法（10分）对图片的上传有一个合理的方式（10分）至于能够同步博客、medium之类的功能对于我个人来说可有可无（5分）ui颜值不错，太丑的界面实在让人觉得 ...当然习惯了可能就好了吧（5分）除此之外的什么聚焦模式，打字机模式，有则优，没有其实根本也不影响写作体验。（0分）bear（移动端）（75分）[album][/album]字段价格(20')细节处理(20')支持外部文件夹(20')搜索功能(10')markdown解析(10')图片上传(10')第三方服务同步(5')UI界面(5')说明10元/月各种小功能考虑的比较好不支持支持内容、标题解析的样式好看，可以换主题 不支持同步博客之类的不是ios原生那种，但却是很精致得分1020010101005但是单就不支持外部文件夹对于我来说已经不会使用了。ia writer（移动端）（38分）因为我先用了ia writer，觉得差强人意，于是决定在移动端使用这款软件，没想到用户体验几乎为0。而且售价60，我不知道谁给他的勇气。[album][/album]字段价格(20')细节处理(20')支持外部文件夹(20')搜索功能(10')markdown解析(10')图片上传(10')第三方服务同步(5')UI界面(5')说明60元/买断自带markdown小键盘，有聚焦模式不支持支持搜索内容、标题，但搜索结果只有标题，没有匹配的内容差强人意，不支持公式如果是iCloud的文档，图片会自动放到iCloud里面，本地文档是无法上传图片的无不说了得分1015085500缺点：界面劝退，线条蓝色图标，我感觉像是上世界的Android风格，完全没有iOS的界面元素不支持外部文件夹打开，只支持外部某个文件打开，劝退1writer（移动端）（76分）[album][/album]字段价格(20')细节处理(20')支持外部文件夹(20')搜索功能(10')markdown解析(10')图片上传(10')第三方服务发布(5')UI界面(5')说明30元/买断有markdown工具条，还有一些个性化的设置我在iOS平台唯一看到的支持外部文件夹的软件只支持搜索标题差强人意会把图片自动放到相同文件夹类，无法自己设置无中等偏上，有改进的空间，虽然用了一些iOS设计风格，但整体上还是不够iOS得分20152055803ulysses（移动端）（45分）[album][/album]字段价格(20')细节处理(20')支持外部文件夹(20')搜索功能(10')markdown解析(10')图片上传(10')第三方服务发布(5')UI界面(5')说明28元/月，太贵了，iCloud一个月才6月呢这个软件打开你就能感受到花了很多功夫不支持支持内容、标题搜索，搜索界面也很好看不支持表格，样式还是很好看的没找到本地图片上传，只找到一个附件，但是和文章是分离开来的支持wp,ghost,mediumios原生界面，完美得分5200105055ia writer（电脑端）（66分）因为有试用期，我就下载了。基本功能还行，流畅性不够，尤其是右侧的编辑器区域，滚动起来就是不流畅，就是不流畅。而且聚焦模式用起来很……很不舒服。（可能我不习惯这个聚焦模式，内容始终显示在中间，上面还会有空白）语法高亮对…

Focus——不只是RSS订阅器
type: item
date: 2019-05-20T12:12:00+08:00
description: [scode type="green"]发现市场接口更新，可以正常使用了！因为之前打包用的key忘记了，所以是新的key，如果是更新的话 需要重新安装，记得提前备份数据！[/scode]链接:https://share.weiyun.com/DcLQoDZXgithub：https://github.com/ihewro/FocusFocus，只关注想关注的！🍰借助RSShub开源项目，自带丰富订阅市场，尽可能简化操作，适合普通玩家🌈支持自定义源订阅，适合高级玩家🍭文件夹管理订阅，更加清晰方便🍉支持对数据多种方式过滤，方便查看最新数据🍬夜间模式，对自己的眼睛好一点🍒阅读增强，更好的阅读体验🍖多种手势，双击点赞，左右切换文章，上拉访问源网站等等🍦支持OPML导入和OPML导出!> 更多介绍欢迎去酷安下载，如果觉得不错，欢迎五星好评！

终端与shell的区别
type: item
date: 2019-04-19T14:59:00+08:00
description: 当我从Linux转换开始使用macOS的时候，我发现macOS的终端很丑，它长这样：于是我找到这样一篇文章：Mac OS 终端 iTerm2 并配置 zsh。所以什么是终端，什么是zsh。终端很久很久以前，终端这个概念是这样的：是一种硬件，是一种输入输出设备，用于和计算机交换信息。终端的工作：用户通过终端输入命令，终端将命令传入计算机，执行后，并把结果输入到终端上显示。从这个概念不难可以看到电传打印机符合这个概念：但是现在计算机硬件一体化程度越来越高，硬件质量也越来越强，输入输出设备完全没必要单独用一个硬件和计算机进行交换信息了，取而代之使用软件终端和计算机进行交互信息。这就是终端模拟器 (Terminal Emulator)，也就是我们现在所讨论的终端。除了它不是硬件，它符合终端的概念和工作流程。举个例子，下面这些软件都是终端：1GNU/Linux：gnome-terminal、Konsole；macOS：Terminal.app、iTerm2；Windows：Win32 控制台、ConEmu 等。shell我之前很迷惑一个问题是，有终端就够了嘛，输入命令，执行并把结果输出，要shell干什么。更让人抓狂的shell还有很多种类，bash,cshell,zsh。这些到底是做什么的？所以需要明确下终端负责的工作。终端的工作范围：接收用户的输入，显示传过来的输出。（此外还提供一些优化用户体验的功能，比如支持文字复制粘贴、软件背景颜色的调整等）终端的工作其实是很少的哦，简单来说3点：GUI软件界面、接收输入、显示输出。而shell的核心工作就是操控计算机内核（如新建文件等等），即访问操作系统中的某个具有一定功能、可以处理具体事务的文件(二进制文件 ---- 此类文件经常被称作工具)、或包含一定内容的文件(文本文件)2shell分为：图形化 shell（图形化的桌面环境），如Windows Explorer （文件管理器）、 Linux的桌面环境有：KDE、GNOME、CDE、 XFCE等。命令行 shell。如bash 、sh 、csh 、ksh我们一般讨论shell都是指命令行shell。shell为什么叫做命令解释器不管是GUI shell 还是命令行 Shell，其实都是在解释命令，只不过GUI shell隐藏解释命令细节，用户通过点击鼠标的操作操作内核命令。shell为什么叫做壳如上图，shell通过解析命令调用 系统调用和相关API操作内核命令，进而读写硬件完成任务。shell是最外的一层的接收用户操作，像一层壳一样裹在整个调用过程中。为什么有这么多命令行shellshell与shell脚本语言并不完全相同的概念。shell除了包括对命令的语法规范（shell语言）和对命令解析，还包括一些额外的功能（如命令补全、主题等等）。shell语言和我们学习的任何其他高级语言c,python,java没有太大区别。不同的shell语言可以看做java语言的不同版本。不同shell的区别主要是两方面：脚本语言语法有差异功能、外观、自定义美化上有差异脚本语言早期的sh甚至不支持给长命令设置别名的语法。3zsh虽然完全兼容bash的语法，但还有一些语法差异，具体可以看Zsh和Bash，究竟有何不同 坑很深自定义功能配置除非我们需要编写shell脚本，普通用户一般很难发现不同shell脚本语言差异。对文件操作ls、pwd等等这些常用命令所有shell都一样支持。所以我们普通用户更关注是细节、外观、功能上的差距。这一点zsh做的格外的优秀。比如色彩高亮、命令提示、智能补全、快速跳转等等附加功能。4我们在讨论配置终端的时候，实际上是在讨论配置shell。为什么zsh如此受欢迎？这个较新的shell与bash兼容，但包括更多的功能。 zsh shell提供内置的拼写校正，改进的命令行完成，充当shell插件的可加载模块，允许您在命令行上别名文件名或其他任何东西的全局别名，而不仅仅是命令，以及更多主题支持。 它像bash，但有很多附加功能，附加功能和可配置选项，你可能会喜欢，如果你在命令行上花费大量的时间。3总结： 终端就是软件，是最外层的，shell = shell脚本语言解析器+编辑、外观等额外功能不同shell的切换输入cat /etc/shells，可以查看本机上的所有shell：临时切换比如切换bash，直接输入bash，即可切换到bash环境下，输入exit，复原默认shell环境。默认切换5#使用系统自带的 zsh：输入密码成功切换，重启终端即可使用 zsh。 chsh -s /bin/zsh #使用第三方的 zsh，如从 brew 安装的 zsh。 sudo chsh -s /usr/local/bin/zsh 命令行界面 (CL…

2019北邮考研我的个人经历
type: item
date: 2019-03-31T12:46:00+08:00
description: [scode type="red" size="simple"] （网络计算研究院2020年被合入了计算机学院）关于网研1组的名额的事情我是完全不清楚，抱歉[/scode]本来这篇文章是很早之前写的，写到一半写不下去。现在上岸了，我打算完结这篇文章。可能是写的心情不一样吧。知乎上初试学习方法帖子很多，我的初试成绩也不高，所以我只打算一些我曾经迷惑的问题。报考：北京邮电大学 网络技术研究院 计算机科学与技术 {人工智能、网络智能化、人机交互}研究方向笔记集合[post cid="916" size="small" /]初试总分： 342(101)思想政治理论：58(201)英语一：66(301)数学一：100(803)计算机学科基础综合：118我希望我的一些文字能让你更轻松的面对考研。当我回过头来看，我们作为大学四年的成年人，我们不应该再和高三一样，把考研当做人生的一道坎，或者当做一个特殊而重大的任务。我们应该把考研当做生命的一种经历，一个过程，一个体验。就像我之前说的，我觉得人生不应该是工作、放假、工作、放假这样的循环。不管是很累的工作、还是放松下来的假期，我们都应该坦然的去经历。去年这个时候我还待在家里，考研我一无所知，我不知道怎么报名，我当然还幻想可能可以保研，也不知道考研只能报一首学校，以及如果学习准备我也一无所知。所以我想说的是2020年考研的小伙伴完全来的及，先不必急。我当时只是心里有点着急，但实际上什么也没做。不知道考研是自己看书还是听视频。正式备考（7月份）之前，也随大流的一样的每天拿的数学训练册做几题玩一会手机，又或是看看课本，根本都不做题。到了8月份时候，我发现我之前看的高数，线代，概率论，我彻底彻底忘了，我看到一些概念，我甚至不知道什么意思。因为我没做题。我回答一下可能疑惑的一些问题，这也是我当年困惑的问题：考研累吗累，但是别无选择。我是7月份开始备考的，当时夏天天气最炎热的时候。一开始学习效率不高，第一个月还偶尔去看电影。不是很紧张。学习过程中看手机。但是我很快调整过来的，因为时间太紧了。我觉得可以从这几个方面缓解：首先，自己为什么考研？我自己考研首先我的专业课知识学的太不扎实，考研前，我的计网一塌糊涂，数据链路层我没理解这个链路到底什么意思？一条路吗？所以我没办法找工作。其次，我希望我在研究生中能学到更深层次的理论知识，如果一旦工作，基本很少有学习时间和自己的空闲时间的，我觉得我没办法很快接受这样的环境。其次，给自己复习订一个整体时间规划：我当时规划是这样，7-8月看完数学课本，7-9两个月看完4门专业课。10-12月每个月大概完成什么任务。每天也要有每天需要完成的计划，我一开始总是每天计划内容太多，导致完成不了，所以计划一定要合理。计划需要定期根据你的进度调整，这样你心里有数，你的进度到哪了。ps：也不至于网上说的不洗头，没必要，该整理自己还是要整理的干干净净的，头要洗，不然头发都没了每天学多长时间我每天早上9点醒，10点才开始起床学习。10-11：50 上午学习13：00 - 17：50 下午19：00 - 22：00 晚上这样一天也有10个小时了，到了10月份之后，晚上学到22：30左右。对于我来说，可以了。我早上起的很晚，大家可以根据自己作息安排，保证一天任务量能够完成即可。我也尝试过早起7点或者8点。试了几天，发现上午特别困，都快睡着了，根本学不进去，就索性放弃了。学习时候带手机吗不带。我一开始带。到了10月份之后就彻底不带，因为时间彻底不够了。有人说，查单词啊，要用手机……我觉得没必要，张剑的英语黄皮书，赠送了一个词汇本，遇到单词用这个查并标记好就行了，上面查不到的单词就没必要管。当然个人有不同安排，但是我建议不带。因为真的学习过程中很枯燥的，尤其是前期，不是太紧张的话很容易松懈。跨考计算机难度大吗我今天问了室友才知道三跨是什么意思。跨专业、跨省、跨学校。其实难度最大的应该是跨专业。跨专业的同学认为自己底子差，和计算机专业同学没办法竞争。老实说，本科学校交给我们的实在是太少太少，而且本科上课不积极，不认真。计算机网络、组成原理本科学的时候我也没有学明白，只是为了应付考试，做了一些题目，获得不错的分数。这些专业课知识都是我在考研期间才学的更仔细了一些。我是学渣，我摊牌了本科上课学的语言C / C++/ Java，其实都是学的很浅。C的语言我忘了差不多了，C++ 没仔细学，主要用的最多是java。语言你学了一门，你会发现语言是很有基础语法是差不多，所以跨考的同学熟练掌握一门语言我认为可以了，在这个基础上，再了解别的语言不会花费很多时间。(我个人认为java是门很容易基本使用的语言，因为很多方法都是jdk提供的，比如动态数组、list，当然c++也有，我更喜欢java)所以跨考学生不必要担心和别的…

typecho文章和首页头图设计
type: item
date: 2017-09-04T20:51:00+08:00
description: 说明 ：该代码适用于制作主题的小伙伴，因为后台外观设置中设置了4种头图显示方式。如果是为自己做的主题，可以在此基础上大大减少代码量。如果仅仅是给自己一个人写主题，可以参考typecho按需求输出缩略图代码功能该代码能够实现以下功能：首页头图开关关闭的时候，thumb字段为图片地址，仍然能够显示文章头图文章头图开关关闭的时候，thumb字段为图片地址，仍然能够显示首页头图文章首页头图都关闭的时候，thumb字段为图片地址，此时首页文章头图都能显示头图开关开启的时候，thumb字段为no，当前文章将不会显示头图头图开关开启时候，可以按照四个选择的顺序选择显示头图这里，有几个不合理的需求，不再代码中实现，因为以下需求会破坏代码的逻辑性：首页文章头图开关都关闭的情况下，thumb字段为图片地址，想只显示当前文章的文章头图，或者只显示当前文章的首页头图首页头图开关关闭情况下，想当前文章显示首页头图。总的来说，后台设置中的头图开关才是权重最高，不能让thumb字段越权操作，否则会带来一些bug，带来的就是某些功能的牺牲。代码分析一开始准备写这些逻辑的时候，我画了这样一张大图：最终的结果就是：自己越来越糊涂了！然后，调整了一下节点，精简成这样的：最终的代码就是以第二张图的逻辑写出的代码。thumb字段的权重最高，即使关闭了显示头图开关，只要thumb字段为图片地址，仍然可以显示出头图（第二点功能）参考代码 public static function whenSwitchHeaderImgSrc($widget){ $options = mget(); $rand = rand(1,$options->RandomPicAmnt); $howToThumb = $options->RandomPicChoice; $random = $widget->widget('Widget_Options')->themeUrl . '/img/sj/' . $rand . '.jpg'; $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i'; $patternMD = '/\!\[.*?\]\((http(s)?:\/\/.*?(jpg|png))/i'; $patternMDfoot = '/\[.*?\]:\s*(http(s)?:\/\/.*?(jpg|png))/i'; // 随机缩略图路径 //正则匹配 主题目录下的/images/sj/的图片（以数字按顺序命名） $attach = $widget->attachments(1)->attachment;//附件中的图片 $thumbField = $widget->fields->thumb; if ($howToThumb == '0'){ return $random; }elseif ($howToThumb == '1' || $howToThumb == '2'){ if (!empty($thumbField)){ return $thumbField; }elseif (isset($attach->isImage) && $attach->isImage == 1){ return $attach->url; }else{ if (preg_match_all($pattern, $widget->content, $thumbUrl)){ $thumb = $thumbUrl[1][0]; }elseif (preg_match_all($patternMD, $widget->content, $thumbUrl)){ $thumb = $thumbUrl[1][0]; }elseif (preg_match_all($patternMDfoot, $widget->content, $thumbUrl)){ $thumb = $thumbUrl[1][0]; }else{//文章中没有图片 if ($howToThumb == '1'){ return ''; }else{ return $random; } } return $thumb; } }elseif ($howToThumb == '3'){ if (!empty($thumbField)){ return $thumbField; }else{ return $random; } } } //输出头图图片地址 public static function returnHeaderImgSrc($widget,$select){ $options = mget(); $thumbField = $widget->fields->thumb; if (strtoupp…

typecho博客实现ajax评论
type: item
date: 2017-07-26T23:43:00+08:00
description: 前言系列文章：typecho博客实现pjaxinstantclick 中文文档相关文章： Typecho · JS简单实现评论ajaxTypecho全站pjax方案阅读前须知：以下内容对于实现了pjax效果的站点，可能需要自行增加回调函数。以下内容完全适用于实现了instantclick站点标有（*）内容为可选内容，可略去不读如有疑问可以发送邮件或者直接评论，千万不要加我QQ提问代码分析ajax的基础知识这里使用的是jQuery ajax的底层的一个方法：$.ajax()，执行这个方法的时候，会返回一个创建的XMLHttpRequest对象。基本语法：$.ajax({ url: ,//发送请求的地址 type: ,//请求方式，是post还是get请求 data: ,//要发送到服务器的数据 error: function() { //请求失败执行的回调函数 }, success: function(data) { //请求成功执行的回调函数，参数data是请求成功后的页面的纯文本 HTML 代码 } }) 实现步骤监听comment_form评论框的提交事件：$(comment_form).submit(function() { //提交事件 }）(*) 检查评论内容以及作者邮箱内容是否符合规则（预检）：这段代码比较简单易懂，不再赘述，直接看代码就行了。发起ajax请求：就是最基础的$.ajax() 请求：$.ajax({ url: $(this).attr('action'),//提交表form的action属性 type: $(this).attr('method'),//提交表form的method属性 data: $(this).serializeArray(),//要发送到服务器的数据 error: function() { //这里写一下提示信息代码即可 }, success: function(data) { //这部分内容在第四步中会解释 } }) 获取到ajax请求的数据，从这些数据中找到最新评论的内容，并把该内容插入到当前页面中：如何从ajax成功返回的数据中找到最新评论，我有两个思路：从ajax请求成功返回的数据中寻找到最新的评论插入到当前页面中。直接在提交的时候，拿一个变量把用户提交的内容保存起来，然后，直接按照你的评论结构组装成一条评论插入到当前页面中我是第一种方法，所以以下代码分析均只适用与第一种方法。第一个问题：理解ajax请求成功后返回的数据是什么东西？返回的数据是执行提交操作后页面的html代码，换句话说，返回的数据（data）就相当于手动刷新当前页面后的html代码所以，在返回的数据里面，肯定是可以找到最新评论的！第二个问题：如何找到最新评论的内容和应该插入到什么位置？首先你得保证你的评论将较新的的评论显示在前面。其次，我把用户评论简单分成两种：母评论（parent）：直接评论文章的子评论（children）：评论文章中的某条评论我们先来看如何找到最新评论的内容：其实很简单：typecho生成commentID的时候总是越来越大的，所以只要找到数据中最大的那个commentID就是用户刚才评论的最新评论了！代码就是：new_id = $(comment_list, data).html().match(/id=\"?comment-\d+/g).join().match(/\d+/g).sort(function(a, b) { return a - b }).pop(); 但是其实还是存在一个问题的：如果你启用了评论分页功能，由于typecho显示最新评论总是在第一页，所以当用户不在第一页发出了母评论，那么从数据（data）中找到的ID最大的评论并不是最新评论，这个时候，发送ajax请求成功后，就没必要向当前页面插入评论，因为最新评论再第一页。if ($('.page-navigator .prev').length && parent_id == ""){ new_id = ''; }//做一个判断 ... if (new_id)//new_id不为空的时候才会插入 $('#' + parent_id + " .comment-children .comment-list").prepend(data);接下来就是插入的位置问题:其实很简单，如果是母评论，直接插入到comment_list的最前面即可：$(comment_list).prepend(data);如果是子评论，要在监听页面中的回复链接，当鼠标点击回复按钮的时候，通过父元素的父元素（根据个人的评论结构而定），找到回复当前的评论ID(parentID)：$(comment_reply + ' a').click(functi…

typecho评论模块入门
type: item
date: 2017-01-27T00:27:00+08:00
description: 官方文档对这方面写的比较简洁，不利于主题修改者快速入门typecho，所以总结了一些经验，方便自己也方便主题修改者创建评论模块。先写一个评论区的总的容器，id 为 comments。 ... 评论区域分为两个部分：评论输出列表模块 和 评论输入表单模块。评论输出列表模块有两种方法：使用官方自带的函数输出，方便简单，只需要加点CSS控制就行自定义评论列表模块,更灵活满足我们需求官方自带的函数输出评论代码如下：<?php $this->comments()->to($comments); ?> <?php if ($comments->have()): ?> <?php $this->commentsNum(_t('暂无评论'), _t('仅有一条评论'), _t('已有 %d 条评论')); ?> <?php $comments->listComments(); ?> <?php $comments->pageNav('« 前一页', '后一页 »'); ?> <?php endif; ?>代码很好理解。不再赘述。说明一下 ：官方文档—快速入门—调用评论页 给出的代码示例是错误 的！代码示例只能实现简单输出评论，不能对每条评论回复，是个半残品 。但是里面的函数是可以在自定义评论模块中来使用的。我们这里输出评论模块使用的使用官方自带的函数 $comments->listComments(); 。输出的HTML结构也是写死的。所以，接下来是如何自定义评论输出列表模块。自定义评论输出列表模块官方文档—自定义评论列表区域 这里面给出了很混乱的代码讲解，实质上是写了一个 threadedComments 函数来替代系统自带的 threadedCommentsCallback函数（在/var/widget/comments/archive.php内置）。这个函数是php与html互写的形式。可以看出这个函数分为了两个部分：php动态控制输出结构html语句直接固定输出结构<?php function threadedComments($comments, $options) { ... //动态控制结构 ?> ... //html 固定结构 } <?php } ?> 动态控制结构 $commentClass = ''; if ($comments->authorId) { if ($comments->authorId == $comments->ownerId) { $commentClass .= ' comment-by-author'; //如果是文章作者的评论添加 .comment-by-author 样式 } else { $commentClass .= ' comment-by-user'; //如果是评论作者的添加 .comment-by-user 样式 } } $commentLevelClass = $comments->_levels > 0 ? ' comment-child' : ' comment-parent'; //评论层数大于0为子级，否则是父级如果是文章作者的评论添加 .comment-by-author 样式如果是评论作者的添加 .comment-by-user 样式通过判断 $comments->_levels 来确定当前评论的是子级评论还是父级评论这部分一般不需要更改的，即使修改也是增加语句。HTML固定输出结构<li id="li-<?php $comments->theId(); ?>" class="comment-body<?php if ($comments->levels > 0) { echo ' comment-child'; $comments->levelsAlt(' comment-level-odd', ' comment-level-even'); } else { echo ' comment-parent'; } $comments->alt(' comment-odd', ' comment-even'); echo $commentClass; ?>"> <div id="<?php $comments->theId(); ?>"> <?php $comments->gravatar('40', ''); ?> <?php $comments->author(); ?> <a href="<?php $comments->permalink(); ?>"><?php $comments->date('Y-m-d H:i'); ?> <?php $comments->reply(); ?> <?php $comments->content(); ?> <?php i…

lazyload.js 减轻图片加载负担
type: item
date: 2017-01-23T13:05:00+08:00
description: lazyload.js 减轻图片加载负担图片延迟加载大家可能有听说过，其实qqdie的博客早就使用了这个jquery插件，这款插件只有4K！但是有一个缺点是文章中的图片并没有使用延迟加载，问题在于这款jquery 插件 对于图片 的结构的要求必须是这样的： 解释一下这个结构：src里面存放占位图，data-orignal 存放的才是真实的图片地址。当滚动到图片位置的时候，这个插件才会把真实的地址赋给src ，这样图片就会加载出来。是一种延迟加载的策略。这个结构对于已经固定死结构的图片（比如评论区的头像或者其他的一些结构固定的图片）比较容易，自己改一下就很简单，但是对于文章中的图片 如何自动生成这种结构，却让人头痛，总不能让用户手动在后台编辑器添加图片吧，这是不人性化的~ 一开始是想通过js获取到所有图片，然后把图片的data-orignal 属性赋值为src的值，再把 src 属性全部赋值为img/grey.gif。代码其实很简单，是这样的：//对文中图片惰性加载 var imgs = $(".wrapper-lg img"); for (var i = 0; i < imgs.length; i ++) { var srcvalue = $(imgs[i]).attr("src"); $(imgs[i]).attr("data-original",srcvalue); $(imgs[i]).attr("src","<?php $this->options->themeUrl("img/grey.gif") ?>"); }效果非常尴尬，本来图片先出来，然后界面闪一下，图片变成占位图。？？？这样就本末倒置，起不到任何作用！如果不能对文章图片延迟加载，这个插件其实没有多大作用的！就在我要放弃的时候，发现了这篇文章[LazyLoad+ob_start()，完美解决图片延迟加载 [jQuery 插件]](http://www.rainleaves.com/html/1248.html) ,作者提供了新的方法：通过php的ob_start()函数在页面加载区的时候就更换图片属性 。关于ob_start();函数原理原博文有介绍，不再赘述，这里介绍使用方法：在footer.php 中<?php //图片延缓加载相关处理，替换src为data-original，并添加占位符 $echo = ob_get_contents(); //获取缓冲区内容 ob_clean(); //清楚缓冲区内容，不输出到页面 $placeholder = "img/grey.gif"; //占位符图片 $preg = "/ /i"; //匹配图片正则 $replaced = ' '; print preg_replace($preg, $replaced, $echo); //重新写入的缓冲区 ob_end_flush(); //将缓冲区输入到页面，并关闭缓存区 ?>代码也非常容易理解，就是设置页面中所有的图片(事实上并不是所有的)的src 和data-original 的值。最后使用$("img").lazyload();就可以实现延迟加载的效果了。那么问题来了！我不想所有的图片都延迟加载，怎么办？其实上面的正则匹配中隐藏了一个黑名单机制！图片的html结构为 即图片标签的结束标签/前面如果没有空格 ，则不会被正则表达式匹配成功，也就不会延迟加载。好了，这样一来，解决了所有我遇到的问题了！最后需要了解的是延迟加载的常见设置项：加载特效：图片会以淡入的方式显示（更多特效参阅官方文档）$("img").lazyload({ effect : "fadeIn" });触发加载方式：可以选择点击图片才显示内容$("img").lazyload({ event : "click" });当然，还有一些更有趣的设置项可以参阅官方文档。插件地址：tuupola/jquery_lazyload对了，如果你对图片的黑名单机制有什么更好的想法，欢迎一起讨论。

什么是创作共用许可证（Creative Commons licenses）
type: item
date: 2017-01-18T09:57:00+08:00
description: 前几天写一篇关于项目的开源许可协议 。 常见有六种，GPL、BSD、MIT、Mozilla、Apache和LGPL。这些协议适用于我们软件与项目代码，对于我们文档和作品，我们通常使用创作共用许可证 来保护。参考文章 ：阮一峰：谈谈创作共用许可证（Creative Commons licenses） 创作共用许可证（Creative Commons licenses，简称cc），它是由成立于2001年的美国Creative Commons基金会，在2002年12月16日提出的。CC协议中作者可保留的权利作者使用CC协议，可以且只能选择保留以下四种权利：1）署名（Attribution，简写为by）：必须提到原作者。2）非商业用途（Noncommercial，简写为nc）：不得用于盈利性目的。3）禁止演绎（No Derivative Works，简写为nd）：不得修改原作品。4）相同方式共享（Share Alike，简写为sa）：如果允许修改原作品，那么必须使用相同的许可证发布。以上4中权利排列组合，就有16种，但是要注意几点：1） 不能同时选择 禁止演绎 与 相同方式共享 2) 不能同时放弃４种权利所以，再次排列组合，就有了最常见到６中排列组合：1. 署名（by license）2. 署名-非商业用途（by-nc license）3. 署名-禁止演绎（by-nd license）4. 署名-非商业用途-禁止演绎（by-nc-nd license）5. 署名-非商业用途-相同方式共享（by-nc-sa license）6. 署名-相同方式共享（by-sa license）需要注意的是，对应不同的司法管辖区，创作共用许可证有不同的地区版本。另外，创作共用许可证一直在修订，最新的是4.0版，但是一部分地区还在使用3.0版。推荐使用最新版本。如何选择合适的CC协议呢？你可以访问这个网站[https://creativecommons.org/choose/https:]，一步步根据你的需求，最后可以生成符合你的许可协议。本博客所有原创文章知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

怎么学JavaScript？
type: item
date: 2017-01-17T23:49:00+08:00
description: 怎么学JavaScript？JavaScript 我也学了一段时间，可是每次写起代码来总是入门级别，很是苦恼。这篇文章中说把整本书给敲下来未尝不是一个好办法，我很有体会，有时候看不进代码，敲下来的过程中就在慢慢的吸收代码的精髓，觉得很受益处，遂转载之。转载原文：统一回复《怎么学JavaScript？》鉴于时不时，有同学私信问我(老姚，下同)怎么学前端的问题。这里统一回复一下，如下次再遇到问我此问题同学，就直接把本文链接地址发给你了。首先说句题外话。关于有人管我叫大神的事情。个人感觉这跟你买东西时，人家管你叫帅哥一样，你答应与否都无妨。正题开始，前端怎么学，应该因人而异，别人的方法未必适合自己。就说说我的学习方法吧。我把大部分时间放在学习js上了。因为这个js的学习曲线，先平后陡。项目实践和练习啥的，我不说了，主要说下工作之外的时间利用问题。我是怎么学的呢，看书，分析源码。个人这几天统计了一下，前端书籍目前看了50多本吧（点击我）。大部分都是js的。市面上的书基本，差不多都看过。第一个问题是，看书有啥好处？好处应该是不言而明的，书看多了，基础会逐渐夯实起来。看多了，自己的判断力，自然就上来了。看别人的文章，就能很快判断出，对方每块儿讲得对不对，哪块儿又是自己不清楚的，模棱两可的。当然也为看源码，分析源码提供了基础。10本书读2遍的好处，应该大于一本书读20遍。10本书的交集，那就是基础知识的核心，而并集那就是所有的知识。好书当然要多读，反复读。但是只读一本是不行的。因为每本书的侧重点都不一样。从不同的侧面，去理解一个知识点，是很有意义的。所以特别佩服印度人，他跟你讲英文，你一个词语没听懂，他会蹦出n个同一意思的单词，你听懂一个，就ok了。看书也是这样的，某一块讲得不透彻，不用担心，其他书籍可以帮助你来了解。第二个问题是，书籍推荐。个人觉得不错的，没事可以翻翻的。书籍如下：《javascript面向对象编程指南》，风格轻松易懂，比较适合初学者，原型那块儿讲得透彻，12种继承方式呢。《js权威指南》、《js高级程序设计》，这两本书经典是经典，但是太厚，适合把其中任意一章都当成一本书来读。洋洋洒洒，很难一口气看完。比较适合当做参考书。《你不知道的javascript》狙击js核心细节，闭包、原型、this讲得都还清楚。目前《中册》也出了，还在看。《js设计模式与开发实践》js设计模式也是要学的，此书把js的设计模式讲得非常清晰，一点不晦涩，看起来没多少难度。《正则指引》，分析源码时，如果正则表达式不懂，没法进行下去的。此书相对来说讲得比较清晰。《基于MVC的JavaScript Web富应用开发》，看完后，基本能写出自己的mvc框架了。是本好书。《javascript函数式编程》，js是一门函数式语言，此书是函数式编程一个入门，函数是一等公民那是非常重要的。《js忍者秘籍》，jq作者写的，没有传说中的那么难读，话说就算你看完并理解所有知识点，也不会达到世界高手级别的。因为你还没有做到随心所欲。《javascript框架设计》，如果初看此书，会觉得此书有罗列代码之嫌。在我看来，此书讲究的是框架的全局观。以上书籍是我认为是成就高手之路上必须看的，也需要反复看。css相关的书籍，说实话我看得比较少，总共有六七本吧。有两本必须推荐一下：《css权威指南》，css基础知识点那是讲得非常清楚的。什么层叠优先级、line-height啥的。不是随便一本书都敢叫“权威指南”的。《css揭秘》此书我也是不断的看，此书才不屑于全面讲css3各属性呢。css规范文档能讲的，它只会讲你最不在意的。此书解决的47问题，解决思路和解决方案同等重要，很有启发性。以上各书你都可以不买，至少买本此书吧。第三个问题，怎么看。想必很多同学，都想看书，但是很难看下去。文字部分相对来说还能看看，一遇到代码，头皮就发麻了。此问题一开始时我也遇到的。说一个学习理论。比如说学英语，有个开水理论。词汇量必须达到6000才行，如果没达到，英文水平不会上去的，这跟烧开水一样，没事烧烧，放着凉凉，从来没烧到100度，那么此水是永远不能喝的。一旦煮沸过，就可以随时喝了。20本书你看不下去，说明什么呢？任何一本书，你都没看完过。熟悉的，永远只是前三章。别笑，我原先也是这样的。那么现在的问题是，怎么把一本书看完呢？很简单，敲。《基于MVC的JavaScript Web富应用开发》这本书我看时，就是这样，终于有一天，我下定决心要把此书从头到尾敲一遍。文字加代码都敲，然后就一章一章得看完了。代码敲一遍后，你会发现，没之前看起来的那么难。如果你属于一看书就犯困那种同学。强烈建议你把《javascript面向对象编程指南》此书从头到尾敲一遍。坚持看完一本书后，信心就上来了。先保证看完一本再说。看完3本后…