作者:我财我乐汽车869 | 来源:互联网 | 2023-06-16 10:23
最先之前写的个人博客确切有点太丑了,近来重写了一番。做了挪动端适配,增加了文章标签以及做了相册等功用。看着很不错。talkischeap,showmeyoucode。一图胜千言,且
最先
之前写的个人博客确切有点太丑了,近来重写了一番。做了挪动端适配,增加了文章标签以及做了相册等功用。
看着很不错。talk is cheap,show me you code。一图胜千言,且看以下结果:
个人博客地点:http://www.baijiawei.top
项目GitHub地点:https://github.com/bjw1234/bl…
自定义滚动条
现在关于自定义滚动条支撑状况比较好的也就只要Chrome了,所以针对Chrome有必要把滚动条的款式革新一下。
虽然有jQuery插件能够完成各个浏览器下的自定义滚动条款式,然则因为全部项目都是用原生JS开辟完成的,
未运用jQuery,所以也没必要为了一个滚动条引入一个库和一个插件了。
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/*不要程度滚动条*/
::-webkit-scrollbar:horizontal {
height: 0;
}
/*骨干款式*/
::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, .1);
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*鼠标悬浮时骨干款式*/
::-webkit-scrollbar-track:hover {
background-color: rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*滑块款式*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(0, 0, 0, .3);
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*鼠标悬浮时滑块款式*/
::-webkit-scrollbar-thumb:hover {
border-radius: 10px;
background-color: rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
:hover::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}
/*上端按钮款式*/
::-webkit-scrollbar-button:start {
width: 10px;
height: 10px;
background: url(./image/scrollbar_arrow.png) no-repeat 0 0;
}
::-webkit-scrollbar-button:start:hover {
background: url(./image/scrollbar_arrow.png) no-repeat -15px 0;
}
/*下端按钮款式*/
::-webkit-scrollbar-button:end {
background: url(./image/scrollbar_arrow.png) no-repeat 0 -18px;
}
::-webkit-scrollbar-button:end:hover {
background: url(./image/scrollbar_arrow.png) no-repeat -15px -18px;
}
webkit供应的另有更多的伪类,能够定制更雄厚滚动条款式。
细致内容参考:https://www.webkit.org/blog/3…
页面顶canvas动画
这里给出原作者的地点:
https://codepen.io/iamfronten…
早先想着本身完成这个结果,也许写完以后发明人家的背景是用SVG做的,
另有一点点随风飞舞的赶脚,干脆就直接用的人家的代码。
^_^||
道理:经由过程window
对象上的requestAnimationFrame
要领不停地重绘canvas,完成小星星,流星等的位移、透明度的变化。
写一点伪码:
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
// 初始化
init();
// 绘制
draw();
function draw(){
// 清空画板
ctx.clearRect(0,0,canvasW,canvasH); // 绘制小星星
for(var i = 0; i stars[i].move(); // 位移
stars[i].changAlpha(); // 转变透明度
stars[i].drawSelf(); // 画出本身
stars[i].checkBound(); // 边界检测
}
// 绘制流星同理
... // 不停地重绘
window.requestAnimationFrame(draw);
}
// 星星类
function star(){
// 许多本身的属性
.... this.move = function(){}
this.changAlpha = function(){}
this.drawSelf = function(){}
this.checkBound = function(){}
}
假如流星涌现的几率是3%
,我们怎样精准的掌握它呢?
// 猎取几率(Boolean)
function getProbability(percent) {
return Matth.floor(Math.random()*100+1) }
getProbability(3); // 当返回true的时刻再去增加彗星
流通的返回顶部
道理:也是运用requestAnimationFrame
这个函数不停转变scrollTo
(滚动到)的位置。
运用setTimeout
函数调解容器的scrollTop
值虽然也能完成返回顶部的结果,但没有上面这类要领流通。
// 返回顶部
function smoothScroll() {
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll > 0) {
window.requestAnimationFrame(smoothScroll);
window.scrollTo(0, currentScroll - (currentScroll / 5));
}
}
关于文章标签
一篇文章
对应多个标签
。
一个标签
也能够被多篇文章运用
。
典范的多对多关联。
后端数据库运用的是MongoDB
,完成这类多对多关联的数据表索引有点不知从何下手的觉得。
干脆就运用了子文档的体式格局完成如许的结果。
(ps: 假如您有思绪的话,愿望能够不吝赐教,非常感谢。
)
const mOngoose= require('mongoose');
const Category = require('./categorySch');
// Article
module.exports = new mongoose.Schema({
// 关联字段
children: [ // 子文档标签数组
Category
],
// 作者
user: {
type: mongoose.Schema.Types.ObjectId,
ref: 'User'
},
// 内容
content: {
type: String,
default: ''
}
....
});
运用这类体式格局增加、查询标签都很轻易。
// 将用户提交的标签用空格切分返回一个对象
let categoryArr = category.split(' ').map(item => {
return { category_name: item };
});
// 将用户提交的数据到场数据库
return new Article({
title: title,
// 直接就能够增加
children: categoryArr,
}).save();
// 查询就更简朴了
article.children;
在模板中运用一个for
轮回就能够直接衬着数据:
{% for category in art.children %}
{{ category.category_name }}
{% endfor %}
至于依据标签查询对应文章,早先想着向后端通报标签的ID,然则,发明每篇文章下相同类别的标签对应的ID差别。
(这就是运用子文档的价值
),干脆就直接通报标署名了,虽然说如许的体式格局不文雅,但也能完成想要的结果了。
前一条和后一条数据
let prev = function () {
return Article.find({'_id': {'$gt': id}}).sort({_id: 1}).limit(1).then(result => {
data.prev = null;
if (result.length >= 0) {
data.prev = result[0];
}
});
};
let next = function () {
return Article.find({'_id': {'$lt': id}}).sort({_id: -1}).limit(1).then(result => {
data.next = null;
if (result.length >= 0) {
data.next = result[0];
}
});
};
相册功用开辟
图片存储运用了图床(途经图床),后端只需要存储markdown
语法的字符串,
前端就能够剖析成img
标签,照样蛮好用的。
末了
至于像是服务器搭建、模板引擎、markdown语法高亮、分页等功用就不反复说了。
细致内容能够看我之前的文章。
https://segmentfault.com/a/11…