摘要:開始之前寫的個人博客確實有點太丑了,最近重寫了一番。一圖勝千言,且看如下效果個人博客地址項目地址自定義滾動條目前對于自定義滾動條支持情況比較好的也就只有了,所以針對有必要把滾動條的樣式改造一下。典型的多對多關(guān)系。
開始
之前寫的個人博客確實有點太丑了,最近重寫了一番。做了移動端適配,增加了文章標(biāo)簽以及做了相冊等功能。
看著很不錯。talk is cheap,show me you code。一圖勝千言,且看如下效果:
個人博客地址:http://www.baijiawei.top
項目GitHub地址:https://github.com/bjw1234/bl...
自定義滾動條目前對于自定義滾動條支持情況比較好的也就只有Chrome了,所以針對Chrome有必要把滾動條的樣式改造一下。
雖然有jQuery插件可以完成各個瀏覽器下的自定義滾動條樣式,但是由于整個項目都是用原生JS開發(fā)完成的,
未使用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); } /*鼠標(biāo)懸浮時主干樣式*/ ::-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); } /*鼠標(biāo)懸浮時滑塊樣式*/ ::-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提供的還有更多的偽類,可以定制更豐富滾動條樣式。
詳細(xì)內(nèi)容參考:https://www.webkit.org/blog/3...
這里給出原作者的地址:https://codepen.io/iamfronten...
起初想著自己實現(xiàn)這個效果,大概寫完之后發(fā)現(xiàn)人家的背景是用SVG做的,
還有一點點隨風(fēng)飄動的趕腳,索性就直接用的人家的代碼。 ^_^||
原理:通過window對象上的requestAnimationFrame方法不斷地重繪canvas,實現(xiàn)小星星,流星等的位移、透明度的變化。
寫一點偽碼:
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.length; 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(){} }
如果流星出現(xiàn)的概率是3%,我們怎么精準(zhǔn)的控制它呢?
// 獲取概率(Boolean) function getProbability(percent) { return Matth.floor(Math.random()*100+1) < percent; } getProbability(3); // 當(dāng)返回true的時候再去添加彗星流暢的返回頂部
原理:也是使用requestAnimationFrame這個函數(shù)不斷改變scrollTo(滾動到)的位置。
使用setTimeout函數(shù)調(diào)整容器的scrollTop值雖然也能實現(xiàn)返回頂部的效果,但沒有上面這種方法流暢。
// 返回頂部 function smoothScroll() { var currentScroll = document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll > 0) { window.requestAnimationFrame(smoothScroll); window.scrollTo(0, currentScroll - (currentScroll / 5)); } }關(guān)于文章標(biāo)簽
一篇文章對應(yīng)多個標(biāo)簽。
一個標(biāo)簽也可以被多篇文章使用。
典型的多對多關(guān)系。
后端數(shù)據(jù)庫使用的是MongoDB,實現(xiàn)這種多對多關(guān)系的數(shù)據(jù)表索引有點不知從何下手的感覺。
索性就使用了子文檔的方式實現(xiàn)這樣的效果。
(ps: 如果您有思路的話,希望可以不吝賜教,非常感謝。)
const mongoose = require("mongoose"); const Category = require("./categorySch"); // Article module.exports = new mongoose.Schema({ // 關(guān)聯(lián)字段 children: [ // 子文檔標(biāo)簽數(shù)組 Category ], // 作者 user: { type: mongoose.Schema.Types.ObjectId, ref: "User" }, // 內(nèi)容 content: { type: String, default: "" } .... });
使用這種方式添加、查詢標(biāo)簽都很容易。
// 將用戶提交的標(biāo)簽用空格切分返回一個對象 let categoryArr = category.split(" ").map(item => { return { category_name: item }; }); // 將用戶提交的數(shù)據(jù)加入數(shù)據(jù)庫 return new Article({ title: title, // 直接就可以添加 children: categoryArr, }).save(); // 查詢就更簡單了 article.children;
在模板中使用一個for循環(huán)就可以直接渲染數(shù)據(jù):
{% for category in art.children %}
至于根據(jù)標(biāo)簽查詢對應(yīng)文章,起初想著向后端傳遞標(biāo)簽的ID,但是,發(fā)現(xiàn)每篇文章下相同類別的標(biāo)簽對應(yīng)的ID不同。
(這就是使用子文檔的代價),索性就直接傳遞標(biāo)簽名了,雖說這樣的方式不優(yōu)雅,但也能實現(xiàn)想要的效果了。
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]; } }); };相冊功能開發(fā)
圖片存儲使用了圖床(路過圖床),后端只需要存儲markdown語法的字符串,
前端就可以解析成img標(biāo)簽,還是蠻好用的。
至于像是服務(wù)器搭建、模板引擎、markdown語法高亮、分頁等功能就不重復(fù)說了。
詳細(xì)內(nèi)容可以看我之前的文章。
https://segmentfault.com/a/11...
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/19327.html
摘要:開始之前寫的個人博客確實有點太丑了,最近重寫了一番。一圖勝千言,且看如下效果個人博客地址項目地址自定義滾動條目前對于自定義滾動條支持情況比較好的也就只有了,所以針對有必要把滾動條的樣式改造一下。典型的多對多關(guān)系。 開始 之前寫的個人博客確實有點太丑了,最近重寫了一番。做了移動端適配,增加了文章標(biāo)簽以及做了相冊等功能。看著很不錯。talk is cheap,show me you cod...
摘要:近期,又迎來了一次重大升級,主要包括如下重點功能新增華南區(qū)域節(jié)點擴(kuò)展包,推出合規(guī)解決方案,新增中國內(nèi)地體驗版。后續(xù)將進(jìn)一步支持回源多區(qū)域部署等功能,助力政府金融企業(yè)快速安全的實現(xiàn)改造。Web系統(tǒng)承載著各企事業(yè)單位的門戶、注冊登錄、業(yè)務(wù)執(zhí)行等職責(zé),很容易遭受各種類型的惡意流量攻擊,影響應(yīng)用可用性、損害安全性或消耗過多的資源,UCloud Web應(yīng)用防火墻UWAF則可以有效保護(hù)用戶的 Web 應(yīng)...
摘要:關(guān)于中國制造業(yè)轉(zhuǎn)型升級,業(yè)界一直存在兩種常見誤區(qū)。因此,對于中國制造業(yè)的轉(zhuǎn)型升級,該當(dāng)摒棄局部優(yōu)化的技術(shù)改造思路,無論是消費(fèi)品還是工業(yè)品生產(chǎn)制造,只需從市場需求生產(chǎn)選購的供應(yīng)鏈全體效益角度動身,才可能探究出正確的路徑 互聯(lián)網(wǎng)對制造業(yè)的影響不該當(dāng)以割裂的視角單獨來看,而該當(dāng)放在整個產(chǎn)業(yè)互聯(lián)網(wǎng)化...
摘要:微信小游戲推出已有幾天了,這個功能對小程序和小游戲的推動影響不用多說,大家趕緊摩拳擦掌往上擼就可以了。打飛機(jī)小游戲使用無模式創(chuàng)建一個微信小游戲后可以看到官方,其中入口文件和配置文件和。 微信小游戲推出已有幾天了,這個功能對小程序和小游戲的推動影響不用多說,大家趕緊摩拳擦掌往上擼就可以了。關(guān)于如何開發(fā)官方文檔已經(jīng)說明了,這篇則是對官方的打飛機(jī)demo一些小改造。 開發(fā)預(yù)備式 下載最新版...
閱讀 3717·2021-10-11 10:59
閱讀 1301·2019-08-30 15:44
閱讀 3479·2019-08-29 16:39
閱讀 2888·2019-08-29 16:29
閱讀 1800·2019-08-29 15:24
閱讀 808·2019-08-29 15:05
閱讀 1264·2019-08-29 12:34
閱讀 2302·2019-08-29 12:19