Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【心得与个人理解】这个主题是怎么来的 #47

Open
HeskeyBaozi opened this issue Jun 5, 2018 · 4 comments
Open

【心得与个人理解】这个主题是怎么来的 #47

HeskeyBaozi opened this issue Jun 5, 2018 · 4 comments
Labels

Comments

@HeskeyBaozi
Copy link
Owner

HeskeyBaozi commented Jun 5, 2018

本质上,这个主题实际上是我学习Vue框架时期的练手项目。
开源的博客项目很多很多,为什么选择了Hexo

首先,hexo提供的generator机制可以使我获取hexo渲染后的生页面(raw html page),并且以json格式存储。解决了 数据怎么来?从哪来? 的问题。

其次,hexo提供的__config.yml配置文件也可以记录在json格式文件里。上述两者就成为了SPA的应用源。我部署在Github Page上的网站请求的,就是静态json文件。

而且Vue也很棒,响应式数据比不可变数据好多了吧!?

满足了需要,对吧?但是,实际上这种做法在16年就过时了,而且,性能奇差无比

因为对于这种博客页面,做成SPA反而是没有必要,并且拉低了性能、降低了速度。本质上,渲染直出的静态页面,比客户端渲染一层要快得多的多,因为直接渲染的静态页面根本没有客户端逻辑。

改进方案有吗?有。本地拿到所有的路径列表,根据路径列表在本地实现渲染,也即是常说的服务端渲染。但是,如果这样,使用Hexo就没有意义了。因为我还能自己根据主题自己定制全部的markdown渲染需求,而且自己做可以做得更好。

所以我使用了更快的解决方案,迁移到了vuepress,写了vuepress-theme-lite这个主题,用法根据vuepress官方走,直接npm install vuepress-theme-lite less less-loader,在配置文件下主题设为lite即可。

我写这篇文章是安利vuepress?不是,我想说的是一个更综合的事情:当你想开发一个项目,首先问问自己这个项目是否有存在的必要?或者说,这是否能称作一个“项目”?或者说这只是一个充当以后面试项目经验积累的急救品。这又扯到当前前端市场供需情况了。我个人认为,至少在这个项目中,写界面、写事件处理是体力活,数据设计模块设计是脑力活。不要以为写个主题就高大上了,世界上永远有人比你做的更多写得更好,比如我的actions写的很烂,这是在我使用mobx-state-tree后才知道不可变数据和响应式数据还有中间态——快照(Snapshot)。很多其他知识也是在我后来学习更加深入理解到的。这个项目,如果你fork后并想要学习,我的建议是看两点即可:Vue如何与TypeScript整合,Hexo的数据如何整合到Store。当然,我也会继续维护这个项目,开源了自己就得负起责任。

最后也想说,高斯模糊真的很酷

@UkiyoESoragoto
Copy link

UkiyoESoragoto commented Aug 2, 2018

高斯模糊真的很酷 (๑•̀ㅂ•́)و✧
然后为了这个主题从hugo又跑回hexo来
_(:з」∠)_

@LaysDragon
Copy link

LaysDragon commented Sep 24, 2018

我發現無倫怎麼設置permalink都是沒有效果的,看了一下,才發現原來是用上了vue製作的佈景主題,怎麼說,感覺很驚訝因為這把hexo原有的永久連結相關機能給覆蓋了,感覺很有意思的設計方式,不過可惜了這樣就失去了永久連結自定義的功能了。
然後我也想說高斯模糊真的很酷XD

@javascriptbug
Copy link

很棒哟 思路也很棒

@TieWay59
Copy link

TieWay59 commented Sep 3, 2019

我是从hexo的博客样式例子那边找到这的。(因为头像是神威脑公)
想弱弱地提一下,毛玻璃的特效可以再搞搞,因为一般地调用模糊渲染会使得图片边角露白。
我查阅了你那一块样式的代码,把inset属性去掉,加上一点padding就可以去掉了。
但是我猜您可能是想要这个类似内发光的效果,我只是觉得高斯模这个特性有点异常。所以不开issue来提这个问题啦!
图片
我参考了下面的博客。
https://www.cnblogs.com/ivan5277/p/10007273.html

最后也想说,神威头像真的很酷。

UPD:
这是我自己之前模仿windows的毛玻璃设计:
图片

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants