搭建个人博客

Github Pages 和 Hexo 搭建自己的独立博客

一图流实现

打字机效果

Hexo + Butterfly 一些常见问题

Algolia搜索系统

页面布局优化

右边按钮阅读进度

文章三栏

为文章封面图片
要为每一篇文章的栏目配置图片,需要在文章的top_imge和cover标签传一个图片的url链接,注意不是图片链接
url链接通过上传至图床获取
文章的 markdown 文档上,在 添加 ,并填上要显示的图片地址。Front-mattercover
如果不配置 ,可以设置显示默认的 cover。cover
如果不想在首页显示 cover, 可以设置为 。false

自定义字体

修改头像及网站图标
改网站图标:修改主题文件找到favicon,修改本地的图片
改头像:修改主题配置文件找到avater,修改图片url

双栏修改

加载动画

遇到问题:按照流程,发现存在半屏加载页面不消失的情况,于是换用4.4版本的步骤,解决了上述问题。所以butterfly版本只最为参考,实际还是按照实际情况判断选择哪种方式

Hexo+github+netlify快速搭建

github action自动部署

博客迁移到新电脑

hexo中插入pdf

1-下载插件

1
npm install --save hexo-pdf

2-建立存放pdf文件夹

在source文件夹下创建一个叫pdf的文件夹,把xxx.pdf文件放在这里

3-引用
在_post文件夹中的xxx.md直接使用

1
{% pdf /pdf/xxx.pdf %}

使用本地图片

  • 修改配置文件_config.yml ,中的post_asset_folder: true,设为true
  • 注意图片文件夹位置,如果是与其处于同一级路径例如:source/_post 与source/_img
    那么要引用同级的img,直接/img/xxx;

windows触控板手势

1
2
3
4
5
6
7
8
9
1.一根手指单击或按压触控板的左下部分:鼠标左键
2.两根手指单击或按压触控板右下部分:鼠标右键
3.双指放开或者捏合,即可控制页面的放大和缩小
4.双指上下滑可以让页面垂直滚动
5.三指单击,可以调出搜索框搜索
6.三指左右滑动,可切换不同任务界面
7.三指向下滑动,可以最小化所有软件
8.三指向上滑动即可恢复原样
9.三指再向上滑动可以调出任务视图

search grammar

1
2
3
4
5
6
7
8
9
10
1."限定关键词"
2.intitle:限定标题
3.alintitle:限定标题1 限定标题2
4.intext:"限定文章内容"
5.xxxx inurl:限定网站关键词
6.xxxx imagesize:限定图片大小(1280x1920)
7.xxxx filetype:限定文件类型(pdf/ppt)
(注意:英文冒号,引号,冒号后不需加空格,多个限定词之间空格隔开)
if you want to search a spicial website or plugin , you can search “best xxxx sites /best xxxx plugin” directly

picture mend

分辨率、像素、尺寸

1
2
3
4
5
6
照片宽度(英寸)x300(dpi)=横向像素(分辨率)
照片高度(英寸)x300(dpi)=纵向像素(分辨率)

300dpi意思是,每英寸(2.54cm),有300个像素点。

所以知道横纵像素(分辨率),再除以dpi,就可以得出实际打印的照片尺寸。