The theme of koi, which lasted more than a month, has finally been completed. In 2019, the Z-blogPHP Koi theme template (Koilee · Kaiyun Koi) was launched, and some modules transplanted WP themes. At present, the theme has been improved, simple and grand, suitable for personal blog and article writing. Let's introduce the theme first.

User Center Adaptation Tutorial Address: https://www.liblog.cn/blog/430.html

Demo station     More works     Topic Update Log (24/03/28)

Theme related functions:

• 1. The theme has its own SEO settings (article page, list page, tab page, etc.), theme settings - function settings - open custom SEO

• 2. Articles can be customized to display thumbnails;

• 3. Perfect support for mobile terminal adaptation;

• 4. Adapt to Baidu bear palm (theme setting - function);

• 5. Customized css style function. If you need some styles, you can customize and modify them in the background, which is convenient and fast, and is not affected by theme updates, once and for all.
  

• 6. The home page adopts the dual layout of CMS and Blog mode, and the background switches freely. It is built with Html5+CSS3, with a reasonable layout, and is suitable for Baidu Bear Palm. Js+CSS has no encryption, and can be re developed after purchase (problems such as wrong version of the website and inability to open due to the re development are not within the after-sales scope, and technical support can be paid!).
  

• 7. The template adopts image delay loading technology, visual scrolling and other related special effects. Remove special effects that occupy high CPU and are useless.

• 8. The bottom adopts wavy background pictures, which are simple but naughty (I'm very happy about it).

• 9. The CMS layout on the home page is basically displayed in the form of customized articles, giving you maximum freedom! (Detailed introduction will follow)

• 10. Blogger introduction can open a random display sentence, and look down if you won't set it.

The code of the navigation secondary menu is as follows: (module management - navigation bar, copy and paste directly, and change the name and link into your own)

 <li class="menu-item-has-children"> <a href="/">First level menu</a>   <ul class="sub-menu dropdown-menu"> <li><a href="/">Secondary menu</a></li> <li><a href="/">Secondary menu</a></li>   </ul> </li>

Previous updates:

---、 Update the method of calling hot reviews on the sidebar. The original method is all articles on the website, and the most eight articles are called for comments. In this way, the hot reviews may not change for several months or a long time. After the update, a fixed number of days are used. The number of days for this hot review is the same as the number of days for hot reviews on the sidebar. The setting method is as shown in the figure: hot articles and hot reviews within 90 days.

---Optimize the background logo, ico icon and web background image interface mode, and delete the previous fixed upload mode. Here is a special note: because of the interface mode, there may be no logo, ico icon and wrong background image bug on the website after the old customer updates. You just need to change to the corresponding website after the update, as shown in the figure: delete according to the normal logic“ _example ”It is OK, for example:“ /zb_users/theme/koilee/style/images/logo.png ”This will be normal.

---Delete the information interface on the top of the banner on the commodity page and call the category directly name and SEO Description , the background picture calls the first picture of the first article (the logic of selecting pictures is unified with the list)

--Add a new category list template, category management - category editing, select "imglist" for the template, and submit the article template without modification.

--. Delete the original external link pseudo static switch and add the external link transit page switch

--Add the function of thickening and changing color of the category list title (RGB code is used for changing color. If you don't understand Baidu, you can also fill in English color words directly, such as blue).

--. Modify the comment display. All members are displayed as "iron powder" nicknames. The function of imitating microblog is to add the blogger's nickname (if the comment ID and article ID want to use, the blogger will be displayed, and the administrator will not be displayed uniformly).

--WeChat display is added to the customer service information on the right, and the QR code is autobiographical in the background.

--The microblog display function (configured by the theme and user center) is added to the sidebar blogger information, and the QR code display is added.

--. The bottom scrolling announcement calls "recommended articles" (article recommendation function, if there is no recommendation, it will not be displayed, and the user-defined thumbnail needs to be enabled to be effective.)

--Add the function of scrolling announcements at the bottom of the page. When the customized announcement is closed, 6 popular articles within 90 days will be displayed. If the customized announcement is enabled, the customized content will be displayed instead of articles.

--. Add an advertising code interface between classification lists, and enable it in the background (League ads and html codes are acceptable without restrictions ）

--Add an advertising interface on the commodity page. The location of the interface is the same as the "advertising above the CMS module on the home page" ”Explain that if you open this advertising space, the commodity page template will also open this advertising space, and the displayed ads are the same as the ads above the CMS module on the home page.

--Fix the bug that the sidebar of the search page does not display the article data.

--. New article list and new window function（ Background -- Theme setting -- Function setting -- Open a new window for articles ）

--. New article recommendation function (new article, right, set as recommend That's it, User defined thumbnail function needs to be enabled ）。

--. Cache the data called in the sidebar to reduce the number of database requests (relatively speaking, there is a loss effect)

--The sidebar cache includes, Article recommendation, hot review article, recently published, popular article, popular tag If you want to regenerate the cached txt file, you need to edit any article, and submit it directly to update the cached txt file without modification.

--The latest messages in the sidebar and the reader wall need to comment on any article to generate a new cached txt file.

Custom announcement format:

 <li><a href="/" target="_blank" title="This is an advertisement that can be set in the background">Announcement: This is an announcement that can be set in the background</li> <li><a href="/" target="_blank" title="You can also turn off custom announcements to display the most popular articles in the past month.">Announcements: You can also turn off custom announcements to display the most popular articles in the past month. "</li>

Let's see the effect: user website

97 request queries before the subject does not use cache

56 times after the theme is enabled

--. Fix the problem of 1 pixel white edge on the top.

--Add the function of closing the sidebar button of the website (you need to turn on the user-defined thumbnail, and turn on and off the sidebar on the right when creating or editing articles)

--Optimize some functions and codes of the sidebar and sidebar module, and delete duplicate content.

--. Because WeChat failed to improve its display effect, the WeChat column function was temporarily canceled, and a perfect scheme was added later. I'm sorry for this (if you don't want to cancel WeChat, this version can be updated without any need.)

--. Fix the bug of online update theme file error.

--. Optimize the jump page source code.

The effect of updating the announcement module (original WeChat mode) is as follows:

Setting method:

The left menu, page management, create a new page, and set the "alias" at the bottom (for example: notice ）Then submit on the right.

Return to theme configuration - home page settings (as shown in the figure)

PS: What is set in the red box is the announcement mode, which depends on the pseudo static setting. Some may need to fill in IDs. The most reliable setting method is to find the newly created page in page management and click the paperclip icon in front, as shown in the figure below

Then copy the link on the new window page, as shown in the figure (the address in the red box is filled in the theme setting)

When WeChat is released, the text select text , click the top right of the editor“ Text mark ”, drop-down, select“ WeChat template ”OK, then below Set summary information Just do it.

After setting, look down to find the WeChat custom summary and set the summary information displayed on the home page, as shown in the figure:

--、 A new 360 search plotting function is added, which uses the normal article mode and is automatically enabled without manual setting.

The new message wall page is set as follows:

Page management --- self created title, self written body, random alias (access link) settings, and then select the template on the right“ readers ”

Finally submit, and then OK.

The call data is: the top 100 users who have the most comments within a year (365 days) (may not be perfect at present, but it does not affect the use, and can not be opened if not necessary)

design sketch:

--The list of subcategory columns to which the site classification belongs. If there is no subcategory under the classification, it will not be displayed. chart

--. Too many recommendation tags on the optimization article page display faulty BUGs.

--. Optimize the style sheet of the jump page, and add an advertising space (advertising settings, advertising code at the top of the classification list)

--Repair the bug that some videos on the mobile end cannot adapt.

--The mobile terminal navigation menu adds a member login function, and the login link is set to（ Theme configuration - Basic configuration - Top login function - Member login/registration link ）

--. Fix the bug of disordered article archiving style (the method is as follows)

Page management: create a new page, fill in the title of the article, and write something about the content (it will not be displayed anyway), then fill in the alias of the archived article: "archive" (customizable), and finally select the template "sitemap" on the right. After submitting, no picture will be set.

----After the sharing code is closed, the right alignment of rewards is changed to center alignment, as shown in the figure.

----Optimize the calling method of homepage friendship links, friend link pages and titles. (Originally fixed, it is now modified to the original module name.)

Module management, find friendship links and icon collections, and then modify the name:

----When the screen size is updated to 1200 pixels, the image and text on the right side of the carousel display the misplaced BUGs,

----. When the article has no pictures and does not use custom thumbnails, the default picture is changed to randomly displayed pictures (1-9 randomly displayed pictures)

----. Adapt the independent identifications of ordinary members and permanent members in the user center (), as shown in the figure:

Permanent member display---- Ordinary members (week, month, year)---- Administrator (not adapted):

---- ----

PS: Set by yourself if necessary, open the theme configuration, basic setting - custom css (open on the right):

code:

 .single-avatar.vip3 {     display: inline-block;     padding: 4px;     width: 70px;     height: 70px; Background: url (your domain name/zb_users/theme/koilee/style/images/avatar_admin. png) - 1px 0 no repeat; }

----The CMS module on the home page adds switches and simplifies some PHP interface codes.

----. In view of the article copyright problem, optimize the copyright function of the theme template. Look at the picture:

Original renderings:

Reprint renderings:

The opening mode is changed to: theme configuration - function setting:

There is a reprint interface under the title of the new article (editing article). Only when the copyright function is enabled and the author fills in the article can the reprint effect picture be displayed, otherwise the original effect will be displayed.

----, optimize some articles to display bugs beyond the screen.

----. Update the likes style of list articles. The prerequisite is enabled (like plug-in: New article like development version ）

----. Adapted product purchase template (user center needs to be opened, Plug in ID: LayCenter , purchase function), which can realize online purchase.

Setting method: user center (ID: LayCenter) - sales configuration - purchase button (as shown in the figure): .buybtn

----. Adapt to the collection function of user center articles (the front and rear colors are different, and they are already differentiated. If you don't like this color, you can customize the css in the background of the theme to modify it);

Setting method: User Center - General Configuration, Favorites Button - Add Based on Element (as shown in the figure): .ds-reward-stl

----Optimize the overall effect of the page and the adaptive display effect, modify the mobile navigation to the left menu, repair the overlap bug of the three-level navigation menu, and optimize the background color of the three-level menu.

----. Some special effects of pictures were added, and the function of jumping to the bottom of the page on the right was added.

----Repair the disorder of comment wall pages.

----, Modify the spacing between site borders.

----, user comments, the latest message and other sidebars add the V icon for new users.

--Add custom interface code at the bottom of the page (relevant code can be placed, such as JS).

--Optimize the Baidu bear palm code interface. The bear palm code interface is basically finished. The original API interface has failed and replaced with "search results mapping". Turn on if necessary, and turn off if unnecessary.

--. Repair the three-level menu style code.

--Optimize the display effect of mobile comment avatar.

--Add the writing method of navigation three-level menu (text and link can be replaced automatically)

 <li class="menu-item-has-children"> <a href="/">First level menu</a>   <ul class="dropdown-menu sub-menu"> <li><a href="/">Secondary menu</a></li>     <li> <a href="/" class="menu-th3">Secondary menu</a>       <ul class="sub-menu dropdown-menu"> <li><a href="/">Three level menu</a></li>       </ul>     </li>   </ul> </li>

New Product Page

It can be used with the cataimg list, View Demo , two methods.

The settings are as follows:

First: To publish (edit) an article, click the template on the right and select "itheme", as shown in the figure:

Second: If you don't want to select it every time, select the left menu, category management - edit category - select the article category template "itheme", as shown in the figure:

Then save. All articles under this category will use the "itheme" product page template. (If it is not adopted, the template needs to be modified manually, refer to First Method), Oh, by the way, the price interface of the commodity page needs to be enabled so that the customized thumbnail can be seen. Otherwise, the browsing volume will be displayed.

--. Repair the bug with error in the bottom of the cms template on the home page.

--Modify some CSS style sheets and optimize the dislocation of the mobile adaptive part.

--. Add the lightbox effect of the article page (I don't know what the lightbox effect is, click the article image to know).

--Add the switch function of cms module on the homepage of cms, and modify the position of cms module.

--. Modify several bugs (I have fixed all the bugs that you can find or that you feedback, but they are not listed one by one. If the update has no effect, please press CTRL+F5 to force a refresh. If it is not easy to use, clear the CDN cache. If it is not easy to use, please find me alone... Maybe I forgot.)

--. Fix the bug that the keyword highlighting on the search page conflicts with the search record in the Kefeng User Center (thanks exemplary )

--The H2-H5 label style sheet is optimized. (Don't come to me again and say that H2 is gone. I'm fed up with it. Here, I'll update it for you.)

--. Optimize navigation bar spacing.

--Delete and optimize the search box to reduce the space occupied in the navigation bar.

--. Add a V mark for the new comment user.

--. Fix the bug that rewards WeChat and Alipay in the wrong location.

--Optimize mobile terminal adaptive display effect.

--. Fix the JS error caused by Baidu bear palm.

--. Simplify JS and reduce unnecessary loading.

--. Fix the bug that the comment on the article page cannot be closed and the previous and next articles have errors.

--. Bugs that cannot display comment content after repairing comments.

--. Add a sidebar, the author introduces the WeChat module. (Custom Font icon)

--Add a custom background picture.

--. Modify the logo size width.

--. Optimize the background effect followed by the navigation bar.

First introduce the theme background: (basic settings)

After buying a theme, you should set it first Classification Template : (Figure below) If not set, then Open the category to display the home page.

Set the classification template (otherwise, no matter which classification page is opened, it will be the first page),

Enter the background, manage by category, modify the category,

Template selection: catalog (default) or cataimg (effect picture below). The default template of this classified article is single (no need to modify), as shown in the figure below:

Rendering (catalog template):

Horizontal rendering (cataimg template):

Background introduction and preview of theme:

The basic configuration is very simple. It is clear at a glance. It is to set the keywords, description, website title, LOGO and other regular operations of the blog. There should be no special instructions here, so it is omitted.

Oh, by the way, the top login has been changed to the navigation bar, which is simple and beautiful. If you open the QQ login or enabled user center, you can fill in the login or registration link directly. You can decide whether to open it or not. If you have the switch, you can close the user center that is not enabled (like my blog).

Home page setting:

The home page settings are also relatively simple, so let's not mention the obvious ones. Let's introduce the corresponding interfaces of the CMS module.

Carousel settings:

By default, the image size of the webcast is 831 * 380 (pixels). There are four articles on the right. If you open Baidu's information stream ads, you have to reduce one article. If you want to set other numbers of articles on the right, the height of the webcast on the left should also increase or decrease, depending on the specific situation. If you do not move the code to view the height, you can set the default quantity. In order to avoid the difference in height between the left and the right, which will affect the beauty and layout of the website.

Just fill in the article ID directly. Here are two functions:

The first is that if the webcast (slide show) on the home page is closed, then this is also closed.

The second one is the advertising code, which many people may not understand. To explain, people do not know whether to use the advertising alliance. If there is no advertising, they do not need to read it. If Baidu and other alliance codes are opened, then you can get the advertising alliance code, set the information flow, configure the advertising style (generally set the left figure and the right text), and then copy the code, Put it in the interface as shown in the figure, and turn on the switch on the right side.

Go down to continue setting:

Selected readings on the corresponding homepage:

It's very simple here. Set the selected reading guide, and close it if you don't need it.

Then is the number of article calls module:

The number of recent articles at the bottom of the selected guide on the home page. If you want to set several articles, you can directly fill in the number, such as 8, which means calling the latest 8 articles.

The second is the sidebar. First, the calling order of the next sidebar: the menu on the left, module management, find the modules created by the theme and plug-in, and then drag the modules you want to display to the right.

home page Shown is（ Default Sidebar ）， Category page (including label, author, time and other pages) Shown is（ Sidebar 2 ）， Article page Shown is（ Sidebar 3 ）， Search Page Displayed（ Sidebar 4 ）

After the introduction of the sidebar, it is very simple to call the popular tags (quantity) in the sidebar when you come back. You can fill in the quantity as many tags as you want to display in the sidebar;

Then is the number of popular days (article recommendations and popular days are displayed by TAB switch, and dragged directly（ Article recommendation/popular articles ）OK). For example, if you want to show the hottest topics in a month, you can fill in 30 (365 days a year, I know this is nonsense, but I still have to write it out).

Finally, there are article recommendations. You can fill in the displayed article ID directly. For example, (1,1,1,1,1,1) numbers are separated by commas (,) in English, and the maximum number is 9.

Further down:

Corresponding to:

Fill in the ID of the calling column. (For example, two columns or four columns) What, do you not know the classification ID? Well, look at the picture:

Continue on:

Corresponding homepage:

This is simple. You don't need to fill in the classification ID, just select it directly, but you need to fill in the number of calls. The default is 10.

Continue on:

Corresponding homepage:

Yes, here we have to write the ID of the calling category again. In fact, I tried to write it as a direct selection mode, but it has not yet succeeded, so we have to manually fill in the classification ID. If we don't know the classification ID, see the figure above, and then fill in the number of articles called (4 articles are displayed for each category by default).

CMS is now set up. Let's look at the others:

This is to set the information related to the sidebar blogger, such as the blogger's ID, background image, text hyperlink, etc. You can also edit the author's information, or turn on the right side to display a sentence randomly.

To enable random display, you must have a text tutorial as follows:

Create a new txt text document, Named as: hitokoto.txt (It cannot be modified at will, otherwise it cannot be displayed normally)

Then fill in the text you want to display, such as:

 A person will meet about ten thousand people in his life, and the probability of two people falling in love is. So you don't love me, I don't blame you. No matter what you see in the past, please don't lose yourself. No matter what you become, I will be your partner. You are always alone, but you can make others not lonely. It's really difficult to change others' minds, but it's easier to change yourself. You can release the kite line at any time, but don't expect me to come back. If you can't do it, you will die. But if you win, you can live. If you don't fight, you can't win.

In this way, one sentence for each natural paragraph is uploaded to“ /zb_users/theme/koilee/include/hitokoto/ ”This directory can be opened;

If there is garbled code, which may be caused by different text codes, you can use the documents on this website: https://www.liblog.cn/zb_users/theme/koilee/include/hitokoto/hitokoto.txt
Download to the local, modify the content, and upload FTP to the relevant directory.

There is nothing left to say, such as article copyright, code sharing (you need to open the article for appreciation first), etc.

Advertising settings:

There is nothing to say. Fill in the advertisement code and open it. Different advertisements are displayed for PC and mobile terminals. If left blank, they will not be displayed.

Function settings:

• Carousel (if you close the articles on the right side of the volume, they will also be closed, which is enabled by default).
  

• Whether to enable CMD mode (default).

• Visual scrolling effect (on by default).

• Customized thumbnails (set the thumbnails displayed by the category. If the article has no pictures, it will give priority to display customized pictures. If it has no customized pictures, it will display random pictures. If the article has no picture mobile terminal, it will not display, and it is off by default).

• Whether to enable the user-defined SEO plug-in (articles, lists, and tags can be set with different keywords and descriptions, which are closed by default).

• New window link (click any link to open a new window, which is closed by default)

The theme is permanently updated and maintained for free to ensure that everyone can use it normally!