मावेन के माध्यम से एक साइट का निर्माण

पिछले कुछ समय से मैं मावेन का उपयोग परियोजनाओं के निर्माण के उपकरण के रूप में कर रहा हूं। यह उपकरण बहुत ही रोचक और फैशनेबल है। यह जावा डेवलपर्स के बीच विशेष रूप से लोकप्रिय है, हालांकि यह अन्य क्षेत्रों में उपयोगी हो सकता है। इसलिए, अब मैं इस बारे में बात करना चाहूंगा कि आप साइट बनाने के लिए इसका उपयोग कैसे कर सकते हैं। मुझे नहीं पता कि यह आपके लिए उपयोगी क्यों हो सकता है, मैं इसका उपयोग परियोजनाओं के लिए प्रलेखन बनाने के लिए करता हूं। इस लेख में, मैं इस लेख के पाठ से युक्त एक एचटीएमएल पेज बनाने की कोशिश करूंगा और हेबर पर एक नियमित लेख की तरह देखूंगा।




परियोजना के लिए साइट एक साधारण कमांड का उपयोग करके बनाई गई है:

mvn site 

डिफ़ॉल्ट रूप से, इस आदेश के परिणामस्वरूप, html पृष्ठों का एक मानक सेट एक खाली परियोजना के लिए बनाया गया है: index.html, dependencies.html, एकीकरण.html ... ये maven-project-info-report-plugin प्लगइन द्वारा बनाई गई रिपोर्टें हैं । Pom.xml में रिपोर्टिंग अनुभाग सेट करके उन्हें अक्षम या जोड़ा जा सकता है। लेकिन मैं इस विषय में तल्लीन नहीं करूंगा, क्योंकि मैं मावेन की एक और विशेषता के बारे में बात करना चाहता हूं - अपनी सामग्री को जोड़ना और बनाई जा रही साइट की उपस्थिति को अनुकूलित करना।

प्रोजेक्ट सेटअप

तो, परियोजना शुरू करने के लिए। सामग्री बनाने के लिए, मावन-साइट-प्लगइन का उपयोग किया जाता है , इसलिए यह इसे परियोजना के निर्माण खंड में जोड़ने और इसे आपकी आवश्यकताओं के लिए कॉन्फ़िगर करने के लिए समझ में आता है।

 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.example</groupId> <artifactId>site-example</artifactId> <version>1.0-SNAPSHOT</version> <packaging>pom</packaging> <name>Site Example</name> <description> This is an example application that demonstrates creation of site for project using maven </description> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-site-plugin</artifactId> <version>2.1</version> <configuration> <inputEncoding>UTF-8</inputEncoding> <outputEncoding>UTF-8</outputEncoding> <generateReports>false</generateReports> </configuration> </plugin> </plugins> </build> </project> 

इस उदाहरण में, स्रोत पाठ ( inputEncoding ) और परिणामी पृष्ठ ( outputEncoding ) के एन्कोडिंग स्पष्ट रूप से सेट किए गए हैं, और रिपोर्ट जनरेशन ( जनरेटपोर्ट ) अक्षम है। सेटिंग्स की एक पूरी सूची यहां पाई जा सकती है । अब आप मुख्य भाग पर जा सकते हैं।

सामग्री जोड़ना

डिफ़ॉल्ट रूप से, साइट बनाने के लिए स्रोत कोड को src / साइट में संग्रहीत किया जाता है, प्रारूप के अनुसार फ़ोल्डरों में विभाजित किया जाता है, जिनमें से मावेन में 3 टुकड़े होते हैं:

• APT प्रारूप ("लगभग सादा पाठ")। प्रारूप कुछ हद तक प्रसिद्ध विकी प्रारूप की याद दिलाता है। मेरे लिए सबसे आकर्षक, इसलिए, लेख में आगे मैं इस पर सबसे अधिक ध्यान केंद्रित करूंगा।
• FML प्रारूप ("FAQ मार्कअप भाषा")। जैसा कि नाम से ही स्पष्ट है, इसे विशेष रूप से FAQ प्रलेखन बनाने के लिए बनाया गया था। पहले मावेन से आया था।
• XDoc प्रारूप । पहले मावेन से आया था, जहां यह मुख्य / एकमात्र प्रारूप था।

सामान्य तौर पर, परियोजना की प्रारंभिक संरचना कुछ इस तरह दिखनी चाहिए:

 +- src/ +- site/ +- resources/ | +- css/ | | +- site.css | | | +- images/ | +- pic1.jpg | +- apt/ | +- index.apt | +- fml/ | +- general.fml | +- faq.fml | +- xdoc/ | +- other.xml | +- site.xml 

परिणाम इस तरह दिखेगा:

 +- target/ +- site/ +- css/ | +- images/ | +- index.html +- general.html +- faq.html +- other.html 

जैसा कि आप देख सकते हैं, स्रोत कोड के अलावा, एक साइट। Xml फ़ाइल भी है - एक साइट डिस्क्रिप्टर और एक संसाधन फ़ोल्डर - स्थैतिक साइट संसाधन, इस सब के बारे में बाद में, लेकिन अब हम सामग्री बनाने के लिए वापस आ जाते हैं।

APT प्रारूप

इसके लिए सरल पाठ निर्माणों का उपयोग करते हुए दस्तावेज़ की संरचना का वर्णन करता है, एक विकि शैली की तरह बहुत। इस स्थिति में, स्रोत पाठ एक नियमित पाठ फ़ाइल की तरह दिखता है। यह दिखाने के लिए कि यह कैसे काम करता है, इस प्रारूप के उपयोग से इस लेख के विवरण पर विचार करें।

सबसे पहले, एक शीर्षक जोड़ें। यह एक वैकल्पिक तत्व है, यदि मौजूद है, तो दस्तावेज़ की शुरुआत में स्थित होना चाहिए। यह कम से कम तीन पूर्ववर्ती द्वारा इंगित किया जाता है ---, इसके बाद दस्तावेज़ के शीर्षक के अनुरूप पाठ। इसे निम्नानुसार बंद किया जा सकता है - लेखक और तिथि के बारे में अतिरिक्त जानकारी के साथ। हमारे मामले में, यह इस तरह दिखेगा:

  ----     ---- sody ---- 2011-03-15 

मैं जोड़ूंगा कि आईएसओ -0101 प्रारूप में तारीख का उपयोग करने की सिफारिश की गई है, अर्थात्। YYYY-MM-DD

अब हम दस्तावेज़ को छोटे तार्किक रूप से संबंधित घटकों, अनुभागों में तोड़ते हैं। धारा शीर्षकों को पंक्ति के आरंभ में सादे पाठ के रूप में निर्दिष्ट किया जाता है, पूर्ववर्ती रिक्त स्थान, टैब आदि के बिना। वे घोंसले के शिकार के कई स्तरों का समर्थन करते हैं, प्रत्येक को अगले एक, दो, आदि से शुरू करना चाहिए। अक्षर *। सरल दस्तावेजों के लिए, वर्गों के बजाय पैराग्राफ का उपयोग करने की सिफारिश की जाती है।

  ----     ---- sody ---- 2011-03-15         *  APT    *    *   *    

अनुभाग बनाए गए हैं, अब आपको उन्हें पाठ जोड़ने की आवश्यकता है। किसी दस्तावेज़ में निहित किसी भी पाठ को पैराग्राफ में विभाजित किया जा सकता है, चाहे वह किसी दस्तावेज़ का सामान्य पाठ, अनुभाग पाठ या सूची आइटम हो। पैराग्राफ को एक रिक्त लाइन द्वारा अलग किए गए पाठ की पंक्तियों के सेट के रूप में नामित किया गया है। इसके अलावा, पैराग्राफ की पहली पंक्ति कई स्थानों से पहले होनी चाहिए। रिक्त स्थान की संख्या महत्वपूर्ण नहीं है, लेकिन यह 2 का उपयोग करने के लिए प्रथागत है, और इन दो स्थानों के साथ पैराग्राफ की प्रत्येक पंक्ति शुरू करें।

  ----     ---- sody ---- 2011-03-15           .      .     java         .  ,              .        : mvn site 

कभी-कभी सूचियों का उपयोग करना आवश्यक हो जाता है। उन्हें इंगित करने के लिए, तत्वों के नाम * चरित्र से शुरू होने चाहिए और एक रिक्त स्ट्रिंग से अलग होने चाहिए, नेस्टेड सूची के तत्वों को बड़ी संख्या में रिक्त स्थान से पहले होना चाहिए। हमारे मामले में, प्रारूप का वर्णन करने वाले भाग को एक सूची के रूप में व्यवस्थित किया जा सकता है:

            src/site       ,     3 : * APT Format ("Almost Plain Text").  -     .   ,           . * FML Format ("FAQ Markup Language").         FAQ .    . * XDoc format.    ,   / . [] 

उच्च-स्तरीय सूची आइटम और अनुभाग नाम स्वचालित रूप से वर्तमान सूची को समाप्त करते हैं। यदि आपको मैन्युअल रूप से सूची को बंद करने की आवश्यकता है, तो आप [] प्रतीक का उपयोग कर सकते हैं।

आपको किसी तरह से किसी पाठ का चयन करना होगा या उसे बिना स्वरूपण के छोड़ना पड़ सकता है। प्रोग्रामिंग में, यह स्रोत कोड को उजागर करने के लिए उपयोगी हो सकता है। पदनाम के लिए कम से कम 3 वर्णों का उपयोग किया जाता है - पिछले स्थान नहीं।

     : +----+ +- target/ +- site/ +- css/ | +- images/ | +- index.html +- general.html +- faq.html +- other.html +----+ 

यदि आप + सिंबल जोड़ते हैं, तो ऐसे टेक्स्ट को फंसाया जाएगा।

खैर, चित्रों के बिना किस तरह का दस्तावेज़? एक तस्वीर को इंगित करने के लिए, आपको वर्णों में फ़ाइल के लिए पथ संलग्न करना होगा [], जिसे रिक्त स्थान से पहले नहीं होना चाहिए, जिसके बाद चित्र का नाम अनुसरण कर सकता है।

 [images/sample-site.jpg] Example Site 

यदि हमें किसी तालिका की आवश्यकता है, तो हम निम्नलिखित सिंटैक्स का उपयोग कर सकते हैं:

 *----------*--------------*----------------* ||  ||  ||  | *----------*--------------*----------------* |  |  |  | *----------*--------------*----------------* |  |  |  | *----------*--------------*----------------* |  |  |  | *----------*--------------*----------------*  

या तो:

 *----------------:--------------+ ||  |  .. | *----------------:--------------+ ||   | 26.03.1989 | *----------------:--------------+ ||  | 651003 | *----------------:--------------+   

तालिका को पंक्ति * से शुरू करना चाहिए - पिछले स्थानों के बिना, तालिका पंक्तियों को एक ही पंक्ति * से अलग किया जाना चाहिए। साथ ही, पाठ को संरेखित करने के लिए निम्नलिखित वर्णों का उपयोग किया जा सकता है:

• * केंद्र के लिए
• + बाएँ संरेखण
• : दाईं ओर संरेखित करना

कॉलम शीर्षक को दोहरे चरित्र द्वारा निरूपित किया जा सकता है |

अब इस पृष्ठ के अन्य संसाधनों / पृष्ठों / अनुभागों के लिंक को हमारे पाठ में जोड़ते हैं। अनुभागों के लिंक बनाने की क्षमता जोड़ने के लिए, एंकर का उपयोग किया जाता है। उन्हें निरूपित करने के लिए एकल वर्ण {} का उपयोग किया जाता है। उनके बीच जो निष्कर्ष निकाला गया है, उसके अनुसार एक लंगर उत्पन्न होगा। मैं ध्यान देता हूं कि पीढ़ी अंडरस्कोर के साथ रिक्त स्थान के प्रतिस्थापन के साथ होती है। लिंक को संदर्भित करने के लिए समान वर्णों का उपयोग किया जाता है, लेकिन दो बार {{}}। उनके बीच एंकर का नाम हो सकता है, इस संसाधन के किसी अन्य पेज का एक रिश्तेदार लिंक, या किसी अन्य संसाधन का परिचित लिंक हो सकता है। आप लिंक को सभी चीज़ों को डबल {{}} + में बदलकर अनटाइटल लिंक को दूसरे {} में ले सकते हैं।

            src/site       ,     3 : * {{{http://maven.apache.org/doxia/references/apt-format.html}APT Format}} ("Almost Plain Text").  -     .   ,           . * {{{http://maven.apache.org/doxia/references/fml-format.html}FML Format}} ("FAQ Markup Language").         FAQ .    . * {{{http://maven.apache.org/doxia/references/xdoc-format.html}XDoc format}}.    ,   / . [] 

खैर, निष्कर्ष में, आप फ़ॉन्ट बदल सकते हैं। एकल वर्ण <> इटैलिक्स इंगित करते हैं, डबल << >> - बोल्ड, ट्रिपल <<< >>> - मोनोसेप्ड।

  ,       ISO-8601, .. <<YYYY-MM-DD>>. 

परिणामस्वरूप, हमें कुछ ऐसा मिलता है:



कुछ और पृष्ठ जोड़ें और आप उपस्थिति को अनुकूलित करने के लिए आगे बढ़ सकते हैं।

जानकारी के लिए यहां

रूप अनुकूलित करें

उपस्थिति को अनुकूलित करने के लिए, आप 3 चीजें कर सकते हैं:

• अपनी आवश्यकताओं को पूरा करने के लिए site.css में CSS शैलियों को ओवरराइड करें।
• साइट डिस्क्रिप्टर (site.xml) जोड़ें। इसमें आप पृष्ठ लेआउट के मूल तत्वों को सेट / जोड़ सकते हैं, आप नेविगेशन मेनू को भी कॉन्फ़िगर कर सकते हैं।
• पृष्ठ टेम्पलेट को कस्टमाइज़ करें, इस स्थिति में, आप परिणामी पृष्ठ को पूरी तरह से बदल सकते हैं।

शैली अनुकूलन

सबसे सरल बात जो आप कर सकते हैं वह है सीएसएस शैलियों को उन लोगों के लिए ओवरराइड करना जिनकी हमें ज़रूरत है। सभी की जरूरत है कि एक site.css फ़ाइल बनाई जाए, और फिर वह कौन करेगा। मेरे उदाहरण में, मैंने हब पर उन लोगों के समान एक आधार शैली के रूप में लिया।

साइट डिस्क्रिप्टर सेटिंग

प्रोजेक्ट के लिए साइट डिस्क्रिप्टर फ़ाइल (site.xml) जोड़ें।

 <project xmlns="http://maven.apache.org/DECORATION/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/DECORATION/1.0.0 http://maven.apache.org/xsd/decoration-1.0.0.xsd"> <body> <menu name=""> <item name="" href="index.html"/> <item name=" 0" href="sample0.html"/> <item name=" 1" href="sample1.html"/> <item name=" 2" href="sample2.html"/> <item name=" 4" href="sample3.html"/> </menu> </body> </project> 

इस उदाहरण में, साइड मेनू कॉन्फ़िगर किया गया है, जिसमें लेख अनुभाग शामिल है, जो बदले में तत्व अनुच्छेद और उदाहरण 0-4 शामिल हैं। आप इसे कई खंडों में तोड़ सकते हैं:

 <project xmlns="http://maven.apache.org/DECORATION/1.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/DECORATION/1.0.0 http://maven.apache.org/xsd/decoration-1.0.0.xsd"> <body> <menu name=""> <item name="" href="index.html"/> </menu> <menu name=""> <item name=" 0" href="sample0.html"/> <item name=" 1" href="sample1.html"/> <item name=" 2" href="sample2.html"/> <item name=" 4" href="sample3.html"/> </menu> </body> </project> 

मेनू के अतिरिक्त, अन्य तत्वों को नियंत्रित करना भी संभव है, उदाहरण के लिए, संस्करण, प्रकाशन तिथि, बैनर, नेविगेशन बार, आदि।

  <version position="none"/> <publishDate position="navigation-bottom" format="yyyy-MM-dd"/> 

यदि आप इन पंक्तियों को जोड़ते हैं, तो प्रोजेक्ट संस्करण दिखाई नहीं देगा, और प्रकाशन दिनांक निर्दिष्ट प्रारूप के साथ मेनू के नीचे स्थित होगी। वर्णित सब कुछ के अलावा, आप साइट पर एक और त्वचा लागू कर सकते हैं:

  <skin> <groupId>org.apache.maven.skins</groupId> <artifactId>maven-classic-skin</artifactId> <version>1.0</version> </skin> 

नतीजतन, साइट की उपस्थिति इस में बदल जाएगी:



यहां सेटिंग्स के विवरण के लिए।

साइट टेम्पलेट सेटअप

एक साइट टेम्पलेट वेग पर एक स्क्रिप्ट है जो पाठ को परिणामी प्रारूप में परिवर्तित करने के लिए जिम्मेदार है, हमारे मामले में, HTML। कई बारीकियाँ हैं, इसलिए मैं इस लेख में इस पर विचार नहीं करूँगा, मुझे केवल वही मिलेगा जो मुझे मिला था:



स्रोत कोड github पर पाए जा सकते हैं।