年度归档:2016年

WordPress美化方案:修改主题文件

 

基础知识

通过修改主题文件来实现一些外观和功能效果,这样避免了使用大量插件,不会影响加载速度,也没有兼容性的问题。

这个系列的另外两篇:
WordPress美化方案系列:插件篇
WordPress美化方案系列:插入代码

主题文件编辑入口:仪表盘——外观——编辑
主题文件的构成

主题文件主要构成

主题文件主要构成(点击查看大图)

下面一些应用示例。

 

一、修改页脚的文字

编辑主题文件:footer.php
找到相关的文字(一般是“自豪地采用WordPress”或是”Proudly by WordPress“),可以删除或修改。然后点击更新文件。

 

二、在每一页加入版权声明

编辑主题文件:single.php
在图中位置插入代码,会在文章下方生成一个文本,效果见第二张图。

版权声明代码

版权声明代码(single.php)

版权声明效果图

版权声明效果图

 

三、文章字数统计

编辑主题文件:functions.php,single.php
在functions.php末尾插入下面这段代码(一个统计文章字数的函数):

//字数统计
function count_words ($text) {
global $post;
if ( '' == $text ) {
 $text = $post->post_content;
 if (mb_strlen($output, 'UTF-8') < mb_strlen($text, 'UTF-8')) $output .= '文章字数:' . mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($post->post_content))),'UTF-8') . '字';
 return $output;
}
}

然后在single.php需要显示字数的地方插入:

<?php echo count_words ($text); ?>

 

四、个性化评论框

编辑主题文件:comments.php
这里可以实现的功能主要有:

  1. 自定义评论区的各个字段
  2. 增加或删除输入框,修改字段,增加提示字符
  3. 更改样式

首先在comments.php里加入一个评论框函数(comment_form()):

<?php comment_form($args); ?>

$args是你想要修改的字段或输入框,用来覆盖原有的内容。

比如你想修改评论框的标题(一般为“留下评论”)。通过增加下面这段代码即可实现:

<?php $args = array('title_reply'=>'说说你的想法吧!')?>
<?php comment_form($args); ?>

其中‘title_reply’是代表评论框标题的参数,后面是你要设置的内容。
类似的,可以在数组(array)加入更多参数,比如评论框上面的文字(’comment_notes_before)、评论框下面的文字(’comment_notes_after’)。更多的参数见官方文档

评论输入框通过传入$fields参数实现,但直接放到$args里更方便些:

<?php $args = array(
'fields' => array(
 'author' => '<p class="comment-form-author"><label for="author">昵称</label><input type="text" placeholder="姓名或昵称" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author'] ) . '" name="author" id="author"><span class="required">*</span></p>',
 'email' => '<p class="comment-form-email"><label for="email">邮箱</label><input type="text" placeholder="不想填的话可以用null@null.com" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author_email'] ) . '" name="email" id="email"><span class="required">*</span></p>',
 'url' => '<p class="comment-form-url"><label for="url">站点</label><input type="text" placeholder="个人主页网址,可留空" size="30" value="'.$comment_author_url.'" name="url" id="url"></p>' 
)?>

下面是我博客上的评论框代码(效果见下方评论区):

<?php $args = array(
  'title_reply'       => __( '说说你的想法吧!' ),

  'comment_notes_before' => '<p>邮箱不会被公开,必填项已用<span class="required">*</span>标出。',

  'fields' => array(
 'author' => '<p class="comment-form-author"><label for="author">昵称</label><input type="text" placeholder="姓名或昵称" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author'] ) . '" name="author" id="author"><span class="required">*</span></p>',
 'email' => '<p class="comment-form-email"><label for="email">邮箱</label><input type="text" placeholder="不想填的话可以用null@null.com" aria-required="true" size="30" value="' . esc_attr( $commenter['comment_author_email'] ) . '" name="email" id="email"><span class="required">*</span></p>',
 'url' => '<p class="comment-form-url"><label for="url">站点</label><input type="text" placeholder="个人主页网址,可留空" size="30" value="'.$comment_author_url.'" name="url" id="url"></p>' 
),

 'comment_field' => '<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'noun' ) . '</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true">' . '</textarea></p>',

);?>

<?php comment_form($args); ?>

你可以只更改你想要设置的内容,删掉其他的内容。不要忘记把参数放进函数里(最后一行)。

具体内容见官方文档:Function Reference/comment form

 

五、修改边栏小工具

文件位置:wp-includes/widgets
样式文件:style.css

举两个小例子:

  1. 删除功能里的WordPress.org字段
    找到wp-includes/widgets文件夹下找到class-wp-widget-meta.php,打开后找到无序列表<ul></ul>里的四个<li>标签,删除最后一个即可。
  2. 修改日历中有活动日期的显示样式
    默认的日历样式太朴素,看不出今天的日期,有活动的日期也不够明显。在style.css中加入下面这段,即可使有发表文章的日期数字显示为粗体,绿色。
#wp-calendar tbody a { /*当天发表文章的*/
        font-weight:bold;
        color:green;
}

      其他的比如设置今天的日期数字为斜体加粗体:

#wp-calendar #today { /*今天*/
        font-weight:bold;
        font-style:italic;
}

 

总结

以上只是给出了几个修改主题文件的示例,具体还有很多内容可以探索,从官方文档开始新旅途吧!

 

我的笔记之路

进步远非由变化组成,而是取决于好记性。不能记住过去的人,被判重复过去。—— George Santayana, Life of Reason

好记性不如烂笔头。——  谚语

光用笔头还不够。—— 李辉

 

我的笔记本之路

高一的一天,我在草稿纸上记下了当天发生的一些琐事和想法,从此,思考开始了。这之后,写了很多张草稿纸,同时开始玩豆瓣,读别人的日记。买书,读书。从草稿纸换成B5大小的记事本。后来,开始在记事本上做计划。生活枯燥无聊,就规划未来。慢慢地,日记里矫情的话多起来,再慢慢的,日记变成了牢骚的战场,终于,一些可贵的思考和反思冒出来。

那时的豆瓣,的确算得上是我的精神家园。有人在日记里反思教育和制度,有人在日记里写故事谈人生,没有人推荐化妆品和电器。真得感谢那些认真写作的人,是他们带给我一个不一样的世界。让我的阅读生涯在郑渊洁到韩寒郭敬明后出现了第二次跳跃,知道了文学世界的广阔和美丽。

我继续向豆瓣青年们看齐,看书,观影,听歌,去音乐节,学吉他,拍照片,写小说。在小县城高中那样的环境里,显得那么奇怪和孤独。现在看来,这些说到底也只是精神上的消费,除了写写日记,几乎没有什么产出。吉他学了半年,只学会了李志的几首歌;照片拍了一些,丢了;小说是一堆烂尾工程。

只有写日记和记笔记的习惯一直保留到现在。从高一的草稿纸到各种尺寸的笔记本。从高二买的第一部黑莓8830,到9000,9780,再到现在的Q10。发展到现在,我的笔记管理系统[1]主要由下面四种工具组成。

 

日记本(B5

记录内容:值得记下的事、零碎的思考

一开始我把所有的事情都写在日记上:记事,思考,规划,总结。慢慢地,有了其他的工具,日记上只记一些值得记下的事情,不成系统的思考和日常感悟。每过一段时间,随手翻一翻,能带来很多快乐和思考。

 

日程本(A7

记录内容:当天要完成的任务、任务分解、步骤规划、临时记录的想法

相对于手机电脑,纸笔更加直观和快捷,让人专注于内容本身,而且不会没电,也不容易丢失数据。这个日程本随身携带,用来安排当天日程,记录随时冒出的想法,分解大的任务(较大且复杂的项目在A4纸上规划)。每过一段时间,定期清理上面的内容(以类别和重要性放到其他三个工具里),起到中转、过滤和整理的作用。

 

Remember(黑莓)

记录内容:任务、清单、日总结、健康日记

Remember是黑莓BB10系统自带的应用(BTW,用黑莓做日程管理是一种享受),整合了任务和笔记。清单(任务文件夹)是你需要定期查阅,增删的清单,比如想做的事,购物清单,要学的东西,待养成的习惯等等。其他的零散内容记在笔记里,比如日总结、晨记和健康日记这三项是每天都要记录的内容,放在固定的文件夹(已将健康日记和晨记合并到日总结里)。一个培养好习惯的技巧是:把每天要注意的习惯和原则写在任务里,设置每天循环提醒。

日总结需要单独说一下,我记的比较简单,分为两部分:好(开心的事,工作学习成果)、坏(做错的事)。

 

注:这个软件可以用OneNote或是其他笔记软件代替。推荐使用OneNote,更方便整理和查找。

 

OneNote(全平台)

记录内容:文章、长期规划、周月年总结、专题记录、读书笔记、学习笔记、网络收集的信息。

OneNote是所有信息和知识的最终流向地。各种信息要以最精简高效的状态保存在这里。你应该至少设置四个笔记本:管理、笔记、信息、写作。管理笔记本里应该有这些页:为人处世的原则,做错的事情,失败清单,成功清单,恐惧清单。至于为什么要写作,未来会另写一篇文章再谈。

 

总结

工具放大你的才干,要舍得在工具上花钱,但要让需求来驱动你的采购。先找到适合自己的工具,慢慢地根据自己的需要去更换和调整。工具既要足够好,又要适合。祝大家都能找到适合自己的工具,不断成长和进步。

 

[1]:笔记管理算是我的个人知识管理系统(personal knowledge management,PKM)中的一部分,其他的内容,比如信息的收集和处理,以后再谈。

好学校,坏学校

高考失败,上了专科。大专三年,往往第二年就差不多要结束了,很多人就在这个节点上开始心慌,逐渐开始认识自己,考虑未来。或者,继续躺着,按着屏幕,发育身体。当然这些跟我没多大关系,选错了专业的我,几乎像个局外人。

美好幻想

我对大学有过美好幻想,高中生活在那样的苦闷环境里,羡慕过大学生活,但尝试了发现也不过如此。不过是无聊变得花哨起来罢了。不过这失望也倒合理,高中在豆瓣上看到的都是北京那几所大学学生们的文艺氛围和校园文化,当然让人羡慕。

好学校,坏学校

在过分推崇学历的社会语境下,专科的社会形象很差,但事实并没那么糟糕。首先说一下,品格是自证的,任何因为学历,种族,地域的歧视都是品格低下的表现。每一个人都不该成为歧视者,也不该承受歧视。

对学生来说,差学校差在校园管理制度的落后和死板以及资源的相对匮乏。前者是个硬伤,差学校热衷于改造和控制学生,各种不合理的纪律规定,利用成绩和学分来强迫学生参加各种无聊活动。但后者倒没多大关系,在这个互联网时代,完全可以通过网络来弥补:各个优秀大学的在线课程和慕课[1]平台(比如CourseraEdx学堂在线果壳MOOC)加上谷歌来弥补教育质量,各种优质的社交网络来弥补人际和社会资源。

抛开其他不谈,我很喜欢我的学校,因为它有个很好的图书馆。图书馆的好坏是评价一所学校的主要标准之一(嗯,还有长椅的数量和小树林的面积:)。

人的价值

身边很多同学一直对专科抱着偏见,自觉低人一等。有的同学甚至和我解释大专不是大学。先把这个问题放一边,问一下自己,你怎么评价现在的自己?而假如你是本科生,你会有什么不同?拿出一张纸来,在左边写下你对现在的自己的描述,在右边写下对考进理想学校的你的描述,然后问自己:是学历限制了现在的你成为那个本科生的你吗?还是说因为你的懒惰,除了你名字前面的前缀外,两个你有没有任何不同?

假如你需要用学历来证明自己的价值,那请你接受我的鄙视,或者点一下标签页上的叉号和我再见。这个世界已经够糟糕了,既然你的个人价值还抵不上一所学校的头衔,还是回家看电视吧。别人说专科不堪,你就破罐子破摔;别人说你学历不行,你就砸钱买证。可是你自己到底是谁,想成为什么样的人,爱好什么,能做出什么样的成绩,却从不考虑。学历只是一个标签,不能代表一个人,跟个人修养,人格,能力更没有任何直接关系。而假如你只有这一个标签,觉得自卑也就不奇怪了。

所谓大学,就是大不了自学

我想好学校坏学校对我也没什么关系,遇不到好老师,反正都是自学。差学校里,大部分的课程都很差(但这不是你考低分的理由)。这时,如果不自学就是对自己的不负责。

是去上哈佛的CS50课程,还是听学校的严肃的老教师讲谭教授写的C语言教程;是听年轻却无聊的老师朗读《大学生创业理论》,还是看YC在斯坦福开设的创业课How to Start a Startup。相比之下,学校的课程完全没有存在的必要。我想学校倒不如把所有的课程做成网络课程,转播优秀的网课资源,老师每周提供一次辅导,学生定期上交习题集。这样一来,玩手机的放心玩手机,睡觉的踏实睡觉,学习的安心学习,实现了宇宙的大和谐……

[1]:大规模开放在线课堂(课程),又称慕课(英语:Massive Open Online Course/MOOC),是一种针对于大众人群的在线课堂,人们可以通过网络来学习在线课堂。MOOC是远程教育的最新发展,它是一种通过开放教育资源形式而发展来的。——<维基百科>

我的大学

盖新房子的时候,拆旧楼,打地基是两个最麻烦的步骤,这大概就是我这两年的全部内容。和多年养成的坏习惯,错误想法,偏见做斗争;纠正错误的打字指法,纠正身体的不平衡,重新学习英语发音;学习本该早早开始学习的编程,重拾被应试教育误导了的英语和写作。这两年里,我也见到了许多从没见过的无耻、无知和虚伪。

军训与新开始

军训没有躲过,好在只有半个月,昏昏沉沉的度过了。同时开始上晚自习,各种吵闹:培训班宣传,社团学生会招新,各类人物轮番登场,简直是噩梦。看着这一场场闹剧,我读完了《乌合之众》和《宽容》……

后来又发生了许多无聊的,带着强制性的事情。比如说领导拍大腿想出来的“悦读工程”,要求每人每年读几本书,每本书写读后感上交。还有领导拍书记大腿想出来的“跑步卡”,每天要去学校的角落里刷卡(后来有一个学期没去,发现不过是体育得了良好罢了)。无一例外,这些都和期末成绩挂钩。好在我脑袋好,这些糟心的事情都忘得差不多了。

社团和学生会

由于之前就在豆瓣知乎上听闻过大学社团和学生会的恶心和糟糕,所以什么也没有参加。后来身边许多人被所谓的学长学姐们各种使唤和折磨,听说了各种荒诞的事情。发现真是完全正确的决定。噢,对了,这些被折磨的学弟学妹们现在已经翻身做主人了,跳进了下一个循环。

很多人在这些“圈子”里面整天忙来忙去,不过是组织了一些无聊的活动罢了,一群学分爱好者和证书收藏家的大联欢。这些人在心里安慰自己忙这些都是有意义的,发展了所谓的”交际“能力,积攒了所谓的“人脉”。事实怎么样呢?大多数人到最后只是拿了一堆盖了章的废纸,在简历上多写了几行和工作无关的废话,曾经的人脉们也四散而去。

后来,看到学校招生宣传时打出的标语:“丰富的社团生活”,我的内心很复杂。

学分和学长文化

之所以把这两样东西放在一起,是因为两样东西总是同时出现。加学分是学长们宣传社团和各种活动的手段,也是很多人加入社团学生会和参加活动的目的。这让一切都变得像金钱交易一样赤裸裸。仅仅是为了学分,就能让人卖掉自己的时间,干自己不喜欢的事情,更别说金钱了。而学长本来只是对前辈的敬称,经历过身边这些事情后,就完全变了味。有的人接到学弟的电话时仿佛骑在人家头上,而学长的电话一来就瞬间跪倒了。

宿舍生活

我觉得学校应该把玩游戏的和不玩游戏的人,做事情考虑别人感受和相反的人,早睡早起的和晚睡晚起的人,整洁的和邋遢的人分到不同的宿舍。这样能减少很多潜在的凶杀案的发生。不开玩笑。不过整个宿舍一起玩游戏还是很开心的。

思想政治课以及各种劣质公选课

从高中开始,思想政治课就是我最厌恶的东西。大学还是躲不过,上课的老师要么是无聊的读课本类型,要么是跪舔党国大唱赞歌的类型。当他们歪曲事实的时候,好多次我都想站起来和他们辩论。终于,在一门心理教育课的最后一堂课,我把之前整理好的对老师的所有错误观点和事实的反驳和质疑打印了十几份,在教室里分发了。下课后和老师吵了一架(其实一开始我们是辩论的……)。

选错专业

大概在大一上学期快结束的时候,也就是买了电脑后不久,开始发现自己喜欢的是计算机。直到大一快结束才有了转专业的想法,可那时已经过了规定期限(该死的规定)。没办法,只好进入尴尬的兼容模式,上课看计算机书,期末突击考试,同时申请一部分课程免听。就这样到了现在。

课程、考试与培训班

大学的课程很水,课本很烂(可怜有些老师还把上课点名当作很有趣的事情)。相对应的,大学的考试很水,难度很低。但这不影响培训班的生意,因为有各种各样的证书来满足学生们证明自我价值的欲望,尤其是在专科学校里。而这些培训班都是打着交钱包过,不过退钱的旗号招生,暗地里搞倒卖答案的勾当。以至于会发生这样的事情:同在一个培训班的一个女生看到另一个女生在复习,惊讶的问她:不是说包过了吗,你还看书干嘛?

成长与收获

和中学的我相比,现在的我能力上和心智上都有了很大的进步。当然,我的进步和学校没有关系,从小到大,学校是我成长和进步的最大阻碍,没有之一。

这两年来,我投入了很多的时间来学习英语、编程和写作,让早睡早起、阅读和运动成了生活的一部分,逐渐形成了自己的学习系统、精力管理系统和知识管理系统。参加了一次辩论赛,做过几次演讲。得到过赞美,也向别人道过歉。恋爱,也吵架。最重要的是,学会了尊重别人的生活方式和生活选择,不再总想着改变别人。学会了谦虚和克制。知道了自己要走的路,要做的人。

总之,仍然不完美,仍然在努力。

WordPress美化方案:插件篇

使用WordPress一年了,逐渐形成一套格式外观美化的方法。在这里做个总结,也给新手做个参考。

基础知识

整个美化方案由三种方法组成,一个是安装插件,这个就不用多说了。另一个是修改主题文件。最后一种是插入代码

另外两篇请见:
WordPress美化方案系列:修改主题文件
WordPress美化方案系列:插入代码

 

一、文章显示概要

插件:Easy Custom Auto Excerpt
插件限制了字号,但是可以通过插入代码的方法避开。安装“Easy Code Placement”插件后,就可以在插件设置里readmore字段设置的地方插入HTML代码,比如下图中是我插入了按钮标签后的效果。

readmore按钮

readmore按钮

 

二、文章固定链接

插件:WP Slug Translate
这个之前说过,首先在设置-固定链接里把格式设为文章名,然后见这里。另外要注意的是作者提供的翻译API有数量限制,建议自己按照作者的说明注册一个。

 

三、图片显示

插件:Easy FancyBox
点击这篇文章的任意图片查看效果。
需要在插入图片的时候将图片链接到媒体文件。

图片设置

图片设置

四、代码显示

插件:Crayon Syntax Highlighter
一些必要的设置:在插件设置里勾选“在代码中进行HTML转义”。

插入代码设置

插入代码设置

然后编辑代码的时候,选中代码,然后选择“预格式化(即pre)”

插入代码

插入代码

五、手机站点

插件:Wptouch
大部分主题在手机上阅读不方便,使用wptouch可以优化排版。默认的免费主题就挺好,注意关联一下菜单。

本站的手机页面

本站的手机页面

六、评论区添加表情

插件:silver_smilies(作者的博客
没有找到好用的表情插件(多说?),发现了这个,觉得还算简单好用。支持自定义表情包。目前还没解决的问题是如何把它放到评论输入框的下面。
用法:点击这里下载压缩包,如果上传安装失败那么把文件解压缩后放到wp-content—plugins下,然后在插件管理界面启用。另外,我还在压缩包里放了找到的三套表情包:)使用时用表情包里的图片替换face文件夹里的全部图片(感谢原作者)。

表情包1

表情包2

表情包3

三套表情包

 

 七、其他插件

其他几个插件使用都没什么难度,就不一一介绍了。
相关文章:Yet Another Related Posts Plugin
文章访问量: WP-PostViews
返回顶部:Dynamic To Top

 

总结

插件开启的过多会影响网页的加载速度,所以尽可能的通过修改主题文件来实现简单的功能。有时间再总结一下如何优化wordpress速度。

英语怎么学?

去年年底考了英语六级,成绩还不错。朋友问到学英语的方法,于是就有了这篇文章。

 

一、学英语?

开始看下去之前,请你先考虑三个问题:

喜欢英语吗?
学英语干什么?
能坚持下去吗?

如果你对这三个没有明确的答案的话,那么还是放弃吧。学英语很累,一开始还很无聊,不如花时间读读小说,谈谈恋爱来得轻松。你说英语很难?那我告诉你吧,它的确很难,难得要死,不如去学挖掘机,简单易学还炫酷。

如果只是为了通过考试,那么你该去背单词和做真题,相关的经验网上一抓一大把。但是既然你都开始学了,为什么不让目标更远大呢?我觉得,每一个想在某个领域获得深远发展的人,每一个认同终身学习理念,对世界抱有好奇心的人,每一个向往自由的人,都该去学英语。为什么?没有标准答案,我先给出三个:世界上大多数的知识和绝大多数优质的知识都是用英语写的;了解及时的优质的行业信息;不被墙内的媒体和政党误导,了解事实真相。

 

二、怎么学?

再往下读之前,请先了解一下我发明的辉氏高效学习流程图©,下面的内容都建立在这个流程图上面。

 

三、学英语!

下面按照流程图走一遍:

零基础?

是:获得最少必要知识。对学英语来说,开始之前,先背几千个单词。不要用软件,买一本高考词汇,或是四级词汇,采用手抄,听读的方式记忆。采用高强度短时间记忆的方式,主要的原则就是重复。在一个月内完成。背单词是前期迅速提高阅读能力和自信心的重要方法。单词记得差不多了,这时再开始下面的学习。

否:跳到下一个问题。

感兴趣?

是:恭喜你,你有很大的优势来学习英语,而且可以不那么痛苦的达到一个很高的水平。你应该已经有了自己的学习目标和学习计划,并且已经把英语的学习融入到一部分生活习惯里了。如果你是刚刚起步,那么继续往下看。

否:跳到下一个问题。

有目标?

是:有了目标,学习方法就清晰了。比如你的目标想要流畅阅读英文出版物和网络内容,那么你的方法就是:在掌握了基础的几千个单词后,开始阅读英文书。按照循序渐进的原则,安装好查单词的软件,从儿童读物开始,慢慢过渡到青少年读物,然后是成人读物,最终开始阅读你目标内的英文书。再比如你的目标是和外国人畅快的聊天,那么你的计划就得定的长远些,按照循序渐进的原则,你从音标开始学习,每天学5页音标教程,同时听三个英语播客。

否:跳到“用”。

“用”!

用分为主动被动两种。

主动的”用”:使用英语来学习和工作。卸载知乎,安装Quora;用英语来学习其他专业的知识,听公开课、看电影纪录片用英文字幕(暂停查词);使用英文关键词搜索等。

被动的”用”:强迫自己接触英语。比如把电脑,手机等所有电子设备的语言换成英文;安装类似biscuit这样的应用,不定时的从任务栏跳出单词;在洗手间或是书桌前等视线所及的地方贴上单词表。

学习原则

这些原则是安排和调整学习计划的指导原则,可以通过阅读网上的经验和信息来完善它,打造一个适合自己的学习体系。

  • 不求速成,做好长期学习的准备

学习语言是个长期的过程,没有多少捷径可走,即使有也免不了大量的时间和精力投入。

  • 量化目标,制定学习标准,越细致越好

举个例子,目标:每天三个播客,五篇文章;学习标准:查出每一个生词,听懂每一句话。并且把生词记在单词本上,每周末下午复习。建议搭配时间统计和写日总结来督促自己完成目标。

  • 重复!重复!重复!坚持!坚持!坚持!

相对来说,工具不重要,方法不重要,重要的是每天的重复和坚持

  • 让学习变得有趣起来

同样的原因,在漫长的学习路径里,为了让自己更容易坚持下去,尽量让学习变得有趣起来。

  • 阅读材料以现代出版的优先,学习材料以外国人出版的优先,难度上稍稍大于自己的水平

不建议选择名著,尤其是初学者。举个不太恰当的例子,看莎士比亚学英语,就像是让外国人读鲁迅来学中文。难度选择上,以自己大概能看懂,但每页都有十来个生词的书最好。

  • 通过正面的反馈,增强自己的信心

就像升级缓慢的游戏让人觉得无聊一样,没有反馈的学习让人很容易开始厌倦。这时我们应该尽量给自己创造一些正面的反馈,比如说去参加考试。

  • 方法可以灵活多变,但学习不能停,最好还是”用“起来,把英语变成生活的一部分。

学习方法千万种,坚持下来没几个人。但也不是说就得一条路走到底,可以多尝试不同的学习方法和学习材料,但学习本身不能停。在这些尝试中慢慢形成自己的学习系统,找到适合自己的方法。

学习工具箱

工具箱应该是通用的,对所有的学习过程都适用。但也得新加一层关于英语的盒子。这个盒子里的硬工具是各种优秀的教材、词典或APP,从各处整理来的各种方法和经验。软工具可以是保持专注的能力,制定计划的能力,给学习创造乐趣的能力等等。

 

四、我是怎么学的?

故事是这样的。我高中的时候没有好好学习,对英语也没什么好感。后来实在讨厌学校,高三就回家自学了。自学一年,只有英语学得还不错,一度在原来的班里从倒数考到第二(大家当然都很惊讶)。虽然高考还是没有考好,上了个专科。但对英语的学习给我带来了很大的信心。

上了大学后,才开始正经的学起来,期间尝试了很多方法,也接触过不少材料。印象最深刻的是ESLpod和Englishpod出的播客,旋元佑的语法俱乐部,和走遍美国。

上了大学后,还是很讨厌上课,终于在大一下学期成功申请了英语免听。不用再去上课了。然后继续保持学习,大量阅读英文,主要是Quora,Medium上的文章。同时开始学习编程,把英语作为一个工具来使用,看公开课,查官方文档,查Google都用英文。最近每天会听五个ESL的播客(通勤时),晚上有时间会跟读半小时的材料。就这样半学半用,一直到现在。中间考了四六级,四级考了532。六级倒是认真复习,做了十套真题,不过也才考了544,离目标还差了几分。

哈哈,是不是很失望?其实根本就没有什么奇技淫巧,每天学一小时,坚持两年,你也可以到我这个水平。在这个学习过程中,考试只是顺便完成的一个小目标罢了,这个过程让我对自己的学习能力有了清晰的认识,更大的好处是英语给我打开了另一扇大门,一个崭新的世界离我更近了。

 

五、其他

这些链接后的内容可以用来完善你的学习工具箱,找到适合你的学习材料和学习工具。不要在选择材和工具上浪费太多时间,早点开始,学习本身才是重点

方法与原理:

知乎话题:英语学习

知乎话题:英语

豆瓣小站·奶爸的英语教室

豆瓣英语学习整合贴

Quora话题:Learning languages

Quora话题:Learning English

学习材料:

eslpod

Englishpod(和eslpod的区别见这里

《文法俱乐部》——旋元佑

《英语阅读参考手册》——叶永昌

豆瓣奶爸的教室小站分享的资源网盘直达

 

六、结语

啊,既然你已经看到了这里,那说明你想要学习英语的决心很大。尽管这样,我还是要再重复一下,做好长期学习的准备,在学习过程中多给自己找些乐趣,让英语融入你的生活。慢慢的,你会喜欢上它,甚至离不开它。将来的某一天,你会感谢自己今天的决定。

辉氏高效学习流程图©

通过对英语和编程的学习,我逐渐发现了几种高效学习的模式和一些学习原则,然后把这些东西总结成了一个“辉氏高效学习流程图©”。

learning method

辉氏高效学习流程图©

流程图包括三种学习模式,一些学习原则和一个学习工具箱。

这个辉氏高效学习路径图©是我刚刚发明出来的,这是它来到这个世界上的第一声呻吟(哦不,是啼哭)。下面是这三种学习模式的解释和相关示例。

 

一、三种学习模式

兴趣驱动

当你对你所学的东西感兴趣的时候,你会投入很大的热情和精力去学习,即使一开始没有章法,慢慢地也会形成自己的方法。这种学习模式有很高的主动性,只需有高手稍加指点,进步就会很快。

目标驱动

第二种是目标驱动,也就是英文语境下时”learning by doing”。当你有了一个明确的目标需要实现时,学习就成了一个实现目标的条件。这时的学习会更有针对性,你的每一个问题的解决都是一次学习与实践。虽然这样的学习可能不会深入彻底,但这个学习的过程会让你不知不觉就”入了门”,而且可以极大地提高你的自信。

举例来说,学英语时如果以通过某个考试作为目标,那么学习方法就很容易制定,只需要买到相应的真题和单词书,按照自己了解到的好的学习方法坚持下去就可以了。学编程时,以实现某个项目作为目标,那么学习的时候就会去想尽办法来解决遇到的各种问题,在解决问题的同时,你也获得了相应的知识。

生活驱动

当你既没兴趣,又没目标的时候,就”用”。把你要学习的东西融入到你的生活里。一个陌生的领域通常只要掌握一些最少必要知识,就可以逐步运用了。对于英语来说,是基础的几千个单词;对于某一门编程语言来说,是基础的语法。这个概念其实很普通,也没什么可以解释的,就是”用”。把学习融入到生活习惯里,不知不觉就学会了(当然,学好是另一回事)。

 

二、学习原则

它是你学习,或是形成自己的学习方法和学习系统的指导原则。你可以通过阅读和实践不断的完善它。这些原则包括循序渐进,长时间的坚持,勉强完成好过放弃,英文资料优先,纸笔优先,激发兴趣,适当的奖励自己等等。

 

三、学习工具箱

这个工具箱里是各种可以促进学习的工具。这里面有硬工具:各种优质的APP(比如OneNote),网站(比如豆瓣知乎),资源,设备等;也有各种促进学习的知识和能力(软工具),比如成熟的心智,健康的生活习惯,控制时间的能力,搜索信息的能力,作为工具语言的英语等。Coursera上有一门关于学习的课程值得一看,名字就叫Learning How to Learn,也该放到工具箱里。

每个人都该有一个这样的学习工具箱,花一定的时间来打造这个工具箱是值得的,它将使你终生受益。通常来说,软工具需要更长时间来获得,这些工具的背后是大量的优质阅读,长时间的学习思考和大量的实践。而对于硬工具,在经济允许的情况下买最好的。能花钱解决,就不要浪费时间。

下面是一个完整的运用示例:英语怎么学?

impress.js——用HTML“写”幻灯片

一、我做的幻灯片

先看一下我用impress.js做的幻灯片吧!
加载可能会有些慢。如果打不开那就看一下作者的demo吧。
注:文字摇晃的特效使用的是CSSHake,视频用Chomp(ios)制作。

 

二、概述

impress.js是一个免费开源的JavaScript库,可以用来制作非常酷的幻灯片。如果你之前接触过Prezi,肯定还记得那让人赞叹的特效吧。而impress.js就是受Prezi启发做成的。

常见的幻灯片工具有微软的PowerPoint【1】,苹果的Keyword等。不常见的有Prezi等。除此之外,还有一些通过HTML,CSS,JavaScript等前端语言制作的工具,主要有impress.jsreveal.js(这个有时间探索一下),deck.jshtml5slides。其中impress.js最让人印象深刻(impress!),使用它可以你可以制作出许多特效:三维空间的无限延伸,3D效果,任意角度的旋转,任意大小的缩放,把一页幻灯片放在三维空间的任一位置。算了,语言是苍白的,看看作者的demo吧。

虽然效果很好,但impress.js也有一些缺点:比如编辑方式太繁琐(其实是需要学的东西很多……),尤其是想要获得一些特殊效果时。总的来说,impress.js比较适合以演讲内容为主的展示(参考高桥流简报法),单页只放一个名词或句子,或是一张图片,这样会带来比较出众的效果。可以用它来做一个词云图,前提是演讲水平够好。

先泼一盆冷水,工具是为内容服务的,如果你没有什么好的内容——要么是有质量,要么有意思,那么幻灯片做的再炫也没什么用。当然,如果你只求酷炫,那当我没说。

 

三、前提要求

需要一些HTML和CSS的基础知识(会JavaScript更好),没有的话花几个小时到w3school中文)或MDN上了解一下。

按照作者在代码注释里说的,你不光得有HTML和CSS的基础知识,还得有设计的眼光。因为impress.js没有默认的风格或样式,一切都得你自己来。而且作者不希望所有的impress.js展示都像demo一样,所以,明白了方法就自己从头做起,你会体会到很大的乐趣的!

英文好的还是去看源代码吧。作者的注释很详细,也很有趣。

 

四、文件的使用

新手可能会对文件有些疑问,所以在这里说明一下。不需要可直接跳至下一节。

下载

你可以到项目的Github页面下载文件,或者直接点击这儿下载。解压后会得到一个文件夹,双击打开根目录下的index.html就可以看到作者的demo了。

 

主要文件组成

impress:

  • js
    • impress.js(JavaScript文件,提供特效支持)
  • css
    • impress_demo.css(CSS文件,提供样式支持)
  • index.html(HTML文件,幻灯片的入口,也是你写入幻灯片的地方)

 

如何“制作”幻灯片

你要做的就是创建一个HTML文件(使用文本编辑器比如Notepad++),demo对应的HTML文件就是根目录下的index.html。然后把CSS文件和JS文件引入你的HTML文件里(见“初始化”),接着把你的幻灯片按照一定的属性设置写进HTML文件里(见“创建幻灯片”)。最后用浏览器把这个HTML文件打开就可以了。

 

五、初始化

头部(head

先把文件下载下来,然后创建一个HTML文件,把下面的head放上去:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />    
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>impress.js</title>
    <link href="css/impress-demo.css" rel="stylesheet" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
</head>

头部信息经过删改。

 

错误反馈

接下来是一个错误反馈的class,当浏览器不支持时会显示,可以改写错误信息的内容。也可以不加。

<body class="impress-not-supported">
<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or<b>Firefox</b> browser.</p>
</div>

 

编辑幻灯片区域

创建一个id为impress的div,待会所有的演示文稿都要放在这个div里:

<div id="impress">
</div>

 

操作提示

下面这两段分别用于在电脑和移动设备上提示用户怎么控制幻灯片:

<div class="hint">
    <p>Use a spacebar or arrow keys to navigate</p>
</div>
<script>
    if ("ontouchstart" in document.documentElement) {
        document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>

 

调用JS文件声明

这两行放在文件的最后。声明对impress.js的引用,并且初始化impress.js。

<script src="js/impress.js"></script>
<script>impress().init();</script>

别忘了关闭上面的几个标签:

</body>
</html>

点击这儿看完整的模板文件。

 

六、创建幻灯片

impress.js创建了一个三维空间,所有的幻灯片都有各自的位置坐标(x,y,z)。整个空间的中心是原点(0,0,0)。其他的幻灯片或文字都是相对于这个原点来设置位置的。(中心不一定是第一张幻灯片)

像之前提到的,所有的幻灯片都要放在一个id=impress的div里。而且所有幻灯片都使用一个div。设置幻灯片的各个参数如下:

id(可选)——可以用来表示幻灯片的顺序,格式是id=“step-N”,(比如id=”step-2″,序号为2)。如果不指定id的话,幻灯片按照代码从上往下的顺序出现
class(必须)——通常有两个值,“step”表示一个步骤,元素透明显示,“step slide”有幻灯片白色方框。

其他的调整选项都以data开头。

位置属性

data-x——表示x轴坐标
data-y——表示y轴坐标
data-z——表示z轴坐标

坐标的设置,如图所示。需要注意的是Y轴向上是负值。简单的理解就是:往右(x),往下(y),往上(z)是正值;相应为负值。

坐标

坐标方向

常用效果

data-rotate——表示旋转,分别有data-rotate-x,data-rotate-y和data-rotate-z(同data-rotate),值表示旋转的度数。正值表示按照相应的轴顺时针旋转,负值则是逆时针。
data-scale——表示幻灯片的大小,如data-scale=”4″表示比其他幻灯片大四倍

 

不常用属性

data-transition-duration——幻灯片切换的时间,默认为1000,单位为ms(1000ms=1s)

data-perspective——表示视角,设为0则取消3D效果。默认为1000。更改前最好知道你在干什么,详情见:https://developer.mozilla.org/en/CSS/perspective

 

示例

第一个div创建了一个有白色底框的幻灯片,位置在第四象限,沿x轴顺时针旋转90度。文本是100px大小的“Hello, world!”。

    <div class="step slide" style="font-size:100px" data-x="0" data-y="0">
        <q>Hello, World!</q>
    </div>

 

第二个div创建了一个透明的幻灯片,位置在第一张幻灯片的右上方,绕z轴旋转90度。

    <div class="step" data-x="2000" data-y="-2000" data-rotate-z="90">
        <q>Hello, You!</q>
    </div>

第三个div创建了一个透明的幻灯片,位置在第二张下方。

    <div class="step" data-x="2000" data-y="-2000" data-z="-5000" >
        <q>Hello, Boy!</q>
    </div>

第四个div创建了一个透明的幻灯片,位置在第三张绕y轴旋转90度的地方,2倍大小。

    <div class="step" data-x="-2000" data-y="-2000" data-z="-5000" data-rotate-x="180" data-scale="2">
        <q>Hello, Girl!</q>
    </div>

点击这里查看这四张幻灯片的效果。

 

全景图

最后一个div是一个全景图:

    <div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
    </div>

以上这些属性可根据需要调节,只有xy坐标是必须的

 

七、插入媒体问题

使视频和音乐在进入幻灯片时自动播放

html5可以使用<video>和 <audio>标签插入音视频,控制方式有三种:

controls

显示视频控制条

loop

自动播放,循环播放

autoplay

 自动播放

代码如下:

<video width="320" height="460" autoplay>
    <source src="video/test.webm" type=video/webm>
</video>

音频的代码类似,只要去掉宽高设置,更改文件的type就可以了。

在impress.js中,把视频标签放入DOM限制了媒体的autoplay。这时我们可以在impress.js中插入这段代码:

var videoStep = document.getElementById("video-step");
var video = document.getElementById("video");
videoStep.addEventListener("impress:stepenter", function(){
    video.play();
}, false);
videoStep.addEventListener("impress:stepleave", function(){
    video.pause();
}, false);

代码解释:

1~2行:设置了两个变量,分别代表幻灯片和视频文件,后面分别填上相应的id。
3~5行:监听当前幻灯片上的事件,如果进入幻灯片就执行相应的函数(即播放视频文件)
6~8行:同3~5行,这次是设置离开幻灯片时执行的函数(即暂停视频文件)。

然后把有视频的那张幻灯片的id设为video-step,视频的id设为video。

<div id="video-step" class="step" data-x="-50000" data-y="2000" data-z="-60000" data-scale="6">
    <video id="video" width="420" height="340" autoplay>
        <source src="video/IMG_1254.webm" type="video/webm">
    </video>
</div>

这样视频就可以在进入到那张幻灯片时开始播放,进入下一张幻灯片时就自动暂停了。

 

一张幻灯片里放入多个视频或音频

以放两个视频为例:

第一步:
在上面那段JS代码里定义两个视频文件的变量(比如video1,video2):

var video1 = document.getElementById("video-1");
var video2 = document.getElementById("video-2");

第二步:
进入幻灯片时执行的函数变更为:

videoStep.addEventListener("impress:stepenter", function(){
    video1.play();
    video2.play();
}, false);

离开幻灯片时执行的函数相应修改;

第三步:
HTML文件设置相应的id。

 

在不同幻灯片里分别放入视频

以在三个幻灯片中放置视频为例:

  1. 在impress.js重复插入三个上面那段代码;
  2. 改掉变量名称(videoStep和video);
  3. 相应地更改其他位置的变量名;
  4. 修改相应的id名称(video-step和video);
  5. html文件设置相应的id。

插入音频的方法,以此类推。

 

背景音乐

上面的方法只适合在某一页幻灯片上放置媒体,而如果想要全程播放背景音乐的话,就可以把audio标签放在整个编辑幻灯片(id为“impress”)的div之外。同时,你还可以在任一页控制背景音乐的暂停与播放。方法相同,也是插入上面那段JS代码,更改相应的变量和id,然后设置相应的操作,具体见上面那段代码的解释。

 

编辑JavaScript

我还没开始学JavaScript,能给的建议就这几点:

  1. 保持相同的缩进;
  2. 语句后加上分号;
  3. 变量名不能重复;
  4. 另外,HTML里的ID也不能重复

 

八、头脑风暴

把impress.js和其他的前端工具搭配使用,你会获得更加有趣的效果,比如reveal.js的作者推荐的许多有趣的前端项目。再比如CSShake(可以让文字或图片实现各种摇晃效果),参考我之前写过的介绍示例页面。或者是做出一个词云图来,都是很好的创意。当然,你得会演讲。

impress+word cloud

impress+word cloud

像demo里说的,唯一的限制就是你的想象力,快去探索吧!

 

九、Last but not least

把作者的最后一大段注释翻译过来吧:

“现在,完成你第一个impress.js幻灯片的所有知识,你差不多都有了。但是在你开始之前……
啊,你已经从Github复制了代码?
你已经打开编辑器粘贴了上去?
快停下!
幻灯片不是这样做的。这些只是代码。实现这些创意之前你得在心里完成它们。

如果你想做出好的幻灯片,就拿出铅笔和纸。关掉电脑。打个草稿,写写画画,通过头脑风暴把你的创意在纸上展现出来。试着把你想展示的东西做出个思维导图。这会让你离待会你要用impress.js实现的排版越来越近。只有当你把你的展示在纸上做好了,再回到代码前。太早写代码没什么用,因为那样你只会把你的时间浪费在和没用的点坐标搏斗上。

如果你觉得我疯了,那么请你把你的手放在一本叫做《展示的哲学》(”Presentation Zen”)的书上。这本书完全是关于如何创建让人赞叹和着迷的幻灯片的。

好好想想,如果你没有什么有趣的东西要表达,impress.js可能帮不了你什么。”

 

十、附录

作者的Twitter:@bartaz
项目Github地址【https://github.com/impress/impress.js

 

注释

1】因为大部分人都会用“PPT”代称幻灯片,可是“PPT”本身指的是用微软的演示文稿工具PowerPoint做出来的幻灯片(其生成的文件格式默认为ppt),而英文里这个在做展示/报告(Presentation/Slide Show)时用的东西一般称作Slide,翻译过来是幻灯片或是演示文稿。本文统一称为幻灯片。

我目前为止做的最好的幻灯片

花了两周左右的时间做了一个幻灯片。这周四终于要展示了,很兴奋。

这是一门建筑材料课,最后一次课是两个班分成若干组,各小组把课题调研结果做成幻灯片展示。恍恍惚惚两节课,像是在用幻灯片做演讲稿的朗读比赛现场。等啊等,终于轮到我们组了。按照之前预演过的程序,我离开座位,靠窗的同学帮我拉上窗帘,我上前关上所有的灯,连接电脑,氛围就绪!

因为幻灯片里放了很多录音和视频,我就没有站在讲台上,拿着任天堂的小键盘在下面当了放映员。看着自己做出来的东西,听着身后响起的一阵阵掌声和欢笑,真是开心又感动。

观看提示:

  1. 这个幻灯片的主题是吊顶材料。
  2. 里面出现的人物都是我的舍友和小组成员(感谢陈中华和董淑松的支持!)。
  3. 关于制作这个幻灯片的细节,见做个有趣的幻灯片用HTML写幻灯片

Addition Notes:

  • 幻灯片:http://greyli.com/slides/2016-building-material(包含大量视频,考虑到网速和浏览器支持情况,建议直接看视频)
  • 幻灯片使用 Impress.js 制作,混杂了很多效果,比如 CSShake,其中的动画用了 iPad 上的 Chomp。用 AHK 做了启动放映的快捷键。因为想做成一个类似动画的东西,所以严格来说不算是演讲。关灯后用蓝牙键盘在第一排控制放映。现在来看,有些内容大概有些恶趣味……><。放映的现场效果很好,可惜没有录像。

做个有趣的幻灯片

我觉得一个好的演讲通常有这么几种情况:

  • 你做了特别厉害或有意思的事情,要把经验或是成果分享出来(比如说苹果的发布会);
  • 你有很独特的或是值得思考的想法(比如各种TED演讲);
  • 你特别擅长带动现场气氛(当然得有一个好的内容做前提);

一般来说,只要你具备了上面任意一种情况,那么不论你用不用幻灯片,用什么幻灯片都没关系了。但如果你以上几点都不具备,你还可以做个有趣的幻灯片来补救。不能让大家思考,那就让大家发笑。只要你要演讲的主题不是“弘扬XX主义河蟹价值观”这样无聊的话题,总可以让幻灯片变得好玩起来。

从大一开始,我做过几次展示。用到幻灯片的有三次,这三次都没有制作常规的幻灯片。一是因为我对PowerPointKeynote等主流工具不熟悉,二是这三次做的展示更适合用这些特别的幻灯片。

第一次,是一个创业项目的展示,我用了Prezi,反响热烈,很多人问我用什么做出来的。内容倒也没有多出彩,但效果的确很棒。第二次,我用了PPT(指微软的PowerPoint),不过使用的是“高桥流简报法”,简单地说,就是简化内容,用超大号的字体。因为字体和PPT版本问题,也有自己演讲水平的原因,并没有达到预期的效果。第三次,我用了impress.js,非常成功。算是目前为止做的最好的幻灯片,现场反响也最热烈。

一、Prezi

prezi

prezi编辑界面

Prezi是一个在线制作幻灯片的工具(也提供本地程序),主要的特点是使用了完全不同于普通幻灯片的缩放用户界面(ZUI),可以让用户放大或缩小幻灯片元素(文字,图片,视频等)。这是官方的示例,这是一个中文的示例。网站提供了功能受限制的免费账户,同时有限定试用期的本地程序可以使用。主要的缺点是对中文的支持不太好。另外这个网站(Prezibase)上提供了一些免费的模板。

 

二、高桥流简报法

高桥流简报法(日语:高橋メソッド,英语:Takahashi Method),是日本Ruby协会会长高桥征义发明的一种简报技法。

在2001年的一次演讲中,因为恰巧没有简报工具,于是高桥使用了与一般主流简报方式完全不同的方法:他使用HTML制作投影片,并用极快的节奏配上巨大的文字进行简报,带给听众有如与日本电视动画新世纪福音战士》(新世紀エヴァンゲリオン)相同的视觉冲击。”——维基百科

高桥流幻灯片示例

这是我用高桥流简报法做的幻灯片的一页,字体用的是A-OTF Gothic MB101 Pro B

YouTube上的这个视频可以帮你快速了解这个方法。而这个是作者使用中文做演示的视频。作者使用的是日文字体极太明朝字体,但是这款字体有些字显示不出来,可以试试别的字体。我觉得字放大了以后,繁体字加粗更美观一些。这种幻灯片要求你的演讲内容要紧凑,结构清晰,PPT上应该都是你要讲的内容的主要论点或是关键词。

 

三、impress.js

先来参观一下我的作品吧!

impress.js是一个免费开源的JavaScript库,可以用来制作非常酷的幻灯片。另外也可以看一下作者的demo,或是这个非官方的示例。类似于Prezi(本身就是受Prezi启发),但是使用HTML来编辑,没有客户端的限制,可以自己利用前端技术扩展效果(比如这个网站上推荐的许多前端项目)。缺点之一就是编辑方式太繁琐,有一定的技术门槛。我写了一篇使用教程,感兴趣的朋友可以了解一下。

 

四、词云/标签云

词云图

词云图示例

词云图,顾名思义,就是把词语像一片云一样堆起来。事实上,你可以把一堆字堆成任意的形状。英文里叫Word CloudTag Cloud。一般没有人单用这一张词云图来演讲,通常是用来做幻灯片的其中一页。制作词云图的工具一般有Tagxedo

 如果有机会,我想尝试一下只用这张词云图演讲。假如我用它来演讲的话,那么话题应该有专题性,内容应该由有许多关键词组成。单页的词云图不够生动,假如内容再没有多少吸引力的话,很容易变成催眠大会。假如能用Tagxedo搭配上impress.js,再使用高桥流简报法的话……哈哈,我自己都开始期待起来了。

 

五、总结

工具是为内容服务的,所以选择什么样的工具得先看你的演讲主题和场合。同时还是推荐大家去认真学习一个常规的幻灯片软件(PowerPoint或是Keyword),并且逐步提高自己的演讲和写作能力。好的演讲,我觉得有两个重要的指标,要么让人思考,要么让人欢笑。同时做到这两件事,才算是一场完美的演讲。

 但是无论用什么工具,请不要粘贴黑压压的一大段文字在幻灯片上(有时候可能是五颜六色的……)。然后演讲就变成了读幻灯片,偶尔还夹着几句生硬的套话。这个世界已经有太多糟糕的东西了,如果你不能认真的做个漂亮的东西出来,不能自然的讲话,世界也不会温柔对待你的。

浏览器使用技巧

很多人觉得浏览器没有什么技巧,不就是个上网的工具嘛。但事实不是这样,拿用电脑来说,会开关机,上网,玩游戏是第一层;懂得各种技巧,熟悉各种操作是第二层,理解操作系统原理和硬件运行机制,进而运用原理更好的使用电脑是第三层……我今天要谈的就是对浏览器的第三层应用。当然,上面还有很多层:)

其实这篇文章的重点不在技巧,而是对网页和浏览器原理的实践。这些技巧都是建立在对这些原理的理解上。文章分三部分。分别是对构成网页文件的介绍、在浏览器中访问这些文件的方法、技巧示例。同时,这篇文章也形成了一个完整的学习过程。也就是:理解基础知识——尝试和实践——探索和应用

提前剧透一下这篇文章能教会你什么

  • 不使用客户端在大多数音乐网站上下载音乐(比如豆瓣电台,百度音乐盒,酷我等等)
  • 破除网络课离开页面自动暂停视频的限制
  • 破除网页弹窗强制登记手机号的限制
  • 破除网页的文本复制和图片保存限制
  • 修改网页内容

事实上,知道了原理,你能做的事情远不止这些。

 

一、网页

假设你有一台电脑,安装了某个浏览器。你打开浏览器,在地址栏里输入了google.com,按下Enter,显示访问不了。好吧,这不好笑。换个例子,你又重新输了个网址:withlihui.com,也就是我的博客。按下Enter后屏幕上显示出了我的博客的主页。这中间发生了什么?(域名服务器之类的内容就先跳过,跟这篇文章没有太大关系,有机会再写一篇介绍一下。)

总的来说,你输入的地址其实可以看作是一个文件地址(脑海中浮现资源管理器地址栏),只是这个文件存放在我租用的服务器上面。你告诉浏览器要访问的文件地址,然后它读取了这些文件并显示出来。

一般的网页是由HTML文件、CSS文件以及JavaScript文件组成的,这三个文件共同合作,分别负责实现网页的基本内容(content)、页面样式(style)、功能效果(function。按照知乎用户胖胖小的说法,如果把网页看作一个句子的话,HTML是名词,CSS是形容词,JavaScript是动词。好了,知道这么多就可以了,想知道的更深入一点可以去看w3school中文)或MDN的文档。

 

二、浏览器

浏览器其实可以看作是一个文件查看器,事实上,它确实也可以读取本地文件,支持mp3mp4txtpdf等文件。只不过一般用它来它读取构成网页的文件(HTMLCSSJavaScript等),你在地址栏输入了一个文件地址(网站地址),浏览器找到那个地址上的HTML文件,然后读取相应的CSSJavaScript文件,把网页显示出来。更重要的是,你还可以通过浏览器查看这些文件,也就是源代码。我下面讲到的技巧都是基于这一点上的。

本文以Chrome为例,其他浏览器方法大致相同。在浏览器界面按下F12,或是右键点击检查( Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac)),这时就会打开开发者工具(DevTools),如下图所示:

devtool

Chrome开发者工具(devtool)

几个下面示例会用到的标签含义:
ElementsHTML代码(上半部分)和CSS代码(下面的Styles
Resources:网页文件所用到的资源,包括文件、数据库等。
Network:网页的加载情况,包括加载网页的各项请求和下载的资源,以及相应的时间。

标签左边的两个图标:
箭头:按下这个图标后,再在网页上点击一个元素,会查询到相应的HTML代码。(上图红色圈出)
移动设备:按下这个图标进入移动设备显示模式。

 

三、技巧示例

保存图片

大多数时候下,我们使用右键另存为来保存图片。可是有的时候,网站为了保护版权或是其他原因而“遮蔽”了这个功能,比如500px上的照片。

500px

500px上的图片

这时我们可以在开发者工具里用小箭头选择这个图片,找到相应的代码位置,在图片代码上点右键选择“Open link in new tab”,然后就可以下载了。

 

pic code

图片对应的html代码

另外,在ResourcesImages项里,还可以找到网页上加载的所有图片(大部分不是全尺寸原图)。

所有图片

网站用到的所有图片

去除文字复制限制

有些网站限制了右键和选择文字的功能,这主要是通过JS代码来实现的。使用开发者工具,可以很容易的破除这种限制。比如在这个网页上,相关的功能都被屏蔽了。打开开发者工具,选择下方Styles标签旁边的Event listener。可以看到下面有很多被监听的事件,其中contentmenu代表右键菜单,selectstart代表选择文字。

event listener

event listener

把这两个事件下面的document去掉(点击remove),这时页面就恢复正常了。

 

保存网页为pdf

有时候我们想把网页存成pdf打印,但电脑又没有连接打印机,刚好也没有安装相应的插件,这时开发者工具就派上用场了。

打印示例

打印我的博客主页示例

在想打印的页面按下Crtl+P,在预览页面上右键打开检查,找到图中的src属性,复制src的值(比如图中的chrome://print/4/0/print.pdf),然后粘贴在地址栏里打开就可以下载了。

 

保存音频

有时我们想下载某个音频,网站却没有提供下载选项,除了下载插件,也可以使用开发者工具来完成。在播放音乐之前,打开开发者工具中的Network标签,然后刷新一下页面(F5),开始播放音乐,这时可以看到加载的资源里有一条时间线很长的记录,那个一般就是你要找的音频文件。照旧,在那条记录上点击右键,选择“Open link in new tab”,会开始自动下载和播放。

 

音乐下载示例

下载豆瓣FM音乐

对有些使用特殊方法来引用资源的网站无效,目前测试成功的有豆瓣FM、百度音乐、酷我音乐、谷歌翻译录音。

 

修改网页信息

我们可以在本地修改网页上的信息。打开开发者工具,使用查询箭头点击页面上你要修改的字段,比如说百度首页的“百度一下”,定位到右边HTML代码中相应的位置。

修改百度首页的字段

修改百度首页的字段

双击“百度一下”字段,修改它,然后按下Enter键,就变成了下面这样:

效果展示

修改后

再比如,定位到搜索框上面的图片,然后修改图片的src属性,将后面的值修改成google首页的图片地址(如果想要修改为本地图片的话,可以把网页下载下来,不细说了)。按下Enter就成这样了。

效果2

当然,除了和别人开玩笑外太大用处。一刷新就没了。

 

破除网络课离开页面暂停视频限制

一定有人很期待这个功能吧。如果课很好还是认真听一听(比如周海宏的音乐鉴赏)比较好,很烂的话就往下看吧。方法同样很简单,打开开发者工具后,依然是通过小箭头选择工具选择视频元素,定位到代码。然后清除id的内容,再按下回车就成功了。

video example

双击红圈中的id值,删除后回车

原理就是,通过清除id,切断了页面元素(视频)和控制它的代码的联系(JavaScript),具体下一小节。另外要说明一下的是,刷新后网页代码会还原,所以需要再重新清除一下

 

去除叠加窗口

这条还是很有用的,有了前面的基础知识,我们已经知道了网页的基本构成,也学会了如何查看网页的源代码。那么有一天我们想在某网站上下载一个文件,越过层层的障碍,注册了账户,添加了各种信息,结果回到下载页面又让我注册手机号……而且还没有关闭窗口的按钮,太流氓了。不仅如此,还定期显示这个窗口。

窗口示例

某网站上跳出的窗口

我是不会让流氓得逞的。定位到相应的HTML源代码,这些窗口在HTML是一个块(div),通过相应的classid连接到对应的JSCSS代码,我用小箭头工具选择填手机号的小窗口,然后发现整个窗口对应(最外层)的class是PhoneCertificationModal,清除掉,按下enter就会发现窗口不见了(如果无效可以再把id的值也清除掉)。

去掉窗口

去除窗口

其实窗口并没有去除,只是因为没有了JSCSS代码的支持,它就失去了页面效果,变成一堆字扭在一起,跑到页脚去了。

去除样式的效果

失去了css和js支持的孤单的html代码

可是网页这时是一片灰色,遮住了想要点击的内容。这时再用同样的办法,点击小箭头选择这个叠加的窗口,把相应的class清除清空。这时页面就恢复正常了。

和上面的更改网页信息一样,修改了之后只要点击刷新,网页就会恢复到原来的状态,所以不要害怕会玩坏:)

 

去除WordPress插件限制

比如说显示文章概要的插件会限制你readmore字段的字号,假如你想要设置的话就得花钱升级。这时可以在字段里插入HTML代码,自己设置字号大小。

去除插件限制

去除文章概要插件的字号限制

很多论坛的评论就支持少量HTML代码,再早一些,有些网站没有限制评论支持的HTML代码,导致很多搞笑的事情出现,比如说占满整个屏幕的大字……

 

后记

以上这些内容建立在我现有的知识水平上,所以讲得还不够完善,欢迎指正。希望这篇文章能给感兴趣的人作一把小小的梯子(如果帮到了你,请告诉我)。你可以从下面的链接开始新的学习路程。

 

进阶

这些地方会给你提供更多帮助:
Chrome DevTools 文档【https://developers.google.com/web/tools/chrome-devtools/
MDN(Mozilla 开发者网络)【https://developer.mozilla.org/zh-CN/w3school【http://www.w3school.com.cn/index.html

 

文章写作格式规范

因为没有统一的格式,前面的文章看起来有些乱。网上没找到合适的格式规范,主要是些有利于SEO的格式建议,大多都有些迎合读者的意思。所以我打算自己做一个。这篇文章本身也是格式规范的示例。这份规范会持续更新和完善,暂时命名为BWF1.0(Blog Writing Format)吧:)

 

一、文章格式

标题与正文

  1. 标题尽量简单,突出内容要点;15个字符以内。(标题示例见参考链接第三个)
  2. 使用中文全角标点符号。
  3. 二级标题加粗,字号16;有顺序关系的主题前面加中文数字和顿号。
  4. 三级标题加粗,字号14。
  5. 二级标题之间空两行,三级标题之间空一行。
  6. 正文字号12。
  7. 引用独立成段,斜体。

 

内容

  1. 开头第一段为总结性文字。
  2. 一个主题一段。
  3. 使用二级标题和三级标题来分解主题和步骤。
  4. 语言尽量口语化。
  5. 尽量用图表和列表来代替描述。
  6. 尽量安排每段第一句为中心句。
  7. 重要内容使用粗体。
  8. 为相关内容嵌入链接。
  9. 删除多余的词句,尽量保持句子简洁易懂。

 

链接

  1. 有文章标题或关键词的内嵌到标题。
  2. 没有标题的写出完整链接,用<>括住。
  3. 重要的链接。写出完整地址,用<>括住。
  4. 文末给出参考链接,“参考链接”字号14,斜体。
  5. 参考链接表面文章标题或网站名,并附上完整链接。
  6. 文中注释通过“【1】”标注,文末格式同参考链接。

 

图片

  1. 配图是因为内容需要,而不是为了装饰或吸引读者。
  2. 图片不放在文章开头,放在概述文字之后。
  3. 格式使用JPG(体积小,速度快)。
  4. 图片大小不超过300K。
  5. 图片都应该加上合适的ALT属性,配上包含文章关键字的文字说明。
  6. 图片和说明居中显示。
  7. 图片使用缩略图,点击查看大图。
  8. 第三方图片注明出处,链接用“<>”括住。

 

翻译文章

  1. 文章标题前加“<译>”前缀。
  2. 需在文章结尾处注明原作者,原标题,并给出完整链接。

 

 

二、笔记格式

(笔记包括读书笔记,课程笔记等。)

主要项目

  1. 书籍或课程介绍,放入相关链接;
  2. 主要内容总结;
  3. 我的思考和评价;
  4. 摘抄和截图。

 

内容

  1. 摘抄内容加上章节标题或自定标题。
  2. 谈话用引号括住,斜体。
  3. 重点内容用粗体。

 

参考链接:

  1. 月光博客博客写作编辑规范 <http://www.williamlong.info/archives/1775.html>
  2.  The Elements of Style <http://www.crockford.com/wrrrld/style.html>
  3. 7 Wildly Popular Post Formats You Can Use in Your Blogging <http://www.struto.co.uk/blog/7-wildly-popular-blog-formats>