Hexo博客
未读图片懒加载知识小课堂:图片加载方式有两种,一个是预加载,另一个就是懒加载,那你了解什么是预加载和懒加载吗?下面来学习一下。参考:图片预加载与图片懒加载(缓载)的区别与实现
图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片。当用户需要查看时可直接从本地缓存中渲染,以提供给用户更好的体验,减少等待的时间。否则,如果一个页面的内容过于庞大,没有使用预加载技术的页面就会长时间的展现为一片空白,这样浏览者可能以为图片预览慢而没兴趣浏览,把网页关掉,这时,就需要图片预加载。当然这种做法实际上牺牲了服务器的性能换取了更好的用户体验。
图片懒加载(缓载):延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的访问数据库或延迟访问数据库的次数,因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。
预加载与懒加载的区别之处:
两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预载则会增加服务器前端压力。
使用图片懒加载需要安装插件 ...
首先声明一下,一定要分清什么是站点配置文件,什么是主题文件,比如我在F盘新建我的博客文件夹,名称为blog,那么站点配置文件的路径为F:/blog/_config.yml,而你的主题配置文件路径为F:/blog/themes/matery/_config.yml。
修改主题的基本信息123456789#这是根目录下的配置文件信息title: 过客~励む #这是网站标题subtitle: 励む #这是网站副标题subtitle# 下面两个description,keywords,需要填上,如果想让搜索引擎收录,这个做SEO优化必不可忽视的两个属性description: 专注于Web,分享生活,分享知识 #网站描述keywords: [HTML, CSS, JavaScript, JQuery, React, Vue.js等] #网站的关键词author: YangAir #作者,文章版权所显示的language: zh-CN #网站语言,不填写,默认为英文timezone: #时区,可以不填写
修改主题的logo图和favicon图标打开你的主题配置文件,找 ...
转自:🇺🇸English Document | 国内访问示例 (http://blinkfox.com) | Github 部署演示示例 (https://blinkfox.github.io) | QQ 交流群1(已满): 926552981 | QQ 交流群2(推荐): 971887688
这是一个采用 Material Design 和响应式设计的 Hexo 博客主题。
主题特性
简单漂亮,文章内容美观易读
Material Design 设计
响应式设计,博客在桌面端、平板、手机等设备上均能很好的展现
首页轮播文章及每天动态切换 Banner 图片
瀑布流式的博客文章列表(文章无特色图片时会有 24 张漂亮的图片代替)
时间轴式的归档页
词云的标签页和雷达图的分类页
丰富的关于我页面(包括关于我、文章统计图、我的项目、我的技能、相册等)
可自定义的数据的友情链接页面
支持文章置顶和文章打赏
支持 MathJax
TOC 目录
可设置复制文章内容时追加版权信息
可设置阅读文章时做密码验证
Gitalk、Gitment、Valine 和 Disqus 评论模块(推荐使用 G ...
Hexo博客
未读Github账号的注册打开Github 官网首页,点击右上角的Sign Up ,然后在出现的页面上填写你的相关信息,进行注册:
验证完成后,点击Next:Select a plan,会出现如上图的验证界面,同理,只需要将其中的动物调整为正向显示即可。接着会出现下图的界面,选择Free,下方的两个选项可选可不选,点击Continue继续:
这时Github会给你发一封邮件,验证一下即可,验证过后才可以创建库。
验证完成后,开始创建库,如下图所示,仓库名创建格式必须为:<用户名>.github.io,Description为描述仓库,自定义写,填写必要的描述,也可不填。勾选Initialize this repository with a README点击Creat repository进行创建。
然后就会出现如图所示的界面,即仓库创建成功!
Github Pages的创建 我们来测试一下,点击Create new file,出现如下界面,然后命名文件名为index.html,在填写如图的内容,再点击Commit new file,即创建成功,然后打开一个新的 ...
Hexo博客
未读转载此文章前,请先联系作者,经作者同意后再转载,并请注明原文链接和作者,整理这些不容易,最终版权归作者所有,谢谢合作!
前言你了解Hexo吗? Hexo是一个静态博客框架,基于Node.js,将Markdown文章通过渲染引擎,生成一个静态网页,再结合Git命令(ssh),Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
几个月前偶然间了解到了Hexo这个静态博客网站,很适合那些喜欢写作的朋友们,最重要的是它是免费的,里面有许多的博客主题模板,这些主题都是一些很牛的大佬们开发的,而且设计的主题都很棒,让我很心动,心动不如行动,于是开始整理搭建属于自己的博客。直到今天,这中间经历了许多的坎坷荆棘,我将我的博客搭建的流程分享出来,能为那些博客小石榴们提供一些帮助吧,如果有错的话,请给我留言,我会及时修改,废话不多说,直接上教程。
如果下面的教程有错误之处,请在评论区留言,收到后,我会尽快修改,谢谢支持!
博客环境搭建本文系统环境信息:Win10专业版,64位(10.0 版本1 ...
Hexo博客
未读前言给大家推送一波福利,新版本的Markdown写作利器——Typora,集成了PicGo服务,文章插入图片即可通过PicGo服务上传到图床内。废话不多说,直接开门见山!
如果软件下载比较慢的话,我放在了网盘上,方便大家下载,如果你在主题交流群内,可以到群文件内下载,群号:1065359092.
typora传送门,密码:69jb
picgo传送门 ,密码:69jb
第一步安装PicGo软件,接着图床的搭建,并进行相关的配置,详细步骤我就不多说,请移步我的另外两篇博文:
注意:下面博文讲解的是基于Gitee和Github图床的搭建
https://yafine-blog.cn/posts/15cb.html
https://yafine-blog.cn/posts/eb3a.html
第二步注意:PicGo软件的版本要求2.2.0及以上
打开PicGo软件的设置界面,进行Server的设置:
PicGo设置 -> 设置Server,开启Server,监听地址不用进行更改,监听端口的值设置为36677,这个值的获取在Typora软件中,下面会提到:
第三步注意:T ...
之前讲到过使用PicGo+Github来搭建免费图床,今天来讲讲使用PicGo+Gitee来搭建图床,但有一点需要注意,就是码云仓库容量的限制。有社区版和企业版分别,如下表:
功能特性
社区版
企业版
使用场景
开源项目
个人私有仓库
免费版
协作开发
总计协作人数
不限
≦ 5 人
≦ 5 人
20 ~ 100 人+
仓库总容量
5G
5G
5G
20 ~ 100G
单仓库大小
1G
500M
500M
1 ~ 3G
单文件大小
50M
50M
50M
100 ~ 300M
附件总容量
3G
3G
3G
10 ~ 50G +
开始搭建新建图床仓库打开码云官方网站,进入你的个人仓库界面,新建仓库,如何新建仓库的详细步骤我就不说了,相信搭建都会,直接上一张图,图中有文字说明:
然后点击创建即可。
设置私人令牌看图中指示操作即可
设置 -> 私人令牌 -> 生成新令牌
提交后,会提示你输入密码进行验证,验证成功后,会有提示框,提示框中的内容即为私人令牌。先复制保存,下面要用到。
配置Gitee图床
首先就是需要软件Pi ...
Hexo博客
未读开始搭建首先看一看matery主题原有的相册效果吧,在个人页面内:
这种相册适用于展示少量的图片,如果用来展示数量较多的图片,或者是展示自己生活旅行的摄影的话,效果就不太好了,原因如下:
展示图片需要在主题配置文件下,一个一个的添加,太麻烦。添加配置看下图:
另外就是在这个关于我的页面来说,页面比较长,效果不好。
废话不多说,直接上教程。
新建相册目录执行下面的命令:
1hexo new page galleries
然后到站点根目录的source目录下找名称为 galleries 的目录,打开目录下的 **index.md ** 文档,在原有基础上添加一下配置:
12type: "galleries"layout: "galleries"
紧接着,在主题配置文件的menu属性添加关于相册的菜单
123相册: url: /galleries icon: fas fa-image
如果需要添加到二级菜单,添加格式为:
123- name: 相册 url: /galleries icon: fas fa-image
添 ...
Hexo博客
未读本文讲解的图床是基于Github的,采用jsdelivr cdn进行加速,上传工具采用的是PicGo。
我就不说什么是图床,图床的作用,有哪些图床了,可以自行百度。我直接开始搭建教程。
新建一个GitHub仓库
新建一个存储仓库,具体细节我不在说了,仓库名自定义。
生成token
直接上图,图上有详细步骤。
最后点击Generate token即可看到显示的token页面,它只会显示一次,关闭页面后再打开这个页面就不会显示了。复制token值粘贴到文本文档中,先保存下来,后面配置PicGo要用到。
配置PicGo
首先下载安装PicGo,图片上传工具PicGo下载地址:https://github.com/Molunerfinn/PicGo/releases
如果下载速度非常慢的话,备用地址:传送门 密钥:n5wu
下载完成后进行安装,安装完毕后开始配置,先上图:
设定仓库名:这个是刚刚第一步所新建仓库的名称,我的为Yafine-imgs,此处填写格式username/repo。
设定分支名:master,采用默认分支即可
设定Token: ...
Hexo博客
未读CDN加速
CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。——百度百科
放在Github的资源在国内加载速度比较慢,因此需要使用CDN加速来优化网站打开速度,jsDelivr + Github便是免费且好用的CDN,非常适合博客网站使用。
首先新建GitHub仓库
本地新建一个文件夹,文件夹名称自定义,然后进入文件夹,在文件夹内依次执行下面的命令
123git initgit remote add origin 你新建仓库的HTTP或者SSH地址链接git pull origin master #将仓库拉取到本地文件夹
接着把你要上传的文件放进这个文件夹内(可以多层目录)
注:jsDelivr不支持加载超过20M的资源
然后再依次执行下面的命令:
123git add . #(.表示所有的)git comm ...