this It's the second WordPress theme I changed. It took me more than half a year to open it. It's a commemoration when I chose to open it on the first anniversary of my blog. From zero technology a year ago to today, the most important thing to thank is the various open source projects and tutorials. I have deeply felt the power of the open source spirit, so this is also a small contribution to the open source community. The theme has been tested, and WordPress can be used directly when it is newly installed. The background setting panel can meet the needs of normal use, without manually modifying the code, This is a demonstration station 。

This topic is based on the Fuzzy Akina Theme Modified Theme Siren Compared with the previous generation, my only contribution is to make their code messy=

GitHub address is at the end of the article (to ensure you see the precautions).

1. Characteristics

Random cover

With an API for returning random images, put the images you want to show in /cover/gallery Medium.

Lazyload

Open source libraries are used jQuery-Lazyload , load pictures on demand, give priority to loading thumbnails or placeholders, and load the original image only when the picture is displayed on the viewport, so as to improve the page loading speed.

In addition, the article list on the home page is designed with an upward appearance effect, which is my most satisfied little trick~

Article cover video

Demo

The video can be set as the cover of the article, which supports Hls streaming video 。 For instructions, see Theme wiki 。

Customized login and background interface

Back end login interface and Dashboard beautification (color scheme Sakura), you can also design your own color scheme (please pay attention to the description under the "background configuration" page), and there is also a front-end login with the help of pjax. The front-end login needs to create a new page (page) with a template.

Support Bilibili emoticon

At the back end, please follow the prompts to switch the background to a bright theme (switch to the profile page), otherwise the comment management page will show an expression ghost.

QQ/Gravatar Head

If the QQ number is entered, the message will pull the QQ picture. If the QQ number does not exist or the email is entered, the Gravatar picture will be pulled. QQ avatar interface and Gravatar image are provided by me.

Commentary illustration

This function supports the selection of interfaces for multiple graph beds. Currently, SM.MS, Imgur, and Chevereto are supported. Please configure the corresponding proxy and API key in the theme settings before use.

be careful : At present, this function requires PHP to enable curl support, and Nginx/Apache needs to allow POST requests.

User UA and IP location

Use pure IP database. By the way, there is also a highly imitated Bilibili hierarchy. I plan to write another headdress module when I have time.

Article Contents

Open source project used tocbot , enter anywhere in the article that needs a directory [toc] Enabled. How to capitalize the first word of an article: put the first word in [begin] and [/begin] between.

Mac style code block

 import banana class Monkey: # Bananas the monkey can eat. capacity = 10 def eat(self, n): """Make the monkey eat n bananas!""" self.capacity -= n * banana.size def feeding_frenzy(self): self.eat(9.25) return "Yum yum"

Code highlighting rendering uses highlightjs 。 The code block can be full screen, have you found it?
Recommended for adoption Markdown syntax Write so that code blocks can be displayed normally. Code highlighting supports more than 20 common programming languages.

Front end theme switch

This part of the function is a bit messy. I plan to refactor it when I have time in the future. You can pay attention to the update of the theme. Please pay attention to the precautions for fonts.

Time axis

Used Shawn Design.

album

be based on fancybox For the photo album function, see Theme wiki 。

Mail Template

Aplayer/HermitX support

Modified APlayer Some styles of, can be used when inserting music in the article Hermit X plug-in unit.

CDN optimization

Because my blog has a large number of daily visits (average daily PV is about 3000), in order to reduce the number of requests and traffic, so as to control the CDN cost (about 0.2 yuan per day), I have targeted CDN optimization: mainly merge requests, and allocate different types of resources to different domain names, which can be adjusted in the background interface. Other resources with relatively fixed content, such as maps and front-end libraries, have been placed jsDeliver On the public library of.

Github Cards

Can be added by short code: [gith u b repo="mashirozx/Sakura"]

Mobile client*

With the help of PJAX asynchronous loading, it is convenient to develop high-performance mobile clients based on WebView. No refresh occurs when switching pages, and the response speed is close to Native. Specific experience My Android client 。

II. matters needing attention

Important ★★:

Please change the folder name back after downloading the theme Sakura , that is, ensure that the topic path is wp-content/themes/Sakura/ 。

Before enabling new themes/plug-ins Backup database It is a good habit. Although I guarantee that the theme cannot damage your data, the data is priceless after all, right?

Recommended plug-ins ☆

Hermit X , Aplayer based player.

Plugins I'm also using

Easy WP SMTP , mail support.
WP Statistics , statistics plug-in, the topic can select its interface for page access count.
Login LockDown , landing attempts are limited to avoid front-end landing blasting.
Wordfence Security Avoid blasting and comment injection. Reminder: The plug-in will record visitor information in the database, and the database volume will increase slightly.
Akismet Anti-Spam , garbage comment filtering.
AMP , generating AMP Page The effect is such , which is conducive to improving Google's ranking.
Autoptimize , page compression.
Glue for Yoast SEO & AMP , AMP enhancement, which needs to be used together with Yoast SEO and AMP plug-in.
WP Super Cache , page caching, automatically generate cached pages for visitors to improve access speed.
Yoast SEO , search engine optimization.

I haven't used other plug-ins, so compatibility is not guaranteed.

compatibility

Server side

WordPress version: 4.8+
PHP version: 7.1+

front end

Compatible with mainstream Chromium core browser and FireFox browser. Incompatible with IE (please turn off IE mode for 360, QQ and other dual core browsers).

Writing Norms

The theme follows the HTML5 specification, and the style of the body part is fully compatible with the standard Markdown syntax, so it is also recommended to cooperate WP Editor.md The plug-in is written using Markdown, refer to Markdown Editor Syntax Guide 。

There is an article in the theme demonstration station Markdown syntax display , the article source code is in here 。

API

The following are the interfaces already included in some topics, without repeated construction:
Cookie：see https://2heng.xin/2018/05/12/add-a-version-control-for-cookies/

More interfaces will be considered later.

III. FAQ

1. Why is the theme of open source different from that of this blog?
My blog also has some personalized content, because not everyone will need it. On the one hand, it affects the performance of the theme. On the other hand, in order to open source, it needs to add switches and options for some parts, which is time-consuming and meaningless. All these content has been removed from the open source theme. If you like, copy f12 randomly, I have no problem~

PS. In fact, the theme of this website has not been updated for a long time, and there are more new functions in the open source theme. (￣▽￣)"

The standard theme is demonstrated in here 。

2. Is the front-end code block/WP 5.3 background broken?
The previously recommended WP Editor.md plug-in has serious compatibility problems in WP5.3. At present, the latest theme has processed the comment part and no longer needs to rely on this plug-in. So if you update to WP 5.3, please disable this plug-in. As for Markdown writing of the text, there is no good solution at present. You can use other Markdown editors to write the text and convert it into HTML, and then paste it into WordPress.

3. The theme setting switch does not take effect?
Click Save once after enabling the theme.

4. Jet lag
A time difference adjustment option is added to the background theme setting interface.

5. Insert a full screen picture?
See Theme wiki 。

6. After using the CDN, the comment location is incorrect?
If CDN is used, please use the configuration file in the WordPress root directory wp-config.php Add this paragraph at the end:

 if (isset($_SERVER['HTTP_X_FORWARDED_FOR'])) { $list = explode(',', $_SERVER['HTTP_X_FORWARDED_FOR']); $_SERVER['REMOTE_ADDR'] = $list[0]; }

Website suggestions are added CDN To avoid exposure of server IP and risk of being attacked; have access to CloudFlare's free CDN 。

7. Compatible with IE and 360 speed browser
The wife of the former is old and does not consider adaptation. However, IE browser can see a friendly pop-up reminder. In the latter case, what can I do if I want to pretend to be a Chrome kernel even though it is an IE kernel?

8. Feature Image
There is a window for setting Feature Image in the background article/page editor. Each article/page needs to be set separately. If it is not set, it is blank by default. This is not a bug, because not every article needs a decoration diagram, Video Tutorials 。

Finally, regarding bug feedback
You can use the The Windows debugging environment here (the theme version is very old, please update it manually) Reveal the problem; If you are willing to help me modify it, please submit it Pull request 。 Unless it is a bug, please do it yourself if it is just a requirement of other styles/functions, but you are welcome to submit DIY content Pull request 。 Other use related questions can be left a message below; WeChat/email private messages are not accepted for subject related issues.

4. Download

Project published in GitHub: mashirozx/Sakura , can be used if the download speed is slow Domestic image , Please submit the Pull Request and Issue to GitHub.

Currently, the theme is being reconstructed. Sakura v3. x is no longer maintained by me. The theme of the refactoring version is packaged in webpack, which is easier to maintain and DIY. The preview of the refactoring project (be sure to read README): https://github.com/mashirozx/Sakura2 。

Theme exchange group: 860262481

There is also a theme branch of the hexo version: honjun/hexo-theme-sakura

Need a server? The minimum price of this company I am using is $3.5/month ($2.5 version does not have IPv4). The following invitation link can get a $10 reward~

If you are lucky to adopt my theme, welcome Exchange friend chain 。 If you like it, a reward is also very loud~