🤲 👵🏼 👏 हम एक कॉर्पोरेट साइट के लिए Orchard CMS की कोशिश करते हैं 👨🏻‍✈️ 👨🏽‍✈️ 🚵🏾

नमस्ते!

हमारे पास लिफारे पर एक कॉर्पोरेट वेबसाइट है, और लेआउट बनाने के चरण में इसे काफी श्रमसाध्य काम की आवश्यकता है। हमने यह देखने का निर्णय लिया कि कॉर्पोरेट समाचार बनाने जैसे छोटे से काम के हिस्से के रूप में ऑर्चर्ड सीएमएस में लाइफ़्रे में एक कस्टम खंड का निर्माण एक ही प्रक्रिया से कैसे भिन्न होता है।

इससे हमें क्या मिला:

बाग की स्थापना:

समाचार अनुभाग के कार्यान्वयन में निम्नलिखित भाग शामिल हैं:

सामग्री प्रकार
सामग्री प्रकार सेटिंग्स।
सामग्री ही।
अनुरोध।
प्रोजेक्शन यह है कि साइट पर सब कुछ कैसे दिखेगा। बाहरी तत्वों का अनुकूलन।

प्रकार "समाचार" और अनुरोध का निर्माण (मुख्य पृष्ठ पर प्रदर्शित करने के लिए):

1. एक कंटेंट टाइप बनाएं:

2. समाचार में एक तस्वीर जोड़ें:

3. एक अनुरोध बनाएँ
3.1।

3.2। अब हमें अनुरोध के लिए फ़िल्टर कॉन्फ़िगर करने की आवश्यकता है:

3.3। क्रम को परिभाषित करें:

3.4। क्योंकि क्वेरी परिणाम कहीं दिखाया जाना चाहिए, प्रोजेक्शन बनाएँ:

अब मुख्य पृष्ठ पर एक प्रक्षेपण होगा। आप डैशबोर्ड में कुछ समाचार बना सकते हैं।

उपस्थिति का अनुकूलन

एक थीम बनाएं

आपको कोड जेनरेशन मॉड्यूल डाउनलोड करने और सक्षम करने की आवश्यकता है: http://docs.orchardproject.net/Documentation/Command-line-scaffolding

अगला, स्थापित Orchard के साथ फ़ोल्डर खोलें -> बिन -> orchard.exe, जब तक यह आरंभीकृत न हो जाए, तब तक प्रतीक्षा करें: लिखें: codegen विषय <विषय-नाम> / आधारित: TheThemeMachine / CreateProject: true

हम एक विषय के साथ परियोजना को खोलते हैं:

और हम एक रेजर टेम्पलेट नहीं बना सकते हैं ... हमारे लिए स्टूडियो इंटरफ़ेस से .cshtml फ़ाइलें बनाने के लिए, हमें प्रोजेक्ट को लोड करने की आवश्यकता है, प्रोजेक्ट फ़ाइल को एक टेक्स्ट एडिटर के साथ खोलें और {EFF8FEA-EAE0-44A6-8774-FFD6453904014013 से जोड़कर ProjectTypeGuids संशोधित करें। }। हमारा परिणाम इस प्रकार है: {E53F8FEA-EAE0-44A6-8774-FFD645390401}; {349c5851-65df-11da-9384-000658464621}; {fae04ec0-301f-11d3-bf4b-00-00-00-00-00-0000 अब आप प्रोजेक्ट फ़ाइल को सहेज सकते हैं और स्टूडियो में अपलोड कर सकते हैं।

वर्तमान एक में नहीं मिली सभी थीम फाइलें आधार से ली गई हैं, यदि कोई परिभाषित है, या सेफमोड थीम से है। हमें फ़ेविकॉन को बदलने और लिपियों को जोड़ने की आवश्यकता है, फ़ेविकॉन केवल "Document.cshtml" टेम्प्लेट में जुड़ा हुआ है, आमतौर पर विषय से संबंधित स्क्रिप्ट यहां से जुड़ी हुई हैं।

अब हम Views फ़ोल्डर में Document.cshtml बना सकते हैं।
इस फ़ाइल के अंदर, हम स्क्रिप्ट में लिंक जोड़ते हैं, एक फ़ेविकॉन पंजीकृत करते हैं, और बाकी कोड सेफकोड थीम में एक समान फ़ाइल से लिया जाता है।
दृश्य \ Document.cshtml:

@using Orchard.Mvc.Html; @using Orchard.UI.Resources; @{ RegisterLink(new LinkEntry { Type = "image/x-icon", Rel = "shortcut icon", Href = Url.Content("~/Themes/ETRTheme/Content/images/favicon-201209261628.ico") }); Script.Include("html5.js").UseCondition("lt IE 9").AtHead(); Script.Include("jquery.min.js").AtHead(); Script.Include("jquery-ui.min.js").AtHead(); Script.Include("knockout-2.2.1.js").AtHead(); Script.Include("jquery.lightbox.js").AtHead(); Script.Include("jquery.cycle.all.js").AtHead(); Script.Include("date.format.js").AtHead(); Script.Include("script.js").AtHead(); string title = Convert.ToString(Model.Title); string siteName = Convert.ToString(WorkContext.CurrentSite.SiteName); } <!DOCTYPE html> <html lang="@WorkContext.CurrentCulture" class="static @Html.ClassForPage()"> <head> <meta charset="utf-8" /> <title>@Html.Title(title, siteName)</title> @Display(Model.Head) <script> (function (d) { d.className = "dyn" + d.className.substring(6, d.className.length); })(document.documentElement);</script> </head> <body> @Display(Model.Body) @Display(Model.Tail) </body> </html>

यह फ़ाइल पृष्ठ को रेंडर करने के लिए ज़िम्मेदार है, "@Display (Model.Body)" में यह Layout.cshtml कहती है।

लेआउट में पेज लेआउट शामिल है, सीएसएस को जोड़ता है और विभिन्न क्षेत्रों को "दिखाता है"।

UI को कस्टमाइज़ करने के लिए आकार बदलना

तत्वों की उपस्थिति को अनुकूलित करने के लिए, कुछ नामों के साथ कई टेम्पलेट बनाने के लिए आवश्यक है (प्रत्येक अनुकूलन के लिए एक, ऑर्चर्ड किस तत्व को प्रस्तुत करने के लिए कौन सा टेम्पलेट चुनेगा)।

http://docs.orchardproject.net/Documentation/Accessing-and-rendering-shapes#NamingShapesandTemplates

हमारे मामले में, उदाहरण के लिए, ऐसे टेम्पलेट होंगे:

सामग्री- News.Summary.cshtml - समाचार का छोटा संस्करण प्रदर्शित करने के लिए जिम्मेदार।
SliderGrid-ProjectionPage.cshtml - प्रक्षेपण प्रदर्शित करने के लिए जिम्मेदार।

संक्षिप्त समाचार प्रदर्शित करने के लिए टेम्प्लेट:
Views \ Content-News.Summary.cshtml:

 @using Orchard.Utility.Extensions; @using Orchard.Fields.Fields; @using Orchard.Core.Common.Models; @using Orchard.ContentManagement; @using System.Text.RegularExpressions; @using Orchard.Tags.Models; @using System.Text; @using Orchard.MediaLibrary.Fields; @using Orchard.ContentManagement @{ ContentItem contentItem = Model.ContentItem; var contentTypeClassName = ((string)contentItem.ContentType).HtmlClassify(); var news = ((dynamic)contentItem).News; IEnumerable<ContentField> fields = news.Fields; var common = contentItem.As<CommonPart>(); var publishedDate = ""; if (common.PublishedUtc.HasValue) { var date = common.PublishedUtc.Value; publishedDate = date.ToString("d MMMM yyyy"); } MediaLibraryPickerField newsMainImage = null; bool newsHasImage = false; string imageUrl = null; string imageAlternateText = null; try { newsMainImage = (MediaLibraryPickerField)fields.First(f => f.Name == "NewsMainImage"); imageUrl = newsMainImage.MediaParts.First().MediaUrl; imageAlternateText = newsMainImage.MediaParts.First().AlternateText; newsHasImage = true; } catch (InvalidOperationException e) { newsHasImage = false; } var body = contentItem.As<BodyPart>(); var summaryBodyText = body.Text.RemoveTags().Trim().Replace(Environment.NewLine, " "); summaryBodyText = Regex.Replace(summaryBodyText, @"\s+", " "); var textLength = newsHasImage ? 400 : 500; textLength = textLength > summaryBodyText.Length ? summaryBodyText.Length : textLength; summaryBodyText = summaryBodyText.Substring(0, textLength); var tags = contentItem.As<TagsPart>().CurrentTags; var tagsHtml = new List<IHtmlString>(); foreach (var t in tags) { if (tagsHtml.Any()) { tagsHtml.Add(new HtmlString(", ")); } tagsHtml.Add(Html.ActionLink((string)t.TagName, "Search", "Home", new { area = "Orchard.Tags", tagName = (string)t.TagName }, new { })); } <div @if (newsHasImage) { <text>class="b-newsroll-item-inner"</text> } else { <text>class="b-newsroll-item-inner-no-image"</text> }> @if (common.PublishedUtc.HasValue) { <div class="b-newsroll-date"> @publishedDate </div> } @if (newsHasImage) { <div class="b-newsroll-image-wrapper"> <img class="b-newsroll-image" src="@Url.Content(@imageUrl)" @if (!String.IsNullOrWhiteSpace(imageAlternateText)) { <text>alt="@imageAlternateText"</text> }/> </div> } <div class="b-newsroll-content"> <div class="b-newsroll-text"> <p>@Html.Raw(summaryBodyText)</p> </div> <span class="b-newsroll-content-crop"></span> </div> <div class="b-newsroll-more"> @Html.ItemDisplayLink(T("Read more").ToString(), contentItem) </div> @if (tagsHtml.Any()) { <div class="b-newsroll-tags"> <span> @T("Tags:") </span> @foreach (var htmlString in tagsHtml) { @htmlString } </div> } </div> }

समाचार पोस्ट करने के लिए ग्रिड बनाना

अब हमें एक सामान्य समाचार ग्रिड बनाने की आवश्यकता है, इसके लिए हम "स्लाइडरग्रेड" मॉड्यूल बनाते हैं: कोडजेन मॉड्यूल स्लाइडरडर और इसमें आकृतियों का वर्णन करें:

लेआउट \ SliderGridLayoutForms.cs:

 using System; using Orchard.DisplayManagement; using Orchard.Forms.Services; using Orchard.Localization; namespace SliderGrid.Layouts { public class SliderGridLayoutForms : IFormProvider { protected dynamic Shape { get; set; } public Localizer T { get; set; } public SliderGridLayoutForms( IShapeFactory shapeFactory) { Shape = shapeFactory; T = NullLocalizer.Instance; } public void Describe(DescribeContext context) { Func<IShapeFactory, object> form = shape => { var f = Shape.Form( Id: "SliderGridLayout", _HtmlProperties: Shape.Fieldset() ); return f; }; context.Form("SliderGridLayout", form); } } } Layouts\SliderGridLayout.cs: using System.Collections.Generic; using System.Linq; using Orchard.ContentManagement; using Orchard.DisplayManagement; using Orchard.Localization; using Orchard.Projections.Descriptors.Layout; using Orchard.Projections.Models; using Orchard.Projections.Services; namespace SliderGrid.Layouts { public class SliderGridLayout : ILayoutProvider { public Localizer T { get; set; } private readonly IContentManager _contentManager; protected dynamic Shape { get; set; } public SliderGridLayout(IShapeFactory shapeFactory, IContentManager contentManager) { _contentManager = contentManager; Shape = shapeFactory; T = NullLocalizer.Instance; } public void Describe(DescribeLayoutContext describe) { describe.For("Html", T("Html"), T("Html Layouts")) .Element("SliderGrid", T("SliderGrid"), T("Renders multiPageGrid of elements + slider."), DisplayLayout, RenderLayout, "SliderGridLayout" ); } public LocalizedString DisplayLayout(LayoutContext context) { return T("Renders multiPageGrid + slider."); } public dynamic RenderLayout(LayoutContext context, IEnumerable<LayoutComponentResult> layoutComponentResults) { IEnumerable<dynamic> shapes = context.LayoutRecord.Display == (int)LayoutRecord.Displays.Content ? layoutComponentResults.Select(x => _contentManager.BuildDisplay(x.ContentItem, context.LayoutRecord.DisplayType)) : layoutComponentResults.Select(x => x.Properties); return Shape.SliderGrid(Items: shapes); } } }

ग्रिड चालू करें

हम स्लाइडर मॉड्यूल को "मॉड्यूल" में कनेक्ट करते हैं, लास्टनेम अनुरोध के लेआउट को स्लाइडरड्रिड में बदलते हैं:

हम प्रक्षेपण में केवल एक निश्चित के लिए अनुरोध को बदलते हैं।

निष्कर्ष

व्यवस्थापक पैनल के माध्यम से समाचार लिखने में सक्षम होने के लिए, हमें अपने मामले, समाचार में ContentType लागू करने की आवश्यकता है। मुख्य पृष्ठ पर समाचार सूची दिखाने के लिए, हमें प्रोजेक्शन की आवश्यकता है, और इसके लिए - क्वेरी। ताकि हम तत्वों की उपस्थिति को अनुकूलित कर सकें, हमें वर्तमान विषय में दृश्य फ़ोल्डर में कुछ नामों के साथ टेम्पलेट डालने की आवश्यकता है, जिसके द्वारा ऑर्चर्ड यह पता लगा सकता है कि इस टेम्पलेट को किस आकार में लागू किया जाए। कंटेंटपार्ट से कैसे प्राप्त करें और ContentTypeField लघु समाचार उदाहरण से स्पष्ट है।

हमारे प्रयोग के आधार पर, हम इस निष्कर्ष पर पहुंचे कि समाचार प्रकाशित करने के लिए एक उपकरण तैयार करने के चरण में ऑर्चर्ड और लाइफ़रे ... लगभग एक ही हैं। वहाँ और वहाँ दोनों विषयों का अनुकूलन, आवश्यक संस्थाओं का उत्पादन, इन संस्थाओं को अनुकूलित करने की संभावना है, लेकिन एक अति सूक्ष्म अंतर है: इस स्तर पर जब आपको ब्लॉक आउटपुट बनाने की आवश्यकता होती है (उदाहरण के लिए, समाचार या लेखों की एक सूची), लाइफ़रे के साथ समस्याएं शुरू होती हैं - समस्या उस प्रोग्रामर पर आती है जिसे समस्या की आवश्यकता होती है उन्हें प्रदर्शित करने के लिए अपने दम पर संस्थाओं को खींचो। यह जावा में और जीवनकाल के लिए विकास में काफी उच्च योग्यता की आवश्यकता है।

ऑर्चर्ड में एक सुविधाजनक क्वेरी तंत्र, क्वेरी है, जिसे हर कोई संभाल सकता है।

हम एक कॉर्पोरेट साइट के लिए Orchard CMS की कोशिश करते हैं