寒武

寒武

Shiro魔改日誌

一、前言#

博主折騰 ==MixSpace== 與 ==Shiro== 已經有一段時間了,不得不說這個開源博客系統的功能雀氏很強大,現代化的界面與舒服的配色深得我的滿意。但是說缺點嘛,其實也有,比如說不支持直接渲染HTML代碼,這一點在Typecho中是可以實現的。

::: grid {cols=2}
使用三個感歎號將代碼包裹起來便可以直接在文章中渲染

在 Typecho 獨立頁面渲染後的結果
:::

博主在之前折騰 Typecho 站點時參考==@林木木 ==-->Hi,Memos==Leonus==-->基於Memos實現說說和清單功能。大佬的教程,使用 Memos 搭建了說說頁面,通過 API 接口實現了單頁的說說功能。由於 Mixspace 系統無法直接渲染 html 的問題,我的 memos 在這個站點無法使用了😭😭😭相較於系統原生的思考頁面我還是更喜歡功能強大的 Memos

目前我是打算兩個站並行更新的,內容嘛,也就一併複製好了。typecho 站點是根域名,Shiro 站點是 www 域名,或許在不久的將來我會停用 typecho 站點吧。就是有點可惜了我兩個月前剛折騰好的 Typecho 站點 了。|| 誰讓我是個大懶蛋🤣||

二、Shiro 魔改#

好了,接下來切入正題,博主此次魔改的內容有

  1. ++ 全局更改為鴻蒙字體 ++
  2. ++ 博客關鍵字替換 ++
  3. ++ 左上角博主正在做魔改 ++

1. 全局更改為鴻蒙字體#

字體的更換比較坎坷,因為此前對於 Shiro 的項目結構完全不了解,把項目 clone 下來之後用 VScode 查找關鍵字才找到項目原本自帶的 CDN 字體文件,在網上隨便找了個鴻蒙字體 CDN 之後修改原引用文件就好了,如下

字體文件路徑:Shiro-main\src\styles\webfont.css
正文字體修改路徑:Shiro-main\tailwind.config.ts

::: grid {cols=2}
image

這裡需要注意,在第 198 行的 sans 中要直接把 webfont.css 中的變量名輸入進去,比如我這裡的變量就是 Operator Mono
:::

2. 博客關鍵字替換#

這裡就不在贅述了,自行在項目文件夾中查找關鍵詞,替換成自己喜歡的句子
比如博主的友鏈頁面就替換成了這個

3. 左上角博主正在做魔改#

這個功能很有意思
這也是這個博客系統最能吸引我的一個點,能夠通過WebSocket來實時同步博主在站點的活動,其中官網是這樣解釋的

Note

當你打開這個頁面時,會自動建立 WebSocket 連接,當成功連接後服務器會推送當前瀏覽頁面的人數。
WebSocket 用於通知站點,站長在站點的實時活動,包括但不限於文章的發布和更新。

怎麼樣,好玩吧,而且通過 Mixspace 生態的一些軟件,可以將擁有權限的人的電腦的實時活動公布在站點上。這裡要感謝 ==@天翔== 大佬的貢獻

這個功能讓網絡上蒙著一層面紗的陌生人博主的形象一下子變的鮮活生動起來,比如說博主正在水群,博主正在 VSCODE

::: grid {cols=3}
image

尊嘟很有意思!!

image
:::
而這個功能依賴的就是項目倉庫中的reporter-assets文件夾,這個文件夾是映射 **@Innei** 大佬的另一個倉庫

如果我們需要魔改博主正在做裡面的文章內容或添加軟件的話,需要首先將倉庫 Fork 下來,然後進入自己 Fork 的 Shiro 項目中將以下路徑的引用鏈接給替換掉。然後再進入該項目文件夾把相關的文字或者軟件圖標更改就好了,這一點我就不再詳細展開了

::: grid {cols=2}
src/components/layout/header/internal/Activity.tsx

.gitmodules
:::

三、結束語#

今天對 Shiro 的魔改就先到這裡啦,對於這個博客我還有很多陌生的地方需要慢慢摸索,感謝各位大佬提供的幫助。


🎉🎉🎉撒花🎉🎉🎉

此文由 Mix Space 同步更新至 xLog
原始鏈接為 https://www.xiaozhengyang.com/posts/life/Shiro


載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。