Preface
I promised a commentator friend to write this custom CSS style to modify the next theme under hexo. I had planned to write a lot of modification methods and blog optimization about the theme under hexo. Because I watched a movie with my friend in the evening, I was not allowed to write so much, so this article just introduces how to write. Some styles have been modified and generated on the blog.
<!--more-->
Debugging tools
Developer Tools under Browser
I believe that the front-end knows that every browser has a debugger tool, which is usually available by F12. Basically, every browser has a similar debugger tool, so I use the debugger tool under 360 browser to demonstrate (in fact, the debugger tool of 360 is the same as that of Google, I just think 360 is more streamlined to use. Smooth point)
Then go on to the main topic.
Considering that some people have not touched the front-end, I will talk in detail. If you have the experience of debugging and developing the front-end, you can quickly find the places you need to pay attention to and the solutions to the problems.
When you open the debugger's tool, you will see what is in the red circle. The source code structure of this website is shown in it. We need to modify anything in this area to see the effect of style modification. Finally, we need to add and modify some of the files in next to achieve our goal.
Header navigation style customization
Locate the corresponding label position
By right-clicking on the review element or selecting with a magnifying glass manually, you can find that the whole head is wrapped in a header and you can clearly see what part of the label is wrapped by putting the mouse on it. Then you can see that the corresponding class on the right side is generated on the label through the development tool. Some style settings.
Find the modification area
By observing the right css style, people with front-end experience can go to diy for themselves, set the value they want, change the layout style and so on. I don't need to say much. Please remember to copy the code after correcting.
Note: From the observation, we can see that the CSS styles on the right side all originate from a main.css.
Add your modified code
Find the corresponding location in your theme folder
Take my path as an example
D:\hexo\blog\themes\next\source\css
There are five folders and a styl e file in it.
Main. style is mainly used to package CSS code output into CSS style main.css file, analysis of its source code.
// CSS Style Guide: http://codeguide.co/#css $scheme = hexo-config('scheme') ? hexo-config('scheme') : 'Muse'; $variables = base $scheme custom; $mixins = base $scheme custom; // Variables Layer // -------------------------------------------------- for $variable in $variables @import "_variables/" + $variable // Mixins Layer // -------------------------------------------------- for $mixin in $mixins @import "_mixins/" + $mixin; // Common Layer // -------------------------------------------------- // Scaffolding @import "_common/scaffolding"; // Layout @import "_common/outline"; // Components @import "_common/components"; // Schemes Layer // -------------------------------------------------- @import "_schemes/" + $scheme; // Custom Layer # This is the key to attention // -------------------------------------------------- @import "_custom/custom";
You can see that the last piece of code is critical in my code, because it's the code that loads and exports custom settings. It can cover the CSS style that has been exported above. That is, you can override the previously generated style without modifying the code under the source file. If you want to change it back, you just need to change _cust. The code in om/custom.style can be deleted.
Note: I do not advocate to modify the source code of the other four files except _custom, which may be difficult to restore later.
Modify the sidebar
Similarly
This modification is similar to that of the head, and you just need to locate the corresponding position to make style modifications, such as modifying the background image, color and so on.
Pay attention to places
When modifying the css, try to write comments, remember to write in modules, not in the head and write other parts of the css, it will not be easy to maintain.
welfare
My CSS
I will give you my own CSS style of open source for your reference.
// Custom styles. //Shadow Style of Home Page Articles .post { margin-top: 60px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 14px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 14px rgba(202, 203, 204, .5); } //Comments on Articles .ds-top-threads li a { padding-left: 5px; transition: border-width 0.2s linear 0s, color 0.2s linear 0s; border-bottom: none; } .ds-top-threads li a:hover { border-left: 8px solid #4d768c; } //Header Style of Home Page .header { background: url("/images/header-bk.jpg"); } .site-meta { float: none; } .menu { float: none; } .logo-line-before, .logo-line-after { display: none; } .menu .menu-item a { font-size: 14px; color: rgb(15, 46, 65); border-radius: 4px; } .site-meta { margin-left: 0px; text-align: center; } .site-meta .site-title { font-size: 28px; font-family: 'Comic Sans MS', sans-serif; color: #fff; } //Home page tail style .footer { background: none; font-size: 16px; } .footer-inner { font-family: 'Comic Sans MS', sans-serif; text-align: center; color: #4c618f; } //Side Bar Information Style Modification .site-author-name { margin: 48px 0 0; color: #090909; font-family: 'Comic Sans MS', sans-serif; } .links-of-blogroll { font-size: 14px; margin-bottom: 42px; } .links-of-author { margin-top: 30px; margin-bottom: 58px; } .sidebar-inner { color: #649ab6; } .sidebar { box-shadow: inset 2px 2px 40px #bdb2b2; } .sidebar a { color: #649ab6; border-bottom-color: #649ab6; border-bottom: none; } .sidebar a:hover { color: #0c0b0b; } .site-state-item { display: inline-block; padding: 8px 28px; border-left: 1px solid #649ab6; } .sidebar-nav .sidebar-nav-active { color: #649ab6; border-bottom-color: #649ab6; } .sidebar-nav li:hover { color: #0c0b0b; } //Side Bar Button Style .sidebar-toggle { background: #649ab6; } .back-to-top { background: #649ab6; } //Article Catalog Style .post-toc .nav .active>a { color: #4f7e96; } .post-toc ol a:hover { color: #7784ba; } .sidebar-nav .sidebar-nav-active:hover { color: #37596c; } a { border-bottom: none; } //Home page reading full text style .post-button { margin-top: 30px; text-align: center; } .post-button .btn { color: #fff; font-size: 15px; background: #686868; border-radius: 16px; line-height: 2; margin: 0 4px 8px 4px; padding: 0 20px; } .post-button a{ border-bottom: 1px solid #666; } .post-button a:hover { color: #7784ba; }
Tail modification
proposal
There is nothing to modify the tail, just customize the CSS to make it look better. I used a non-garlic plug-in. The next theme has been integrated. I modified a little on this basis. It's very simple to use.
Tail Deployment Name LOGO
My idea is to simply replace an icon in fontawsome with a drop of water.
Other modifications
remind
Basically, customizing CSS modifications has allowed you to modify the style you want, but the frame layout of the theme can't be changed, you can only change the tiny style.
Other minor changes
The background is generated by a JS. If you are interested in it, you can comment on it below. I can give you an address for your reference.
Netease Cloud Player is also generated by a third party added to the source code of the generated page framework, and there are some articles like DIY icons and beautification.
And how to add a new menu button to the homepage navigation, I'll talk about it later.
I will probably give you another article to explain the above points, so that everyone can achieve my current effect.
summary
Today's writing is in a hurry. I have the opportunity to revise it in some places. Any questions and suggestions can be commented on below.