关于本站

这个页面会记录新上线的功能以及代码

2022

12-3 上线了自定义文章封面用作背景的功能，并且对字体文件进行了压缩

还感染新冠了。。。
自定义文章背景图片的教程在这篇文章
字体压缩参考的是店长大人的这篇文章
在博客根目录[Blogroot]输入命令

1
2
3
4
5
6
7
8
npm install --global gulp-cli #全局安装gulp指令集
npm install gulp --save #安装gulp插件
npm install gulp-htmlclean --save-dev
npm install gulp-html-minifier-terser --save-dev
# 用gulp-html-minifier-terser可以压缩HTML中的ES6语法
npm install gulp-clean-css --save-dev
npm install gulp-terser --save-dev
npm install gulp-fontmin --save-dev

在博客根目录[Blogroot]下新建gulpfile.js，这里我只压缩了字体文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
//用到的各个插件
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var fontmin = require('gulp-fontmin');
// gulp-tester
var terser = require('gulp-terser');
// 压缩js
// gulp.task('compress', async() =>{
//   gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
//     .pipe(terser())
//     .pipe(gulp.dest('./public'))
// });
//压缩css
// gulp.task('minify-css', () => {
//     return gulp.src(['./public/**/*.css'])
//         .pipe(cleanCSS({
//             compatibility: 'ie11'
//         }))
//         .pipe(gulp.dest('./public'));
// });
//压缩html
// gulp.task('minify-html', () => {
//     return gulp.src('./public/**/*.html')
//         .pipe(htmlclean())
//         .pipe(htmlmin({
//             removeComments: true, //清除html注释
//             collapseWhitespace: true, //压缩html
//             collapseBooleanAttributes: true,
//             //省略布尔属性的值，例如：<input checked="true"/> ==> <input />
//             removeEmptyAttributes: true,
//             //删除所有空格作属性值，例如：<input id="" /> ==> <input />
//             removeScriptTypeAttributes: true,
//             //删除<script>的type="text/javascript"
//             removeStyleLinkTypeAttributes: true,
//             //删除<style>和<link>的 type="text/css"
//             minifyJS: true, //压缩页面 JS
//             minifyCSS: true, //压缩页面 CSS
//             minifyURLs: true  //压缩页面URL
//         }))
//         .pipe(gulp.dest('./public'))
// });
//压缩字体
function minifyFont(text, cb) {
  gulp
    .src('./public/font/*.ttf') //原字体所在目录
    .pipe(fontmin({
      text: text
    }))
    .pipe(gulp.dest('../data备份/css/')) //压缩后的输出目录
    .on('end', cb);
}

gulp.task('mini-font', (cb) => {
  var buffers = [];
  gulp
    .src(['./public/**/*.html','./public/js/runtime.js']) //HTML文件所在目录请根据自身情况修改
    .on('data', function(file) {
      buffers.push(file.contents);
    })
    .on('end', function() {
      var text = Buffer.concat(buffers).toString('utf-8');
      minifyFont(text, cb);
    });
});
// 运行gulp命令时依次执行以下任务
// gulp.task('default', gulp.parallel(
//   'compress', 'minify-css', 'minify-html','mini-font'
// ))
gulp.task('default', gulp.parallel(
    'mini-font'
  ))

每次进行hexo上传时，把命令改为

1
hexo cl;hexo g;gulp;hexo d

11-25 上线了评论区输入提示

感觉自己逐渐变懒…教程可以在这篇文章里看到

11-17 上线了加载页面头像动画和顶部彩色进度条

教程可以在这篇文章里看到

11-16 给字体文件换了个cdn源，给fontawesomeV6换成了国内镜像，继续优化了访问速度

教程可以在这篇文章里看到

11-14 网站左下角增加了Aplayer音乐播放器

用的我自己的歌单，有空写个教程

11-13 本站更名为猪梨村，并且使用了阿里云三个月体验rss存储服务

使用图床服务来加载图片、css、js文件，大大提升了访问速度
有空出个阿里云rss图床加速网站加载的教程

11-13 优化性能

对大量图片资源进行无损压缩，大大优化了访问速度

11-12 上线页脚计时器

页脚计时器：在站点根目录下安装下列插件

1
npm install hexo-butterfly-footer-beautify --save

在_config.butterfly.yml配置下列代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# footer_beautify
# 页脚计时器：[Native JS Timer](https://akilar.top/posts/b941af/)
# 页脚徽标：[Add Github Badge](https://akilar.top/posts/e87ad7f8/)
footer_beautify:
  enable:
    timer: true # 计时器开关
    bdage: false # 徽标开关
  priority: 5 #过滤器优先权
  enable_page: all # 应用页面
  exclude: #屏蔽页面
    # - /posts/
    # - /about/
  layout: # 挂载容器类型
    type: id
    name: footer-wrap
    index: 0
  # 计时器部分配置项（看你喜欢哪个，最好下载下来放到自己的项目中不然会增加我网站的负载）
  # 这是我的
  runtime_js: https://www.zoulicheng.cn/js/runtime.js
  runtime_css: https://www.zoulicheng.cn/css/runtime.min.css 
  # 这是店长的 
  # runtime_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.js
  # runtime_css: https://npm.elemecdn.com/hexo-butterfly-footer-beautify@1.0.0/lib/runtime.css
  # 徽标部分配置项
  swiperpara: 0 #若非0，则开启轮播功能，每行徽标个数
  bdageitem:
    - link: https://hexo.io/ #徽标指向网站链接
      shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #徽标API
      message: 博客框架为Hexo_v6.2.0 #徽标提示语
    - link: https://butterfly.js.org/
      shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
      message: 主题版本Butterfly_v4.3.1
    - link: https://vercel.com/
      shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
      message: 本站采用多线部署，主线路托管于Vercel
    - link: https://dashboard.4everland.org/
    # https://img.shields.io/badge/Hosted-4EVERLAND-3FE2C1?style=flat&logo=IPFS
      shields: https://img.shields.io/badge/Hosted-4EVERLAND-22DDDD?style=flat&logo=IPFS
      message: 本站采用多线部署，备用线路托管于4EVERLAND
    - link: https://github.com/
      shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
      message: 本站项目由Github托管
    - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
      shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
      message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可
  swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
  swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
  swiperbdage_init_js: https://npm.elemecdn.com/hexo-butterfly-footer-beautify/lib/swiperbdage_init.min.js

我把计时器打开，徽标关闭了感觉不好看

11-12 上线评论系统，侧边栏微信图标

评论系统：在_config.butterfly.yml配置下列代码

1
2
3
4
5
6
7
8
9
10
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: Valine,Disqus
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

侧边栏微信图标：在_config.butterfly.yml配置下列代码

1
2
3
4
5
6
7
# social settings (社交圖標設置)
# formal:
#   icon: link || the description
social:
   fab fa-github: https://github.com/zoulicheng || Github
   fas fa-envelope: mailto:575969960@qq.com || Email
   fa-brands fa-weixin: /img/微信.jpg || weixin

11-12 上线正式Waline评论系统

因为Valine,Disqus的评论都不能用，所以用Waline的评论系统

Waline评论系统本地配置：

首先前往 https://twikoo.js.org/ 文档配置相关的云数据库以及部署，然后记住解析的域名(我直接用的网站域名)

在_config.butterfly.yml配置下列代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
  use: Twikoo
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: true # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

twikoo:
  envId: https://xxxx.xxx.xx/  # 你自己解析的域名
  region:
  visitor: false
  option:

–待续–

评论
avatar
puff
我想呼风唤雨
文章
19
标签
9
分类
3
最新文章
无题
无题
白银饭店
白银饭店
SPI接口协议的FPGA实现以及实际通信中的注意事项
SPI接口协议的FPGA实现以及实际通信中的注意事项
复杂干扰条件下水下声学目标检测算法研究
复杂干扰条件下水下声学目标检测算法研究
航迹推算基本原理和算法应用
航迹推算基本原理和算法应用
分类
标签
FPGA butterfly魔改 hexo基础 关于吉他我知道的不多 初始之火 导航技术 我的2022 水声信号处理 运维技术
归档
网站资讯
文章数目 :
19
已运行时间 :
本站总字数 :
16.7k
最后更新时间 :