使用Orchard CMS的单页面设计
我有一个客户希望为他的网站设计单页设计,当用户浏览网站时,每个“页面”的内容都会显示/隐藏。使用Orchard CMS的单页面设计
我不确定使用Orchard的最佳方法。一种选择是将内容全部放在单个页面内容项目上,但是然后你失去了使用Orchard的导航功能的能力,并且不能让客户考虑页面管理。
有没有人有想法或经验如何最好地设置在果园CMS?
这是我使用了基于Bertrand的建议的解决方案:
public ActionResult Display(int id)
{
var contentItem = _contentManager.Get(id, VersionOptions.Published);
dynamic model = _contentManager.BuildDisplay(contentItem);
var ctx = _workContextAccessor.GetContext();
ctx.Layout.Metadata.Alternates.Add("Layout_Null");
return new ShapeResult(this, model);
}
我创建一个新的模块与包含高于动作方法的控制器。操作方法采用内容部件ID的参数。 _contentManager和_workContextAccessor对象被注入到控制器中。 Layout.Null.cshtml视图的创建与Bertrand的建议完全相同。
下面是我将如何在不牺牲SEO,客户端性能和可维护性的情况下实现这种非常精致的体验:仍然使用自己的URL将这些网站“经典地”创建为一组页面,博客文章等。这是主页布局,然后应该是不同的,并使用Ajax调用带来其他页面的内容。 我一直使用一种方法来显示与常规内容项目相同的内容,但是来自Ajax调用(因此,在内容周围没有镶边,没有带入样式表,因为它已经存在,等等)是有一个“空布局”返回的内容单独的控制器动作:
var ctx = _workContextAccessor.GetContext();
ctx.Layout.Metadata.Alternates.Add("Layout_Null");
return new ShapeResult(this, shape);
然后,我有我的看法Layout.Null.cshtml文件看起来像这样:
@{
Model.Metadata.Wrappers.Clear();
}
@Display(Model.Content)
结算包装器将从document.cshtml中移除呈现,并且模板本身仅呈现一个区域Content。所以呈现的只是内容而已。理想的从ajax调用注入。
这有帮助吗?
遵循Bertrand的解决方案,将它作为FilterProvider/IResultFilter实现会更有意义吗?这样我们就不必处理内容检索逻辑。 Bertrand提供的例子似乎不适用于列表内容项目。
我有我的模块中这样的事情,似乎工作:
public class LayoutFilter : FilterProvider, IResultFilter {
private readonly IWorkContextAccessor _wca;
public LayoutFilter(IWorkContextAccessor wca) {
_wca = wca;
}
public void OnResultExecuting(ResultExecutingContext filterContext) {
var workContext = _wca.GetContext();
var routeValues = filterContext.RouteData.Values;
if (filterContext.RequestContext.HttpContext.Request.IsAjaxRequest()) {
workContext.Layout.Metadata.Alternates.Add("Layout_Null");
}
}
public void OnResultExecuted(ResultExecutedContext filterContext) {
}
}
你好Rahul,我正在为我的项目实现这个,但是如何从ajax获得页面内容?谢谢 – tuanvt
@tuanvt检查我的回答 – parliament
重用拉胡尔与添加的代码的答案来回答@ tuanvt的问题。我真的不知道你的问题是什么,但是如果你想访问使用ajax请求发送的数据。如果它是JSON,则发送请求中的setType:“application/json”,然后JSON.stringify(),然后通过从请求流中提取Rahul的ActionFilter来访问它。希望它以任何方式帮助。
public class LayoutFilter : FilterProvider, IResultFilter {
private readonly IWorkContextAccessor _wca;
public LayoutFilter(IWorkContextAccessor wca) {
_wca = wca;
}
public void OnResultExecuting(ResultExecutingContext filterContext) {
var workContext = _wca.GetContext();
var routeValues = filterContext.RouteData.Values;
if (filterContext.RequestContext.HttpContext.Request.IsAjaxRequest()) {
workContext.Layout.Metadata.Alternates.Add("Layout_Null");
if (filterContext.HttpContext.Request.ContentType.ToLower().Contains("application/json"))
{
var bytes = new byte[filterContext.HttpContext.Request.InputStream.Length];
filterContext.HttpContext.Request.InputStream.Read(bytes, 0, bytes.Length);
filterContext.HttpContext.Request.InputStream.Position = 0;
var json = Encoding.UTF8.GetString(bytes);
var jsonObject = JObject.Parse(json);
// access jsonObject data from ajax request
}
}
}
public void OnResultExecuted(ResultExecutedContext filterContext) {
}
}
这是一个非常奇怪的设计,似乎飞在面对搜索引擎优化和所有已知的可用性。什么理由呢? –
看起来您正在开发移动应用程序,对吗? jQuery Mobile? –
@BertrandLeRoy:我不一定不同意。这是客户想要的(特别是他们希望我实现这个模板:http://udfrance.com/dev/STUDIO8/index_black.html)。该网站内容非常淡,搜索引擎优化不是主要目的。 – joshb