如何才可以變成有個性的博客?

MANESEC on 2025-04-08

image

上面的博客是不是醜爆了?

很顯然,肯定不夠醜! 那麽有沒有更加醜的界面呢?有,那就是自己寫

就是隨便寫寫都可以寫的很醜,這才符合我的風格。。。。。。。。。

(此時思考的我就突然展現出一個很醜的UI)

Init a nuxt project

(是時候展現醜化的技術了!)

既然要簡單一點,那就隨便找個框架吧,這裏就隨便的找一個nuxt好了:

image

cmd
$ pnpm create nuxt maneblogui

image

然後就開始增加一些常見的模塊:

image

嗯,增加完成之後就可以開始來隨便寫代碼了:

image

運行后得到:

image

一個爛到爆的畫面:

image

Writing a cryto plugin

欸??突然想起來htb的一些文章需要加密

image

但是nuxt原生并不支持加密,所以隨便寫個插件,寫個加密的算法(aes):

image

得到:

image

看起來不錯。

Add code block for 3 buttons

渲染的模塊准備好了,給我印象最深刻的就是Elon Musk AI的三個按鈕:

image

對,這三個按鈕是我覺得最優雅的設計,於是:

image

現在我也有了。

Add image zoom support

然後就是圖片,正常點擊後都需要放大圖片,所以網上找了一下隨便套了一個框架:

image

Add code block copy support

然後就是一些大佬們的博客,很喜歡在代碼的部分設置點一下就複製,那我也來寫一個:

image

點擊後如下:

image

感覺好像少了些什麽,那就來點字體:

Add lists support

em, bug 掉了,元素少了很多,列表元素沒有渲染:

image

那就來隨便寫寫一個列表渲染模塊,現在列表工作了:

image

啊,爽:

image

對了,還有導航欄,Mane 思考中... 3600s ...

Dont put too much button, because no mane style design

想到博客應該不需要太多按鈕,因爲經常點擊的就幾個按鈕,要不就是 Writing 要不就是 返回按鈕,然後就是 回到最頂

所以這三個按鈕是經常用的,但是三個按鈕就放在那裏有點死板。欸?蘋果的靈動島?爲什麽我會想到這個?那就順便來點蘋果風:

image

完成:

image

遇到有必要的情況下這些按鈕才會出現,當然按鈕越少越好,畢竟可以懶得寫一些代碼,所以:

  • 滑倒下面的時候才會顯示回到頂部的按鈕:嗯,很合理。
  • TOC 按鈕經常會被點擊來看目錄,但需要等組件渲染完成才可以得到完整的目錄,所以前幾秒沒有辦法渲染 toc,那就只能隱藏起來等出現的時候再點:嗯,也很合理。
  • 然後就是返回按鈕,這樣也方便瀏覽其他文章:這太合理了。

所以就變成了下面:

image

Page just feeling like ...

但是顯示文章的地方好像少了些什麽。。。

image

那就抄一抄模仿一下把他加上去,畢竟隨便寫的博客不需要那麽認真:

image

主頁也抄抄:

image

Solve color Issues

由於什麽都是黑色的,所以有遇到了另一個問題:配色的問題。

我根本沒有藝術細胞我根本沒有藝術細胞我根本沒有藝術細胞我根本沒有藝術細胞我根本沒有藝術細胞我根本沒有藝術細胞我根本沒有藝術細胞我根本沒有藝術細胞我根本沒有藝術細胞我根本沒有藝術細胞我根本沒有藝術細胞我根本沒有藝術細胞我根本沒有藝術細胞我根本沒有藝術細胞

竟然不會配色,那就跳出這個框架去思考。

既然是寫文章,那和寫肯定有關係。想到了寫,那就想起來小時候被墨水支配的恐懼。

所以心想用墨水的顔色應該不會差到哪,那就谷歌搜索一下墨水的顔色,看到:https://pens.biolab123.com/?p=38&cpage=1

image

看起來還不錯,那就這樣吧,有墨水的味道,有小時候的味道。

然後就是我經常用的搜索頁面:

image

照搬!

Writing crypto page

等下,htb的文章需要被加密,但是我還沒寫加密前的界面,既然需要解鎖,那就肯定是 文字 + 輸入框 + 按鈕:

但是文字我又懶得寫太多的東西,那就。。 QAQ

由於輸入框有文字提示,所以順便解決了提示的問題。

然後就是按鈕,一個大大的解密有點土,那就隨便來點簡單的 icon 就算了,最後變成:

image

Add toc support

這樣就完成了,之後部署到開發的服務器,然後發給了一個好朋友:

image

啥?居然少了他最愛的TOC?那就。。。。

image

然後隨便寫一下代碼,得到:

image

oh yeah! so f***ing nice!

Quick to support SEO

對了要讓搜索引擎搜索到我的博,那就隨便做一下SEO

image

最後

image

總結

有個性的博客 = 代碼拿起來隨便寫寫,畢竟隨便寫寫才有你那獨特的風格。

由於這是一個有個性的博客,所以源代碼并不會開源。

Copyright © 2016-2026 manesec. All rights (include theme) reserved.