Mvc4 Layout布局与页面SEO信息title,keyword,description
工作已经五个年头了,在进入工作岗位时最初在.net 2.0平台一直到现在的.net 4.0平台下,开发了不少的winform、webform项目;五年的工作时间,在公司主持开发和维护了不少的电子商务web项目,基本上可以说使用webform开发项目达到收发自如境界; 尽管mvc2,3,4都已经出来那么长时间了,却从来没有正式在项目中使用过。于是两月前买了本mvc4的书来通看了一遍,知道了原理,我也就直接过渡到MVC4的学习及使用阶段了。 今天成都的天气很凉爽,下了一天的雨,也算是一场秋雨一场凉了,就没有出去耍了,宅在家里学习提高,练习练习mvc4,要不然咱们技术就真out了。
上图是一个常见网站的页面布局,每个页面除了Header和Footer几乎不变外,中间部份是变化最多的;在以前使用webform做网站的时候,一般可以使用母版页与用户控件来进行布局。
如下代码所示(母版页):
<%@ Page Title="" Language="C#" MasterPageFile="~/SystemManagement/admin_page.master" AutoEventWireup="true" CodeBehind="OrderList.aspx.cs" Inherits="SystemManagement.Order.OrderList" %> <asp:Content ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ContentPlaceHolderID="pagetitle" runat="server"> 用户订单管理 </asp:Content> <asp:Content ContentPlaceHolderID="pageinfo" runat="server"> <hr style="border: 1px dashed #DDDDDD;" /> </asp:Content> <asp:Content ContentPlaceHolderID="pagesarch" runat="server"> </asp:Content> <asp:Content ID="Body" ContentPlaceHolderID="body" runat="server"> </asp:Content>
我相信很多的开发者都使用过母版页来布局的;随着工作时间的越长,后来我更倾向于使用UserControl来布局了。
如下代码所示(用户控件)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WeiKe.Site.aspx.Default" %> <%@ Import Namespace="WeiKe.Common" %> <%@ Register Src="controls/Head.ascx" TagName="Head" TagPrefix="uc1" %> <%@ Register Src="controls/Footer.ascx" TagName="Footer" TagPrefix="uc2" %> <%@ Register Src="controls/TopStar.ascx" TagName="TopStar" TagPrefix="uc3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> <%=PageTitle %></title> </head> <body> <div id="bc"> <uc1:Head runat="server" /> <div class="right">每个页面的内容区。。。</div> <uc2:Footer runat="server" /> </div> </body> </html>
使用用户控件相当灵活是其优点之一。
我们再来体验一把mvc4使用Layout布局。
新建一个mvc4项目时选择Internet Application时会自动生成8个目录,里面有很多文件;默认用于mvc4项目布局的就是_Layout.cshtml文件了,如下图所示:
_Layout.cshtml文件就相当于母版页的作用了,Layout的作用就是统一整个站点的风格,减少大部分页面的html,head,body标签。互联网的项目少不了要做seo,针对每个页面的titl,keyword,description写不同的内容。
现有问题:使用Layout时,每个页面怎样设置titl,keyword,description,这些内容可以是从数据库里面取出来的。
使用webform的时候,我们可以写一个基类(BasePage),让所有的页面继承此基类,就可以在此基类里面统一控制所有页面的title,keyword,description等信息;如下加粗显示代码所示:
public class BasePage : Page { /// <summary> /// 页面的SEO信息的变量 /// </summary> protected string PageTitle, PageKeyWords, PageDescription; /// <summary> /// 构造函数 /// </summary> public BasePage(SeoEnum seo) { Model.SeoPageInfo model = new BLL.SeoPageInfo().GetModel((int)seo); if (model != null) { this.PageTitle = model.PageTitle; this.PageKeyWords = model.PageKeyWords; this.PageDescription = model.PageDescription; } this.Load += new EventHandler(BasePage_Load); } /**************其它省略的代码*****************/ }
上面代码加粗部分是直接在基类定义的受保护变量。继承了BasePage类的页面只需要在构造函数里面如下调用即可。
public partial class Default : BasePage.BasePage { public Default() : base(SeoEnum.首页) { } }
前台html代码如下:
<head> <title> <%=PageTitle %></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="content-language" content="zh-CN" /> <meta name="keywords" content="<%=PageKeyWords %>" /> <link href="/favicon.ico" type="image/x-icon" /> <meta name="description" content="<%=PageDescription %>" /> <link href="/style/style.css" rel="stylesheet" type="text/css" /> </head>
当然上面的实现方式可以修改下,以编程的方式向head里面添加keywords,description等信息,这样就可以不用在html代码里面出现小脚本代码了。
上面说的都是webform时代的处理方式,那使用mvc4全新开发的项目这些细节的东西是我们不得不考虑的东西,那我们又怎样实现呢?
方式一:
首先在Layout文件里面写如下代码:
<title>@ViewBag.Title</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="description" content="@ViewBag.Description" /> <meta name="keywords" content="@ViewBag.Keywords" />
然后在Controller或者View文件里面写如下代码了。
public class HomeController : Controller { public ActionResult Index() { ViewBag.Title = "这是网站的标题,格老子,每个页面都要这样子写好求烦人!当然,这里可以从数据库里面取了"; ViewBag.Description = "这是网站的描述信息,不要乱求整!当然,这里可以从数据库里面取了"; ViewBag.Keywords = "这是网站的关键字信息,请不要乱求写!当然,这里可以从数据库里面取了"; ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application."; return View(); } }
视图文件里面可以直接写
@{ ViewBag.Title = "这是网站的标题,格老子,每个页面都要这样子写好求烦人!"; ViewBag.Description = "这是网站的描述信息,不要乱求整!"; ViewBag.Keywords = "这是网站的关键字信息,请不要乱求写!"; }
方式二:
在layout文件里面如下定义:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> @RenderSection("metas") <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head>
之后在视图(View)文件这样子干即可:
@section metas { <title>这是网站的标题,格老子,每个页面都要这样子写好求烦人!</title> <meta name="description" content="这是网站的描述信息,不要乱求整!" /> <meta name="title" content="Title" /> <meta name="keywords" content="这是网站的关键字信息,请不要乱求写!" /> }
上面的两种方式我都觉得好麻烦,感觉没有webform下的那种做法方便,一个项目至少上百个页面的话,这样子手工一个一个页面文件的写,工作量太大了,对于想偷懒又想后期维护方面,确实我还没有找到好的方式,如有更好的方式统一接管了每个页面head里面的控件,那确实是功德一件;今天就到此吧,以后有空了再研究研究。。
Mvc4 Layout布局与页面SEO信息title,keyword,description的更多相关文章
- 【seo】title / robots / description / canonical
1.title title,就是浏览器上显示的那些内容,不仅用户能看到,也能被搜索引擎检索到(搜索引擎在抓取网页时,最先读取的就是网页标题,所以title是否正确设置极其重要. 1)title一般不超 ...
- 前端页面 title keyword description的添加
用法:<title>网站标题</title> 用法:<meta name=”Keywords” Content=”关键词1,关键词2,关键词3,关键词4″> 用法: ...
- 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计
在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...
- 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局
EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...
- 前端页面 SEO 优化
SEO要点:1.语义化html标签,用合适的标签嵌套合适的内容,不可过分依赖div,对浏览器更友善就能更容易被抓取.2.重要的内容html代码放在前面/左边.搜索引擎爬虫是从左往右,从上到下进行抓取的 ...
- h1、h2、h3标签及strong标签对页面seo的影响
今天和大家来聊下h1,h2,h3,strong几个标签,在网页中的使用对页面seo的影响,也阐述了个人的一些想法. 首先简要讲下H标签及strong标签的含义:<h1>.<h2> ...
- 页面头部title、description、keywords标签的优化
页面头部优化<Head></Head>中间的区域中间的区域,我们称为网页的头部.在网页的头部中,通常存放一些介绍页面内容的信息,例如页面标题.描述及关键字等等.在头部优化中,除 ...
- ASP.NET MVC3 系列教程 – 新的Layout布局系统
原文地址:http://www.cnblogs.com/highend/archive/2011/04/18/asp_net_mvc3_layout.html I:回忆MVC2当中MasterPage ...
- 解决thymeleaf layout布局不生效
今天使用thymeleaf layout布局时总是不生效,特此把解决问题的步骤和几个关键点记录下来备忘. 一.检查依赖 1.thymeleaf必备maven依赖: <dependency> ...
随机推荐
- uni-app - Class 与 Style 绑定
参考uni文档:https://uniapp.dcloud.io/use?id=class-%E4%B8%8E-style-%E7%BB%91%E5%AE%9A 参考vue文档:https://cn. ...
- Shell解释器(学习笔记四)
一.Shell解释器 shell解释器,用户和操作系统内核之间的桥梁 shell介于操作系统内核与用户之间,负责接收用户输入的操作指令(命令),并运行和解释,将需要执行的操作传递给操作系统内核并执行 ...
- EL运算符(web基础学习笔记十七)
一.EL语法 1.1.语法结构 ${expression} 1.2.[]与.运算符 EL 提供.和[]两种运算符来存取数据. 当要存取的属性名称中包含一些特殊字符,如.或?等并非字母或数字的符号,就一 ...
- Camera2必知必会
引言 一切源于在项目过程中的一个Bug:我的需求是在MainActivity 实现自动预览,也可以点击跳到签到SignedActivity去实现拍照签到,第一次进入界面的时候都是正常的,但是有时候返回 ...
- Test Double
我不知道Test Double翻译成中文是什么,测试替身?Test Double就像是陈龙大哥电影里的替身,起到以假乱真的作用.在单元测试时,使用Test Double减少对被测对象的依赖,使得测试更 ...
- 〖Linux〗使用Qt5.2.0开发Android的NDK应用程序
2013年12月11日,Qt发布了其新的Qt版本:Qt5.2.0: 利用这个新的版本,我们可以很轻松地制作出Android手机的NDK应用程序. 开发环境:Ubuntu13.10 x86_64 下载链 ...
- spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除,限制为图片代码等相关配置
spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...
- Linux内核3.11的socket busy poll机制避免睡眠切换
Linux的网络协议栈很独立,上下通过两个接口分别和用户态以及设备相连.也能够看作是北向和南向接口...北向通过socket接口,南向通过qdisc接口(你能够觉得是上层的netdev queue,对 ...
- python之函数用法__str__()
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法__str__() #http://www.cnblogs.com/hongfei/p ...
- 【cookie】cookie和session的终极区别
如果浏览器使用的是 cookie,那么所有的数据都保存在浏览器端,比如你登录以后,服务器设置了 cookie用户名(username),那么,当你再次请求服务器的时候,浏览器会将username一块发 ...