寒武

1. Introduction#

I have been tinkering with MixSpace and Shiro for a while now, and I must say that this open-source blog system is very powerful. The modern interface and comfortable color scheme are very satisfying to me. However, there are also some drawbacks, such as the lack of support for directly rendering HTML code, which can be achieved in Typecho.

::: grid {cols=2}

:::

When I was tinkering with my Typecho site before, I referred to the tutorials of @林木木 -> Hi, Memos and Leonus -> Implementing Moments and Checklist Functionality Based on Memos to build a moments page using Memos and implement single-page moments functionality through API interfaces. Due to the inability of the Mixspace system to directly render HTML, my memos cannot be used on this site anymore. 😭😭😭 Compared to the native "Thinking" page of the system, I still prefer the powerful functionality of Memos.

Currently, I plan to update both sites in parallel, and as for the content, I will just copy it over. The Typecho site is the root domain, and the Shiro site is the www domain. Maybe in the near future, I will stop using the Typecho site. It's just a bit of a pity that I just finished tinkering with the Typecho site two months ago. || But who made me a lazy person? 🤣||

2. Shiro Customization#

Alright, let's get to the point. The content of my customization this time includes:

1. Changing the global font to Hongmeng font
2. Replacing blog keywords
3. The blogger is customizing in the upper left corner

1. Changing the global font to Hongmeng font#

Changing the font is a bit tricky because I didn't understand the project structure of Shiro before. After cloning the project and searching for keywords using VScode, I found the CDN font file originally included in the project. After finding a random Hongmeng font CDN online, I just modified the original reference file. Here's how:

Font file path: Shiro-main\src\styles\webfont.css
Main text font modification path: Shiro-main\tailwind.config.ts

::: grid {cols=2}

:::

2. Replacing blog keywords#

I won't go into detail here. Please search for keywords in the project folder and replace them with your own favorite sentences.
For example, I replaced the links page of the blogger with this.

3. The blogger is customizing in the upper left corner#

This feature is very interesting. It is also the most attractive feature of this blog system for me. It can use WebSocket to synchronize the blogger's activities on the site in real time. The official website explains it like this:

How about that? It's fun, right? And through some software in the Mixspace ecosystem, the real-time activities of people with permissions can be published on the site. I would like to thank @天翔 for his contribution.

This feature makes the image of a stranger blogger on the Internet suddenly become vivid and lively. For example, the blogger is chatting in a group, the blogger is using VSCODE.

::: grid {cols=3}

:::

This feature relies on the reporter-assets folder in the project repository, which maps to another repository by @Innei.

If we need to customize the content of the "Blogger is customizing" section or add software, we need to first fork the repository, then replace the reference links in the Forked Shiro project in the following paths. Then, go to the project folder and make the necessary changes to the related text or software icons. I won't go into detail about this.

::: grid {cols=2}

:::

3. Conclusion#

That's all for the customization of Shiro today. There are still many unfamiliar areas of this blog that I need to explore slowly. Thanks to all the experts for their help.

This article is synchronized to xLog by Mix Space.
The original link is https://www.xiaozhengyang.com/posts/life/Shiro