आर्किटेक्चर पोर्टफोलियो JBake - दृष्टि और उपयोग केस
प्रकाशित: 15 January 2026
आर्किटेक्चरल विज़न
निर्देशक सिद्धांत
आर्किटेक्चर विचारों के पृथक्करण के सिद्धांत पर आधारित है :
-
sagri : एससीआईडॉक्स फ़ाइलें संरचित मेटाडेटा के साथ
-
प्रस्तुति : templates Thymeleaf पुन: उपयोग करने योग्य
-
डेटा" : JBake द्वारा AsciiDoc属性 से स्वचालित रूप से निकाला गया मॉडल
-
शैली : Bootstrap 5 को दृश्यात्मक सुसंगतता के लिए
रणनीतिक विकल्प: पोर्टफोलियो के लिए AsciiDoc
क्यों AsciiDoc ?
| मापदंड | लाभ |
|---|---|
संगति |
Même format que les articles de blog |
मेटाडेटा |
संरचित और विस्तारयोग्य गुण ( |
रखरखावयोग्यता |
सरल टेक्स्ट संपादन, Git-संस्करणीय |
लचीलापन |
इसमें समृद्ध सामग्री (तालिकाएँ, कोड, छवियाँ) हो सकती है |
टेम्प्लेटिंग |
JBake स्वचालित रूप से Thymeleaf के लिए अट्रिब्यूट निकालता है |
डेटा मॉडल
हर पोर्टफ़ोलियो प्रोजेक्ट एक AsciiDoc दस्तावेज़ है, जिसके साथ :
-
शीर्षक मेटाडेटा : संरचित जानकारी (ग्राहक, अवधि, प्रौद्योगिकियाँ, आदि)
-
दस्तावेज़ का शरीर : कथात्मक विवरण, चुनौतियाँ, समाधान, परिणाम
-
वैयक्तिकृत विशेषताएँ: पूर्वसंयोजित`project-*`स्वचालित निष्कर्षण के लिए
@startuml
skinparam backgroundColor #FEFEFE
skinparam handwritten false
class ProjetAsciiDoc {
+titre: String
+jbake-type: "परियोजना"
+jbake-status: published|draft
+jbake-date: Date
+jbake-tags: List<String>
--
+project-category: String
+project-client: String
+project-duration: String
+project-role: String
+project-thumbnail: String
+project-gallery: List<String>
+project-tech-stack: String
+project-highlights: List<String>
+project-demo-url: String
+project-github-url: String
--
+body: HTML (converti)
}
class JBakeEngine {
+parse(asciidoc)
+extractMetadata()
+convertToHTML()
}
class ThymeleafTemplate {
+portfolio.html
+project.html
+partials/project-card.html
}
class PortfolioPage {
+published_projects: List
+filtres: categories
}
ProjetAsciiDoc --> JBakeEngine : पर्स
JBakeEngine --> ThymeleafTemplate : डेटा प्रदान करता है
ThymeleafTemplate --> PortfolioPage : उत्पन्न करता है
@enduml
विस्तृत उपयोग केस
UC1 : एक आइटम पोर्टफोलियो में जोड़ें
नॉमिनल फ़्लक्स
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "संपादक\nपाठ" as editor participant "फ़ाइल\nAsciiDoc" as file participant "JBake\nEngine" as jbake participant "साइट\nस्थैतिक" as site dev -> editor : नई फ़ाइल बनाएँ activate editor editor -> file : पोर्टफ़ोलियो/nouveau-projet.adoc activate file dev -> editor : लिखें शीर्षक के साथ मेटाडेटा\n(titre, type=project, status=published,\nविशेषताएँ project-* dev -> editor : लिखें कथात्मक सामग्री\n(संदर्भ, चुनौतियाँ, समाधान) dev -> editor : assets/img/portfolio/ में छवियाँ जोड़ें editor -> file : सहेजें deactivate editor dev -> jbake : बिल्ड लॉन्च (jbake -b) activate jbake jbake -> file : पढ़ना और पार्स करना jbake -> jbake : मेटाडेटा निकालें jbake -> jbake : परिवर्तित AsciiDoc → HTML jbake -> jbake : टेम्प्लेट लागू करें project.html jbake -> jbake : सूची portfolio.html में जोड़ें jbake -> site : स्थैतिक पृष्ठ बनाएँ deactivate jbake dev -> site : परिणाम जाँचें activate site site --> dev : प्रोजेक्ट दिखाएँ deactivate site @enduml
बनाने के लिए फ़ाइल का टेम्प्लेट
डेवलपर बनाता है`content/portfolio/nom-projet.adoc`एक मानकीकृत संरचना के साथ :
-
सभी आवश्यक विशेषताओं के साथ शीर्ष
-
मानकीकृत अनुभाग (संदर्भ, चुनौतियाँ, समाधान, परिणाम)
-
छवियों की सुसंगत नामावली
सत्यापन अंक
-
अनिवार्य विशेषताएँ मौजूद हैं (
jbake-type,jbake-status,project-thumbnail) -
संदर्भित छवियाँ हैं`assets/img/portfolio/`
-
JBake बिल्ड त्रुटि के बिना सफलतापूर्वक होता है
-
प्रोजेक्ट पोर्टफ़ोलियो पृष्ठ पर दिखाई देता है
-
प्रोजेक्ट का व्यक्तिगत पृष्ठ सही ढंग से प्रदर्शित होता है
UC2 : पोर्टफ़ोलियो से एक आइटम हटाएँ
नाममात्र प्रवाह
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "प्रणाली\nफ़ाइलें" as fs participant "JBake\nइंजन" as jbake participant "साइट\nस्थैतिक" as site database "कैश\nJBake" as cache dev -> fs : पोर्टफ़ोलियो/projet-ancien.adoc को हटाएँ activate fs fs --> dev : फ़ाइल हटाई गई deactivate fs dev -> fs : (वैकल्पिक) हटाएँ संबद्ध छवियाँ\nassets/img/portfolio/projet-ancien-* activate fs fs --> dev : हटाई गई छवियाँ deactivate fs dev -> cache : कैश JBake साफ़ करें activate cache cache --> dev : कैश वीडियो deactivate cache dev -> jbake : पुनर्निर्माण पूर्ण (jbake -b) activate jbake jbake -> jbake : स्कैनर content/portfolio/ jbake -> jbake : प्रोज़ेक्ट अनुपस्थित → नहीं बनाया गया jbake -> jbake : पुनः बनाइए portfolio.html\n(हटाए गए प्रोजेक्ट के बिना) jbake -> site : नया बिल्ड तैनात करें deactivate jbake dev -> site : सत्यापित करें activate site site --> dev : प्रोजेक्ट सूची में अनुपस्थित है deactivate site @enduml
वैकल्पिक रणनीति : अभिलेखागार
स्थायी रूप से हटाने के बजाय, एक फ़ोल्डर बनाने की संभावना`content/portfolio/archive/`
-
फ़ाइल को हटाने की बजाय इसे ले जाएँ
-
आसानी से बहाल करने की अनुमति देता है
-
गिट का इतिहास अधिक स्पष्ट रखें
संसाधनों की सफाई
-
जाँच करें अनाथ छवियों में`assets/img/portfolio/`
-
अन्य परियोजनाओं द्वारा संदर्भित नहीं की गई छवियों को हटाएँ
-
JBake का कैश साफ़ करें ताकि भूतिया संदर्भों से बचा जा सके
UC3 : अप्रकाशित (draft) में रखें
सामान्य फ़्लक्स
@startuml skinparam backgroundColor #FEFEFE actor Développeur as dev participant "फ़ाइल\nAsciiDoc" as file participant "JBake\nइंजन" as jbake participant "साइट\nस्थैतिक" as site dev -> file : खोलें portfolio/projet.adoc activate file dev -> file : संशोधित करें विशेषता\n:jbake-status: प्रकाशित\n↓\n:jbake-status: ड्राफ्ट file --> dev : सुरक्षित deactivate file dev -> jbake : पुनःनिर्माण (jbake -b) activate jbake jbake -> file : फ़ाइल पार्स करें jbake -> jbake : ड्राफ्ट स्थिति का पता लगाएँ jbake -> jbake : published_projects से बाहर रखें jbake -> jbake : सार्वजनिक पृष्ठ न बनाएँ note right प्रोजेक्ट अभी भी मौजूद है लेकिन प्रकाशित नहीं है। end note jbake -> site : साइट उत्पन्न करें (इस परियोजना के बिना) deactivate jbake dev -> site : पोर्टफोलियो जाँचें activate site site --> dev : परियोजना सार्वजनिक सूची में अनुपस्थित है। deactivate site @enduml
संभावित स्थितियाँ
@startuml skinparam backgroundColor #FEFEFE [*] --> Draft : Création initiale Draft --> Published : सत्यापन और प्रकाशन Published --> Draft : अस्थायी हटाना Draft --> Archived : परित्यागित परियोजना Published --> Archived : अप्रचलित प्रोजेक्ट Archived --> [*] : स्थायी हटाव Published --> Published : अद्यापन note right of Draft :jbake-status: प्रारूप जनता के लिए दृश्य नहीं जारी परियोजनाओं के लिए उपयोगी end note note right of Published :jbake-status: प्रकाशित पोर्टफ़ोलियो पर दृश्यमान JBake द्वारा अनुक्रमित end note note right of Archived आर्काइव में ले जाया गया/ या jbake-status: archived प्रकाशित नहीं लेकिन संरक्षित end note @enduml
सामान्य उपयोग केस
-
लेखनाधीन प्रोजेक्ट : ड्राफ्ट बनाएं, जब तैयार हो तब प्रकाशित करें
-
अस्थायी रूप से गोपनीय परियोजना : ग्राहक समझौते के दौरान ड्राफ्ट में रखें
-
महत्वपूर्ण अपडेट : ड्राफ्ट में जाना, संपादित करना, फिर से प्रकाशित करना
-
A/B testing : ड्राफ्ट में डुप्लिकेट करें, परीक्षण करें, सर्वोत्तम संस्करण प्रकाशित करें
टेम्प्लेटिंग वास्तुकला
पुन: प्रयोज्य टेम्प्लेट्स की रणनीति
@startuml
skinparam backgroundColor #FEFEFE
skinparam componentStyle rectangle
package "टेम्पलेट्स Thymeleaf" {
component [index.html] as index
component [portfolio.html] as portfolio
component [project.html] as project
package "आंशिक" {
component [header.html] as header
component [footer.html] as footer
component [project-card.html] as card
component [tech-badge.html] as badge
component [gallery.html] as gallery
}
}
package "डेटा JBake" {
database "published_projects" as data
database "सामग्री (परियोजना)" as content
}
index --> header
index --> footer
portfolio --> header
portfolio --> footer
portfolio --> card
data --> portfolio : इटरेशन
project --> header
project --> footer
project --> badge
project --> gallery
content --> project : व्यक्तिगत परियोजना
note right of card
पुनः उपयोगी खंड
प्रोजेक्ट का कार्ड प्रदर्शित करने के लिए :
- थंबनेल
- शीर्षक
- टैग
- प्रमुख बिंदु
end note
@enduml
डेटा निष्कर्षण पैटर्न
JBake AsciiDoc विशेषताओं को Thymeleaf में सुलभ संपत्तियों में स्वचालित रूप से परिवर्तित करता है :
@startuml
skinparam backgroundColor #FEFEFE
rectangle "AsciiDoc दस्तावेज़" {
(":project-client: Acme Corp") as attr1
(":project-duration: 6 महीने") as attr2
(":प्रोजेक्ट-टैग: java, react") as attr3
}
rectangle "JBake मॉडल" {
(content['project-client']) as prop1
(content['project-duration']) as prop2
(content.tags) as prop3
}
rectangle "Thymeleaf टेम्पलेट" {
(th:text="${project['project-client']}") as tmpl1
(th:text="${project['project-duration']}") as tmpl2
(th:each="टैग : ${project.tags}") as tmpl3
}
attr1 --> prop1 : parsing
attr2 --> prop2 : parsing
attr3 --> prop3 : parsing
prop1 --> tmpl1 : binding
prop2 --> tmpl2 : binding
prop3 --> tmpl3 : binding
@enduml
नामकरण नियम
-
परियोजना गुण : प्रीफ़िक्स`project-*` (ex:
project-client,project-tech-stack) -
फ़ाइलें : kebab-case (उदाहरण:`ecommerce-platform.adoc`)
-
छवियाँ : प्रीफ़िक्स परियोजना का नाम (उदाहरण:`ecommerce-platform-thumb.jpg`)
-
Templates : कार्यात्मक नाम (उदाहरण:`project-card.html`,
tech-badge.html)
प्रकाशन वर्कफ़्लो
विकास पाइपलाइन
@startuml
skinparam backgroundColor #FEFEFE
skinparam handwritten false
class ProjetAsciiDoc {
+titre: String
+jbake-type: "परियोजना"
+jbake-status: published|draft
+jbake-date: Date
+jbake-tags: List<String>
__
+project-category: String
+project-client: String
+project-duration: String
+project-role: String
+project-thumbnail: String
+project-gallery: List<String>
+project-tech-stack: String
+project-highlights: List<String>
+project-demo-url: String
+project-github-url: String
__
+body: HTML (converti)
}
class JBakeEngine {
+parse(asciidoc)
+extractMetadata()
+convertToHTML()
}
class ThymeleafTemplate {
+portfolio.html
+project.html
+partials/project-card.html
}
class PortfolioPage {
+published_projects: List
+filtres: categories
}
ProjetAsciiDoc --> JBakeEngine : parse
JBakeEngine --> ThymeleafTemplate : डेटा देता है
ThymeleafTemplate --> PortfolioPage : उत्पन्न करता
@enduml
पर्यावरणों
| पर्यावरण | उपयोग | स्वीकृत स्थिति |
|---|---|---|
Local |
विकास और पूर्वावलोकन |
ड्राफ्ट, प्रकाशित |
स्टेजिंग |
पूर्व-उत्पादन सत्यापन |
केवल प्रकाशित |
उत्पादन |
सार्वजनिक साइट |
published केवल |
विस्तारनीयता
नए विशेषताओं का जोड़
डेटा मॉडल को समृद्ध करने के लिए, सरलता से नए प्रीफ़िक्स वाले विशेषताएँ जोड़ें`project-*`:
-
project-awards: पुरस्कार और सम्मान -
`project-testimonial`ग्राहक उद्धरण
-
project-team-size: टीम का आकार -
project-budget-range: बजट सीमा
ये विशेषताएँ जेएबेक इंजन को संशोधित किए बिना टेम्प्लेट्स में स्वचालित रूप से उपलब्ध हो जाती हैं।
उन्नत वर्गीकरण
@startuml
skinparam backgroundColor #FEFEFE
object Projet {
project-category = "वेब"
project-subcategory = "ई-कॉमर्स"
project-industry = "खुदरा"
project-complexity = "उच्च"
}
object Taxonomie {
categories : [web, mobile, data, devops]
subcategories : Map<category, List>
industries : [retail, finance, healthcare, ...]
complexities : [low, medium, high]
}
Projet --> Taxonomie : वर्गीकृत अनुसार
note right of Taxonomie
बहु‑मापदंड फ़िल्टरिंग की अनुमति देता है
टेम्पलेट portfolio.html में
JavaScript के माध्यम से या सर्वर साइड
end note
@enduml
अच्छे अभ्यास
फ़ाइलों का संगठन
-
एक फ़ाइल = एक परियोजना : कई परियोजनाओं को मिलाने से बचें
-
विशेष फ़ोल्डर में छवियाँ :`assets/img/portfolio/nom-projet/`
-
सुसंगत नामावली : खोज और रखरखाव को आसान बनाता है
-
Versioning Git : संपूर्ण परिवर्तन ट्रैकिंग
सामग्री प्रबंधन
-
डिफ़ॉल्ट ड्राफ़्ट स्थिति : केवल तभी प्रकाशित करें जब तैयार हों
-
प्रकाशन से पहले समीक्षा : गुणवत्ता और गोपनीयता की पुष्टि
-
सम्पूर्ण मेटाडेटा : सभी संबंधित फ़ील्ड भरें
-
समृद्ध कथा सामग्री : मेटाडेटा तक सीमित न रहें
प्रदर्शन
-
छवियों को अनुकूलित करें : कमिट से पहले संपीड़न
-
yदि आवश्यक हो तो पेज़िनेशन : यदि >20 परियोजनाएँ
-
Lazy loading : गैलरी की छवियों को आवश्यकतानुसार लोड किया जाता है
-
ब्राउज़र कैश : एसेट्स के लिए उपयुक्त हेडर
निष्कर्ष
यह वास्तुकला अनुमति देती है:
-
उपयोग में आसानी : एक परियोजना जोड़ें = एक टेक्स्ट फ़ाइल बनाएँ
-
लचीलापन : विस्तारयोग्य नई विशेषताओं के माध्यम से
-
धारणीयता : सामग्री/प्रस्तुति का पृथक्करण
-
ट्रेसबिलिटी : Git का पूर्ण संस्करणन
-
स्वचालन : लगातार बनाना और तैनाती संभव
AsciiDoc का चयन साइट के बाकी हिस्से के साथ सुसंगतता सुनिश्चित करता है, साथ ही एक पेशेवर पोर्टफ़ोलियो के लिए आवश्यक मेटाडेटा की समृद्धि प्रदान करता है।