this It's the second WordPress theme I changed. It took me more than half a year before and after that. It's a commemoration to choose open source on the first anniversary of my blog. From zero technology a year ago to today, I am most grateful for the various open source projects and tutorials. I deeply appreciate the power of the open source spirit, so this is a small contribution to the open source community. The theme has been tested and can be used directly when WordPress is newly installed. The background setting panel can meet the needs of normal use without manual code modification, This is a demo station

This topic is based on fuzzy in Louis Akina Theme modified theme Siren Obviously, compared with my predecessors, my only contribution is to mess up their code=

The GitHub address is at the end of the text (to make sure you see the note).

1. Characteristics

Random cover map


With an API to return random images, put the image you want to display into the /cover/gallery It's OK.

Lazyload


Open source library is used jQuery-Lazyload , load images on demand, and give priority to loading thumbnails or occupied bitmaps. When images are displayed on the viewer, the original images are loaded to improve the loading speed of web pages.

In addition, the front page article list designed an upward effect, which is one of my most satisfied little tricks~

Article cover video

Demo

The video can be set as the cover of the article HLS streaming video Please refer to Topic wiki

Custom login and background interface



The 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). At the same time, there is a front-end login with pjax. The front-end login needs to create a new page with a template.

Support for bilibilibili expression


Please switch the background to bright theme (profile page switch) according to the prompt at the back end, otherwise the comment management page will show expression ghost animal.

QQ / gravitar head portrait


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

Comment on illustrations


This function supports the selection of multiple map bed interfaces. Currently, sm.ms, imgur and chevereto are supported. Please configure the corresponding proxy and API key in the theme settings before using.

be careful : at present, this function requires PHP to enable curl support, and nginx / Apache needs to allow post requests.

User UA and IP positioning


Use pure IP database. By the way, there is a highly imitated bilibilibili rating system. I plan to write another headdress module when I am free.

List of articles


Open source projects are used tocbot , enter any position of the article where you want a table of contents [toc] Enable. 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 highlight rendering uses highlightjs Code block can be full screen, did you find it?
Recommended for adoption Markdown grammar Write so that code blocks can be displayed normally. Code highlighting supports more than 20 common programming languages.

Front end theme switching


This part of the function is a bit messy. I plan to refactor it later and pay attention to the theme update. Please pay attention to the font.

Time axis


Used Shawn Design.

album


be based on fancybox For the function of photo album, please refer to Topic wiki

Mail template

Hermiter / APX support


Revised APlayer Part of the style, the article insert music can be used Hermit X plug-in unit.

CDN optimization

Because my blog has a large number of visits every day (PV 3000 or so per day), in order to reduce the number of requests and traffic and control the cost of CDN (about 0.2 yuan per day), CDN optimization is targeted: mainly to 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 put into the jsDeliver On the public library.

Github Cards

It can be added by short code: [Gith] u b repo="mashirozx/Sakura"]

Mobile client*

With the help of pjax asynchronous loading, it is easy to develop high-performance mobile clients based on WebView. When switching pages, there is no refresh, and the response speed is close to native. You can experience it My android client

2. Precautions

Important

Please change the folder name back to Sakura In other words, ensure that the topic path is wp-content/themes/Sakura/

Plug in before enabling new themes Backup database It's a good habit. Although I guarantee that the subject can't damage your data, after all, the data is priceless, right?

Recommended plug-in

Hermit X , player based on aplayer.

I'm also using the plug-in

Easy WP SMTP , mail support.
WP Statistics , statistics plug-in. The topic can select its interface to count page access.
Login LockDown The landing attempt is limited to avoid the front landing blasting.
Wordfence Security To avoid blasting and comment injection. Reminder: the plug-in will record the visitor information in the database, and the database volume will increase slightly.
Akismet Anti-Spam , spam comment filtering.
AMP , generate Amp page The effect is such , which helps to improve Google's ranking.
Autoptimize , page compression.
Glue for Yoast SEO & AMP , amp enhanced, need to be used with yoast SEO and amp plug-in.
WP Super Cache , page cache, automatically generate cached web pages for visitors, and improve the access speed.
Yoast SEO , search engine optimization.

I haven't used any other plug-ins. I don't guarantee compatibility.

compatibility

Server side

WordPress version: 4.8+
PHP version: 7.1+

front end

Compatible with mainstream chrome kernel browser and Firefox browser. Incompatible with IE (360, QQ and other dual core browsers, please turn off ie mode).

Writing standard

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 in markdown, which can be referred to Markdown editor syntax Guide

There is a theme demonstration station Markdown grammar display The source code of the article is in here

API

The following are some of the interfaces already included in the topics, which do not need to be built repeatedly:
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 this blog?
There are also some personalized content on my blog, because not everyone will need it. On the one hand, it will affect the performance of the theme. On the other hand, it is time-consuming and meaningless to add switches and options for some parts in order to open source. All these contents have been removed from the open source theme. If you like, F12 copy, I don't mind~

In fact, the theme of this site has not been updated for a long time, but there are more new features in the open source theme. ( ̄▽ ̄)"

Standard theme demonstration in here

2. Front end code block / WP 5.3 background crash?
The originally recommended WP editor.md plug-in has serious compatibility problems in wp5.3. At present, the comments section has been processed in the latest version of the theme, so you no longer need to rely on the plug-in, so if you update to WP 5.3, please disable this plug-in. As for the text markdown writing, there is no good solution at present. You can write it with other markdown editors and convert it into HTML, and then paste it into WordPress.

3. The theme setting switch is not effective?
After the theme is enabled, click Save once.

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

5. Insert full screen pictures?
See Topic wiki

6. Is the comment positioning incorrect after using CDN?
If you use CDN, please use the configuration file in the WordPress root directory wp-config.php Finally, add the following paragraph:

 if (isset($_ SERVER['HTTP_ X_ FORWARDED_ FOR'])) {
    $list = explode(',', $_ SERVER['HTTP_ X_ FORWARDED_ FOR']);
    $_ SERVER['REMOTE_ ADDR'] = $list[0];
}

Website suggestions CDN To avoid exposing the server IP and the risk of being attacked; can use Cloudflare's free CDN

7. Compatible with IE and 360 speed browser
The former wife and wife are old, do not consider the adaptation, but IE browser can see a friendly pop-up window reminder. The latter, obviously is the IE kernel, but wants to disguise as the chrome kernel, what can I do?

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 will be blank by default. This is not a bug, because not every article needs a decorator, Video tutorial

Finally, about bug feedback
You can use the The windows debugging environment here (the theme version is very old, please update it manually) If you are willing to help me modify it, please submit it Pull request Unless it's a bug, if it's just the requirements of other styles / functions, please do it yourself, but DIY content is also welcome to submit Pull request Other use related questions can leave a message below; subject related questions are not accepted by wechat / email private message.

4. Download

The ad failed to load. What kind of ad filter plug-in did you use? QAQ *This is an ad automatically recommended by Google AdSense and does not represent our position

The project was published in GitHub: mashirozx/Sakura , if the download speed is slow Domestic image Please submit the pull request and issue to GitHub.

Currently, the theme is being refactored, and Sakura v3. X is basically no longer maintained by myself. The theme of the refactoring version is packaged with webpack, which is easier to maintain and DIY. The refactoring project preview (be sure to read the readme) is as follows: https://github.com/mashirozx/Sakura2

Theme exchange group: 860262481

There are also branch themes: honjun/hexo-theme-sakura

Do you need a server? I'm currently using a minimum of $3.5/month ($2.5 version does not have IPv4), the following invitation link can get a $10 reward~
 WordPress Theme Sakura?

If you are lucky enough to adopt my theme, welcome Exchange friendship chain If you like, it's very loud to give a reward~

Appreciation