zoukankan      html  css  js  c++  java
  • Orchard运用

    一般,对于条目过多的系统或博客,分页显示是最简单的方式。目前分页方式基本有三种格式:

    1.显示所有信息,包括标明当前页面,提供上一页和下一页链接和使用首页和末页链接。

    2.只标注上一页和下一页链接。

    3.无限滚动自动分页。

    Orchard默认是提供第一种方式,也就是会在内容底部呈现一个分页导航,类似博客园首页就是这样。

    而博客系统Wordpress中,第二种方式更为流行和通用。如果你的博客是从Wordpress迁移到Orchard的, 那么自然你需要做些定制修改。今天就简单分享一个解决方案。

    1. 在当前主题Theme目录新建三个文件:

    Pager.cshtml

    Pager.First.cshtml

    Pager.Last.cshtml

    2. 记事本打开Pager.cshtml文件, 添加如下代码:

    @{
         // number of page number links to show, 0 means no link, 1 means only the current page, or more accepted.
    
        Model.Quantity = 0;
    
        Model.PreviousText = T("Newer");
        Model.NextText = T("Older");
        Model.Classes.Add("group");
        Model.Metadata.Alternates.Clear();
        Model.Metadata.Type = "Pager_Links";
    }
    @Display(Model)
    

    其他两个文件内容为空即可。

    3. 保存之,如果可能的话你有必要重新定制分页的样式:

    /* Pager
    ***************************************************************/
    .pager { list-style: none; margin-top: 1em; margin-bottom: -1em; }
    .pager li { display: inline-block; background-color: #787878; border-right: 1px solid #ffffff; font-size: 0.8824em; line-height: 1.5333em; margin-right: 0.3333em; }
    .pager a { padding: 0px 1em 2px 1em; display: block; color: #ffffff; text-decoration: none; text-transform: none; font-variant: small-caps; 
    -webkit-transition: background-color 0.27s ease;
    -moz-transition: background-color 0.27s ease;
    -o-transition: background-color 0.27s ease;
    transition: background-color 0.27s ease;
    }
    .pager a:hover { text-decoration: none; background-color: #e20f14; color: #ffffff; }
    

    这只是一个样例, 你可以任意调整。

    题外话:目前只是知道如何修改,其中原理还说不明道不清,基本就是通过覆盖核心的模版来说实现的。

    相关资源链接

    Overriding the Pager rendering in Orchard

  • 相关阅读:
    Angularjs-Forms(表单)
    Angularjs-filter(过滤器)
    Angularjs –– Expressions(表达式)
    Angular
    AngularJS
    AngularJS–Scope(作用域)
    AngularJS–service(服务)
    AngularJS--控制器(Controller)
    AngularJS指南文档
    Web 开发模式演变历史和趋势
  • 原文地址:https://www.cnblogs.com/sunwangji/p/3703327.html
Copyright © 2011-2022 走看看