jquery抓取网页内容 我质朴的梦想：个人网站

　　jquery抓取网页内容 我质朴的梦想：个人网站

　　我对个人网站的向往，大概就跟想要拥有一套自己的房子的心情是相通的：既可以随自己折腾安排，还可以接待客人——毕竟搞设计总得整理作品和履历。

　　虽然做网页不是什么很新鲜的事情，但如果想高度自定义，对于我这种既不是计算机专业的、也不是从小就热爱编程的人来说，仍然还是有一道技术的大山横亘在面前。

　　不过从大学时就多多少少有一些写Processing的经验，所以前阵子下决心学一学Web前端的东西，尽自己力所能及的程度实际地动手搭建自己的网站。

　　本文就是一篇关于我从初学状态开始，到做出阶段性成果来的开发过程记录。

　　心路历程与实现思路参半。

　　结尾有过程中参考资料的总结，可按需跳转。

　　后续还要填其他部分的坑，以后完成了再开放访问吧。

　　先放放做出来的东西

　　除了搭网站框架，主要就是做了主页部分的设计。

　　设计的意图很单纯：因为是“开水的主页”，所以想要给网页注入自己的灵魂（注水hhh），作品自然是水里的内容。以此想法为基础，考虑了“水”的感受如何表现，同时也想试着打破一下规矩的网格排列方式，所以做了这样的表现尝试。

　　实现上主要用到了HEXO搭网站框架，然后基于P5.js和Matter.js实现交互效果。

　　第1阶段:搭框架

　　怎样搭出一个网站来？

　　起初，把基础教程过了一遍之后，虽然理解了单个网页的效果是怎样实现的，但我有一个疑问仍然没有被解答：一个网站是由多个互相关联的网页组成的，总不能都一个一个写吧？

　　（WEB开发三剑客的分工）

　　记得一位做前端的朋友跟我说过，他们会用到VUE写框架。但我并没有立刻投入精力去了解学习VUE，因为我猜想专业开发者在工作中用到的东西，可能对我来说有点太牛刀小试了。

　　无非就是个人博客的程度，正想着应该有更精简一点能满足我的需求的做法，B站的算法就给我推了基于HEXO搭建个人博客，并部署到GitHubPage的内容——反正也不用花钱，于是我就抱着好奇心，跟着人家装上了。

　　整个安装和使用过程用的是命令行工具，装好之后就会生成一个默认的博客网站了。

　　（HEXO预览网页效果）

　　创建新文章、生成页面预览、部署到GitHub上等都是要通过在终端敲指令来操作，我还是第一次体验。好在以前也稍稍了解过一点MAC终端常用操作和Git的知识，所以到这里为止，还不算太懵逼。

　　（HEXO创建新文章）

　　很好，借助HEXO就可以简单地解决“未来需要不断地增加新内容”这个需求。

　　那么下一步当然就是搞装修了！

　　满头问号的旅程也随即真正开始。

　　第2阶段：从文件到效果

　　如何控制HEXO的主题风格？

　　首先，不管怎么说先换个干净顺眼的主题吧。

　　然后把内容填一填。

　　(只是把封面放进去，就还挺有样子了)

　　接着便打算研究研究主题文件，看看它是怎么弄出来这些效果的。

　　但当时我的认知程度仅仅是“定性的”：source文件夹里装的是文章内容，themes里装的是主题文件，其他全都不知道。

　　(当时我对HEXO的浅薄认知)

　　我原以为主题就是css的事情而已，然而一打开themes文件夹——小问号你是否有许多朋友。

　　layout 里的文件全是.ejs 格式，这是个什么格式？

　　为什么里面写的好像是HTML的内容，但又被一些不认识的语法格式包裹着？？

　　为什么每一个文件都只有几行内容？？？

　　于是补充知识

　　

　　HEXO的主题模板是怎么写出来的？

　　不知编程世界里是不是都默认大家知道各种东西的

　　HEXO官方文档只写出了文章变量的引用方法。

　　我主要靠跟着某篇文章实操了一遍+在油管上看了个细讲HEXO的教程，才理解了这些ejs文件的作用：ejs是一个模板语言（其实用的都是js语言），用它可以把网页的各个部分写成一个个单独的模块，然后按需引用模块来组合成不同的页面。（例如页头、页脚、内容分开写成三个文件）

　　(HEXO的主题文件夹里，ejs文件的结构关系示意)

　　此外读别人写的主题文件时，高频出现了类似于 col-xs-6 之类长得很像分子链，但意义不明的class表示方法。

　　继续补充知识

　　col-xs-6 这些是什么东西？

　　搜了搜，好家伙，原来这就是网页开发中用来控制内容排版的栅格系统工具！

　　终于出现了亲切的名词，忽然就get到了平面设计中学的网格系统和实际开发的联系。

　　这是一个名为Bootstrap的css框架，相当于别人提前写好了很多css样式，封装起来供开发者使用。

　　它最大的好处在于提高排版的效率，你不需要每次都从0开始写css样式来安排内容的位置了。只要在html里按规则写类名，就可以直接达成效果。这对响应式设计非常有帮助。

　　字母都是有语义的，比如col是列，xs是超小屏，最后的数字表示占多少列。col-xs-6就表示“在超小屏里，这部分内容占6列”。由于容器默认被分成12列，所以占6列相当于从左到右，占了一半的位置。

　　(响应式设计，内容的排版会根据窗口大小改变)

　　了解了这些，就基本搞懂了主题文件和网页效果之间的关系。

　　接着自己动动手实现了一些小需求：

　　说起来简单，实际做起来光是要搞懂要给哪个div标签加背景色，我也是弄了半个上午

　　（论夯实基础的重要性）

　　第3阶段：创意和实现怎样实现我想要的交互？搞明白主题文件和网页效果的关系之后，终于到了可以让创意介入的、让人开心的交互部分！网页的交互就要用上JavaScript，但js基础教程里搞的那些对我好像不太直接有用，我就把注意力转移到了P5.js上。P5.js是js的一个库，写法和Processing很像，可以很方便地“绘制”元素。

　　构想所以要做一个怎样的首页呢？开头也说过，因为是“开水的主页”，所以想要给网页注入灵魂（注水）。作品自然是水里的内容。所以如果能让它们像冰块那样拥有体积，会发生碰撞效果，可能会挺有意思的。

　　（灵魂草图）

　　所以从需求开始考虑，在大方向上，我知道至少需要做到这3件事情：将P5的画布插入到现在的主页里，且不影响原有的导航栏功能。要想让作品们能在P5的画布里被显示和打开，需要读到HTML里的数据（图片、标题、链接等），才能做进一步的操作。

　　要实现有体积碰撞的效果，需要借助物理库。

　　But我从来没写过p5，所以还是要补习一下。

　　稍微补充知识：P5.js的基础

　　教程当然就是去看Daniel Shiffman,看他敲代码真是快乐哈哈。顺便在这里推荐一下他的那个网站，除了P5和Processing，还有关于模拟自然系统的算法、机器学习等专题内容。整合得很好，比油管频道更方便查阅或开启新的学习。

　　()

　　弄懂p5怎么用之后，随便写个“随机Design”效果

　　试试把画板放进网页里，好，可以正常运行。

　　（好简陋hhhh没关系，千里之行始于足下。）如果有朋友也想试试自己用HEXO+P5.js来玩玩看，在这里顺便提醒一下HEXO里引用js文件的方法（引用css也同理）：

　　接着就是要往画板里加入内容了。琢磨：如何在P5的画板里显示出这些作品？思路就是读取HTML文档，然后抓取需要的图片路径，再加载到P5里。我一开始以为这很顺利就能解决，但实操起来发现P5里竟然没有能直接读到HTML元素的src的方法

　　（如果有请告诉我）

　　于是就想到，既然这是是基于js的语言，那我在外面先用jQuery来获取一下数据，再通过全局变量来传入P5应该行得通。

　　

　　试了之后确实可行，开心。于是之后的标题、时间、详情页链接我都是用这个方式来获取的。

　　(用jQuery主要是因为我觉得它的语法比较好读…但调用一个库却只干一件事情感觉挺铺张浪费的)

　　补充新知识：物理库Matter.js的用法。想要让我的图片们能发生自然的物理碰撞效果，得借助一下物理库的力量。Matter.js就是一个js的物理库,它可以在平面的世界里做出自然的物理效果。Daniel Shiffman也有对Matter.js的入门专题，总之就是继续和他学学学。

　　（ matter.js官方*敏*感*词* ）

　　然后结合着实现了这样的效果。

　　不过物体落下来这种方式，显然很不“水”。所以稍微设置了一下重力，让这些块块都能往上漂，营造一种液体里的感觉。

　　定义“如何打开作品详情？”做到这里，就不得不开始考虑这个问题了。因为想要用户在首页可以点击拖拽这些块块随便玩玩，那“单击”就不能作为打开链接的触发指令。所以就想到使用拖拽到某个区域后松开手即打开的方式。顺便，考虑到访客不可能通过那小小的图片就知道每个块是什么内容，至少要把作品标题和时间信息传达出来。初步实现了这样的效果。

　　该有的信息和功能基本都有了，接下来就是增强反馈的表现效果。

　　反馈增强1 · 标题信息特效静止的标题出现和消失都太生硬了。我想要做出那种点击之后，读取数据，最后才变成最终信息的感觉。先另开了新文件里写了一个试试。

　　出来的效果并不复杂，但是编程逻辑上还挺锻炼到我的。(1) 编写标题特效以单个字符为单位写了类，然后以要显示的标题为基础创建实例，储存在数组里。*敏*感*词*分成入场、切换、退场三个状态，并且为了更细腻一点，字符之间的进退场还设定了一些随机的时间差。

　　(2)节约魔法消耗（运算资源）

　　Prototype在这个过程中还另外去补习了js里特有的prototype的概念。因为每个特效字的update和show的过程都是一样的，所以把这些function都写进了这个类的prototype里，就可以让实例们在演算时调用同一个function，从而达到节约运算资源的目的。和Processing里有的“继承”的概念很像，不过以前我都没用过，现学现用了。

　　整合代码因为特效字的代码是先在别的地方写的，所以还要整合到网页里并调用。整合有两种思路：显然第二种方法更为轻巧，节省资源。（实际上起初用了第一种方法，一运行就卡了…照理说就算这样粒子数也没有很多，或许是我还有其他的bug

　　）

　　(3)标题字大小自适应窗口宽度算法本身没啥好特别说的，只是有些细节在这里才留心注意到了。textSize( )表示的是字符的高度，单位是px。textWidth()测量的字符串宽度，是基于最近一次被应用的textSize算出来的。

　　反馈增强2·底部打开提示关于先前写好的这个功能，点击图片，窗口下方会弹出一个“拖拽至此处打开”的提示。

　　这个部分觉得可以做得更灵动一点，想到了既然是“水”的主题，不如就做个水波好了。水波的实现逻辑不难，核心就是用sin函数来绘制要波动的点，然后把这些顶点连成一个封闭图形就好。

　　研究三角函数为了更准确地理解并控制波形，还是单独花了一些时间去复习学习三角函数在编程绘图里的实际应用。果然自己归纳一遍还是很重要，考虑之后写一篇关于三角函数和PerlineNoise的理解（开始挖坑）。

　　优化后的提示栏，更有情绪。提示 “拖拽至此查看详情” 时比较平静淡定，

　　可以“松手打开”时比较活泼，有种雀跃的感觉哈哈。

　　把标题效果和底部提示整合进去之后就基本上也是最后的效果了。

　　反馈增强3·点按后，其他未激活物体缩小或半透明（技能点不足，未解决）图片的缩放是很简单，但没搞懂跟图片绑定的Matter.js的Body的缩放，到底是参照着什么来缩的。图片和Body的边界一直对不上

　　好吧，既然缩放我走不通，那做做图片透明度吧。结果搞透明要用的tint函数一加进去，程序就变得很卡，去查了查，别人还会提前创建一个graphic来装……有点嫌麻烦。

　　最后曲线救国，给了个半透明背景色的蒙版，意思一下它们没有被选中。算了算了，来日方长。

　　反馈增强4·点按后，在背景中显示大图（效果不满意，弃用）试了下给点按之后在大背景中也显示大图，还特地花了些功夫写了充满窗口尺寸和淡出淡入的效果，不过出来的效果感觉视线不知道该放哪里，于是弃用了。就单纯一点吧。

　　其他调试除了视觉效果之外，有些东西是要考虑到浏览器环境的问题。这部分主要做了图片块、物理边界、波浪宽度等自适应浏览器窗口大小。以及mouseReleased(松开鼠标)事件在手机端似乎不被识别，所以还要另外补写touch事件。

　　快乐结语主页开发的过程基本上就是这样了。新手如我，想要实现一个需求，就得去学一个新的东西，天天和问号Bug做朋友。要做成一件事情就是得不停地寻找答案。很需要耐心，解决的时候也真的很快乐。非专业或许在知识储备上有很多漏洞，但正因为这不是自己的专业，也没有人要求自己这么干，由兴趣驱动的钻研就很快乐了。

　　参考资料：

　　【油管web前端入门教程-优质熟肉】LearnCode.academy,翻译搬运：鱼C-小甲鱼,

　　【HEXO搭建教程】CodeSheep,*敏*感*词*教你从0开始搭建自己的个人博客,

　　【油管优质HEXO教程】Mike Dane, Hexo - Static Site Generator Tutorial,【HEXO官方文档】【Bootstrap介绍】全局css样式 ,

　　【快乐学习创意编程TheCodingTrain】Daniel Shiffman,P5.js专题教程,Daniel Shiffman,Matter.js专题教程, Daniel Shiffman,简单正弦波运动，

　　真的有人看到了这里吗，太让我感动了。才知道2018年后注册的公众号不带留言功能了

　　如果你乐意给我按个赞，或是通过别的方式给我反馈，我会很开心~这也会成为我继续更新的动力之一。

　　感谢阅读，谢谢！