Personal site architecture Design (iii)-from design to front-end to backstage

In May, wrote two blog, mentioned to make a website for themselves, at that time people in the internship, not too much time, just the approximate idea of a few, by the way also bought a cloud host (low configuration, memory 500M). Then back to school to deal with graduation matters, so June also with the students departs farewell voice gradually away. July, Home stay, mid-back to the company. Presumably this is also my longest vacation in recent years. =

first, say the design1. Nanyi's Blog

At present my blog design is fork Beiyuu theme, and then seven change eight change, in addition to home Beiyuu also recognize is his outside, other pages have moved a lot of surgery, and these surgery inspiration is from Ruan a peak Nguyen greatly (my blog address is <barretlee.com , the body part is basically plagiarism his design, although the code is I re-knock ... ）。

Professor Ruan has been operating his blog since 2003, Ruanyifeng.com, so far has been 11, the period is certainly also revised n times. After many times the revision, the whole website, structure, almost no too much redundancy, content, not to mention, each article is easy to read, so pertinent, absolutely can give 32 praise, want to express the content of all very clearly presented to the reader, Ruan greatly the text foundation, my generation.

His blog covers a wide range of aspects, and the design of the site is also enough to spend the mind, in observing his blog design, think of some problems.

• What is his most concern when the reader enters the page?
• What is the way to highlight the focus and highlights of the article?
• What elements are displayed on the website home page?
• How to express a relatively new technical point or viewpoint?

I will not publish my own humble opinion, but some of the above mentioned questions are worth thinking about.

2. Zhang Xin Xu's blog

Zhang Xin Xu elder brother, also through the blog to know, later discovered, I and he is Huazhong University of Science and Technology [alumni], and then found that I unexpectedly with him is the same technical team (school, Network application Research and Development Center) members [teammates], and then found that I was already in the same group with him [friends].

A lot of people mentioned Zhang Xin Xu's blog, all said "is that like Zhang Han Yun People's blog," I did ask him, he said the test pictures before a few photos is a rhyme, the right to choose to take out. His blog is also very distinctive:

• Focus is concentrated-the front, but small and beautiful research, great
• Style-very can be ripped, like the person vertical thumb, do not like the people think Luo Li Bar

Two questions to consider:

• How to let others see, "Oh, this is the XXX blog"?
• Blogs first record themselves and then become service to others.

3. Pinterest

The slogan of Jane's book is "to find the power of words," I do not like the text (Basic did not read the novel), so did not carefully taste the contents of the book, but the visual design of his website is very interested. Simple and generous, with the taste of the book, the whole experience is very textured.

I'm a program ape, not to shoot chicken wet. If the article presents too much content, I will not hold the overall layout, so will prefer a concise design, concise another advantage is to highlight the text, the content is very intuitive to be presented.

I listed the above three sites, do not think, will certainly go to copy them, embarrassed ... But in fact, I refer to the site has more than 10, more than 10 sites (I think) prominent place integrated into their own design, please do not spray I do not understand the design of the program ape.

Second, from the design to the front-end implementation

The normal process is design---design draft---transduction, I skipped the design draft, directly began to tap the code, it seems that their own code is more cordial than PSD pictures (so why always say the code ...) ）。

Design is simple, deliberately weaken the design to strengthen the content, hoping to learn from each other.

1. Design and implementation of the text

The text of the design reference to the book, but Jane is a text-centric site, pictures are rarely seen. For a blog, there are several elements that are important: code, reference blocks, pictures, tables, list lists, and so on. So the display of these elements has to be designed by itself.

Details of things, as long as the site can be seen, so here do not repeat too much. The code was highlighted using the light theme of Prettify, which was fine-tuned.

The style of the code block scroll bar is also modified under:

Pre::-webkit-scrollbar{width:10px;Height:10px;background:#F6F6F6;Border-top:1px solid #CCC;Padding-top:1px;}Pre::-webkit-scrollbar-thumb{background:#EEE;Border-radius:5px;Border:1px solid #CCC;Border-bottom:0px;}Pre::-webkit-scrollbar-thumb:hover{background:#DDD;}Pre::-webkit-scrollbar{width:10px;Height:10px;background:#CCC;}Pre::-webkit-scrollbar-thumb{background:#999;Border-radius:5px;}Pre::-webkit-scrollbar-thumb:hover{background:#666;}Pre::-webkit-scrollbar-corner{background:#CCC;}Pre::-webkit-color-swatch{Border:None;}

The effect is this:

The whole design is flat, no rounded corners, looks comfortable, here is the reference block style rendering:

Because some code can be run directly, it also adds a running button to the code that can run:

Under IE, a about:blank blank page is used to open the code file, and if the browser supports the Blob stream, it will be opened with a BLOB stream:

if (! Operation.isie ()) {    window.open (url.createobjecturl(new  Blob ([code], {        "text/html; Charset=utf-8" else {var d = window.open ("About:blank"  ). Document;              D.write (code);    D.close ();}

2. Design and implementation of side bar

1) side Bar-not expanded

As you can see, the sidebar is a number of function buttons, from top to bottom: Show hidden article directories, page themes and font settings, about authors, feedback, RSS feeds.

Why do you have a sidebar and so many function buttons? Take Masaki's blog, I Spit in the group of his blog style several times (scolded back ...) The reason is that everyone's aesthetic is different), you can go to see his page, code font is too small, every time he read his blog will be the font size and line high-profile, and then directly write a script placed in the collection folder, into his page one-click Processing.

This example shows that everyone's tastes are different. A website, if warm and cold tones, font size, etc. can be customized, it is even better, I did not do so complicated, is to add a black theme to the article.

This button allows you to set the settings accordingly. Then there are a few buttons below the sidebar:

The "Talk to Me" button jumps up a floating layer in the bottom right corner:

This floating layer is draggable.

2) side Bar-expand

Did an open sidebar actually almost, and later found that my page does not seem to have "article archive", "latest article", "recent comments" and so on a very common elements of a blog, so, copied the next Watercress FM design, got the following things:

This effect is still very difficult to do, mainly rolling is not good to deal with. On the left is a fixed positioning, the height of the container is dead, that is, $(window).height() the height, blabla. Details I'm not going to say if you're interested can think about how to achieve similar function blocks on the left side of the Watercress FM. I was later monitoring the mouse scrolling setting negative Margi-top value to simulate page scrolling. And this listener is on the entire document, not just the left box.

The overall effect is not complicated, and the trouble is that some details are dealt with.

2. Design and implementation of the bottom

The bottom of the design I most tangled up is the content, in the end put something. With the article related to the highest, one is related to the article, the second is the comment, so it is only the two put on.

Iii. Background design and database

began to think backstage with WordPress or other framework system to build, but these things to provide the interface is more redundant, and complex functions, did not study their source, finally decided to write a back-end frame and front-end interface, the workload immediately went up ... I also want to take this opportunity to review the knowledge of PHP and MySQL, too long not to be unfamiliar.

1. Old Blog Write to database

Previous blogs are written using Markdown syntax, Markdown the advantage is concise and clear, but in the analysis of the time there will always be such a problem, and many Markdown parsing tools do not support the element to add ID or class, which is very tangled. So the article that deposited the data has been parsed into HTML.

Github pages supports the Jekyll syntax, Jekyll allows the use of Markdown, and a lot more ' {{xxx.xxx} ' in article content written using Jekyll syntax

There is no good way to parse the head, it is to use regular to match:

$html file_get_contents ($path); $reg = "/---\n\s*layout:\s*[\s\s]+?\ntitle:\s* (? <title>[\s\s]+?) \ n "  . "Description:\s* (? <description>[\s\s]+?) \ncategory:\s* "  . "(? <category>[\s\s]+?) \ n (tags:\s* (? <tags>[\s\s]+?) \ n)?---\ n (? <content>[\s\s]+)/"; Preg_match_all ($reg$html$match);

Since the article is not centrally placed in a folder, write a travel function to traverse the folder:

functionTraverse$path= '. ') {    $current _dir=Opendir($path);  while(($file=Readdir($current _dir)) !==false) {        $sub _dir=$path. Directory_separator.$file; if($file= = '. ' | |$file= = ' ... ') {            Continue; } Else if(Is_dir($sub _dir)) {            //echo ' Directory '. $file. ':<br> ';Traverse$sub _dir); } Else {            //Echo ' File in Directory '. $path. ‘: ‘ . $file. ' <br> ';Dealfile ($path. Directory_separator.$file); }    }}   

It is important to note that some single and double quotes/utf-16 characters are processed before being stored in the database, otherwise there will be errors when depositing.

function remspecialchars ($string) {    $stringstripslashes($ String);     $string Preg_replace ("/"/"," & #039; ",$string);     $string Preg_replace ('/'/', ' " ',$string);     return $string ;

Restore single and double quotes when removed:

function addspecialchars ($string) {    //  $string = Htmlspecialchars ( $string);    $string Preg_replace ("/& #039;/", "'",$string);     $string Preg_replace ('/"/', ' "',$string);     return $string ;}

2. Processing of each module of the webpage

Web pages, the body, the bottom and the sidebar need data, so the data query is mainly for these three blocks.

At present, these three pieces of data is directly in the background output, a little bit to know that the efficiency is not high, the follow-up will certainly be changed to asynchronous interface. Once encapsulated, getting and rendering an article becomes surprisingly easy:

include ' page.class.php '; $page New pageinitor (); # Body Content $post $page->getpagebytitleen ($_get[' title ']); # bottom and side content $otherData $page->getpostotherdata ();

The rendering of background data is:

If you change to the front-end asynchronous acquisition, the front end has to write a set of template rendering data, there is a sense of redundancy in the process, the latter will certainly improve.

3. Parsing of content

The writing of the article or the use of markdown, although he does not meet my needs in some places. The content is parsed using the Michelf Php-markdown Open source framework:

$cotent file_get_contents ($path); $html = Markdown::d efaulttransform ($content);

It is also very convenient to use, but the above function can only parse some basic Markdown format, the pieces, tables, etc. cannot be resolved. This requires the introduction of:

# Get Markdown class  Use \michelf\markdown;  Use \michelf\markdownextra; # then use Markdownextra::d efaulttransform ($content)

The Markdownextra class is used to parse, and Markdownextra is inherited \Michelf\_MarkdownExtra_TmpImpl .

Iv. Server Setup and maintenance

Currently using Apache as a server has enough, need to cache the page is not many, is a few list pages and search page, so this aspect can be used in the technical mature memcache to deal with, but later on the same server will build multiple sites, each site corresponding domain name is not the same, And some of the site's backstage will use NodeJS to write, so still need Nginx to configure Virtual Host,apache can also implement Vhost configuration, I was in the local test is the use of Apache Vhost, here is also simple to say Vhost Configuration.

1. Apache's vhost configuration

The configuration steps are as follows:

1. Open the Vhost module in httpd.conf and include its configuration file httpd-vhosts.conf
2. Write in httpd-vhosts.conf

# This is configuring localhost this"Domain name"<virtualhost *: the>ServerAdmin [email protected] documentroot"e:/wamp/www"ServerName localhost serveralias localhost errorlog"Logs/localhost.log"Customlog"Logs/localhost-access.log"Common</VirtualHost># This is the config test.barretlee.com this domain name<virtualhost *: the>ServerAdmin [email protected] documentroot"E:/wamp/www/barretlee"ServerName test.barretlee.com errorlog"Logs/test.barretlee.com-error.log"Customlog"Logs/test.barretlee.com-access.log"Common</VirtualHost>

Because the network on the configuration of the detailed description, I am not an expert, I will not elaborate.

2. Rewrite module

Actually is the static of the webpage, we see the PHP page is:

/index.php? id=

But we would prefer to get the page this way:

/index.php/

The URL needs to be rewritten as an internal redirect. This work can be given to Nginx to deal with, but also to Apache, because I am currently only configured Apache, so first look at how Apache configuration:

1) Use of Vhost

<virtualhost *: the>ServerAdmin [email protected] documentroot"E:/wamp/www/barretlee"ServerName test.barretlee.com errorlog"Logs/test.barretlee.com-error.log"Customlog"Logs/test.barretlee.com-access.log"Common<directory e:\wamp\www\barretlee>Options followsymlinks allowoverride None Order deny,allow allow from all rewritee Ngine on Rewriterule^blog/(\d+)/(\d+)/(. *). html$ index.php?title=$3&year=$1&month=$2Rewriterule^static/(. *) $ static/$1</Directory></VirtualHost>

If you use Vhost, you can write it in the configuration and RewriteEngine on add the required rewriterule rules.

2) No use of Vhost

At the root of the file where the Web page is located, create a new .htaccess file that reads:

/^blog/(\d+)/(\d+)/(. *). html$ index.php?title=$3&year=$1&month=$2  ^static/(. *) $ static/$1

Redirect the content on the line.

There is a problem with the second approach, and if your resource requests are on the upper or upper level of/barretlee, then the regular will not match, so we recommend using Vhost to configure your Apache.

Five, late optimization and improvement

Above said so many, are these seven days to build the summary of the station, the current state is that the blog system has been set up, but did not write blog and management blog Backstage, this is a headache, but fortunately, after the backstage to see, on the casual. There are no pages to archive, category pages, etc., and the design of these pages is also a brain-injured cell.

The whole website, the blog system is just a part, there are other questions and answers platform, Good Article crawler crawl, monthly periodicals, weekly good text push, mail system, etc., the amount of work is quite large, this is also a challenge for me, can play their own skills, but also a good chance of deep learning!

Page loading, the first screen time can not endure, if the article length is relatively large, about 1.5 to 3s to render complete, this value is a bit unbearable. The optimization directions are:

• Pjax, the page uses Pushstate + AJAX, reduce the request, does not support pushstate the page uses the hash Bang compatible processing.
• Bigpipe, if the article content is more, or other modules have increased, will use bigpipe allocation to the front-end throwing data.
• The front and back end of the unified template, before also mentioned this problem, back-end rendering when using the back-end template, if the front-end to load asynchronously, you need to re-write a set of templates to parse the merged data, the similarity between the two templates is very high, if you can reuse will reduce a lot of work.
• Caching problems for static data
• Tag caching issues for pages such as ETag

Vi. Summary

What I fear most is that there is no beginning, and now that it has begun, I think it is not far from the end.