Typecho Theme Pinghsu
Pinghsu is a Typecho theme which is based on front-end performance optimization, while giving consideration to design aesthetics and visual communication. The theme is named after the last word of the author's name and his girlfriend's name in Hong Kong style English. It is a struggle between Hsuping and Pinghsu, and finally Pinghsu, meaning that everything is Ping before Hsu, that is, to listen to her girlfriend.
Download address
https://github.com/chakhsu/pinghsu
Topic Preview
https://www.linpx.com
Theme highlights
- Page preloading and DNS pre resolution ensure extremely fast access speed
- No JQuery, no front-end framework, no webfont
- Almost zero code redundancy, and almost every code sentence is meaningful
- HighlightJS code highlights, supporting 22 kinds of programming codes
- Responsive design, support tablet and mobile phone, and access experience is even better than desktop
- Support image CDN image and multiple article thumbnail settings
- Support three columns and single column selection on the home page, article title and color block
- Support article directory, related articles and mathematical formula rendering
- Support article personalized logo setting, 10 logo options
- Support personal social button and social sharing
- XSS detection is added to the subject settings, and comment submission is prevented from triggering multiple times
- There are more highlights to be found~
More previews
Home page - three columns | Home page - single column |
---|
| |
Article content page - title | Article Content Page - Contents |
---|
| |
Page Content Page | Content page - comments |
---|
| |
Category Page | Template Archive Page |
---|
| |
Search Page | four hundred and four |
---|
| |
Mobile terminal - home page | Mobile terminal - article page | Mobile terminal - classification page |
---|
| | |
Theme Usage
Go to Github to download, click "Download ZIP" to download, unzip and rename the folder as pinghsu
Upload to /usr/themes
, and enable themes
If the theme needs to be updated, download the latest file first, and then overwrite the original file to complete the update. Some newly added functions will not take effect until they are enabled in the background
Note: At present, the theme only passes the test in the development version of typecho, PHP 7.0, and has not been tested too much in other cases
Appearance settings
The appearance settings are mainly divided into four parts, including logo and icon settings, function switches, social button settings, and image CDN images
The precautions for use are clearly written in the settings. If you don't understand something, you can leave a message for me
Here are some additions
- The CDN setting part only tests the 7-N, and theoretically supports CDN with image service
- Create a template archive page. No matter which template is selected, add a custom field
archive
Independent search page
The setting method is shown here: Here
Post Thumbnails
There are four ways to set thumbnails for articles: custom fields thumb
, the first picture in the article attachment, the picture in the article, the default thumbnail
Priority order: custom field thumb ->attachment first picture ->article picture ->default thumbnail ->random picture ->none
The size of the thumbnail should be at least 250px high, and the width should be greater than the height. The recommended height is 400px
Personalized logo
Personalized logo appears on the home page, category page, label page, author page and related articles
The setting method is to fill in custom fields in the article editing. The supported fields are as follows
book
、 game
、 note
、 chat
、 code
、 image
、 web
、 link
、 design
、 lock
Personalized color block
Personalized color patches can only be activated and used when they are opened in the appearance settings. The color patches appear on the home page, category page, tab page, independent search page, etc
The setting method is to fill in custom fields in the article editing. The supported fields are as follows
blue
、 purple
、 green
、 yellow
、 red
Friendly Links
If you want to get the same friendship link page as me, because it is typecho development version, it supports writing in the page <ul><li>
So you can directly <ul>
Inline one class="flinks"
, and then <li>
Insert your friend chain, then
More setup tutorials: Here
Browser compatibility
This... all modern browsers are compatible····
Contributing
All kinds of contributions (enhancements, new features, documentation & code improvements, issues & bugs reporting) are welcome.
We welcome contributions in various forms, including but not limited to optimization, adding functions, documentation&code improvements, and reporting of problems and bugs.
License
Open sourced under the MIT license.
Open source under MIT license.
This article is written by Chakhsu Lau Creation, adoption Knowledge Sharing Attribution 4.0 International License Agreement.
All articles on this website are original or translated by this website, except for the reprint/source. Please sign your name before reprinting.