前言:
想做個(gè)有後臺(tái)編輯功能的個(gè)人網(wǎng)站(類似巴哈小屋擴(kuò)充版),雖然是個(gè)人網(wǎng)站,但擴(kuò)充一下也可以變成論壇啦@@...
主要需求:類似於巴哈小屋有後臺(tái)功能,能po創(chuàng)作、能訪客留言。外加同篇文章能分各語系編輯、能貼上程式碼的文字編輯器。
之前用wordpress搞多語系有點(diǎn)煩,乾脆自己寫一個(gè),還能玩蝦趴特效
原生js方法引入
背後的絲絲作法筆記:連結(jié)
coding math的程式碼:連結(jié)
想要像React 元件那樣使用的話,可以用個(gè)方法包起來:
使用:
跟隨滑鼠:
demo中使用者按滑鼠左鍵加一節(jié),按滑鼠右鍵刪一節(jié)。
[取消瀏覽器滑鼠右鍵跳出的選單]
[區(qū)分按下滑鼠左右鍵]
模糊效果、css變數(shù)
用css宣告變數(shù)作法:連結(jié)
格式:--變數(shù)名稱:值
模糊作法1:用css變數(shù),並透過event修改。
將變數(shù)宣告在(網(wǎng)頁(yè))root,js可以用root.style去取得內(nèi)容。
缺點(diǎn)是套用相同css類別的物件會(huì)一起被模糊:
作法2:不使用css類別,改用inline style並搭配react useState
js的FixedUpdate
例:
js方法執(zhí)行到update(),並在update方法裡面用requestAnimationFrame()傳入update方法。
requestAnimationFrame會(huì)在等待約1/60秒後呼叫update方法,使其變成一個(gè)永動(dòng)loop,類似於unity的FixedUpdate()。
後記:
目前做到多語系文章編輯:
下篇文章大概是講解firebase讀寫rule權(quán)限、react component之類的