Change your blog-garden and garden

Change your blog-garden and garden

The blog garden has a lot of beautiful skins, but there are always some places I don't like very much, so after careful consideration, I decided to manually change the outfit. This article will introduce some of the basics of the blog garden dress-up (practices that do not involve standard skins). If you want to make your blog more dazzling, you can refer to this article to enter the door and then explore it slowly. I believe you will do better than me.

I. Preparations

　1. Apply for js Permissions

If you are more free to operate, you must obtain the js permission. In fact, it is quite dangerous to open the js permission in the blog Park. You can do all kinds of "bad things". However, given that all the students in the blog Park are kind and lovely people, no one should do anything mean or mean anything.

Application Process: Go to the blog management background --> enter the settings tab --> drop-down to the blog sidebar announcement (HTML code supported ), if you do not submit an application, a link for applying for the js permission will be provided --> enter a reason for application --> wait for approval.

Key points in the reason for application: be sincere, be polite, make a commitment not to do bad things, and be flattering.

My application is for the following reasons: I have read many articles in the blog PARK recently, and I feel that I have gained a lot and want to share some of my learning experiences with you. Although I am not as good as those, however, I believe that some of my shared items can help some people. I promise not to advertise, not to do bad things! Finally, I wish the blog site better and better! Please kindly ask a management friend to apply for it !!

　2. Find out where your stuff is put

We have made js, html, and css Code submitted in settings. to customize the style and function, we need to figure out where our code is put. What should I do? Check the html structure one by one.

　　(1) Where is the title?

　　

The title here is big ~ Bear, the sub-title is.... Open your garden and check the elements directly. Then, use search to quickly locate your element.

(2) Where is the page custom CSS?

　　

Note that there is a rule # header # blogLogo. Search for this rule to see where it is hidden.

　　

On the right side, we found that our CSS was stored in a 345073.css file. Search for this file to see where it was introduced.

　　

We found that it was introduced in the second link of the head. This is helpful for determining the CSS priority. By the way, there isDisable template default CSSOption to avoid confusion.

　　(3) blog sidebar announcement (HTML code supported) (JS Code supported) Where

　　

The conclusion is in # sidebar.

(4) Where is the html code of the footer?

You can find that the header code is placed at the first child element of the body without any packages.

We also found that the footer html code is placed in the position of the last child element of the body, and there is no package.

Ii. Some practical skills

After reading the above introduction, it is no problem to write it by yourself. Here I want to introduce some usage skills, but it is not a skill. It is my own experience in the process, these things should help you avoid detours.

　1. Do I have to upload the code to the server every time to see the effect?

This is not necessary. You can copy the html code to the local ide for debugging. After debugging, upload the code to see if there are any problems and make some minor adjustments. When I do this, I will first test the HTML source code on the first page to create an index.html file, and create another file on the article details page. Then add the code and debug it according to the position where the code is inserted.

2. What about unwanted elements?

There are many elements in the source html that you don't want, but they are actually there. For example, the default article details are also a bunch of messy things. One way is to remove the elements you don't want using js, but there is also a better way, display: none, if there are images and other resources in it, those images are not downloaded, so they are great! I wiped out all those undesirable elements in one breath.

3. There is no API to initiate a backend request or some special parameters do not know what to do

For example, if you want to add a follow button, you must initiate a post request to the backend. Let's directly check how the previous attention button was made.

　　　　

Ooo, originally called a function follow (), but there is an encrypted parameter in it (I have to say that this method is stolen ), obviously, we can easily get this parameter, and then call this function when you click the Custom button to achieve attention. If you want to do something bad, you can click the follow button to directly call this function. As a result, all accesses are automatically followed, but I have not done such a shameless thing, if you really want to follow me, you will call this function. With this method, you can easily call some useful functions to implement your functions, such as recommendations and collections.

4. Can I add other resources for the latter image?

Obviously, but there are some restrictions.

　　

After uploading, you just need to give the url where you want to use it. Why not let png? I wanted to add an iphone to the main screen, and the result was not to upload png, I have uploaded the image here at http://www.tietuku.com/. it can be uploaded anywhere, but it can be used later.

　5. Can I use a third-party library?

Obviously, yes. You can use cdn to bring in, which is more convenient. I have used libraries such as animate.css and layer. js. Very convenient.

6. compatible with mobile phones

My practice is violent. @ media displays all the messy things as none and makes some adjustments.

7. elements can be placed on the ends of the earth

By positioning absolute, relative, and fixed, you can place any element in any position.

Iii. Subsequent remarks

My blog is still poor, the color is more casual, and the experience is not very good. You can definitely have a great work. My code is quite messy. If you need to view the painting, you can directly view the source code. The code is not compressed. It's really messy. Don't worry. In addition, if you find any problems or suggestions for improvement in my blog, please be generous and grateful! If you think it's big ~ Xiong's article is helpful to you. You may wish to pay attention to the Diamond (see the top right corner ).