Preface#
In the previous article, we have already introduced how to build your own Typecho blog (Build a Typecho Blog in 30 Minutes). After the blog is built, it comes with a default theme. If you don't like it, you can find and replace it with other theme templates.
This article will introduce how to change and customize themes, and share a few excellent themes that I have collected with everyone.
Changing Themes#
- Download the theme file, usually in a compressed package, and extract it to get the theme folder.
- Upload the theme directory to the usr/themes folder in the Typecho website directory.
- Go to the website backend: Dashboard -> Appearance, and enable the theme.
Some themes have some dependent plugins to achieve richer functionality. Similarly, upload the plugin folder to usr/plugins, and go to the Dashboard > Plugins to enable the plugin.
Refresh the website, and you will see the new theme.
Theme Modification#
Setting Appearance#
Dashboard -> Appearance, "Setting Appearance" option. Inside are customization options corresponding to the theme, such as website logo, function switches, site description, thumbnail settings, etc., mainly for some personalized and functional settings of the theme.
image.png
Custom Modification#
"Edit Current Appearance" customizes and modifies the theme style. The template files listed here are related to the theme. If there is no file that needs to be modified, you can directly modify it in the theme folder.
image.png
Tips#
- Some themes need to change the theme folder to a specified name to take effect. Pay attention to the theme instructions.
- After customizing and modifying the theme style, if there is no change after refreshing the website, try refreshing the CDN cache or the browser's local cache.
Theme Recommendations#
Here are all free themes.
Pinghsu#
Introduction: Card-style design, simple and beautiful.
- Demo
- Address: https://github.com/chakhsu/pinghsu
image.png
Material#
Introduction: Material Design theme for Typecho. Flat design theme.
- Demo
- Address: https://github.com/idawnlight/typecho-theme-material
image.png
NexT.Pisces#
Introduction: Typecho port of the Hexo theme NexT.Pisces, based on zgq354's NexT.Mist modification.
- Demo (This is for Hexo, the effect is similar)
- Address: https://github.com/newraina/typecho-theme-NexTPisces
image.png
Maupassant#
- Introduction: Minimalist responsive theme.
- Address: https://github.com/pagecho/maupassant
image.png
Optica#
Introduction: Single-column fresh theme Optica.
- Demo
- Address: https://github.com/iduzui/optica
image.png
ArmX#
Introduction: Responsive pure front-end structure, independent of third-party front-end frameworks; comes with a music player, full-site pjax; supports third-party login; supports CDN acceleration, thumbnail generation, etc., with complete functionality.
- Demo
- Address: https://github.com/natcube/ArmX
image.png
Affinity#
Introduction: Three-column card-style layout. Transplanted from Ghost, the original address: https://github.com/Showfom/Affinity.
- Demo
- Address: https://affinity.419.at/2017/07/28/affinity.html
image.png
Junichi#
Introduction: Lightweight, no front-end framework; responsive design.
- Demo
- Address: https://github.com/siseboy/junichi
image.png
Conclusion#
Typecho themes are still very rich, and many of them are written by bloggers for their own use and then shared with netizens. If you like, you can choose to purchase paid themes or sponsor theme authors.
Series Tutorials:
- Build a Personal Typecho Blog in 30 Minutes
- Step-by-Step Guide to Building a WordPress Personal Blog
- Recommended Excellent Plugins for WordPress
- 9 Beautiful WordPress Themes for Personal Blogs