古客のBlog

人生匆匆，来者是客

python爬虫入门一

发表于 2020-02-09 更新于 2021-01-14 分类于爬虫

概述

第一步，学会自己安装python、库和你的编辑器并设置好它

我们学习python的最终目的是要用它来达到我们的目的，它本身是作为工具的存在，我们一定要掌握自己的工具的各类设置，比如安装、环境配置、库的安装，编辑器的设置等等。

当然也可以用比如Anaconda来管理你的版本和各种库！

豆瓣Python大牛写的爬虫学习路线图，分享给大家！

第二步、学会一些基础的模块

我们有目标网址，怎么写爬虫呢？这个时候，建议大家可以找一些简单爬虫的视频或者文章，跟着老师一起写代码，先感受一下爬虫是怎么一步一步的在你的手里完成的！

当然这里不是说你照着老师的代码敲一遍就算学会了，个人认为，这里你最少要做三步：

l 所有你不知道的库、函数、语法都需要记录下来，自行学习掌握，并在以后的爬虫中继续这个步骤，很重要

l 要学会老师的思路。比如基本所有的教程并不是拿到url就开始写代码了，都有自己的分析过程，而思路在爬虫中占到很大一部分的比重，有了思路，写代码就不难了

l 先模仿在独立完成。先跟着老师做一些简单的爬虫，然后思路和代码都掌握以后，就可以尝试自行查找类似的项目去独立完成一个爬虫了！

l 推荐基础模块：re,requests,time等，自定义函数、类等语法以及报头、cookie的写入等等也需要了解

到这里，你应该已经掌握了python的基础模块并写出了你的简单爬虫，那么可以进行下一个步骤的学习了

豆瓣Python大牛写的爬虫学习路线图，分享给大家！

第三步、学习各种表达式，并精通1-2种！

学会了如何爬取网页内容之后，你还需要学会进行信息的提取。事实上，信息的提取你可以通过表达式进行实现，同样，有很多表达式可以供你选择使用，常见的有正则表达式、XPath表达式、BeautifulSoup（bs4）等，这些表达式你没有必要都精通，同样，精通1-2个，其他的掌握即可，在此建议精通掌握正则表达式以及XPath表达式，其他的了解掌握即可。正则表达式可以处理的数据的范围比较大，简言之，就是能力比较强，XPath只能处理XML格式的数据，有些形式的数据不能处理，但XPath处理数据会比较快,而且以后你学习爬虫框架也会用到xpath。

第四步、深入掌握抓包并分析提取需要的内容

在我们练习的过程中，会经常碰到有反爬措施的网站，而这些网站最常使用的措施就是隐藏数据，那么这时我们就要学会使用抓包分析，推荐大家一定要精通浏览器的开发者工具以及fiddler抓包工具，当然其他抓包工具或者抓包插件也可以，没有特别要求。

第五步、精通爬虫框架

当你学习到这一步的时候，你已经入门了。

这个时候，你可能需要深入掌握一款爬虫框架，因为采用框架开发爬虫项目，效率会更加高，并且项目也会更加完善。

同样，你可以有很多爬虫框架进行选择，比如Scrapy、pySpider等等，一样的，你没必要每一种框架都精通，只需要精通一种框架即可，其他框架都是大同小异的，在此推荐掌握Scrapy框架.

第六步、反爬的学习和精通

常见的反爬策略主要有：

IP限制

UA限制

Cookie限制

资源随机化存储

动态加载技术

……

对应的反爬处理手段主要有：

IP代理池技术

用户代理池技术

Cookie池保存与处理

自动触发技术

抓包分析技术+自动触发技术

反爬以及反爬处理都有一些基本的套路，万变不离其宗，这些需要我们根据实际情况去选择使用

第七步、seleium+phantomjs(firefox/chorm)等工具的使用

有一些站点，通过常规的爬虫很难去进行爬取，这个时候，你需要借助一些工具模块进行，比如PhantomJS、Selenium等，所以，你还需要掌握PhantomJS、Selenium等工具的常规使用方法。

第八步、分布式爬虫技术的掌握

如果你已经学习或者研究到到了这里，那么恭喜你，相信现在你爬任何网站都已经不是问题了，反爬对你来说也只是一道形同虚设的墙而已了。

但是，如果要爬取的资源非常非常多，靠一个单机爬虫去跑，仍然无法达到你的目的，因为太慢了。

所以，这个时候，你还应当掌握一种技术，就是分布式爬虫技术，分布式爬虫的架构手段有很多，你可以依据真实的服务器集群进行，也可以依据虚拟化的多台服务器进行，你可以采用Scrapy+redis架构手段，将爬虫任务部署到多台服务器中就OK。

豆瓣Python大牛写的爬虫学习路线图，分享给大家！

总结

有人问：使用windows系统还是linux系统学习？其实，没关系的，由于Python的可移植性非常好，所以你在不同的平台中运行一个爬虫，代码基本上不用进行什么修改，只需要学会部署到Linux中即可。一般建议学习的时候使用Windows系统进行就行，之后部署到Linux系统上就可以了。

基本库的使用

一般爬虫第一个学的库是urllib

urllib 是一个收集了多个用到 URL 的模块的包：

urllib.request 打开和读取 URL
urllib.error 包含 urllib.request 抛出的异常
urllib.parse 用于解析 URL
urllib.robotparser 用于解析 robots.txt 文件

附录

常用模块及功能

选择模块时尽量选择还在更新的模块，一般情况下，这样能避免不少bug，而且能找到更多的学习资料来解决问题。

Python网络通用模块：

urllib -网络库(stdlib)。
requests -网络库。
grab – 网络库（基于pycurl）。
pycurl – 网络库（绑定libcurl）。
urllib3 – Python HTTP库，安全连接池、支持文件post、可用性高。
httplib2 – 网络库。
RoboBrowser – 一个简单的、极具Python风格的Python库，无需独立的浏览器即可浏览网页。
MechanicalSoup -一个与网站自动交互Python库。
mechanize -有状态、可编程的Web浏览库。
socket – 底层网络接口(stdlib)。
Unirest for Python – Unirest是一套可用于多种语言的轻量级的HTTP库。
hyper – Python的HTTP/2客户端。
PySocks – SocksiPy更新并积极维护的版本，包括错误修复和一些其他的特征。作为socket模块的直接替换。

Python网络异步模块：

treq – 类似于requests的API（基于twisted）。
aiohttp – asyncio的HTTP客户端/服务器(PEP-3156)。

Python网络爬虫框架：

grab – 网络爬虫框架（基于pycurl/multicur）。
scrapy – 网络爬虫框架（基于twisted），不支持Python3。
pyspider – 一个强大的爬虫系统。
cola – 一个分布式爬虫框架。
portia – 基于Scrapy的可视化爬虫。
restkit – Python的HTTP资源工具包。它可以让你轻松地访问HTTP资源，并围绕它建立的对象。
demiurge – 基于PyQuery的爬虫微框架。

Python HTML/XML解析器：

lxml – C语言编写高效HTML/ XML处理库。支持XPath。
cssselect – 解析DOM树和CSS选择器。
pyquery – 解析DOM树和jQuery选择器。
BeautifulSoup – 低效HTML/ XML处理库，纯Python实现。
html5lib – 根据WHATWG规范生成HTML/ XML文档的DOM。该规范被用在现在所有的浏览器上。
feedparser – 解析RSS/ATOM feeds。
MarkupSafe – 为XML/HTML/XHTML提供了安全转义的字符串。
xmltodict – 一个可以让你在处理XML时感觉像在处理JSON一样的Python模块。
xhtml2pdf – 将HTML/CSS转换为PDF。
untangle – 轻松实现将XML文件转换为Python对象。
Bleach – 清理HTML（需要html5lib）。
sanitize – 为混乱的数据世界带来清明。

Python 文本处理：

用于解析和操作简单文本的库。

1.通用

difflib – （Python标准库）帮助进行差异化比较。
Levenshtein – 快速计算Levenshtein距离和字符串相似度。
fuzzywuzzy – 模糊字符串匹配。
esmre – 正则表达式加速器。
ftfy – 自动整理Unicode文本，减少碎片化。

2.转换

unidecode – 将Unicode文本转为ASCII。

3.字符编码

uniout – 打印可读字符，而不是被转义的字符串。
chardet – 兼容 Python的2/3的字符编码器。
xpinyin – 一个将中国汉字转为拼音的库。
pangu.py – 格式化文本中CJK和字母数字的间距。

4.Slug化

awesome-slugify – 一个可以保留unicode的Python slugify库。
python-slugify – 一个可以将Unicode转为ASCII的Python slugify库。
unicode-slugify – 一个可以将生成Unicode slugs的工具。
pytils – 处理俄语字符串的简单工具（包括pytils.translit.slugify）。

5.通用解析器

PLY – lex和yacc解析工具的Python实现。
pyparsing – 一个通用框架的生成语法分析器。

6.人的名字

python-nameparser -解析人的名字的组件。

7.电话号码

phonenumbers -解析，格式化，存储和验证国际电话号码。

8.用户代理字符串

python-user-agents – 浏览器用户代理的解析器。
HTTP Agent Parser – Python的HTTP代理分析器。

Python 特定格式文件处理：

解析和处理特定文本格式的库。

1.通用

tablib – 一个把数据导出为XLS、CSV、JSON、YAML等格式的模块。
textract – 从各种文件中提取文本，比如 Word、PowerPoint、PDF等。
messytables – 解析混乱的表格数据的工具。
rows – 一个常用数据接口，支持的格式很多（目前支持CSV，HTML，XLS，TXT – 将来还会提供更多！）。

2.Office

python-docx – 读取，查询和修改的Microsoft Word2007/2008的docx文件。
xlwt / xlrd – 从Excel文件读取写入数据和格式信息。
XlsxWriter – 一个创建Excel.xlsx文件的Python模块。
xlwings – 一个BSD许可的库，可以很容易地在Excel中调用Python，反之亦然。
openpyxl – 一个用于读取和写入的Excel2010 XLSX/ XLSM/ xltx/ XLTM文件的库。
Marmir – 提取Python数据结构并将其转换为电子表格。

3.PDF

PDFMiner – 一个从PDF文档中提取信息的工具。
PyPDF2 – 一个能够分割、合并和转换PDF页面的库。
ReportLab – 允许快速创建丰富的PDF文档。
pdftables – 直接从PDF文件中提取表格。

4.Markdown

Python-Markdown – 一个用Python实现的John Gruber的Markdown。
Mistune – 速度最快，功能全面的Markdown纯Python解析器。
markdown2 – 一个完全用Python实现的快速的Markdown。

5.YAML

PyYAML – 一个Python的YAML解析器。

6.CSS

cssutils – 一个Python的CSS库。

7.ATOM/RSS

feedparser – 通用的feed解析器。

8.SQL

sqlparse – 一个非验证的SQL语句分析器。

9.HTTP

http-parser – C语言实现的HTTP请求/响应消息解析器。

10.微格式

opengraph – 一个用来解析Open Graph协议标签的Python模块。

11.可移植的执行体

pefile – 一个多平台的用于解析和处理可移植执行体（即PE）文件的模块。

12.PSD

psd-tools – 将Adobe Photoshop PSD（即PE）文件读取到Python数据结构。

Python 自然语言处理：

处理人类语言问题的库。

NLTK -编写Python程序来处理人类语言数据的最好平台。
Pattern – Python的网络挖掘模块。他有自然语言处理工具，机器学习以及其它。
TextBlob – 为深入自然语言处理任务提供了一致的API。是基于NLTK以及Pattern的巨人之肩上发展的。
jieba – 中文分词工具。
SnowNLP – 中文文本处理库。
loso – 另一个中文分词库。
genius – 基于条件随机域的中文分词。
langid.py – 独立的语言识别系统。
Korean – 一个韩文形态库。
pymorphy2 – 俄语形态分析器（词性标注+词形变化引擎）。
PyPLN – 用Python编写的分布式自然语言处理通道。这个项目的目标是创建一种简单的方法使用NLTK通过网络接口处理大语言库。

Python 浏览器自动化处理：

selenium – 自动化真正的浏览器（Chrome浏览器，火狐浏览器，Opera浏览器，IE浏览器）。
Ghost.py – 对PyQt的webkit的封装（需要PyQT）。
Spynner – 对PyQt的webkit的封装（需要PyQT）。
Splinter – 通用API浏览器模拟器（selenium web驱动，Django客户端，Zope）。

Python 多线程处理：

threading – Python标准库的线程运行。对于I/O密集型任务很有效。对于CPU绑定的任务没用，因为python GIL。
multiprocessing – 标准的Python库运行多进程。
celery – 基于分布式消息传递的异步任务队列/作业队列。
concurrent-futures – concurrent-futures 模块为调用异步执行提供了一个高层次的接口。

Python 异步处理：

异步网络编程库

asyncio – （在Python 3.4 +版本以上的 Python标准库）异步I/O，时间循环，协同程序和任务。
Twisted – 基于事件驱动的网络引擎框架。
Tornado – 一个网络框架和异步网络库。
pulsar – Python事件驱动的并发框架。
diesel – Python的基于绿色事件的I/O框架。
gevent – 一个使用greenlet 的基于协程的Python网络库。
eventlet – 有WSGI支持的异步框架。
Tomorrow – 异步代码的奇妙的修饰语法。

Python 队列相关：

celery – 基于分布式消息传递的异步任务队列/作业队列。
huey – 小型多线程任务队列。
mrq – Mr. Queue – 使用redis & Gevent 的Python分布式工作任务队列。
RQ – 基于Redis的轻量级任务队列管理器。
simpleq – 一个简单的，可无限扩展，基于Amazon SQS的队列。
python-gearman – Gearman的Python API。

Python 云计算相关：

picloud – 云端执行Python代码。
dominoup.com – 云端执行R，Python和matlab代码。

Python 电子邮件相关：

电子邮件解析库

flanker – 电子邮件地址和Mime解析库。
Talon – Mailgun库用于提取消息的报价和签名。

Python 网址和网络地址操作相关：

解析/修改网址和网络地址库。

1.URL

furl – 一个小的Python库，使得操纵URL简单化。
purl – 一个简单的不可改变的URL以及一个干净的用于调试和操作的API。
urllib.parse – 用于打破统一资源定位器（URL）的字符串在组件（寻址方案，网络位置，路径等）之间的隔断，为了结合组件到一个URL字符串，并将“相对URL”转化为一个绝对URL，称之为“基本URL”。
tldextract – 从URL的注册域和子域中准确分离TLD，使用公共后缀列表。

2.网络地址

netaddr – 用于显示和操纵网络地址的Python库。

Python 网页内容提取相关：

提取网页内容的库。

HTML页面的文本和元数据
newspaper – 用Python进行新闻提取、文章提取和内容策展。
html2text – 将HTML转为Markdown格式文本。
python-goose – HTML内容/文章提取器。
lassie – 人性化的网页内容检索工具
micawber – 一个从网址中提取丰富内容的小库。
sumy -一个自动汇总文本文件和HTML网页的模块
Haul – 一个可扩展的图像爬虫。
python-readability – arc90 readability工具的快速Python接口。
scrapely – 从HTML网页中提取结构化数据的库。给出了一些Web页面和数据提取的示例，scrapely为所有类似的网页构建一个分析器。

Python 其它相关：

视频

youtube-dl – 一个从YouTube下载视频的小命令行程序。
you-get – Python3的YouTube、优酷/ Niconico视频下载器。

维基

WikiTeam – 下载和保存wikis的工具。

WebSocket

Crossbar – 开源的应用消息传递路由器（Python实现的用于Autobahn的WebSocket和WAMP）。
AutobahnPython – 提供了WebSocket协议和WAMP协议的Python实现并且开源。
WebSocket-for-Python – Python 2和3以及PyPy的WebSocket客户端和服务器库。

DNS解析

dnsyo – 在全球超过1500个的DNS服务器上检查你的DNS。
pycares – c-ares的接口。c-ares是进行DNS请求和异步名称决议的C语言库。

计算机视觉

OpenCV – 开源计算机视觉库。
SimpleCV – 用于照相机、图像处理、特征提取、格式转换的简介，可读性强的接口（基于OpenCV）。
mahotas – 快速计算机图像处理算法（完全使用 C++ 实现），完全基于 numpy 的数组作为它的数据类型。

代理服务器

shadowsocks – 一个快速隧道代理，可帮你穿透防火墙（支持TCP和UDP，TFO，多用户和平滑重启，目的IP黑名单）。
tproxy – tproxy是一个简单的TCP路由代理（第7层），基于Gevent，用Python进行配置。

其他Python工具列表

awesome-python
pycrumbs
python-github-projects
python_reference
pythonidae

Python画图神器之--pyecharts

发表于 2020-02-06 更新于 2020-02-09 分类于 Python

嗯，直接上代码再说明！|ू･ω･` )

# 导入相关包
import pandas as pd
from pyecharts.charts import *
from pyecharts import options as opts
from pyecharts.globals import *
from pyecharts.faker import *

# 读取数据
data=pd.read_csv('D:/机器学习/air_quality.csv',sep=',')
fun1=lambda x:x.split('-')[0]
fun2=lambda x:x.split('-')[1]
data['year']=data['record_date'].apply(fun1)
data['month']=data['record_date'].apply(fun2)

# 成都空气质量的玫瑰花饼图
df1=data.groupby(['city_name','quality_level'], as_index=False).count()
df1=df1[df1['city_name']=='成都']
x = list(df1['quality_level'])
y = list(df1['so2_val'])

pie = Pie(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
pie.add("",[list(z) for z in zip(x, y)],radius=["50%", "75%"],center=["45%", "60%"],rosetype="radius",)
# pie.set_colors(["blue", "green", "yellow", "red", "pink", "orange"])
pie.set_series_opts(label_opts=opts.LabelOpts(is_show=True))
pie.set_global_opts(title_opts=opts.TitleOpts(title="成都空气质量玫瑰花饼图",pos_left="32%"),
                    legend_opts=opts.LegendOpts(orient="vertical", pos_top="15%", pos_left="5%"))
pie.render_notebook()
# pie.render(data_path+'成都空气质量饼图.html')

pyecharts官方文档

挺好看的吧！Fight!!(ｏ^-^)尸~’’☆ミ☆ミ

三大深度学习框架的简单了解

发表于 2020-02-06 更新于 2020-02-09 分类于深度学习

简要记录一下我感兴趣且也比较流行的三大深度学习框架，分别是：Pytroch，tensorflow，paddle（百度飞桨）。

Pytorch

官方：PyTorch是是torch的python版本，是由Facebook开源的神经网络框架，专门针对 GPU 加速的深度神经网络（DNN）编程，是使用GPU和CPU优化的深度学习张量库。

（再介绍一下Torch：一个经典的对多维矩阵数据进行操作的张量（tensor ）库）

那么什么是张量呢？

张量由一组成形为任意数量的数组的原始值组成。张量的等级是其维数。

简单的理解就是：矩阵的升级版，而矩阵就是向量的升级版。那么是干什么用的呢？

举例：规模最小的张量是0阶张量，即标量，也就是一个数。

当我们把一些数有序的排列起来，就形成了1阶张量，也就是一个向量

如果我们继续把一组向量有序的排列起来，就形成了2阶张量，也就是一个矩阵

把矩阵摞起来，就是3阶张量，我们可以称为一个立方体，具有3个颜色通道的彩色图片就是一个这样的立方体

把立方体摞起来，好吧这次我们真的没有给它起别名了，就叫4阶张量了，不要去试图想像4阶张量是什么样子，它就是个数学上的概念。

那张量是干什么用的呢？

用来表示数据的，这是我学习深度学习时感觉比较刷新三观的事，所有的数据竟然都可以用数字来表示，不管是图片，文字，还是视频，不过他背后的原理我还不清楚。张量的一部分数字就可以被称作特征，这概念以后经常用得到！

示例：

import torch 
x = torch.ones(2,3,4) （两个三行四列的矩阵）
print(x)

tensor([[[1., 1., 1., 1.],
        [1., 1., 1., 1.],
        [1., 1., 1., 1.]],

       [[1., 1., 1., 1.],
        [1., 1., 1., 1.],
        [1., 1., 1., 1.]]])

三大特征：

1.简洁

PyTorch 的设计遵循tensor→variable(autograd)→nn.Module 三个由低到高的抽象层次，分别代表高维数组（张量）、自动求导（变量）和神经网络（层/模块）

2.易用

PyTorch的面向对象的接口设计来源于Torch，做调用API时比较方便！

3.动态

pytorch的计算图是动态的，可以根据计算需要实时改变计算图。（这是与Tensorflow最大的区别）

看个简单的代码！

# -*- coding: utf-8 -*-
#demo.py
import torch
import torch.nn.functional as F  # 主要实现激活函数
import matplotlib.pyplot as plt  # 绘图的工具
from torch.autograd import Variable #
# 生成伪数据
x = torch.unsqueeze(torch.linspace(-1, 1, 100), dim=1)
y = x.pow(3) + 0.2*torch.rand(x.size())    #y=x³+b

# 变为Variable
x, y = Variable(x), Variable(y)

# 绘制数据图像
plt.scatter(x.data.numpy(), y.data.numpy())
plt.show()

Variable：在torch中的Variable就是一个存放会变化的值的地理位置，里面的值会不断变化，就是在计算图中的坐标。（torch是用tensor计算的，tensor里面的参数都是variable的形式）

其中torch.linspace是为了生成连续间断的数据，第一个参数表示起点，第二个参数表示终点，第三个参数表示将这个区间分成平均几份，即生成几个数据。因为torch只能处理二维的数据，所以我们用torch.unsqueeze给伪数据添加一个维度，dim表示添加在第几维。torch.rand返回的是[0,1)之间的均匀分布。

生成：

Tensorflow

TensorFlow 是一个开源的、基于 Python 的机器学习框架，它由 Google 开发，并在图形分类、音频处理、推荐系统和自然语言处理等场景下有着丰富的应用，是目前最热门的机器学习框架。

（深度学习库能够自动求导、开源、支持多种 CPU/GPU、拥有预训练模型，并支持常用的NN架构，如递归神经网络（RNN）、卷积神经网络（CNN）和深度置信网络（DBN）。）请记住缩写

特点：

支持所有流行语言，如 Python、C++、Java、R和Go。
可以在多种平台上工作，甚至是移动平台和分布式平台。
它受到所有云服务（AWS、Google和Azure）的支持。
Keras——高级神经网络 API，已经与 TensorFlow 整合。
与 Torch/Theano 比较，TensorFlow 拥有更好的计算图表可视化。
允许模型部署到工业生产中，并且容易使用。
有非常好的社区支持。
TensorFlow 不仅仅是一个软件库，它是一套包括 TensorFlow，TensorBoard 和 TensorServing 的软件。

看个简单的代码！
1. 导入tensorflow，这将导入 TensorFlow 库，并允许使用其精彩的功能：
```
import tensorflow as if
```
2. 由于要打印的信息是一个常量字符串，因此使用 tf.constant：
```
message = tf.constant('Welcome to the exciting world of Deep Neural Networks!')
```
3. 为了执行计算图，利用 with 语句定义 Session，并使用 run 来运行：
```
with tf.Session() as sess:
  print(sess.run(message).decode())
```
  4.最后是在会话中打印的信息：
```
Welcome to the exciting world of Deep Neural Networks!
```
  其它输出的信息可以先不管。
  
  比较
  PyTorch相比TensorFlow，其最大的优点是建立的神经网络是动态的，相比静态的TensorFlow，它能更加有效地去处理一些问题，比如RNN变化时间长度的输出，TensorFlow相比PyTorch的有点在于分布式训练上。

Paddle（百度飞桨）

这个深度学习框架大体和上面两个差不多，但是这个是我目前正在认真学习的框架，原因无他，因为他的文档是中文的（可怜我是个英语渣渣），还有就是学习资源多且免费，非常适合学习。

详见请戳：

爬虫实战之豆瓣电影

发表于 2020-02-03 更新于 2020-02-04

所需包：bs4，openpyxl

上代码：

def getData(baseurl):
    findLink=re.compile(r'<a href="(.*?)">')#找到影片详情链接
    findImgSrc=re.compile(r'<img.*src="(.*?)"',re.S)#找到影片图片
    findTitle=re.compile(r'<span class="title">(.*)</span>')#找到片名
    #找到评分
    findRating=re.compile(r'<span class="rating_num" property="v:average">(.*)</span>')
    #找到评价人数
    findJudge=re.compile(r'<span>(\d*)人评价</span>')
    #找到概况
    findInq=re.compile(r'<span class="inq">(.*)</span>')
    #找到影片相关内容：导演，主演，年份，地区，类别
    findBd=re.compile(r'<p class="">(.*?)</p>',re.S)
    #去掉无关内容
    remove=re.compile(r'                            |\n|</br>|\.*')
    datalist=[]

for i in range(0,10):
    url=baseurl+str(i*25)
    html=askURL(url)
    soup = BeautifulSoup(html, "html.parser")
    for item in soup.find_all('div',class_='item'):#找到每一个影片项
        data=[]
        item=str(item)#转换成字符串
        # 影片详情链接
        link=re.findall(findLink,item)[0]
        data.append(link)#添加详情链接  
        imgSrc=re.findall(findImgSrc,item)[0]
        data.append(imgSrc)#添加图片链接
        titles=re.findall(findTitle,item)
        #片名可能只有一个中文名，没有外国名
        if(len(titles)==2):
            ctitle=titles[0]
            data.append(ctitle)#添加中文片名
            otitle=titles[1].replace("/","")#去掉无关符号
            data.append(otitle)#添加外国片名
        else:
            data.append(titles[0])#添加中文片名
            data.append(' ')#留空

        rating=re.findall(findRating,item)[0]
        data.append(rating)#添加评分
        judgeNum=re.findall(findJudge,item)[0]
        data.append(judgeNum)#添加评论人数
        inq=re.findall(findInq,item)
        
        #可能没有概况
        if len(inq)!=0:
            inq=inq[0].replace("。","")#去掉句号
            data.append(inq)#添加概况
        else:
            data.append(' ')#留空
        bd=re.findall(findBd,item)[0]
        bd=re.sub(remove,"",bd)
        bd=re.sub('<br(\s+)?\/?>(\s+)?'," ",bd) #去掉<br >
        bd=re.sub('/', " ",bd)#替换/
        data.append(bd.strip())
        datalist.append(data)
        
time.sleep(5)
return datalist

def saveData(datalist,savepath):
book=openpyxl.Workbook()
sheet = book.create_sheet(“豆瓣电影Top250”)
#sheet=book.add_sheet(‘豆瓣电影Top250’,cell_overwrite_ok=True)
col=(‘电影详情链接’,’图片链接’,’影片中文名’,’影片外国名’, ‘评分’,’评价数’,’概况’,’相关信息’)

sheet.append(col)  #添加列头

for i in range(0,250):
data=datalist[i]
for j in range(0,8):
sheet.cell(row = (i+2),column = (j+1),value = data[j])

#openpyxl中的单元格计数从1开始, 加上第一行是列头, 要多跳一个
#openpyxl中的计数和Excel内的计数方式一致, 但和常规编程从0开始的方式相左

book.save(savepath) #保存

聊天机器人学习笔记(一)

发表于 2020-01-31 更新于 2020-02-02

NLTK

text*都是一个一个的书籍节点，直接输入text1会输出书籍标题

搜索文本

text1.concordance(“former”)

搜索相关词

text1.similar("ship")

这个倒是挺特别的

查看某个词在文章里出现的位置：

text4.dispersion_plot([“citizens”, “democracy”, “freedom”, “duties”, “America”])

词统计

len(text1)：返回总字数

set(text1)：返回文本的所有词集合

len(set(text4))：返回文本总词数

text4.count(“is”)：返回“is”这个词出现的总次数

FreqDist(text1)：统计文章的词频并按从大到小排序存到一个列表里

fdist1 = FreqDist(text1);fdist1.plot(50, cumulative=True)：统计词频，并输出累计图像

NLTK的语料库：

from nltk.corpus import webtext：网络文本语料库，网络和聊天文本

from nltk.corpus import brown：布朗语料库，按照文本分类好的500个不同来源的文本

from nltk.corpus import reuters：路透社语料库，1万多个新闻文档

from nltk.corpus import inaugural：就职演说语料库，55个总统的演说

组织结构：散养式（孤立的多篇文章）、分类式（按照类别组织，相互之间没有交集）、交叉式（一篇文章可能属于多个类）、渐变式（语法随着时间发生变化）

语料库的通用接口

fileids()：返回语料库中的文件

categories()：返回语料库中的分类

raw()：返回语料库的原始内容

words()：返回语料库中的词汇

sents()：返回语料库句子

abspath()：指定文件在磁盘上的位置

open()：打开语料库的文件流

加载自己的语料库

收集自己的语料文件（文本文件）到某路径下（比如/tmp)，然后执行：

>>> from nltk.corpus import PlaintextCorpusReader
>>> corpus_root = '/tmp'
>>> wordlists = PlaintextCorpusReader(corpus_root, '.*')
>>> wordlists.fileids()

就可以列出自己语料库的各个文件了，也可以使用如wordlists.sents(‘a.txt’)和wordlists.words(‘a.txt’)等方法来获取句子和词信息

教程链接

微信机器人搭建笔记

发表于 2020-01-31 更新于 2020-02-02

创建一个 Chat Bot

from chatterbot import ChatBot
from chatterbot.trainers import ListTrainer
chatbot = ChatBot("my chat")
trainer = ListTrainer(chatbot)

中文聊天语料

注：需要将仓库克隆下来，main.py在那里，且目录与他描述的位置不同，看下报错或源码即可。

载入语料

with open('xiaohuangji.tsv', encoding='utf-8') as f:
  data = f.read().replace('\t', '\n')
print(data[:100])

训练

trainer.train(data)

最后，等待训练完成之后，我们再把生成的 db.sqlite3 文件下载到本地。

注：文件目录需放置正确，同一级即可

微信公众号号聊天机器人，欢迎星标，欢迎提交pr，其中的一些原理其实我也不是很懂，所以会用就拿去用吧！不会的话，那就另寻高明！

后文：踩坑记录

chatterbot，chatterbot-corpus使用pip安装时会出现依赖包Pyyaml所需版本不兼容的情况，这时候我真的想吐槽一下，明明是两个相互配合使用的，竟然连兼容性都有些不匹配。在issue发现了问题的解决办法，但是不一定适用于所有人。

pipenv install git+https://github.com/gunthercox/chatterbot-corpus.git#egg=chatterbot-corpus

从源码进行安装

顺便记一下pipenv的简单使用方法:

shell 将在激活virtualenv的情况下生成一个shell。
run将从virtualenv运行给定命令，并转发任何参数（例如$ pipenv run python）。
check 声称当前环境已满足PEP 508要求。
graph 将打印出所有已安装依赖项的漂亮图形。

github 中文说明

前端资源大全

发表于 2020-01-30 更新于 2020-12-25 分类于资源

动画库

1.Animate.css

说明：一个简单易用的跨浏览器CSS动画库。

GitHub主页： https://github.com/daneden/animate.css

2.CSShake

说明：用CSS实现各种颠颤动画效果DOM！

GitHub主页： https://github.com/elrumordelaluz/csshake

3.Hover.css

说明：将鼠标Hover效果快速应用在你的网页元素或创意设计上。

GitHub主页：https://github.com/IanLunn/Hover

4.Velocity.js

说明：帮你加速JavaScript动画。

GitHub主页：https://github.com/julianshapiro/velocity

5.DynCSS

说明：用动态CSS来打造你的网页。

GitHub主页：[https://github.com/vzaccaria/DynCSS

6.Magic Animations

说明：可创造CSS3动画特效。

GitHub主页：[https://github.com/miniMAC/magic

7.Bounce.js

说明：即时创造漂亮的CSS3动画。

GitHub主页： https://github.com/tictail/bounce.js

前端框架和类库

1.lodash.js

简介：具有一致接口、模块化、高性能等特性的 JavaScript 工具库

GitHub主页：[https://github.com/lodash/lodash/

2.Underscore.js

简介：JavaScript 工具库，它提供了一整套函数式编程的实用功能，但是没有扩展任何 JavaScript 内置对象。他解决了这个问题：“如果我面对一个空白的 HTML 页面，并希望立即开始工作，我需要什么？” 他弥补了 jQuery 没有实现的功能，同时又是 Backbone 必不可少的部分。

3.AngularJS

简介：AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。

GitHub主页：[https://github.com/angular/angular.js

4.React

简介：React 是一个用于构建用户界面的 JAVASCRIPT 库。主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

GitHub主页：[https://github.com/facebook/react

5.Vue.js

简介：Vue.js是一个用于构建用户界面的轻量级渐进框架。它提供了一个类似React的虚拟DOM驱动视图层，可以与其它类库集成，用于构建强大的单页面应用。该框架是由之前在AngularJS工作过的Evan You创建的，他提取了AngularJS中自己喜欢的部分。Vue.js使用HTML模板语法将DOM绑定到实例数据。Model是在数据改变时更新view的纯JavaScript对象。

GitHub主页：[https://github.com/vuejs/vue

官方地址：[https://cn.vuejs.org/

6.Backbone.js

简介：Backbone.js是提供服务器端框架中常见的MVC结构的最早客户端选项之一。它唯一的依赖是Underscore.js。Backbone.js声称是一个类库，因为它可以与其它项目集成，但是我觉得大多数开发人员都认为它是一个框架。

GitHub主页：[https://github.com/jashkenas/backbone/

7.Ember.js

简介：Ember.js是基于Model-View-ViewModel（MVVM）模式的框架之一。它在单个包中实现模板化、数据绑定和类库。

GitHub主页：[https://github.com/emberjs/ember.js

前端工具

1.Gulp.js

简介：虽然Gulp不是第一个任务执行工具，它却很快成为了最受欢迎的。Gulp使用易于阅读的JavaScript代码，将源文件加载到流中，并在将数据输出到构建文件夹之前，通过各种插件管理数据。在任何其它选项之前检查Gulp.js是简单、快速和有趣的。

GitHub主页：[https://github.com/gulpjs/gulp

2.NPM

简介：npm是Node.js包管理器，但其脚本工具可用于运行通用任务。对于具有少量依赖关系的简单项目来说，这是一个很好的选择。然而，更复杂的任务可能会变得不太适用。

GitHub主页：[https://github.com/npm/npm

简介：Grunt是第一批被大规模采用的JavaScript任务执行工具之一，但其速度和复杂的JSON配置却导致了Gulp的兴起。现在这些问题已经得到了解决，Grunt仍然是一个受欢迎的选择。

GitHub主页：[https://github.com/gruntjs/grunt

4.WebPack

简介：Webpack支持所有流行的模块选项，并已成为React开发的代名词。虽然Webpack声称是一个模块捆绑程序，但是已经可以用作通用任务运行程序了。

GitHub主页：[https://github.com/webpack/webpack

5.Browserify

简介：Browserify支持Node.js正在使用的CommonJS模块，它将所有模块编译成单个浏览器兼容的文件。

GitHub主页：[https://github.com/substack/node-browserify

6.RequireJS

简介：RequireJS是一种浏览器中的模块加载器，它也可以在Node.js中使用。

GitHub主页：[https://github.com/jrburke/r.js

7.ESLint

简介：ESLint是一种可插拔的代码分析工具。每个规则都是一个插件，因此可以根据个人喜好进行配置。

GitHub主页：[https://github.com/eslint/eslint

8.JSHint

简介：JSHint是一个灵活的JavaScript代码分析工具，它很好的平衡了真正的错误和老旧的语法。

GitHub主页：[https://github.com/jshint/jshint

9.JSLint

简介：JSLint是最早的代码分析工具之一，它实现了一套严格的默认规则。

GitHub主页：[https://github.com/reid/node-jslint

10.Jasmine

简介：Jasmine是一个行为驱动的测试工具，可以在浏览器中自动测试UI和交互。

GitHub主页：[https://github.com/jasmine/jasmine-npm

11.QUnit

简介：QUnit是一个单元测试框架，可以在输入特定参数时，检查函数结果。它还上报测试结果，确保没有错过特定的代码分支。

GitHub主页：[https://github.com/kof/node-qunit

CSS框架

1.Bootstrap – 最流行的Web前端UI框架

Bootstrap是由twitter推出的Web前端UI框架，它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。它使用了最新的浏览器技术，Bootstrap提供了时尚的排版样式，表单，buttons，表格，网格系统等等。

官方网站：[http://getbootstrap.com/

2.jQuery UI Bootstrap

它是jQuery UI和Bootstrap的集成，它是Bootstrap样式的，因此外观比较漂亮，同时它拥有jQuery UI的控件功能，这也方便开发者快速地创建一个网页控件。

3.BootMetro - Metro风格的CSS框架

BootMetro是一款基于Bootstrap的前端UI框架，BootMetro的特点是可以很方便地构建类似Windonws 8扁平化风格的网页界面，效果非常不错。官方网站：[http://aozora.github.io/bootmetro/

4.Flat UI - 扁平风格 UI 工具包

Flat UI是一套精美的扁平风格 UI 工具包，基于 Twitter Bootstrap 实现。这套界面工具包含许多基本的和复杂的 UI 部件，例如按钮，输入框，组合按钮，复选框，单选按钮，标签，菜单，进度条和滑块，导航元素等等。

官方网站：[https://github.com/designmodo/Flat-UI

5.网易CSS框架

NECNEC是网易推出的开源前端CSS框架，NEC提供了丰富UI代码库和插件，可以极大的帮助开发人员提高开发效率。即使你并非前端专业开发人员，利用NEC你也可以快速地构建属于自己的网页应用。

官方网站：[http://nec.netease.com/

6.Alloy UI – 功能强大的CSS UI框架

Alloy UI是基于YUI 3的前段UI框架，包含一套丰富的（超过60）UI 部件，如图片库，对话框，树形结构，面板，自动完成，按钮，日历控件，工具条等。

官方网站：[http://alloyui.com/

7.Cardinal – 移动端的CSS UI框架

Cardinal 是一个小型的移动优先的 CSS 框架，提供很多有用的默认样式、可缩放排版、可重用模块和一个简单的响应式表格系统。

官方网站：[http://cardinalcss.com/

8.快速开发CSS的框架

CSScaffold不同于许多CSS框架，它必须依靠PHP与Apache的mod_rewrite来执行，但也因为需要这两种东西，让CSScaffold变得很神奇、很方便，写起CSS来又快又轻松！

官方网站：[http://www.w3avenue.com/2009/10/13/csscaffold-php-based-css-framework/

9.后台UI开发框架

MuseUI一款基于bootstrap风格，兼容于主流浏览器（包括IE6）的后端UI开发组件。

官方网站：[http://git.oschina.net/muse/museui

前端教程

1.D3.js 入门教程

教程地址

2.ECMAScript 6 入门 –阮一峰

3.React入门教程

4.TypeScript入门教程

5.Velocity.js中文文档

6.Webpack 2.2 中文文档

7.七天学会NodeJS

8.廖雪峰-Git教程

9.廖雪峰-javascript教程

前端常用插件

1.jQuery内容滚动插件-BoxSlider

插件地址

2.jQuery artDialog对话框插件

3.移动端日期选择组件

4.图像延迟加载库Echo.js

5.轮播图FlexSlider插件

6.Slick.js幻灯片使用方法

7.JavaScript响应式轮播图插件–Flickity

插件地址

8.Intro.js 分步向导插件使用方法

插件地址

9.ScrollReveal-元素随页面滚动产生动画的js插件

插件地址

10.支持移动触摸的jQuery图片Lightbox插件

插件地址

11.Owl Carousel幻灯片插件

插件地址

12.kissui.scrollanim页面滚动动画库插件

插件地址

13.jQuery cxSelect 联动下拉菜单

插件地址

14.jQuery cxCalendar 日期选择器

插件地址

15.jQuery Transit 过渡效果插件

插件地址

16.lightslider-支持移动触摸的轻量级jQuery幻灯片插件

17.WOW.js滚动页面产生动画

18.FullPage.js全屏插件

19.animate.css动画库

图标

Iconfont

阿里巴巴矢量图标库，Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。

Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。

网站： http://www.iconfont.cn/

Font Awesome

Font Awesome为您提供可缩放的矢量图标，您可以使用css所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。其特点：

一个字库，675个图标
无需依赖JavaScript
无限缩放
如言语一般自由
CSS控制
高分屏完美呈现
完美兼容其它框架
可用于桌面系统
可适配于屏幕阅读器

网站：http://fontawesome.dashgame.com/

Github: https://github.com/FortAwesome/Font-Awesome/

要使用Font Awesome图标，请在HTML页面的部分中添加以下行：

1、国内推荐 CDN：

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

2、海外推荐 CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

示例

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>

列表图标

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
  <li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>

边界和被拉的图标

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br>
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br>
菜鸟教程 -- 学的不仅是技术，更是梦想！！！<br>
菜鸟教程 -- 学的不仅是技术，更是梦想！！！

动态图标

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

固定宽度图标

<div class="list-group">
  <a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a>
  <a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
  <a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a>
  <a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>

旋转和翻转的图标

<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>

堆叠的图标

<span class="fa-stack fa-lg">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
 
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
 
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban on fa-camera

Cikonss

Cikonss是利用纯CSS技术构建的响应式、跨浏览器的icon，兼容IE8+。这意味着必须使用CSS2，因此，可以绘制的形状或图形就收到了限制。

某些icon必须有 border-radius 属性，这主要是为了在支持此属性的浏览器上更好的绘制icon，而且不会影响到不支持此属性的浏览器。

网站：http://www.bootcss.com/p/cikonss/index.html

Glyph Icons

Glyphicons Halflings需要商业许可，但是可以通过基于项目的Bootstrap来免费使用这些图标，Bootstrap捆绑了200多个字体图标。

官网: http://glyphicons.com/

Simple Line Icons

一套线条非常优美的图标。

官网: https://thesabbir.github.io/simple-line-icons/

Github: https://github.com/thesabbir/simple-line-icons

Ionicons

一套线条非常优美的图标，今天为止大约有750多个字体图标，图标多，有标准，iOS，Android，社交图标，图标非常精美。

官网: http://ionicons.com/

Github: https://github.com/driftyco/ionicons

Themify

Themify图标是用于网页设计和应用一套完整的图标，包括320以上像素完美，手工制作的图标，画的灵感来自苹果iOS7公开，100%免费！

官网: http://themify.me/themify-icons

Material Design Iconic Font

有提醒，视频，联系，内容，编辑器，硬件，地图等多种分类图标

官网: http://zavoloklom.github.io/material-design-iconic-font/index.html

Github: https://github.com/zavoloklom/material-design-iconic-font

Weather Icons

国内外CND

国内CDN公共库

百度CDN公共库

百度公共CDN为站长的应用程序提供稳定、可靠、高速的服务，包含全球所有最流行的开源JavaScript库。

地址：http://cdn.code.baidu.com

GIT开源库：https://github.com/Clouda-team/baiducdnstatic

Ps：百度的速度目前来说应该是和新浪差不多的。不过jQuery的版本比SAE少几个，其他类库应该都差不多。

新浪云计算CDN公共库

新浪云计算是新浪研发中心下属的部门，主要负责新浪在云计算领域的战略规划，技术研发和平台运营工作。主要产品包括应用云平台Sina App Engine（简称SAE）。

SAE的CDN节点覆盖全国各大城市的多路（电信、联通、移动、教育）骨干网络，使开发者能够方便的使用高质量的CDN服务。

地址：http://lib.sinaapp.com

Ps：网上有评测说新浪的速度比百度的要好。个人没感觉出来。亲测半夜的时候出现过几次加载慢的情况（不知道其他站长遇到过没有）。

又拍云JS库CDN服务

又拍云存储是杭州纬聚网络有限公司旗下项目，成立于2005年6月，前期主要为又拍网、又拍图片管家提供图片云存储／云计算服务，于2010年2月对所有用户开放使用。

主要专注于海量小文件的存储与分发及图片云计算领域。提供的两大核心服务：静态文件云存储、CDN加速处理。

地址：http://jscdn.upai.com

Ps：又拍云js库提供了常用的JavaScript库CDN服务。算是起步较早的cdn加速服务了。速度和稳定性也不错。不过js库有点少，有些前卫的js库可能不提供。

七牛云存储开放静态文件CDN

像 Google Ajax Library，Microsoft http://ASP.net CDN，SAE，Baidu，Upyun 等 CDN
上都免费提供的 JS 库的存储，但使用起来却都有些局限，因为他们只提供了部分 JS
库。但七牛云存储提供一个尽可能全面收录优秀开源库的仓库，并免费提供 CDN 加速服务。

地址：http://www.staticfile.org

GIT开源库：https://github.com/staticfile/static

Ps：同时，开放静态文件CDN也提供开源库源接入的入口，让所有人都可以提交开源库，包括 JS、CSS、image 和 swf 等静态文件。

360网站卫士CDN前端公共库

托管在360众多的全国CDN节点上，覆盖电信、联通、移动等主流运营商线路，您可以在自己的网页上直接通过script标记引用这些资源，让网站访问速度瞬间提速！

只需替换一个域名就可以继续使用Google提供的前端公共库和免费字体库,让网站访问速度瞬间提速。

地址：http://libs.useso.com

Ps：360的步伐现在是越来越快了。各种技术和提供的服务更新的速度是飞快的。360CDN服务也是最近才推出的（貌似主要还是Google被墙了

的原因）。提供了大多数的前端js库，还在自己的服务器上面缓存了Google的前端公共库和免费字体库，这个算是其他国内的cdn公共库没有的。速度和
稳定性也不错，当然相比较而且还是略逊于百度和新浪(亲测有些地方宽带线路会断线，可能也是很少部分吧)。毕竟提供服务还没多久。

modules in the sea阿里

阿里提供的公共CDN库，提供的比较少，没啥好说的。

地址：http://a.tbcdn.cn/libs

GIT开源库：https://github.com/seajs/modules

Ps：仅提供了几个项目CDN加速，未提供递交。

国外CDN公共库

CDNJS静态资源CDN服务

CDNJS提供非常完整的 JavaScript 程式库，无论是热门或是冷门的一应俱全。若你觉得它们缺少哪些好用的函式库，也可以自行提交到网站里，通过审核后就 CDNJS 就会为你分流 js文件！这项服务是结合 CloudFlare、Pingdom 与 S3Stat的，稳定性与速度自然不在话下。CDNJS提供的 JavaScript Libraries 全部列在网站首页，使用者可以直接搜索。这些程式库都有标示版本编号、标签以及原维护网站链结。

地址：http://www.cdnjs.com

GIT开源库：https://github.com/cdnjs/cdnjs

Ps：CDNJS应该算是最完整的的JS库了。存储了大部分主流的 JS 库，甚至 CSS、image 和
swf，不过很多国内优秀开源库是没有的。很多国外前卫的Js库在CDNJS大都能找到。国内的速度虽然比不上其他的几个国内的CDN服务，但是相对来说
其实还可以。

当然你也可以使用国人提供的CDNJS国内镜像网站的又拍云路径来引用相关JS和CSS文件。

地址：http://www.cdnjs.cn

CDNJS国内镜像托管在又拍云存储，但是各种JS或者CSS类库比又拍云自己出的JS库丰富很多,而且每天同步更新且支持https协议。

Google Hosted Libraries

Google出品，必属精品了。虽然最近Google全线产品被墙了，连基本的Google搜索服务都无法使用了。但是谷歌的公共CDN公共库应该是最强大的了，像其中的前卫的各种代码类库和Google Web Font 字体库，国内几大公共CDN服务几乎都不提供支持。

地址：https://developers.google.com/speed/libraries

Ps：当然，Google打不开怎么办？除了使用国内的cdn库，也没有什么好办法了。如：国内cdn不提供的js库使用七牛云存储cdn加速服务、Google Fonts Open Sans字体库使用360CDN公共库代替等。

360CDN公共库代替：http://ajax.useso.com

360CDN公共库代替：http://fonts.useso.com

Microsoft ASP.net CDN

http://ASP.NET开发团队推出的一个新的微软Ajax CDN（Content Delivery Network，内容分发网络）服务，该服务提供了对AJAX库（包括jQuery 和 http://ASP.NET AJAX）的缓存支持。该服务是免费的，不需任何注册，可用于商业性或非商业性用途。

地址：http://www.asp.net/ajaxlibrary/cdn.ashx

Ps：微软出品，自然不会太差。虽然在天朝，速度依然不会太慢（当然比不上国内的其他cdn）。

MaxCDN：jsDelivr

MaxCDN是一家价格相对比较便宜的CDN公司，在全球分布着众多的节点。 jsDelivr是基于MaxCDN的一个免费开源的 CDN 解决方案，用于帮助开发者和站长。jsDelivr包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。

地址：http://www.jsdelivr.com

Ps：每一款CDN的节点数量都是大家所关心的，jsDelivr总共提供着13个节点。加载速度和CDNJS基本差不多，国内用户建议使用国内CDN服务最佳。大家可以自己测试看看。

总结

这些CDN公共库大都各具特色。大家可以自己选择性去使用。速度和稳定性以国内的百度和新浪为最佳（当然这是个人意见）。鉴于Google已经被墙，所有关于Google的服务大家还是尽快转移阵地，使用国内的CDN公共库服务吧。

注：如果担心CDN地址加载失败，可以这样载入本地jquery

<script type="text/javascript">
!window.jQuery && document.write('<script src="js/jquery.min.js"><\/script>');
</script>

参考资料：

web匠人博客：前端 CDN 公共库大全 - Web匠人博客

IT就要上导航-建站技术导航网站：IT就要上导航-建站技术导航 - IT913.com

国内：国内CDN - IT就要上导航-建站技术导航 - IT913.com

百度CDN公共库：百度CDN公共库 - IT就要上导航-建站技术导航 - IT913.com

新浪云计算CDN公共库：新浪云计算CDN公共库 - IT就要上导航-建站技术导航 - IT913.com

又拍云JS库CDN服务：又拍云JS库CDN服务 - IT就要上导航-建站技术导航 - IT913.com

Staticfile CDN：Staticfile CDN - IT就要上导航-建站技术导航 - IT913.com

360前端CDN服务：360前端CDN服务 - IT就要上导航-建站技术导航 - IT913.com

国外：国外CDN - IT就要上导航-建站技术导航 - IT913.com

CDNJS：CDNJS - IT就要上导航-建站技术导航 - IT913.com

Google CDN公共库：Google CDN公共库 - IT就要上导航-建站技术导航 - IT913.com

微软Ajax CDN：微软Ajax CDN - IT就要上导航-建站技术导航 - IT913.com

jsDelivr：jsDelivr - IT就要上导航-建站技术导航 - IT913.com

hexo-theme-matery主题美化

发表于 2020-01-29 更新于 2020-12-27

概述

熟悉CSS能够很好地帮助你

二级标题

可以参考我的配置

menu:
  主页:
    url: /
    icon: fas fa-home
  tags:
    url: /tags
    icon: fas fa-tags
  分类:
    url: /categories
    icon: fas fa-bookmark
  目录:
    icon: fas fa-list
    children:
      - name: About
        url: /about
        icon: fas fa-user-circle
      - name: Archives
        url: /archives
        icon: fas fa-archive
      - name: Contact
        url: /contact
        icon: fas fa-comments
  友链:
    url: /friends/
    icon: fas fa-address-book
  # 二级菜单写法如下
  Medias:
    icon: fas fa-list
    children:
      - name: 音乐
        url: /music
        icon: fas fa-music
      - name: 电影
        url: /movies
        icon: fas fa-film
      - name: 书籍
        url: /books
        icon: fas fa-book
      - name: 壁纸
        url: /galleries
        icon: fas fa-image
      - name: 追番
        url: /bangumis
        icon: fas fa-film
  Extension:
    icon: fas fa-list
    children:
      - name: 时间
        url: /time
        icon: fas fa-image
      - name: 美图
        url: /Mito
        icon: fas fa-images
      - name: 导航
        url: /navigation
        icon: fas fa-image
      - name: 弹幕室
        url: /bb
        icon: fas fa-film
      - name: IP定位
        url: /position
        icon: fas fa-book

如果想添加图标，在source/libs/awesome/css/all.css

这些CSS带吗是啥意思呢？

解答：

CSS的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的*可替换元素。*

而content 是图标的Unicode值

代码示例

link前面加一个icon

HTML

<a href="http://www.mozilla.org/en-US/">Home Page</a>

CSS

a::before{
    content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
    font:    x-small Arial,freeSans,sans-serif;
    color:   gray;
}

自定义列表后面加加文字

HTML

<div>
  <ul class="brightIdea">
    <li>This is my first idea</li>
    <li>and another good idea</li>
  </ul>
</div>

CSS

/* first import the icon from a suitable site */
@import url(http://weloveiconfonts.com/api/?family=entypo);

.brightIdea li::after{
    content: '\1f4a1';
    font-family: 'entypo', sans-serif;
}

修改all.css

参数有很多，我们可以随意调整，以下为官方的一个示例

/* Step 1: Common Properties: All required to make icons render reliably */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

/* Step 2: Reference Individual Icons */
.login::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}

/* Note: Make sure to include the correct weight and Unicode value for the icon */
.tps::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: "\f1ea";
}

具体编码可以在这里查，可以需要翻墙才能完整浏览

匹配不同屏幕

@media在媒体查询中使用该规则为不同的媒体类型/设备应用不同的样式。

媒体查询可用于检查许多事情，例如：

视口的宽度和高度
设备的宽度和高度
方向（平板电脑/手机处于横向还是纵向模式？）
解析度

命名使用了@media重写css样式但是依然@media里面的样式失效。

原因在于css选择器优先级问题，后面的css样式优先级大于前面的。

@media screen and (max-width: 800px) {}的样式应该放到后面，不应该放到没有@media的前面。

吐槽：有些坑，被主题设计者坑了一把，他竟然没考虑优先级的问题，

解决：把前面的放在后面就好了

修改页面配色

查找方法基本就是打开chrome浏览器的检查,选择想要查看的页面元素,然后看他的Style文件,找到关键词之后去hexo-theme-matery主题的css文件中查找后修改即可

打开 matery/source/css/matery.css 文件搜索 .bg-color 大概在198行
修改background-image属性中linear-gradient内的值即可改成你自己想要的颜色。

添加文章显示作者名字

---------------------- layout/_partial/post-detail.ejs -----------------------

<div class="info-break-policy">
    <% if (page.author && page.author.length > 0) { %>
        <i class="fa fa-pencil"></i> 作者: <%- page.author %>
     <% } else { %>
    <i class="fa fa-pencil"></i> 作者: <%- config.author %>
    <% } %>
</div>

添加一言

如果需要出处的话可以使用以下代码，不过应该有更简便的写法，不过id的参数我调了好几次都没成功。

--------------------------- layout/_widget/dream.ejs ---------------------------

<div class="row">
   <div class="col l8 offset-l2 m10 offset-m1 s10 offset-s1 center-align text">
	<div id="hitokoto">:D 获取中...</div>
	<i id="hitofrom">:D 获取中...</i>
	<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
	<script>
	fetch('https://v1.hitokoto.cn')
		.then(function (res){
		return res.json();
		})
		.then(function (data) {
		var hitokoto = document.getElementById('hitokoto');
		hitokoto.innerText = '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + data.hitokoto;
		var hitofrom = document.getElementById('hitofrom');
		hitofrom.innerText = "——" + "《" + data.from + "》" + '\xa0'; 
		})
		.catch(function (err) {
		console.error(err);
		})
	</script>
   </div>
 </div>

评论区美化

注册

前往 LeanCloud 国际版，注册账号。
注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。
绑定完成之后点击创建应用，应用名称随意，接着在结构化数据中创建 class，命名为 shuoshuo。
在你新建的应用中找到结构化数据下的用户。点击添加用户，输入想用的用户名及密码。
回到结构化数据中，点击 class 下的 shuoshuo。找到权限，在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。
然后新建一个名为atComment的class，权限什么的使用默认的即可。
点击 class 下的 _User 添加列，列名称为 img，默认值填上你这个账号想要用的发布说说的头像url，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。
在最菜单栏中找到设置-> 应用 keys，记下来 AppID 和 AppKey ，一会会用。
最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据已达到强制发布说说。

算了，大家直接从以下两个链接参考就行：

添加图片

路径：layout/_partial/minivaline.ejs

教大家一个非常方便定位代码位置的办法，直接在github搜，示例如下：

效果如图：（非常nice）

打开layout/_partial/minivaline.ejs，修改如下：

<style>
    .mvaline-card {
        margin: 1.5rem auto;
    }

    .mvaline-card .card-content {
        padding: 20px 20px 5px 20px;
        background-image: url(https://cdn.jsdelivr.net/gh/zyoushuo/Blog/images/valinebg.webp);
        background-position: right bottom;
		background-repeat: no-repeat;
    }
</style>

效果如图：

文章配置

配置选项	默认值	描述
title	`Markdown` 的文件标题	文章标题，强烈建议填写此选项
date	文件创建时的日期时间	发布时间，强烈建议填写此选项，且最好保证全局唯一
author	根 `_config.yml` 中的 `author`	文章作者
img	`featureImages` 中的某个值	文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: `http://xxx.com/xxx.jpg`
top	`true`	推荐文章（文章是否置顶），如果 `top` 值为 `true`，则会作为首页推荐文章
cover	`false`	`v1.0.2`版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg	无	`v1.0.2`版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password	无	文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 `password` 的值，该值必须是用 `SHA256` 加密后的密码，防止被他人识破。前提是在主题的 `config.yml` 中激活了 `verifyPassword` 选项
toc	`true`	是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 `config.yml` 中激活了 `toc` 选项
mathjax	`false`	是否开启数学公式支持，本文章是否开启 `mathjax`，且需要在主题的 `_config.yml` 文件中也需要开启才行
summary	无	文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories	无	文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags	无	文章标签，一篇文章可以多个标签
keywords	文章标题	文章关键字，SEO 时需要
reprintPolicy	cc_by	文章转载规则，可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

难受的是他img也加了cdn，。。。。。

如果不愿意放弃cdn的话，也可以修改成这样

去除页面的上一篇

有些只有一个页面，上一篇下一篇显得有些多余了

hexo-theme-matery/layout/_partial/post-detail.ejs

所以

可视化图表

要画一个可视化的图表就要知道数据从何而来，从下图可以看出是通过site.获取的

更新代码版本

为毛要更新代码版本勒？

因为博主想了解做一个网站需要知道哪些库，如果不想折腾的话，请不要轻易尝试，Bug可能比你想象的多

（以下已剔除无关紧要的库）

libs:
  css:
    fontAwesome: /libs/awesome/css/all.css # V5.11.1
    materialize: /libs/materialize/materialize.min.css # 1.0.0
    aos: /libs/aos/aos.css
    animate: /libs/animate/animate.min.css # V3.5.1  https://animate.style/
    lightgallery: /libs/lightGallery/css/lightgallery.min.css # V1.6.11
    aplayer: /libs/aplayer/APlayer.min.css
    dplayer: /libs/dplayer/DPlayer.min.css
    gitalk: /libs/gitalk/gitalk.css
    jqcloud: /libs/jqcloud/jqcloud.css
    tocbot: /libs/tocbot/tocbot.css
    prism: /libs/prism/prism.css
  js:
    matery: /js/matery.js
    jquery: /libs/jquery/jquery.min.js  # https://jquery.com/
    materialize: /libs/materialize/materialize.min.js # 1.0.0
    masonry: /libs/masonry/masonry.pkgd.min.js # v4.0.0
    aos: /libs/aos/aos.js
    scrollProgress: /libs/scrollprogress/scrollProgress.min.js
    lightgallery: /libs/lightGallery/js/lightgallery-all.min.js # V1.6.11
    clicklove: /libs/others/clicklove.js
    busuanzi: /libs/others/busuanzi.pure.mini.js
    aplayer: /libs/aplayer/APlayer.min.js
    dplayer: /libs/dplayer/DPlayer.min.js
    crypto: /libs/cryptojs/crypto-js.min.js
    echarts: /libs/echarts/echarts.min.js
    gitalk: /libs/gitalk/gitalk.min.js
    valine: /libs/valine/Valine.min.js # 若想保持最新版，请替换为 https://unpkg.com/valine/dist/Valine.min.js  默认为 /libs/valine/Valine.min.js
    minivaline: /libs/minivaline/MiniValine.js
    jqcloud: /libs/jqcloud/jqcloud-1.0.4.min.js
    tocbot: /libs/tocbot/tocbot.min.js
    canvas_nest: /libs/background/canvas-nest.js
    ribbon: /libs/background/ribbon.min.js
    ribbonRefresh: /libs/background/ribbon-refresh.min.js
    ribbon_dynamic: /libs/background/ribbon-dynamic.js
    instantpage: /libs/instantpage/instantpage.js

如果要使用链接形式，且用了主题的jsDelivr，需要改成下列形式

<script src="<%- url_for(theme.libs.js.materialize) %>"></script>
<script src="<%- url_for(theme.libs.js.masonry) %>"></script>
<script src="<%- url_for(theme.libs.js.aos) %>"></script>
<script src="<%- url_for(theme.libs.js.scrollProgress) %>"></script>
<script src="<%- url_for(theme.libs.js.lightgallery) %>"></script>

或者改成配置版，修改方便

awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

因为官方说

根据Adobe的要求，我们已删除Adobe品牌图标以符合其品牌和法律准则。如果您在项目中使用此图标，则升级到5.15版后将不会呈现该图标。

所以退而求其次把

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha512-q3eWabyZPc1XTCmF+8/LuE1ozpg5xxn7iO89yfSOd5/oKvyqLngoNGsx8jq92Y8eXJ/IRxQbEC+FGSYxtk2oiw==" crossorigin="anonymous" />

cdn还是用国内的最好了

<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">

materialize

这东西很久没更新了，我也没看懂，不管他

<link href="https://cdn.bootcdn.net/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

aos

CSS

<link href="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">

JS

<script src="https://cdn.bootcdn.net/ajax/libs/aos/2.3.4/aos.js"></script>

一些弹跳动画

Animate.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

先用兼容

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.min.css" rel="stylesheet">

Animate.css是一个可在您的Web项目中使用的即用型跨浏览器动画库。非常适合强调，主页，滑块和引导注意的提示。

对于新项目，强烈建议使用默认的前缀版本，因为这将确保您几乎不会有与项目冲突的类。此外，在更高版本中，我们可能决定终止该animate.compat.css文件。

加了个前缀

lightgallery

一个针对jQuery的可定制，模块化，响应式灯箱画廊插件。

<script src="https://cdn.bootcdn.net/ajax/libs/lightgallery/1.10.0/js/lightgallery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/lightgallery/1.10.0/css/lightgallery.min.css" rel="stylesheet">

aplayer

<link href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.9.1/APlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.9.1/APlayer.min.js"></script>

dplayer

<link href="https://cdn.bootcdn.net/ajax/libs/dplayer/1.9.1/DPlayer.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/dplayer/1.9.1/DPlayer.min.js"></script>

gitalk

<link href="https://cdn.bootcdn.net/ajax/libs/gitalk/1.7.0/gitalk.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/gitalk/1.7.0/gitalk.min.js"></script>

jqcloud

<link href="https://cdn.bootcdn.net/ajax/libs/jqcloud/1.0.4/jqcloud.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jqcloud/1.0.4/jqcloud.min.js"></script>

tocbot

<script src="https://cdn.bootcdn.net/ajax/libs/tocbot/4.9.1/tocbot.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/tocbot/4.9.1/tocbot.css" rel="stylesheet">

jquery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

jQuery UI

jQuery UI是在jQuery JavaScript库之上构建的一组精选的用户界面交互，效果，小部件和主题。无论是构建高度交互的Web应用程序，还是只需要向表单控件添加日期选择器，jQuery UI都是最佳选择。

jQuery UI包含许多保持状态的小部件，因此使用方式与典型的jQuery插件略有不同。jQuery UI的所有小部件都使用相同的模式，因此，如果您学习如何使用它们，那么您将知道如何使用所有这些模式。

<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

jQuery Mobile

jQuery Mobile是构建可在所有流行的智能手机，平板电脑和台式设备上访问的网站和应用程序的最简单方法。该框架提供了一组易于触摸的UI小部件和一个支持AJAX的导航系统，以支持动画页面过渡。

<link href="https://cdn.bootcdn.net/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.css" rel="stylesheet">

prism

<link href="https://cdn.bootcdn.net/ajax/libs/prism/1.22.0/themes/prism.min.css" rel="stylesheet">

Masonry

一个瀑布流布局工具库。

<script src="https://cdn.bootcdn.net/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>

scrollprogress

创建一个进度条，指示您在网站上滚动了多少

<script src="https://cdn.bootcdn.net/ajax/libs/scrollprogress/3.0.2/scrollProgress.min.js"></script>

CSS笔记之图标

发表于 2020-01-29 更新于 2020-12-27 分类于前端

最近心血来潮想要修改一下网站的一些图标，原本以为它们实在source里面使用图片的方式保存的，但是在source找了一圈也没有，再看看主题配置文件，在进行百度，最后发现 icon都是用CSS实现的，真实神奇，果然在hexo-theme-matery\source\libs\awesome\css里发现了网站用的所有图标都在这里了。然后你可以在里面添加你想要的图标，并且在config将图标名改成对应的就行！附上代码表。

NAME	CODE	NAME	CODE
.fa-glass	\f000	.fa-github-alt	\f113
.fa-music	\f001	.fa-folder-o	\f114
.fa-search	\f002	.fa-folder-open-o	\f115
.fa-envelope-o	\f003	.fa-smile-o	\f118
.fa-heart	\f004	.fa-frown-o	\f119
.fa-star	\f005	.fa-meh-o	\f11a
.fa-star-o	\f006	.fa-gamepad	\f11b
.fa-user	\f007	.fa-keyboard-o	\f11c
.fa-film	\f008	.fa-flag-o	\f11d
.fa-th-large	\f009	.fa-flag-checkered	\f11e
.fa-th	\f00a	.fa-terminal	\f120
.fa-th-list	\f00b	.fa-code	\f121
.fa-check	\f00c	.fa-mail-reply-all	\f122
.fa-remove	\f00d	.fa-reply-all	\f122
.fa-close	\f00d	.fa-star-half-empty	\f123
.fa-times	\f00d	.fa-star-half-full	\f123
.fa-search-plus	\f00e	.fa-star-half-o	\f123
.fa-search-minus	\f010	.fa-location-arrow	\f124
.fa-power-off	\f011	.fa-crop	\f125
.fa-signal	\f012	.fa-code-fork	\f126
.fa-gear	\f013	.fa-unlink	\f127
.fa-cog	\f013	.fa-chain-broken	\f127
.fa-trash-o	\f014	.fa-question	\f128
.fa-home	\f015	.fa-info	\f129
.fa-file-o	\f016	.fa-exclamation	\f12a
.fa-clock-o	\f017	.fa-superscript	\f12b
.fa-road	\f018	.fa-subscript	\f12c
.fa-download	\f019	.fa-eraser	\f12d
.fa-arrow-circle-o-down	\f01a	.fa-puzzle-piece	\f12e
.fa-arrow-circle-o-up	\f01b	.fa-microphone	\f130
.fa-inbox	\f01c	.fa-microphone-slash	\f131
.fa-play-circle-o	\f01d	.fa-shield	\f132
.fa-rotate-right	\f01e	.fa-calendar-o	\f133
.fa-repeat	\f01e	.fa-fire-extinguisher	\f134
.fa-refresh	\f021	.fa-rocket	\f135
.fa-list-alt	\f022	.fa-maxcdn	\f136
.fa-lock	\f023	.fa-chevron-circle-left	\f137
.fa-flag	\f024	.fa-chevron-circle-right	\f138
.fa-headphones	\f025	.fa-chevron-circle-up	\f139
.fa-volume-off	\f026	.fa-chevron-circle-down	\f13a
.fa-volume-down	\f027	.fa-html5	\f13b
.fa-volume-up	\f028	.fa-css3	\f13c
.fa-qrcode	\f029	.fa-anchor	\f13d
.fa-barcode	\f02a	.fa-unlock-alt	\f13e
.fa-tag	\f02b	.fa-bullseye	\f140
.fa-tags	\f02c	.fa-ellipsis-h	\f141
.fa-book	\f02d	.fa-ellipsis-v	\f142
.fa-bookmark	\f02e	.fa-rss-square	\f143
.fa-print	\f02f	.fa-play-circle	\f144
.fa-camera	\f030	.fa-ticket	\f145
.fa-font	\f031	.fa-minus-square	\f146
.fa-bold	\f032	.fa-minus-square-o	\f147
.fa-italic	\f033	.fa-level-up	\f148
.fa-text-height	\f034	.fa-level-down	\f149
.fa-text-width	\f035	.fa-check-square	\f14a
.fa-align-left	\f036	.fa-pencil-square	\f14b
.fa-align-center	\f037	.fa-external-link-square	\f14c
.fa-align-right	\f038	.fa-share-square	\f14d
.fa-align-justify	\f039	.fa-compass	\f14e
.fa-list	\f03a	.fa-toggle-down	\f150
.fa-dedent	\f03b	.fa-caret-square-o-down	\f150
.fa-outdent	\f03b	.fa-toggle-up	\f151
.fa-indent	\f03c	.fa-caret-square-o-up	\f151
.fa-video-camera	\f03d	.fa-toggle-right	\f152
.fa-photo	\f03e	.fa-caret-square-o-right	\f152
.fa-image	\f03e	.fa-euro	\f153
.fa-picture-o	\f03e	.fa-eur	\f153
.fa-pencil	\f040	.fa-gbp	\f154
.fa-map-marker	\f041	.fa-dollar	\f155
.fa-adjust	\f042	.fa-usd	\f155
.fa-tint	\f043	.fa-rupee	\f156
.fa-edit	\f044	.fa-inr	\f156
.fa-pencil-square-o	\f044	.fa-cny	\f157
.fa-share-square-o	\f045	.fa-rmb	\f157
.fa-check-square-o	\f046	.fa-yen	\f157
.fa-arrows	\f047	.fa-jpy	\f157
.fa-step-backward	\f048	.fa-ruble	\f158
.fa-fast-backward	\f049	.fa-rouble	\f158
.fa-backward	\f04a	.fa-rub	\f158
.fa-play	\f04b	.fa-won	\f159
.fa-pause	\f04c	.fa-krw	\f159
.fa-stop	\f04d	.fa-bitcoin	\f15a
.fa-forward	\f04e	.fa-btc	\f15a
.fa-fast-forward	\f050	.fa-file	\f15b
.fa-step-forward	\f051	.fa-file-text	\f15c
.fa-eject	\f052	.fa-sort-alpha-asc	\f15d
.fa-chevron-left	\f053	.fa-sort-alpha-desc	\f15e
.fa-chevron-right	\f054	.fa-sort-amount-asc	\f160
.fa-plus-circle	\f055	.fa-sort-amount-desc	\f161
.fa-minus-circle	\f056	.fa-sort-numeric-asc	\f162
.fa-times-circle	\f057	.fa-sort-numeric-desc	\f163
.fa-check-circle	\f058	.fa-thumbs-up	\f164
.fa-question-circle	\f059	.fa-thumbs-down	\f165
.fa-info-circle	\f05a	.fa-youtube-square	\f166
.fa-crosshairs	\f05b	.fa-youtube	\f167
.fa-times-circle-o	\f05c	.fa-xing	\f168
.fa-check-circle-o	\f05d	.fa-xing-square	\f169
.fa-ban	\f05e	.fa-youtube-play	\f16a
.fa-arrow-left	\f060	.fa-dropbox	\f16b
.fa-arrow-right	\f061	.fa-stack-overflow	\f16c
.fa-arrow-up	\f062	.fa-instagram	\f16d
.fa-arrow-down	\f063	.fa-flickr	\f16e
.fa-mail-forward	\f064	.fa-adn	\f170
.fa-share	\f064	.fa-bitbucket	\f171
.fa-expand	\f065	.fa-bitbucket-square	\f172
.fa-compress	\f066	.fa-tumblr	\f173
.fa-plus	\f067	.fa-tumblr-square	\f174
.fa-minus	\f068	.fa-long-arrow-down	\f175
.fa-asterisk	\f069	.fa-long-arrow-up	\f176
.fa-exclamation-circle	\f06a	.fa-long-arrow-left	\f177
.fa-gift	\f06b	.fa-long-arrow-right	\f178
.fa-leaf	\f06c	.fa-apple	\f179
.fa-fire	\f06d	.fa-windows	\f17a
.fa-eye	\f06e	.fa-android	\f17b
.fa-eye-slash	\f070	.fa-linux	\f17c
.fa-warning	\f071	.fa-dribbble	\f17d
.fa-exclamation-triangle	\f071	.fa-skype	\f17e
.fa-plane	\f072	.fa-foursquare	\f180
.fa-calendar	\f073	.fa-trello	\f181
.fa-random	\f074	.fa-female	\f182
.fa-comment	\f075	.fa-male	\f183
.fa-magnet	\f076	.fa-gittip	\f184
.fa-chevron-up	\f077	.fa-sun-o	\f185
.fa-chevron-down	\f078	.fa-moon-o	\f186
.fa-retweet	\f079	.fa-archive	\f187
.fa-shopping-cart	\f07a	.fa-bug	\f188
.fa-folder	\f07b	.fa-vk	\f189
.fa-folder-open	\f07c	.fa-weibo	\f18a
.fa-arrows-v	\f07d	.fa-renren	\f18b
.fa-arrows-h	\f07e	.fa-pagelines	\f18c
.fa-bar-chart-o	\f080	.fa-stack-exchange	\f18d
.fa-bar-chart	\f080	.fa-arrow-circle-o-right	\f18e
.fa-twitter-square	\f081	.fa-arrow-circle-o-left	\f190
.fa-facebook-square	\f082	.fa-toggle-left	\f191
.fa-camera-retro	\f083	.fa-caret-square-o-left	\f191
.fa-key	\f084	.fa-dot-circle-o	\f192
.fa-gears	\f085	.fa-wheelchair	\f193
.fa-cogs	\f085	.fa-vimeo-square	\f194
.fa-comments	\f086	.fa-turkish-lira	\f195
.fa-thumbs-o-up	\f087	.fa-try	\f195
.fa-thumbs-o-down	\f088	.fa-plus-square-o	\f196
.fa-star-half	\f089	.fa-space-shuttle	\f197
.fa-heart-o	\f08a	.fa-slack	\f198
.fa-sign-out	\f08b	.fa-envelope-square	\f199
.fa-linkedin-square	\f08c	.fa-wordpress	\f19a
.fa-thumb-tack	\f08d	.fa-openid	\f19b
.fa-external-link	\f08e	.fa-institution	\f19c
.fa-sign-in	\f090	.fa-bank	\f19c
.fa-trophy	\f091	.fa-university	\f19c
.fa-github-square	\f092	.fa-mortar-board	\f19d
.fa-upload	\f093	.fa-graduation-cap	\f19d
.fa-lemon-o	\f094	.fa-yahoo	\f19e
.fa-phone	\f095	.fa-google	\f1a0
.fa-square-o	\f096	.fa-reddit	\f1a1
.fa-bookmark-o	\f097	.fa-reddit-square	\f1a2
.fa-phone-square	\f098	.fa-stumbleupon-circle	\f1a3
.fa-twitter	\f099	.fa-stumbleupon	\f1a4
.fa-facebook	\f09a	.fa-delicious	\f1a5
.fa-github	\f09b	.fa-digg	\f1a6
.fa-unlock	\f09c	.fa-pied-piper	\f1a7
.fa-credit-card	\f09d	.fa-pied-piper-alt	\f1a8
.fa-rss	\f09e	.fa-drupal	\f1a9
.fa-hdd-o	\f0a0	.fa-joomla	\f1aa
.fa-bullhorn	\f0a1	.fa-language	\f1ab
.fa-bell	\f0f3	.fa-fax	\f1ac
.fa-certificate	\f0a3	.fa-building	\f1ad
.fa-hand-o-right	\f0a4	.fa-child	\f1ae
.fa-hand-o-left	\f0a5	.fa-paw	\f1b0
.fa-hand-o-up	\f0a6	.fa-spoon	\f1b1
.fa-hand-o-down	\f0a7	.fa-cube	\f1b2
.fa-arrow-circle-left	\f0a8	.fa-cubes	\f1b3
.fa-arrow-circle-right	\f0a9	.fa-behance	\f1b4
.fa-arrow-circle-up	\f0aa	.fa-behance-square	\f1b5
.fa-arrow-circle-down	\f0ab	.fa-steam	\f1b6
.fa-globe	\f0ac	.fa-steam-square	\f1b7
.fa-wrench	\f0ad	.fa-recycle	\f1b8
.fa-tasks	\f0ae	.fa-automobile	\f1b9
.fa-filter	\f0b0	.fa-car	\f1b9
.fa-briefcase	\f0b1	.fa-cab	\f1ba
.fa-arrows-alt	\f0b2	.fa-taxi	\f1ba
.fa-group	\f0c0	.fa-tree	\f1bb
.fa-users	\f0c0	.fa-spotify	\f1bc
.fa-chain	\f0c1	.fa-deviantart	\f1bd
.fa-link	\f0c1	.fa-soundcloud	\f1be
.fa-cloud	\f0c2	.fa-database	\f1c0
.fa-flask	\f0c3	.fa-file-pdf-o	\f1c1
.fa-cut	\f0c4	.fa-file-word-o	\f1c2
.fa-scissors	\f0c4	.fa-file-excel-o	\f1c3
.fa-copy	\f0c5	.fa-file-powerpoint-o	\f1c4
.fa-files-o	\f0c5	.fa-file-photo-o	\f1c5
.fa-paperclip	\f0c6	.fa-file-picture-o	\f1c5
.fa-save	\f0c7	.fa-file-image-o	\f1c5
.fa-floppy-o	\f0c7	.fa-file-zip-o	\f1c6
.fa-square	\f0c8	.fa-file-archive-o	\f1c6
.fa-navicon	\f0c9	.fa-file-sound-o	\f1c7
.fa-reorder	\f0c9	.fa-file-audio-o	\f1c7
.fa-bars	\f0c9	.fa-file-movie-o	\f1c8
.fa-list-ul	\f0ca	.fa-file-video-o	\f1c8
.fa-list-ol	\f0cb	.fa-file-code-o	\f1c9
.fa-strikethrough	\f0cc	.fa-vine	\f1ca
.fa-underline	\f0cd	.fa-codepen	\f1cb
.fa-table	\f0ce	.fa-jsfiddle	\f1cc
.fa-magic	\f0d0	.fa-life-bouy	\f1cd
.fa-truck	\f0d1	.fa-life-buoy	\f1cd
.fa-pinterest	\f0d2	.fa-life-saver	\f1cd
.fa-pinterest-square	\f0d3	.fa-support	\f1cd
.fa-google-plus-square	\f0d4	.fa-life-ring	\f1cd
.fa-google-plus	\f0d5	.fa-circle-o-notch	\f1ce
.fa-money	\f0d6	.fa-ra	\f1d0
.fa-caret-down	\f0d7	.fa-rebel	\f1d0
.fa-caret-up	\f0d8	.fa-ge	\f1d1
.fa-caret-left	\f0d9	.fa-empire	\f1d1
.fa-caret-right	\f0da	.fa-git-square	\f1d2
.fa-columns	\f0db	.fa-git	\f1d3
.fa-unsorted	\f0dc	.fa-hacker-news	\f1d4
.fa-sort	\f0dc	.fa-tencent-weibo	\f1d5
.fa-sort-down	\f0dd	.fa-qq	\f1d6
.fa-sort-desc	\f0dd	.fa-wechat	\f1d7
.fa-sort-up	\f0de	.fa-weixin	\f1d7
.fa-sort-asc	\f0de	.fa-send	\f1d8
.fa-envelope	\f0e0	.fa-paper-plane	\f1d8
.fa-linkedin	\f0e1	.fa-send-o	\f1d9
.fa-rotate-left	\f0e2	.fa-paper-plane-o	\f1d9
.fa-undo	\f0e2	.fa-history	\f1da
.fa-legal	\f0e3	.fa-circle-thin	\f1db
.fa-gavel	\f0e3	.fa-header	\f1dc
.fa-dashboard	\f0e4	.fa-paragraph	\f1dd
.fa-tachometer	\f0e4	.fa-sliders	\f1de
.fa-comment-o	\f0e5	.fa-share-alt	\f1e0
.fa-comments-o	\f0e6	.fa-share-alt-square	\f1e1
.fa-flash	\f0e7	.fa-bomb	\f1e2
.fa-bolt	\f0e7	.fa-soccer-ball-o	\f1e3
.fa-sitemap	\f0e8	.fa-futbol-o	\f1e3
.fa-umbrella	\f0e9	.fa-tty	\f1e4
.fa-paste	\f0ea	.fa-binoculars	\f1e5
.fa-clipboard	\f0ea	.fa-plug	\f1e6
.fa-lightbulb-o	\f0eb	.fa-slideshare	\f1e7
.fa-exchange	\f0ec	.fa-twitch	\f1e8
.fa-cloud-download	\f0ed	.fa-yelp	\f1e9
.fa-cloud-upload	\f0ee	.fa-newspaper-o	\f1ea
.fa-user-md	\f0f0	.fa-wifi	\f1eb
.fa-stethoscope	\f0f1	.fa-calculator	\f1ec
.fa-suitcase	\f0f2	.fa-paypal	\f1ed
.fa-bell-o	\f0a2	.fa-google-wallet	\f1ee
.fa-coffee	\f0f4	.fa-cc-visa	\f1f0
.fa-cutlery	\f0f5	.fa-cc-mastercard	\f1f1
.fa-file-text-o	\f0f6	.fa-cc-discover	\f1f2
.fa-building-o	\f0f7	.fa-cc-amex	\f1f3
.fa-hospital-o	\f0f8	.fa-cc-paypal	\f1f4
.fa-ambulance	\f0f9	.fa-cc-stripe	\f1f5
.fa-medkit	\f0fa	.fa-bell-slash	\f1f6
.fa-fighter-jet	\f0fb	.fa-bell-slash-o	\f1f7
.fa-beer	\f0fc	.fa-trash	\f1f8
.fa-h-square	\f0fd	.fa-copyright	\f1f9
.fa-plus-square	\f0fe	.fa-at	\f1fa
.fa-angle-double-left	\f100	.fa-eyedropper	\f1fb
.fa-angle-double-right	\f101	.fa-paint-brush	\f1fc
.fa-angle-double-up	\f102	.fa-birthday-cake	\f1fd
.fa-angle-double-down	\f103	.fa-area-chart	\f1fe
.fa-angle-left	\f104	.fa-pie-chart	\f200
.fa-angle-right	\f105	.fa-line-chart	\f201
.fa-angle-up	\f106	.fa-lastfm	\f202
.fa-angle-down	\f107	.fa-lastfm-square	\f203
.fa-desktop	\f108	.fa-toggle-off	\f204
.fa-laptop	\f109	.fa-toggle-on	\f205
.fa-tablet	\f10a	.fa-bicycle	\f206
.fa-mobile-phone	\f10b	.fa-bus	\f207
.fa-mobile	\f10b	.fa-ioxhost	\f208
.fa-circle-o	\f10c	.fa-angellist	\f209
.fa-quote-left	\f10d	.fa-cc	\f20a
.fa-quote-right	\f10e	.fa-shekel	\f20b
.fa-spinner	\f110	.fa-sheqel	\f20b
.fa-circle	\f111	.fa-ils	\f20b
.fa-mail-reply	\f112	.fa-meanpath	\f20c
.fa-reply	\f112

附：Font Awesome—-一套绝佳的图标字体库和CSS框架的官网链接：http://fontawesome.dashgame.com/

hexo有趣小功能之雪花飞舞

发表于 2020-01-29 更新于 2020-12-10 分类于 hexo

在themes\hexo-theme-matery\source\js目录下新建一个 snow.js 文件，粘贴以下代码：

/*样式一*/
(function($){
	$.fn.snow = function(options){
	var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
	documentHeight 	= $(document).height(),
	documentWidth	= $(document).width(),
	defaults = {
		minSize		: 10,
		maxSize		: 20,
		newOn		: 1000,
		flakeColor	: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
	},
	options	= $.extend({}, defaults, options);
	var interval= setInterval( function(){
	var startPositionLeft = Math.random() * documentWidth - 100,
	startOpacity = 0.5 + Math.random(),
	sizeFlake = options.minSize + Math.random() * options.maxSize,
	endPositionTop = documentHeight - 200,
	endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
	durationFall = documentHeight * 10 + Math.random() * 5000;
	$flake.clone().appendTo('body').css({
		left: startPositionLeft,
		opacity: startOpacity,
		'font-size': sizeFlake,
		color: options.flakeColor
	}).animate({
		top: endPositionTop,
		left: endPositionLeft,
		opacity: 0.2
	},durationFall,'linear',function(){
		$(this).remove()
	});
	}, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
	    minSize: 5, /* 定义雪花最小尺寸 */
	    maxSize: 50,/* 定义雪花最大尺寸 */
	    newOn: 300  /* 定义密集程度，数字越小越密集 */
    });
});

/*样式二*/
/* 控制下雪 */
function snowFall(snow) {
    /* 可配置属性 */
    snow = snow || {};
    this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
    this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
    this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
}
/* 兼容写法 */
requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) { setTimeout(callback, 1000 / 60); };

cancelAnimationFrame = window.cancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
	window.oCancelAnimationFrame;
/* 开始下雪 */
snowFall.prototype.start = function(){
    /* 创建画布 */
    snowCanvas.apply(this);
    /* 创建雪花形状 */
    createFlakes.apply(this);
    /* 画雪 */
    drawSnow.apply(this)
}
/* 创建画布 */
function snowCanvas() {
    /* 添加Dom结点 */
    var snowcanvas = document.createElement("canvas");
    snowcanvas.id = "snowfall";
    snowcanvas.width = window.innerWidth;
    snowcanvas.height = document.body.clientHeight;
    snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
    document.getElementsByTagName("body")[0].appendChild(snowcanvas);
    this.canvas = snowcanvas;
    this.ctx = snowcanvas.getContext("2d");
    /* 窗口大小改变的处理 */
    window.onresize = function() {
        snowcanvas.width = window.innerWidth;
        /* snowcanvas.height = window.innerHeight */
    }
}
/* 雪运动对象 */
function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
    this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
    this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
    this.size = Math.random() * flakeSize + 2;          /* 形状 */
    this.maxSize = flakeSize;                           /* 最大形状 */
    this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
    this.fallSpeed = fallSpeed;                         /* 坠落速度 */
    this.velY = this.speed;                             /* Y方向速度 */
    this.velX = 0;                                      /* X方向速度 */
    this.stepSize = Math.random() / 30;                 /* 步长 */
    this.step = 0                                       /* 步数 */
}
flakeMove.prototype.update = function() {
    var x = this.x,
        y = this.y;
    /* 左右摆动(余弦) */
    this.velX *= 0.98;
    if (this.velY <= this.speed) {
        this.velY = this.speed
    }
    this.velX += Math.cos(this.step += .05) * this.stepSize;

    this.y += this.velY;
    this.x += this.velX;
    /* 飞出边界的处理 */
    if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
        this.reset(canvas.width, canvas.height)
    }
};
/* 飞出边界-放置最顶端继续坠落 */
flakeMove.prototype.reset = function(width, height) {
    this.x = Math.floor(Math.random() * width);
    this.y = 0;
    this.size = Math.random() * this.maxSize + 2;
    this.speed = Math.random() * 1 + this.fallSpeed;
    this.velY = this.speed;
    this.velX = 0;
};
// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
flakeMove.prototype.render = function(ctx) {
    var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
    snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
    snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
    snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
    ctx.save();
    ctx.fillStyle = snowFlake;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
};
/* 创建雪花-定义形状 */
function createFlakes() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes = [],
        canvas = this.canvas;
    for (var i = 0; i < maxFlake; i++) {
        flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
    }
}
/* 画雪 */
function drawSnow() {
    var maxFlake = this.maxFlake,
        flakes = this.flakes;
    ctx = this.ctx, canvas = this.canvas, that = this;
    /* 清空雪花 */
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var e = 0; e < maxFlake; e++) {
        flakes[e].update();
        flakes[e].render(ctx);
    }
    /*  一帧一帧的画 */
    this.loop = requestAnimationFrame(function() {
        drawSnow.apply(that);
    });
}
/* 调用及控制方法 */
var snow = new snowFall({maxFlake:60});
snow.start();

在hexo-theme-matery\layout\layout.ejs 文件里引用即可：在body前面

<!-- 雪花特效 -->
<script type="text/javascript" src="\js\snow.js"></script>

例：

<%- partial('_partial/head') %>

if (condition)
{
当条件为 true 时执行的代码
}

添加以上代码可以在config控制是否下雪。

如果没效果，请确认网页是否已载入JQurey，如果没有请在下雪代码之前引入JQ即可：

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

这个不清楚，可以试一下。

upupoo壁纸分享

发表于 2020-01-28 更新于 2020-02-22

upupoo曾经是一款非常棒的桌面管理软件，不过开发者好像运营不下去了，直接把所有用户的软件升级为一个垃圾的游戏管理软件了，不过早有贴吧大神弄出了解决办法，本人之前也下载了一些挺好看的壁纸，如今把这些拿出来与大家共享，如果各位也有不少珍藏，欢迎共享。我的邮箱：1097629344@qq.com

全部都打包在蓝奏云那里了，原本是想每一个图片配一个链接的，但感觉（因为太懒了）没必要嘛，这些都挺棒的，一起打包带走吧！（其实我分享是按顺序的，除了头两个，其他都是从最新到最旧，解压后放在UpupooResource，默认是在D盘！

蓝奏云

密码:dk19

初音

下面这个是upupoo初始的壁纸，想想还是挺怀念的！

埃罗芒老师

下面就是我们都认识的啦！٩(๑❛ᴗ❛๑)۶

Marionnette histoire （马里奥内特的历史）

夕阳下的背影

我妻善逸（准备拔剑）

你的名字

海贼王

元宵灯城（京城）

第一次看见的时候超震撼

明日方舟 Amiya

明日方舟:莫斯提马

鬼灭善逸雷电

鬼灭水之柱–富冈义勇握刀

鬼灭水之柱–富冈义勇安宁

神乐七奈2K60FPS

天使樱超可爱

绿色植物

诶，为什么我会有这个壁纸，难道觉得护眼就下载了？!!!∑(ﾟДﾟノ)ノ

活力壁纸—–赛博朋克动画女孩

萝卜载着兔子飞行

这又是一张什么奇怪的壁纸，我真的有载过么？ (꒪Д꒪)ノ

漂亮的女孩子

不知道叫什么…..(｀・ω・´)

又蹦又跳的小鸡

以上就是我全部的壁纸了（就只有那么多库存了），早知道那软件会关闭就多存一些了，还有很多那么好看的壁纸没有下载o(╥﹏╥)o

不过我相信~~各位绅士~~每个喜欢分享壁纸的网友一定在自己的硬盘里存下了不少壁纸吧！

不要吝啬啦，我都把我的家底掏出来了，在评论区留下你的蓝奏云（最好不要使用百度网盘，实在是太慢了）或者是其他下载速度比较正常的都可以，记得要配上适当的说明哦，方便大家食用！

也可以通过发邮件的方式，我收到了的话会把他挂在这个网站上，可以附上你的网名，我都会把他放上去的（可能不会那么及时，耐心等待即可）

让upupoo因为我们的分享变得更加美好吧！！！！

python连接数据库简记

发表于 2020-01-27 更新于 2020-03-17 分类于 python

概述

简单记录一下如何用连接一些主流的数据库，虽然我暂时还用不上数据库，但是技多不压身嘛，先学了再说。

1.MySQL

安装

pip3 install pymysql

连接本地数据库

import pymysql
db = pymysql.connect(host='localhost',user='root',password='123456',port=3306)
cursor = db.cursor()
cursor.execute('SELECT VERSION()')
data = cursor.fetchone()
print('Database version:',data)
cursor.execute("CREATE DATABASE spiders DEFAULT CHARACTER SET utf8")
db.close()

这里通过 PyMySQL 的 connect 方法声明一个 MySQL 连接对象 db，此时需要传入 MySQL 运行的 host（即 IP）。由于 MySQL 在本地运行，所以传入的是 localhost。如果 MySQL 在远程运行，则传入其公网 IP 地址。后续的参数 user 即用户名，password 即密码，port 即端口（默认为 3306）。

连接成功后，需要再调用 cursor 方法获得 MySQL 的操作游标，利用游标来执行 SQL 语句。这里我们执行了两句 SQL，直接用 execute 方法执行即可。第一句 SQL 用于获得 MySQL 的当前版本，然后调用 fetchone 方法获得第一条数据，也就得到了版本号。第二句 SQL 执行创建数据库的操作，数据库名叫作 spiders，默认编码为 UTF-8。由于该语句不是查询语句，所以直接执行后就成功创建了数据库 spiders。接着，再利用这个数据库进行后续的操作。

2.MongoDB

5.3.1　MongoDB 存储

MongoDB 是由 C++ 语言编写的非关系型数据库，是一个基于分布式文件存储的开源数据库系统，其内容存储形式类似 JSON 对象，它的字段值可以包含其他文档、数组及文档数组，非常灵活。在这一节中，我们就来看看 Python 3 下 MongoDB 的存储操作。

1. 准备工作

在开始之前，请确保已经安装好了 MongoDB 并启动了其服务，并且安装好了 Python 的 PyMongo 库。如果没有安装，可以参考第 1 章。

2. 连接 MongoDB

连接 MongoDB 时，我们需要使用 PyMongo 库里面的 MongoClient。一般来说，传入 MongoDB 的 IP 及端口即可，其中第一个参数为地址 host，第二个参数为端口 port（如果不给它传递参数，默认是 27017）：

import pymongo
client = pymongo.MongoClient(host='localhost', port=27017)

这样就可以创建 MongoDB 的连接对象了。

另外，MongoClient 的第一个参数 host 还可以直接传入 MongoDB 的连接字符串，它以 mongodb 开头，例如：

client = MongoClient('mongodb://localhost:27017/')

这也可以达到同样的连接效果。

3. 指定数据库

MongoDB 中可以建立多个数据库，接下来我们需要指定操作哪个数据库。这里我们以 test 数据库为例来说明，下一步需要在程序中指定要使用的数据库：

db = client.test

这里调用 client 的 test 属性即可返回 test 数据库。当然，我们也可以这样指定：

db = client['test']

这两种方式是等价的。

4. 指定集合

MongoDB 的每个数据库又包含许多集合（collection），它们类似于关系型数据库中的表。

下一步需要指定要操作的集合，这里指定一个集合名称为 students。与指定数据库类似，指定集合也有两种方式：

collection = db.students

collection = db['students']

这样我们便声明了一个 Collection 对象。

5. 插入数据

接下来，便可以插入数据了。对于 students 这个集合，新建一条学生数据，这条数据以字典形式表示：

student = {
    'id': '20170101',
    'name': 'Jordan',
    'age': 20,
    'gender': 'male'
}

这里指定了学生的学号、姓名、年龄和性别。接下来，直接调用 collection 的 insert 方法即可插入数据，代码如下：

result = collection.insert(student)
print(result)

在 MongoDB 中，每条数据其实都有一个_id 属性来唯一标识。如果没有显式指明该属性，MongoDB 会自动产生一个 ObjectId 类型的_id 属性。insert() 方法会在执行后返回_id 值。

运行结果如下：

5932a68615c2606814c91f3d

当然，我们也可以同时插入多条数据，只需要以列表形式传递即可，示例如下：

student1 = {
    'id': '20170101',
    'name': 'Jordan',
    'age': 20,
    'gender': 'male'
}

student2 = {
    'id': '20170202',
    'name': 'Mike',
    'age': 21,
    'gender': 'male'
}

result = collection.insert([student1, student2])
print(result)

返回结果是对应的_id 的集合：

[ObjectId('5932a80115c2606a59e8a048'), ObjectId('5932a80115c2606a59e8a049')]

实际上，在 PyMongo 3.x 版本中，官方已经不推荐使用 insert() 方法了。当然，继续使用也没有什么问题。官方推荐使用 insert_one() 和 insert_many() 方法来分别插入单条记录和多条记录，示例如下：

student = {
    'id': '20170101',
    'name': 'Jordan',
    'age': 20,
    'gender': 'male'
}

result = collection.insert_one(student)
print(result)
print(result.inserted_id)

运行结果如下：

<pymongo.results.InsertOneResult object at 0x10d68b558>
5932ab0f15c2606f0c1cf6c5

与 insert() 方法不同，这次返回的是 InsertOneResult 对象，我们可以调用其 inserted_id 属性获取_id。

对于 insert_many() 方法，我们可以将数据以列表形式传递，示例如下：

student1 = {
    'id': '20170101',
    'name': 'Jordan',
    'age': 20,
    'gender': 'male'
}

student2 = {
    'id': '20170202',
    'name': 'Mike',
    'age': 21,
    'gender': 'male'
}

result = collection.insert_many([student1, student2])
print(result)
print(result.inserted_ids)

运行结果如下：

<pymongo.results.InsertManyResult object at 0x101dea558>
[ObjectId('5932abf415c2607083d3b2ac'), ObjectId('5932abf415c2607083d3b2ad')]

该方法返回的类型是 InsertManyResult，调用 inserted_ids 属性可以获取插入数据的_id 列表。

6. 查询

插入数据后，我们可以利用 find_one() 或 find() 方法进行查询，其中 find_one() 查询得到的是单个结果，find() 则返回一个生成器对象。示例如下：

result = collection.find_one({'name': 'Mike'})
print(type(result))
print(result)

这里我们查询 name 为 Mike 的数据，它的返回结果是字典类型，运行结果如下：

<class 'dict'>
{'_id': ObjectId('5932a80115c2606a59e8a049'), 'id': '20170202', 'name': 'Mike', 'age': 21, 'gender': 'male'}

可以发现，它多了_id 属性，这就是 MongoDB 在插入过程中自动添加的。

此外，我们也可以根据 ObjectId 来查询，此时需要使用 bson 库里面的 objectid：

from bson.objectid import ObjectId

result = collection.find_one({'_id': ObjectId('593278c115c2602667ec6bae')})
print(result)

其查询结果依然是字典类型，具体如下：

{'_id': ObjectId('593278c115c2602667ec6bae'), 'id': '20170101', 'name': 'Jordan', 'age': 20, 'gender': 'male'}

当然，如果查询结果不存在，则会返回 None。

对于多条数据的查询，我们可以使用 find() 方法。例如，这里查找年龄为 20 的数据，示例如下：

results = collection.find({'age': 20})
print(results)
for result in results:
    print(result)

运行结果如下：

<pymongo.cursor.Cursor object at 0x1032d5128>
{'_id': ObjectId('593278c115c2602667ec6bae'), 'id': '20170101', 'name': 'Jordan', 'age': 20, 'gender': 'male'}
{'_id': ObjectId('593278c815c2602678bb2b8d'), 'id': '20170102', 'name': 'Kevin', 'age': 20, 'gender': 'male'}
{'_id': ObjectId('593278d815c260269d7645a8'), 'id': '20170103', 'name': 'Harden', 'age': 20, 'gender': 'male'}

返回结果是 Cursor 类型，它相当于一个生成器，我们需要遍历取到所有的结果，其中每个结果都是字典类型。

如果要查询年龄大于 20 的数据，则写法如下：

results = collection.find({'age': {'$gt': 20}})

这里查询的条件键值已经不是单纯的数字了，而是一个字典，其键名为比较符号 $gt，意思是大于，键值为 20。

这里将比较符号归纳为表 5-3。

表 5-3　比较符号

符　　号	含　　义	示　　例
$lt	小于	{‘age’: {‘$lt’: 20}}
$gt	大于	{‘age’: {‘$gt’: 20}}
$lte	小于等于	{‘age’: {‘$lte’: 20}}
$gte	大于等于	{‘age’: {‘$gte’: 20}}
$ne	不等于	{‘age’: {‘$ne’: 20}}
$in	在范围内	{‘age’: {‘$in’: [20, 23]}}
$nin	不在范围内	{‘age’: {‘$nin’: [20, 23]}}

另外，还可以进行正则匹配查询。例如，查询名字以 M 开头的学生数据，示例如下：

results = collection.find({'name': {'$regex': '^M.*'}})

这里使用 $regex 来指定正则匹配，^M.* 代表以 M 开头的正则表达式。

这里将一些功能符号再归类为表 5-4。

表 5-4　功能符号

符　　号	含　　义	示　　例	示例含义
$regex	匹配正则表达式	{‘name’: {‘$regex’: ‘^M.*’}}	name 以 M 开头
$exists	属性是否存在	{‘name’: {‘$exists’: True}}	name 属性存在
$type	类型判断	{‘age’: {‘$type’: ‘int’}}	age 的类型为 int
$mod	数字模操作	{‘age’: {‘$mod’: [5, 0]}}	年龄模 5 余 0
$text	文本查询	{‘$text’: {‘$search’: ‘Mike’}}	text 类型的属性中包含 Mike 字符串
$where	高级条件查询	{‘$where’: ‘obj.fans_count == obj.follows_count’}	自身粉丝数等于关注数

关于这些操作的更详细用法，可以在 MongoDB 官方文档找到：
https://docs.mongodb.com/manual/reference/operator/query/。

7. 计数

要统计查询结果有多少条数据，可以调用 count() 方法。比如，统计所有数据条数：

count = collection.find().count()
print(count)

或者统计符合某个条件的数据：

count = collection.find({'age': 20}).count()
print(count)

运行结果是一个数值，即符合条件的数据条数。

8. 排序

排序时，直接调用 sort() 方法，并在其中传入排序的字段及升降序标志即可。示例如下：

results = collection.find().sort('name', pymongo.ASCENDING)
print([result['name'] for result in results])

运行结果如下：

['Harden', 'Jordan', 'Kevin', 'Mark', 'Mike']

这里我们调用 pymongo.ASCENDING 指定升序。如果要降序排列，可以传入 pymongo.DESCENDING。

9. 偏移

在某些情况下，我们可能想只取某几个元素，这时可以利用 skip() 方法偏移几个位置，比如偏移 2，就忽略前两个元素，得到第三个及以后的元素：

results = collection.find().sort('name', pymongo.ASCENDING).skip(2)
print([result['name'] for result in results])

运行结果如下：

['Kevin', 'Mark', 'Mike']

另外，还可以用 limit() 方法指定要取的结果个数，示例如下：

results = collection.find().sort('name', pymongo.ASCENDING).skip(2).limit(2)
print([result['name'] for result in results])

运行结果如下：

['Kevin', 'Mark']

如果不使用 limit() 方法，原本会返回三个结果，加了限制后，会截取两个结果返回。

值得注意的是，在数据库数量非常庞大的时候，如千万、亿级别，最好不要使用大的偏移量来查询数据，因为这样很可能导致内存溢出。此时可以使用类似如下操作来查询：

from bson.objectid import ObjectId
collection.find({'_id': {'$gt': ObjectId('593278c815c2602678bb2b8d')}})

这时需要记录好上次查询的_id。

概述

附录

常用模块及功能

Python网络通用模块：

Python 文本处理：

Python 特定格式文件处理：

Python 浏览器自动化处理：

Python 网页内容提取相关：

Pytorch

那么什么是张量呢？

那张量是干什么用的呢？

示例：

三大特征：

1.简洁

2.易用

3.动态

看个简单的代码！

Tensorflow

特点：

看个简单的代码！

比较

Paddle（百度飞桨）

NLTK

搜索文本

词统计

NLTK的语料库：

语料库的通用接口

加载自己的语料库

创建一个 Chat Bot

后文：踩坑记录

动画库

前端框架和类库

前端工具

CSS框架

前端教程

前端常用插件

图标

Iconfont

Font Awesome

示例

列表图标

边界和被拉的图标

动态图标

固定宽度图标

旋转和翻转的图标

堆叠的图标

Cikonss

Glyph Icons

Simple Line Icons

Ionicons

Themify

Material Design Iconic Font

Weather Icons

国内外CND

国内CDN公共库

modules in the sea阿里

国外CDN公共库

总结

概述

二级标题

代码示例

修改all.css

匹配不同屏幕

修改页面配色

添加文章显示作者名字

添加一言

评论区美化

注册

添加图片

文章配置

去除页面的上一篇

可视化图表

更新代码版本

CSS

JS

lightgallery

aplayer

dplayer

gitalk

jqcloud

我妻善逸（准备拔剑）

元宵灯城（京城）

鬼灭水之柱–富冈义勇握刀

鬼灭水之柱–富冈义勇安宁

天使樱超可爱