BlueNight 原创 WordPress 主题下载(Version 1.3.11)

自己是做前端开发工作的，对于页面前端代码的质量和性能一直都要求比较严格。而从网上下载的那些 WordPress 主题的 HTML 结构和前端的性能一直都不太满意，所以这两天就自己动手做了一个——BlueNight。

BlueNight 主题特点简介

• 支持自定LOGO，可设置文字或者图片 LOGO
• 支持自定义背景图片
• 支持（顶部、主导航、底部）自定义菜单
• 支持 Featured Image, 默认尺寸：106 * 106
• 支持 Featured Image Header（首页幻灯图片）
  • 非首页显示20张随机的背景图片，没什么特殊，就是为了展示一下自己的城市，让页面也不那么单调。如果您对这些图片背后的故事感兴趣，可以看看《BlueNight 主题 Banner 图片说明》。
• 自动生成文章摘要，默认170个字符
• 美化了分页导航，增加了数字分页导航
• 自带文章浏览次数统计
• 自带了文章分享功能
• 自带相关文章推荐
• 后台添加了主题设置菜单和主题设置页面
• 主题小工具中添加了带Avatar头像的最新评论Widget
• 主题小工具中添加了Popular Post 热评文章的Widget
• Achives 文章归档页面（可以当作网站地图 – 需要咸湿佬的 WP-EasyAchives 插件)
• lazyload Gravatar 头像和特色图片
• 添加评论 Ajax 翻页
• 添加Tags 模版页（WP-EasyAchives 的补充，基本上是为SEO优化而作的）
• 代码的前端性能已经根据 YSLOW 的前端性能优化方案进行了优化
• 支持中英文双语言环境

标签

dark, light, white, blue, two-columns, right-sidebar, fixed-width, custom-background, custom-menu, featured-image-header, featured-images, blavatar, translation-ready, threaded-comments, theme-options

支持语言

• English (Default)
• 简体中文（加勒比-海贼）

Downloads：BlueNight.zip  (Version 1.3.11)

自定义LOGO设置

BlueNight 主题支持自定义LOGO设置，在后台的外观中选择 BlueNight Panel，如图：

在 BlueNight Panel 中你可以设置图片或者文字的 LOGO，如下图：

如果设置了图片的 LOGO，则不会显示文字 LOGO（提示：如果为了 SEO，建议使用文字 LOGO）。BlueNight 主题中对 LOGO 高度做了限制，为 50px。如果想调整的话，请修改 style.css 中的样式：

.logo img { margin: 10px 0; /* 修改这里的高度 */ height: 50px; }

Featured Image 特色图片的设置和调整

BlueNight 主题支持Featured Image （特色图片）。如下图：

主题默认的特色图片的大小是自定义的 106 * 106。如果需要调整特色图片的大小，需要在 functions.php 调整：

/** * Add Thumbnails support */ if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); // 请修改这里的尺寸 add_image_size( 'imaj', 106, 106, true ); add_image_size('slider',940,179,true); }

特色图片的显示函数：

// array('class' => 'entry img post-image-prelaoder post-thumbnail') 给特色图片添加的 CSS class 样式 function imaj_image(){ if ( has_post_thumbnail() ) { ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'imaj', array('class' => 'entry img post-image-prelaoder post-thumbnail') ); ?></a> <?php } else { } }

对应的样式代码（请根据你的需要自行调整）：

.post-thumbnail { float: left; margin: 0 10px; border: 1px solid #CCC; padding: 4px; width: 106px; height: 106px; display: inline; }

Featured Image Header 首页头部特色图片幻灯的设置和调整

BlueNight 主题支持 Featured Image Header（头部特色图片幻灯）。首页的显示效果，如下图：

可以在 BlueNight Panel 中选择是否开启此功能，以及选择类目和显示条数，如下图：

这个幻灯片的 JavaScript 脚本采用的是我开发的《Carousel – jQuery 相册插件》，具体的使用方法请参考该文章的介绍。首页的幻灯片支持横向和纵向的滚动，调用代码在 footer.php 中：

<?php if(get_option('bluenight_slide')=='yes' && is_home() && !is_paged()){?> <script type="text/javascript" src="http://www.yaohaixiao.com/js/jquery.js"></script> <script type="text/javascript" src="http://www.yaohaixiao.com/js/carousel.js"></script> <script type="text/javascript"> jQuery.carousels({ root: '#slider', carousel: '#slide-list', pages: { prev: '#prev-slide', next: '#next-slide', current: '#cur-index', total: 'total-count' }, // 只需要修改这里 V - 纵向滚动，H - 横向滚动 direction: 'H', itemsPrePage: 1 }); </script> <?php }?>

非首页时，banner的背景图片会随机显示，header.php 中的代码如下：

<div class="wrap banner<?php if(is_home()){ echo ' pb10'; }else{ echo ' banner-'.rand(1, 10); } ?>" id="banner"> <?php if(get_option('bluenight_slide')=='yes' && is_home() && !is_paged()){?> <?php include (TEMPLATEPATH . '/slider.php'); ?> <?php }?> </div>

没什么特别的，只是用 rand 函数生成一个1~10的随机数的class名称，然后根据class显示背景，CSS 代码如下：

/* Banner */ .banner { height: 179px; padding-bottom: 0; background: transparent url(images/wuhan.jpg) 10px 10px no-repeat; } .banner, .container { background-color: #FFF; } .banner-1 { background-image: url(images/wuhan-1.jpg); } .banner-2 { background-image: url(images/wuhan-2.jpg); } .banner-3 { background-image: url(images/wuhan-3.jpg); } .banner-4 { background-image: url(images/wuhan-4.jpg); } .banner-5 { background-image: url(images/wuhan-5.jpg); } .banner-6 { background-image: url(images/wuhan-6.jpg); } .banner-7 { background-image: url(images/wuhan-7.jpg); } .banner-8 { background-image: url(images/wuhan-8.jpg); } .banner-9 { background-image: url(images/wuhan-9.jpg); } .banner-10 { background-image: url(images/wuhan-10.jpg); }

个人觉得用这种简单的方式基本上就实现了 WordPress 的自定义头部的类似效果了，所以 BlueNight 主题不会再去做自定义头部的支持了。

文章摘要的调整方法

BlueNight 主题支持自动生成文章摘要。如下图：

如果需要调整，请修改 functions.php 中的代码：

/** * Format Post Excerpt */ add_filter('excerpt_length', 'my_excerpt_length'); function my_excerpt_length($length) { // 摘要显示的字符数 return 170; } // 超过170个字符后，显示的文字 function new_excerpt_more($more) { global $post; return '... [<a href="'. get_permalink($post->ID) . '">阅读全文</a>]'; } add_filter('excerpt_more', 'new_excerpt_more');

如上图所示，摘要在列表页面（index.php、search.php、archive.php）中的完整显示是特色图片 + 文字摘要，页面中完整的代码如下：

<div class="entry"> <!-- 特色图片 --> <?php imaj_image(); ?> <!-- 文字摘要 --> <?php the_excerpt(10); ?> </div>

文章分享的设置

BlueNight 主题自带了文章分享功能。如图：

这个分享功能采用的是我以前的同事咸湿佬的 share.js。具体的处理可以查看他的《为网站添加分享按钮》。这里就把 JavaScript 代码贴出来：

(function(){ var link = encodeURIComponent(document.location), title = encodeURIComponent(document.title.substring(0, 76)), source = encodeURIComponent('YAOHAIXIAO.COM'), windowName = 'share'; site = 'http://www.yaohaixiao.com/', getParamsOfShareWindow = function(width, height){ return ['toolbar=0,status=0,resizable=1,width=' + width + ',height=' + height + ',left=', (screen.width - width) / 2, ',top=', (screen.height - height) / 2].join(''); }, byId = function(el){ if (el.nodeType === 1 && el.tagName) { return el; } else { if (document.getElementById) { return document.getElementById(el); } else { return null; } } }; if (byId('facebook-share')) { byId('facebook-share').onclick = function(){ var url = 'http://facebook.com/share.php?u=' + link + '&t=' + title; var params = getParamsOfShareWindow(626, 436); window.open(url, windowName, params); }; } if (byId('twitter-share')) { byId('twitter-share').onclick = function(){ var url = 'http://twitter.com/share?url=' + link + '&text=' + title; var params = getParamsOfShareWindow(500, 375); window.open(url, windowName, params); }; } if (byId('delicious-share')) { byId('delicious-share').onclick = function(){ var url = 'http://delicious.com/post?url=' + link + '&title=' + title; var params = getParamsOfShareWindow(550, 550); window.open(url, windowName, params); }; } if (byId('kaixin001-share')) { byId('kaixin001-share').onclick = function(){ var url = 'http://www.kaixin001.com/repaste/share.php?rurl=' + link + '&rcontent=' + link + '&rtitle=' + title; var params = getParamsOfShareWindow(540, 342); window.open(url, windowName, params); }; } if (byId('renren-share')) { byId('renren-share').onclick = function(){ var url = 'http://share.renren.com/share/buttonshare?link=' + link + '&title=' + title; var params = getParamsOfShareWindow(626, 436); window.open(url, windowName, params); }; } if (byId('douban-share')) { byId('douban-share').onclick = function(){ var url = 'http://www.douban.com/recommend/?url=' + link + '&title=' + title; var params = getParamsOfShareWindow(450, 350); window.open(url, windowName, params); }; } if (byId('sina-share')) { byId('sina-share').onclick = function(){ var url = 'http://v.t.sina.com.cn/share/share.php?url=' + link + '&title=' + title; var params = getParamsOfShareWindow(607, 523); window.open(url, windowName, params); }; } if (byId('netease-share')) { byId('netease-share').onclick = function(){ var url = 'http://t.163.com/article/user/checkLogin.do?link=' + link + 'source=' + source + '&info=' + title + ' ' + link; var params = getParamsOfShareWindow(642, 468); window.open(url, windowName, params); }; } if (byId('tencent-share')) { byId('tencent-share').onclick = function(){ var url = 'http://v.t.qq.com/share/share.php?title=' + title + '&url=' + link + '&site=' + site; var params = getParamsOfShareWindow(634, 668); window.open(url, windowName, params); }; } (function(){ var mainBlock = byId('main'), sideBar = byId('side'), mainHeight = mainBlock.offsetHeight, sideHeight = sideBar.offsetHeight; if (sideHeight > mainHeight) { mainBlock.style.height = sideHeight + 'px'; } })(); })();

分享功能基本上都是调用各个网站的分享API的地址，大家可以根据需要添加自己喜欢的网站的分享API地址。

相关文章的设置

BlueNight 主题自带了相关文章的支持，如下图：

相关文章的处理相对比较简单没有做什么推送算法的处理，就是取出文章所在分类的最近的5篇文章做相关文章，functions 中的代码如下：

1function related_post(){
2?>
3<div class="related-posts" id="related-posts">
4<?php
5// 通过文章id获得文在所在分类
6$categories = get_the_category($post->ID);
7if ($categories) {
8    $category_ids = array();
9    foreach ($categories as $individual_category)
10        $category_ids[] = $individual_category->term_id;
11    $args = array(
12	    'category__in'=>$category_ids, 
13		'post__not_in'=>array($post->ID), 
14		'showposts'=>5, // Corresponds to Number of related posts to be shown. 
15        'caller_get_posts'=>1
16	);
17    $my_query = new wp_query($args);
18    if ($my_query->have_posts()) {
19        echo '<h2>你可能会感兴趣的文章</h2><ul>';
20        while ($my_query->have_posts()) {
21            $my_query->the_post();            
22?>
23    <li><p class="related-post-image"><?php related_post_image(); ?></p><h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3></li>
24<?php 
25        }
26        echo '</ul>'; 
27	} 
28} 
29$post = $backup; 
30wp_reset_query(); 
31?>
32</div>	
33<?php 
34} 
35
36// 显示相关文章的特色图片，如果没有则显示默认的（无特色）图片
37function related_post_image(){
38	if ( has_post_thumbnail() ) {
39?>
40    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'imaj' ); ?></a>
41<?php
42    } 
43	else {
44?>		
45		<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-photo.gif" alt="<?php the_title(); ?>" widt="106" height="106" /></a>
46<?php
47	}
48}
49?>

虽然这个小功能对网站做内链的效果不是很大，不过添加了这个功能，总的SEO效果还是会好一些，对用户也算是更友好吧。

自定义的最新评论小工具

BlueNight 主题添加了带Avatar头像的用户评论小工具，可以在主题的小工具中看到，如下图：

在页面中的显示效果，如下图：

怎么样？是不是比 WordPress 自带的最新评论看上去酷一些？我在网上也查了不少的资料，大致有2中做法：

1. 自己改 default-widget.php 中的代码的方法，将 WordPress 自带的 WP_Widget_Recent_Comments 插件的代码修改程带 Avatar 头像；
2. 自己在 sidebar.php 中添加自己写的一个固定的最新评论的代码；

两种做法都有缺点，第一种如果 WordPress 更新了，那么这样的修改就被新的覆盖回原来默认的评论了。而第二种，写死的做法是不能在小工具中设置移除。所以我选择了自己写一个最新评论的 Widget 小工具。自己可以方便的在主题的小工具管理后台里设置，操作方便，也不怕 WordPress 版本更新后被覆盖重置了。具体代码如下（其实代码就是把 WordPress 自带的 WP_Widget_Recent_Comments 插件换个名字重写修改一下，比较简单的 ^-^）：

1/**
2 * Recent_Avatar_Comments widget class 
3 * base on Recent_Comments
4 *  
5 * @since 1.1.14
6 */
7class Widget_Recent_Avatar_Comments extends WP_Widget {
8
9	function __construct() {
10		$widget_ops = array('classname' => 'recent_avatar_comments', 'description' => __( 'The most recent comments on your site.','bluenight' ) );
11		parent::__construct('recent-avatar-comments', __('Recent Comments (BlueNight)','bluenight'), $widget_ops);
12		$this->alt_option_name = 'recent_avatar_comments';
13
14		add_action( 'comment_post', array(&$this, 'flush_widget_cache') );
15		add_action( 'transition_comment_status', array(&$this, 'flush_widget_cache') );
16	}
17
18	function flush_widget_cache() {
19		wp_cache_delete('recent_avatar_comments', 'widget');
20	}
21
22	function widget( $args, $instance ) {
23		global $comments, $comment;
24
25		$cache = wp_cache_get('recent_avatar_comments', 'widget');
26
27		if ( ! is_array( $cache ) ) {
28			$cache = array();
29		}
30
31		if ( ! isset( $args['widget_id'] ) ) {
32			$args['widget_id'] = $this->id;
33		}
34
35		if ( isset( $cache[ $args['widget_id'] ] ) ) {
36			echo $cache[ $args['widget_id'] ];
37			return;
38		}
39
40 		extract($args, EXTR_SKIP);
41 		$output = '';
42		$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? __( 'Recent Comments (BlueNight)', 'bluenight' ) : $instance['title'], $instance, $this->id_base );
43
44		if ( empty( $instance['number'] ) || ! $number = absint( $instance['number'] ) ) {
45 			$number = 5;
46		}
47
48		$comments = get_comments( apply_filters( 'widget_comments_args', array( 'number' => $number, 'status' => 'approve', 'post_status' => 'publish' ) ) );
49		$output .= $before_widget;
50		if ( $title ) {
51			$output .= $before_title . $title . $after_title;
52		}
53
54		$output .= '<ul id="recentcomments" class="recentcomments-list">';
55		if ( $comments ) {
56			foreach ( (array) $comments as $comment) {
57				$output .=  '<li class="recentcomments"><h3>'. get_avatar($comment,$size='32',$default='http://www.gravatar.com/avatar/be385381854ec020acbfd856b085bc0f?s=40&d=mm&r=g', get_comment_author()) .'</h3><p>' . sprintf(_x('<strong class="comment-author">%1$s</strong> <span class="comment-post-time">'. get_comment_date('Y-m-j') .__(':','bluenight').'</span> %2$s', 'widgets'), get_comment_author_link(), '<br /><a href="' . esc_url( get_comment_link($comment->comment_ID) ) . '">' . mb_strimwidth(strip_tags($comment->comment_content),0,37, "..." ) . '</a>') . '</p></li>';
58			}
59 		}
60		$output .= '</ul>';
61		$output .= $after_widget;
62
63		echo $output;
64		$cache[$args['widget_id']] = $output;
65		wp_cache_set('recent_avatar_comments', $cache, 'widget');
66	}
67
68	function update( $new_instance, $old_instance ) {
69		$instance = $old_instance;
70		$instance['title'] = strip_tags($new_instance['title']);
71		$instance['number'] = absint( $new_instance['number'] );
72		$this->flush_widget_cache();
73
74		$alloptions = wp_cache_get( 'alloptions', 'options' );
75		if ( isset($alloptions['recent_avatar_comments']) ){
76			delete_option('recent_avatar_comments');
77	    }
78
79		return $instance;
80	}
81
82	function form( $instance ) {
83		$title = isset($instance['title']) ? esc_attr($instance['title']) : '';
84		$number = isset($instance['number']) ? absint($instance['number']) : 5;
85?>
86		<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:','bluenight'); ?></label>
87		<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></p>
88
89		<p><label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('Number of comments to show:','bluenight'); ?></label>
90		<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
91<?php
92	}
93}
94register_widget('Widget_Recent_Avatar_Comments');

其实整个的关键就在这里，代码如下：

1if ($comments) {
2    foreach ((array) $comments as $comment) {
3        $output .= '<li class="recentcomments"><h3>'.get_avatar($comment, $size = '32', $default = 'http://www.gravatar.com/avatar/be385381854ec020acbfd856b085bc0f?s=40&d=mm&r=g', get_comment_author()).'</h3><p>'.sprintf(_x('<strong class="comment-author">%1$s</strong> <span class="comment-post-time">'.get_comment_date('Y-m-j').__(':', 'bluenight').'</span> %2$s', 'widgets'), get_comment_author_link(), '<br /><a href="'.esc_url(get_comment_link($comment->comment_ID)).'">'.mb_strimwidth(strip_tags($comment->comment_content), 0, 37, "...").'</a>').'</p></li>';
4    }
5}

通过 get_avatar() 函数获得 Avatar 的用户头像。get_avatar()函数接收4个参数，代码解释如下：

1get_avatar( $id_or_email, $size, $default, $alt ); 
2id_or_email(integer/string/object) (required) 用户的id或者email 
3size(integer) (optional) 头像的大小 (max is 512).Default: 96 
4default(string) (optional) 默认头像的url, 缺省值为 “Mystery Man”. 
5alt(string) (optional) 图片的alt属性值

之后的事情就是通过评论相关的函数获得评论的作者，作者的主页地址，以及评论页面的地址和评论时间，然后在 style.css 里把样式调整齐，就大功告成了。主题控制评论的 CSS 代码如下：

1/* Sidebar Widget Module */
2.sidebar-widg {
3    overflow: hidden;
4    padding-bottom: 20px;
5    clear: both;
6}
7
8.sidebar-widg ul {
9    margin: 0;
10    padding: 5px;
11    overflow: hidden;
12}
13
14.sidebar-widg li {
15    font-size: 12px;
16    list-style-type: none;
17    padding-left: 5px;
18    height: 26px;
19    line-height: 26px;
20    overflow: hidden;
21}
22
23.sidebar-widg li.recentcomments {
24    height: 40px;
25    padding-top: 5px;
26}
27
28.sidebar-widg h3 {
29    float: left;
30    margin: 0;
31    overflow: hidden;
32}
33
34.sidebar-widg h3, .sidebar-widg h3 img {
35    width: 32px;
36    height: 32px;
37}
38
39.sidebar-widg p {
40    float: right;
41    margin: 0;
42    width: 191px;
43    padding-left: 10px;
44    line-height: 20px;
45    overflow: hidden;
46}
47
48.comment-post-time {
49    font-size: 11px;
50    color: #676767;
51}

Popular Post 热评文章的

BlueNight 主题添加了 Popular Post 热评文章小工具，可以在主题的小工具中看到，如下图：

填写好标题和要显示的文章条（默认是显示5条的）数就OK了。

设置好后，前台页面显示的效果如下图：

热评文章的排序是根据文章的评论数量的多少由高到低一次排序的。PHP 代码在 functions.php 文件中：

1class Widget_Popular_Posts extends WP_Widget{
2    function __construct() {
3		$widget_ops = array('classname' => 'popular_post', 'description' => __( "The most popular posts on your site.", "bluenight") );
4		parent::__construct('popular-posts', __('Popular Posts','bluenight'), $widget_ops);
5		$this->alt_option_name = 'popular_post';
6
7		add_action( 'save_post', array(&$this, 'flush_widget_cache') );
8		add_action( 'deleted_post', array(&$this, 'flush_widget_cache') );
9		add_action( 'switch_theme', array(&$this, 'flush_widget_cache') );
10    }
11
12    function form($instance){
13
14		$title = isset($instance['title']) ? esc_attr($instance['title']) : '';
15		$number = isset($instance['number']) ? absint($instance['number']) : 5;
16?>
17		<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:','bluenight'); ?></label>
18		<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></p>
19
20		<p><label for="<?php echo $this->get_field_id('number'); ?>"><?php _e('Number of posts to show:','bluenight'); ?></label>
21		<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" size="3" /></p>
22<?php
23    }
24
25    function update($new_instance, $old_instance){
26		$instance = $old_instance;
27		$instance['title'] = strip_tags($new_instance['title']);
28		$instance['number'] = absint( $new_instance['number'] );
29		$this->flush_widget_cache();
30
31		$alloptions = wp_cache_get( 'alloptions', 'options' );
32		if ( isset($alloptions['popular_post']) ){
33			delete_option('popular_post');
34	    }
35
36		return $instance;
37    }
38
39    function flush_widget_cache() {
40		wp_cache_delete('popular_posts', 'widget');
41	}
42
43    function widget($args, $instance){
44        extract($args, EXTR_SKIP);
45
46        echo $before_widget;
47        $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
48
49        if (!empty($title)){
50            echo $before_title . $title . $after_title;;
51        }
52
53        if ( empty( $instance['number'] ) || ! $number = absint( $instance['number'] ) ){
54 			$number = 5;
55        }
56        // Show Popular Post
57?>
58	    <ul class="popular-posts">
59<?php		
60        $popular_posts = new WP_Query('orderby=comment_count&posts_per_page='.$number); 
61
62        while ($popular_posts->have_posts()) : $popular_posts->the_post(); 
63?>
64        <li>
65        <h3><?php thumbnail_image(); ?></h3>
66        <h4><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4></a>
67        <p><span class="post-views"><?php echo get_post_views(get_the_ID()); ?></span><span class="post-comments-count"><a href="<?php the_permalink()?>#comment"><?php comments_number(__('No Comments','bluenight'),__('One Comment','bluenight'),__('% Comments','bluenight'));?></a></span></p>
68		</li>
69<?php endwhile;?>
70</ul>
71 <?php
72    echo $after_widget;
73  }
74}

安装 WP-EasyAchives，选择 Achives 页面模版创建文章归档列表页

BlueNight 主题有一个 Achives 页面模版，通过这个模版可以创建文章归档列表页（基本上算是网站地图的页面了）。不过需要安装 WP-EasyAchives 插件。Achives 页面的效果如图：