Orchard運用-カスタムブログページング表示
2119 ワード
一般的に、エントリが多すぎるシステムやブログでは、ページング表示が最も簡単です.現在、ページング方式には基本的に3つのフォーマットがあります.
1.現在のページの表示、前のページと次のページへのリンクの提供、トップページと最後のページへのリンクの使用など、すべての情報を表示します.
2.前のページと次のページのリンクのみを表示します.
3.無限スクロール自動ページング.
Orchardのデフォルトは、ブログパークのトップページのように、コンテンツの下部にページングナビゲーションが表示される最初の方法を提供します.
ブログシステムWordpressでは、2つ目の方法が流行し、一般的です.ブログがWordpressからOrchardに移行している場合は、カスタマイズされた変更が必要です.今日はソリューションを簡単に共有します.
Pager.cshtml
Pager.First.cshtml
Pager.Last.cshtml
他の2つのファイルの内容は空です.
これはただのサンプルで、任意に調整することができます.
余談:現在はどのように修正するかを知っているだけで、その原理はまだはっきりしていないが、基本的にはコアをカバーするテンプレートを通じて実現されている.
関連リソースリンク
Overriding the Pager rendering in Orchard
1.現在のページの表示、前のページと次のページへのリンクの提供、トップページと最後のページへのリンクの使用など、すべての情報を表示します.
2.前のページと次のページのリンクのみを表示します.
3.無限スクロール自動ページング.
Orchardのデフォルトは、ブログパークのトップページのように、コンテンツの下部にページングナビゲーションが表示される最初の方法を提供します.
ブログシステムWordpressでは、2つ目の方法が流行し、一般的です.ブログがWordpressからOrchardに移行している場合は、カスタマイズされた変更が必要です.今日はソリューションを簡単に共有します.
1.現在のトピックThemeディレクトリに3つのファイルを新規作成します。
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)
他の2つのファイルの内容は空です.
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