博客转型升级

之前写的个人博客确实有点太丑了，最近重写了。做了移动端适配，增加文章标签，制作相册等功能。看起来不错。谈话很便宜，给我看你的代码。一图顶一千字，看效果如下：个人博客地址：http://www.baijiawei.top项目GitHub地址：https://github.com/bjw1234/bl...目前自定义滚动条usedforcustomscrolling只有Chrome有很好的bar支持，所以需要为Chrome修改滚动条的样式。虽然在各个浏览器下都有jQuery插件可以完成自定义滚动条样式，但是由于整个项目都是用原生JS开发，没有使用jQuery，所以不需要引入一个库和一个插件滚动条。::-webkit-scrollbar{宽度：10px；高度：10px；}/*不要水平滚动条*/::-webkit-scrollbar:horizo??ntal{height:0;}/*骨干风格*/::-webkit-scrollbar-track{背景色：rgba(0,0,0,.1);-webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);}/*鼠标悬停时的树干样式*/::-webkit-scrollbar-track:hover{background-color:rgba(0,0,0,.2);-webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);}/*滑块样式*/::-webkit-scrollbar-thumb{border-radius:10px;背景色：rgba(0,0,0,.3);-webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);}/*鼠标悬停时的滑块样式*/::-webkit-scrollbar-thumb:hover{border-radius:10px;背景色：rgba(0,0,0,.4);-webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);}:hover::-webkit-scrollbar-thumb{border-radius:10px;背景色：rgba(0,0,0,.4);-webkit-box-shadow:inset1px1px0rgba(0,0,0,.1);}/*顶部按钮样式*/::-webkit-scrollbar-button:start{width:10px;高度：10px；背景：url(./image/scrollbar_arrow.png)不重复00；}::-webkit-scrollbar-button:start:hover{背景：url(./image/scrollbar_arrow.png)no-repeat-15px0;}/*底部按钮样式*/::-webkit-scrollbar-button:end{background:url(./image/scrollbar_arrow.png)no-repeat0-18px;}::-webkit-scrollbar-button:end:hover{背景：url(./image/scrollbar_arrow.png)no-repeat-15px-18px;}webkit提供了更多的伪类，可以自定义更丰富的滚动条样式详细内容参考：https://www.webkit.org/blog/3...页面上方的canvas动画在这里给出原作者地址：https://codepen.io/iamfronten...一开始想着自己实现，结果写完之后发现别人的背景都是SVG做的，有点飘飘然的感觉，干脆直接用了他们的代码。^_^||原理：通过window对象上的requestAnimationFrame方法，不断重绘画布，实现小星星和流星的位移和透明度变化。写一点伪代码：letcanvas=document.getElementById('canvas');letctx=canvas.getContext('2d');//initializeinit();//drawdraw();functiondraw(){//清空画板ctx.clearRect(0,0,canvasW,canvasH);//绘制小星星for(vari=0;i0){window.requestAnimationFrame(smoothScroll);window.scrollTo(0,currentScroll-(currentScroll/5));}}关于文章标签一篇文章对应多个标签。一个标签也可以被多篇文章使用。典型的多对多关系。后台数据库用的是MongoDB，不知道从哪里入手来实现这种多对多关系的数据表索引。只需使用子文档即可实现此效果。（ps：如果大家有想法，希望大家多多指教，万分感谢）constmongoose=require('mongoose');constCategory=require('./categorySch');//Articlemodule.exports=newmongoose.Schema({//关联字段children:[//子文档标签数组Category],//作者user:{type:mongoose.Schema.Types.ObjectId,ref:'User'},//content内容:{type:String,default:''}....});通过这种方式添加和查询标签很容易。//将用户提交的标签用空格拆分，返回一个对象letcategoryArr=category.split('').map(item=>{return{category_name:item};});//添加用户提交的数据user到数据库returnnewArticle({title:title,//可以直接添加children:categoryArr,}).save();//查询更简单article.children;在模板中使用for循环直接渲染数据：{%forcategoryinart.children%}{{category.category_name}}{%endfor%}标签查询对应的文章。一开始想着把标签的ID传给后端。但是我发现每篇文章下同一个分类的标签对应的ID是不一样的。（这是使用子文档的代价），干脆直接传标签名，这种方法虽然不优雅，但也能达到预期的效果。前后数据letprev=function(){returnArticle.find({'_id':{'$gt':id}}).sort({_id:1}).limit(1).then(result=>{data.prev=null;if(result.length>=0){data.prev=result[0];}});};letnext=function(){returnArticle.find({'_id':{'$lt':id}}).sort({_id:-1}).limit(1).then(result=>{data.next=null;if(result.length>=0){数据.next=结果[0];}});};相册功能开发图片存储使用图床（通过图床），后端只需要存储markdown语法的字符串，前端可以解析成img标签，还是非常好用的。最后，关于服务器搭建、模板引擎、markdown语法高亮、分页等功能，不再赘述。详见我之前的文章。https://segmentfault.com/a/11…