Step by step to develop your own blog. NET version of the chapter (6, responsive layouts and custom styles)

Objective

The main features or features of this blog development:
First: can be compatible with each terminal, especially the mobile phone side.
Second: The time will use a lot of HTML5, dazzle ah.
Third: Import Blog The essence of the garden article, and do classification. (Don't seal me)
IV: Make a plugin, any technical articles on the site can be forwarded to the blog collection.

So I'm going to write a series: "Step by step, build your own blog."

• Step by step to develop your own blog. NET version (1, page layout, blog migration, data loading)
• Step by step to develop your own blog. NET version (2, comment function)
• Step by step to develop your own blog. NET version (3, sign-in function)
• Step by step to develop your own blog. NET version (4, article publishing feature)
• Step by step to develop your own blog. NET version (5, search function)
• Step by step to develop your own blog. NET version (6, mobile-compatible)

Demo Address:http://blog.haojima.net/ Group within the shared Source:469075305

The series of developing your own blog is here to end. Sign up, sign in, review, post, search every week of a blog post, and one version per week (and two days on weekends). This blogging system uses the Yes Mvc4 ef6.0, which was not used before for MVC. In this system I also learn to use the side. Certainly useful deficiencies and not the whole place, then I can only later revision changes. What I want to say is that the prelude is enough, should we have a climax now?

What we're going to analyze today is responsive layouts and custom styles. Excitement, excitement, I can not calm down. Ha ha. We've done so much to pave the way for today's responsive layout and custom styles. In this multi-terminal era, you can not display on the mobile side normally? It's out. So how do we implement a responsive layout? Someone's going to say Bootstrap, okay, I do know something. But I don't know how to tell the truth, I'm not familiar with it. But I know it must be based on the screen resolution size to give different styles. In that case, why don't we write it ourselves. After all, other people's things, if not enough to understand, there will always be an unknown situation.

All right, that's all. Let's talk about the key points to be analyzed today.

Responsive layout on the home page

Why is the home page responsive layout? Because I'm only going to do the responsive layout of the homepage. The display page of the blog content is customized by the user. Don't worry, this is going to be later.

1. What is a responsive layout?

Responsive layout is a concept presented by Ethan Marcotte in May 2010, in short, that a website can be compatible with multiple terminals-rather than making a specific version for each terminal. This concept was created to address mobile internet browsing. Responsive layouts can provide a more comfortable interface and a better user experience for users of different terminals, and with the current popularity of large-screen mobile devices, the "general trend" to describe is not too. As more and more designers adopt this technology, we see not only a lot of innovation, but also some forming patterns. --source Baidu Encyclopedia

2. How to achieveResponsive layout

Responsive layouts are now more popular than Bootstrap, but I'm not going to use them. The reason is very simple, I am not familiar with Bootstrap do not understand. Then I simply looked at how the bootstrap was implemented in a responsive layout. The principle is simple, that is, the use of media in the CSS3. Media where is sacred? Can I use it to eat? It can define different styles for different media types, or you can set different styles for different screen sizes. And when you reset the browser size, the page will also re-render the page based on the browser's width and height. That being the case, what worries the response.

simple use of 3.media

Max width: Applied when the width of the viewable area is less than 600px.

{  . class {    background: #0094ff;  } }

Min width: Applied when the width of the viewable area is greater than 600px.

{  . class {    background: red;  } }

Simple? Yes, it's so simple. You can also enable it directly from 600 to 900.

{  . class {    background: #0094ff;  } }

Of course, you can also put in a separate file. It's crooked.

<link rel= "stylesheet" media= "screen and (max-width:600px)" href= "Max600.css"/>

Well, you already know too much. Implementation of a home page response is basically enough.

The default style shows the mobile side:

{    display: inline-block;}  {    padding-left: 10px;     Padding-right: 10px;}

If it is PC-side: (the default is greater than 992px even if the PC side of course, you can also customize)

@media (min-width:992px){. blog_body_e.col-md-3. a_blog_user {display:Block; }. Blog_body. Blog_body_b{width:80%;float: Left; }. Blog_body. Blog_body_e{width:20%;float: Left;box-sizing:Border-box;Padding-right:25px; }. Blog_body_e,. Blog_body_b{Padding-left:20px;Padding-right:20px; }}

Let's look at the distribution.

PC side:

Mobile phone side:

You alright.

ASP. NET MVC Mobile-ID

We've already said the responsive layout, but that's for the client, for the same view page. However, the same view page through the response layout is also flawed, resulting in a very large page style page load efficiency, and can only do local adjustments, if you want to do

Large adjustments can be more complex or impossible to achieve at all.

Then we have no other way. The answer is yes. If we can identify the request in the background with the PC or the mobile side, then load the different views. So we can have multiple views. Fortunately, our great ASP. NET MVC is very well implemented. You just have to rename the in your requested view on a copy . Mobile.cshtml such as:_layout.cshtml and _layout.mobile.cshtml. No more? Yes, it's gone. If it is the request of the mobile side then will automatically request _layout.mobile.cshtml If it is the PC side then will automatically request _layout.cshtml .

This allows us to do a responsive layout for two major classes.

Some would say that our local development is a PC-side request. So how do we test the effect of the mobile side? Be sure to post it online and test it with your phone? That's a lot of trouble, every change to a style will be published once. Well, I'll tell you one more trick. On the PC side disguised as mobile side directly on the PC side to see the effect of the mobile side. Look at the following code, copied to the mvcapplication method of the Global.asax file. Opening comments is the default display of mobile effects. Remember to comment out when you publish.

/// /Open Note The default is the mobile side display effect // DisplayModeProvider.Instance.Modes.RemoveAt (0); // DisplayModeProvider.Instance.Modes.Insert (0,//    new Defaultdisplaymode ("Mobile") //     {//        contextcondition = Context = True//    } //    );

About custom Style custom styles

We are all yearning for freedom, how can a blog have no custom style features? Well, then I'll add one.

So what are the features of custom styles? CSS style, JS script permissions, page top HTML, sidebar HTML, footer HTML all add it. If you want to be free, give you absolute freedom.

At the time, I was still thinking about customizing the style store database or save text? Save the text, generally there is no case to access a file at the same time. Because each user is given a folder to save. Page load requests also do not have to read the database, directly request the file will be much faster.

When it comes to thinking and thinking about it, we each login user jumps to the custom style page when we detect whether there is a content before loading, if there is one, there is no creation of an empty file. When requesting a blog content page, if there is a custom style loaded directly over the OK. Simple.

Disable default Theme Styles

We have modified the style above, but the style of our default theme is still there, unless you cover it all. Some front-end master, may be to say, I would like to directly disable the default theme style Ah, one to cover your more trouble. Well, we do the programmer is so hard to force, you want, I will give. In this case, we separate the CSS styles and inline CSS from the previous page into a separate CSS file. Then we ask the blog content page when we decide whether you disable the default style, if it is we do not load.

Enable custom theme styles on other blogger pages

This is our big play. What is "Enable custom theme styles on other blogger pages", the one who said I was playing rape, I want to say you misunderstood. "Enable custom theme styles on other blogger pages" is conditional. First, you must check the "Enable custom theme styles on other bloggers" page on your settings page. Second, you must be logged in. ( so that means you can only see it yourself, other users or visitors who are not logged in will see the original user-defined theme style of the blog), why do you do this? No why, I just abandon the definition of the theme style is too ugly, I do not want to see, but your article content is very nutritious, want to see. Tangled up. Then show me your theme style to read the content of your article, so you can define a style that favors the mobile side and then read anyone's article. It's cool.

Say so, how to achieve it. In fact, we have already said, we in the database to save a bool value whether to enable display. Then we look at the content of the blog when the detection is a login status, if no, this shows the blog user's theme style. If you are logged in, and then you decide whether you are enabled or not, if you do not enable or display the style of the blog user, it is best if you log in and then enable the last to display your own defined style on the blog content page of other bloggers.

Mobile-side custom styles and PC-side custom styles

As we have already said, in the MVC background to identify the request is mobile or PC side, then we do two copies of the view, you can customize the mobile style and PC-side style respectively.

: (like a lot of small tadpoles)

Summarize

Here we mainly talk about the response layout and then in the case of the response layout can not be satisfied, we could establish the corresponding response for different terminals to reduce the scope of the page to facilitate the loading and display of good page. Then we also said custom styles, and disabled styles to enable custom theme styles on other blogger pages. In fact, it's not difficult to implement it in code. Just clarify the logic and the effect you want.

About this series of blog here should also be the end, the truth one weeks a version of the weekend two days really tired. The nerves felt taut for a long time without relaxing. Here I would like to thank all the friends for their support, otherwise I really can't stand down.

Now I can finally relax and stay with my wife. I always complain that my computer is my wife and I don't speak to her.

Some people say, that your blog system is not maintenance? To maintain, it will add some features and effects that are not thought of. But don't be so urgent. During this time I can slowly refactor the code.

Later I found in this blog system useful or new features will be written separately to analyze the blog.

This is the first edition Oh, there will be a second edition of the third edition, of course, if someone is concerned.

(Our ultimate goal is: PC Mobile compatible, can be in the major blog to save articles to our blog system, can be downloaded from the Mobile client offline reading blog post)

Yes, if anyone interested in developing an IPhone, ipad or Android client can contact me. (Our purpose is simply to study together)

Temporarily provide API:HTTP://BLOG.HAOJIMA.NET/USERBLOG/WEBAPI and have friends have made the Android version of the prototype. (Of course, this friend will also write an Android version of the article and everyone to explore the study together)

Demo Address: Http://blog.haojima.net/Admin/ConfigurePC

If you are interested in this article, then trouble you to a praise, your encouragement will be my motivation.

Of course you can also join QQ group: discussion.

If you have a better way of dealing with it, hope not to be stingy.

This article link: http://www.cnblogs.com/zhaopei/p/4823359.html

Some people say, you are not talking about the end will provide source download? It's not about cheating. I don't cheat, but I want to play some tricks. You want the source code, I want to have some praise. Picking Praise finished automatically send you source code . Don't believe me? You give it a try.

The administrator said that can not play like that I directly to the source bar. : http://pan.baidu.com/s/1o6pa7ns Password: 63c6

(Some people do not start to scold me, ah, do not praise and want the source of the students.) Wait till tomorrow. Provide source code unconditionally)

Step by step to develop your own blog. NET version of the chapter (6, responsive layouts and custom styles)