परिचय

इस साइट में मैं इस्तेमाल करता हूँ एचएमएमएक्स यह बहुत ही आसान तरीका है कि आप इस साइट पर ज़्यादा प्रतिक्रिया दिखाएँ और बिना जावास्क्रिप्ट के ज़्यादा शांत महसूस करें ।

टिप्पणी: मैं इस के साथ पूरी तरह खुश नहीं हूँ, HMAX कुछ तत्वों है जो इस चाल बना है

एचएसएमएक्स तथा एनईएस.

HMASX का उपयोग.ENT कोर एक सपना की एक बिट है, मैं पहले में इस बारे में लिखा है इस पोस्ट को___ यह वास्तव में बहुत आसान है 'HMipiable' अपनी साइट, और यह अपनी साइट को अधिक प्रतिक्रिया महसूस करने के लिए एक महान तरीका है.

सामान्य कड़ियाँ

मैंने फैसला किया कि मैं इस साइट पर बहुत - से लिंक करूँगा, HMMMX का इस्तेमाल करूँगा । तो उदाहरण के लिए यदि आप इसके ऊपर 'घर' बटन पर क्लिक करते हैं तो आप पृष्ठ सामग्री को लोड करने के लिए H6X प्रयोग करते हैं.

मैं इसे सिर्फ लिंक टैग में कुछ गुण जोड़ने से प्राप्त होता हूँ, इस तरह:

    <a asp-action="IndexPartial" asp-controller="Home" hx-swap="show:window:top"  hx-target="#contentcontainer" hx-boost="true" class="mr-auto sm:mr-6">
     <div class="svg-container">
        <img src="/img/logo.svg" asp-append-version="true"  width="180px" height="30px"  alt="logo"  :class="{ 'img-filter-dark': isDarkMode }"/>
     </div>
    </a>

यहाँ आप देख सकते हैं कि मैं जोड़ सकते हैं hx-swap गुण, यह HMMMX से इस लक्ष्य तत्व की सामग्री को सर्वर से वापस लाने के लिए बताता है.

नोट: जैसा कि इस ब्राउज़र को पुनः लोड करने के लिए ब्राउज़र को दो बार लोड करने के लिए इस्तेमाल नहीं करें.

वह hx-target गुण HMMX बताता है जहाँ सर्वर से सामग्री वापस लाने के लिए. इस मामले में यह है #contentcontainer तत्व (सभी पृष्ठ सामग्री लोड हो गया है).

मैं भी जोड़ hx-swap="show:window:top जो विंडो स्क्रॉल को पृष्ठ के शीर्ष पर बनाता है जब सामग्री पलटा लिया जाता है.

C# का भाग बहुत सरल है, यह सिर्फ मेरी सामान्य निर्देशिका विधि की नक़ल लेकिन इसके बजाय आंशिक दृष्टिकोण लोड. कोड नीचे दिखाया गया है. यह फिर से उपयोग करता है HMAX. NiT पता लगाने के लिए hx-request शीर्ष और वापस आंशिक दृष्टिकोण. सामान्य दृश्य को लौटने के लिए भी एक कटौती से बाहर है अगर निवेदन HMAX निवेदन नहीं है.

    [Route("/IndexPartial")]
    [OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request" })]
    [ResponseCache(Duration = 300, VaryByHeader = "hx-request",
        Location = ResponseCacheLocation.Any)]
    [HttpGet]
    public async Task<IActionResult> IndexPartial()
    {
        ViewBag.Title = "mostlylucid";
        if(!Request.IsHtmx()) return RedirectToAction("Index");
        var authenticateResult = await GetUserInfo();
        var posts = await BlogService.GetPagedPosts(1, 5);
        posts.LinkUrl = Url.Action("Index", "Home");
     
        var indexPageViewModel = new IndexPageViewModel
        {
            Posts = posts, Authenticated = authenticateResult.LoggedIn, Name = authenticateResult.Name,
            AvatarUrl = authenticateResult.AvatarUrl
        };
        return PartialView("_HomePartial", indexPageViewModel);
    }

इसका परिणाम यह है कि यह लिंक (और अन्य एक ही तकनीक का उपयोग करते हैं) लोड के रूप में 'JAAX' अनुरोध और सामग्री पूर्ण पृष्ठ पुनः लोड किए बिना बदल दी जाती है. यह परेशानी 'लाइट फ्लैश' से दूर रहता है जब एक पृष्ठ फिर लोड करता है कि कैसे मेरा प्रसंग स्विच करता है.

ब्लॉग कड़ियाँ (अनुप्रयोग मार्ग)

तो नीचे का तरीका काम करने के लिए किया जा सकता है हालांकि यह सुपर चाल और थोड़ा अजीब है. HMAX वास्तव में गुण आधारित दृष्टिकोण का उपयोग करने के लिए काम करना पसंद करता है. उपयोग में htmx.ajax 'यदि सभी अन्य सभी असफल होते हैं' विधि की तरह है और मतलब है कि आप ब्लॉर इतिहास के साथ गड़बड़ करने की जरूरत है. दुर्भाग्य से ब्राउज़र इतिहास pushState replaceState और popstate वास्तव में गर्दन में दर्द का एक सा है (लेकिन बाहरी मामलों के लिए प्रभावशाली हो सकता है).

इसके बजाय मैं अब क्या कर रहा हूँ बस जोड़ने के लिए hx-boost इस टैग पर जिसमें ब्लॉग सामग्री है.

   <div class="prose prose max-w-none border-b py-2 text-black dark:prose-dark sm:py-2" hx-boost="true"  hx-target="#contentcontainer">
        @Html.Raw(Model.HtmlContent)
    </div>

ऐसा लगता है कि यह काम अच्छी तरह से किया जाता है hx-boost माता या पिता के तरीक़ों पर रखा जा सकता है और सभी बच्चों के लिंक लागू किया जा सकता है । यह इतिहास इत्यादि के साथ गड़बड़ के बिना भी मानक HMMX है.

संभव अवसर में कि आप ख़ास कड़ियों के लिए HM6X उपयोग नहीं करना चाहते हैं आप सिर्फ जोड़ सकते हैं hx-boost="false" कड़ी में.

ब्लॉग कड़ियाँ (NAE: मैं इस दृष्टिकोण को छोड़ दिया है लेकिन इसे संदर्भ के लिए यहाँ रखें)

हालांकि इस ओर से मेरी ब्लॉग लिंक इस तरह की समस्या थी: एसएपी जैसा अनुभव के लिए एटीएमएक्स जो 'सामान्य' लिंक नहीं हैं. ये लिंक चिन्हित पार करने के लिए तैयार हैं, जबकि मैं लिंक के लिए एक मार्कडिग एक्सटेंशन लिख सकता हूँ, मैंने एक अलग कदम इस्तेमाल करने का निर्णय लिया है (क्योंकि मैं पहले से ही सामग्री के लिए नहीं करना चाहता.

इसके बजाय मैंने एक जावास्क्रिप्ट फंक्शन जोड़ा है जो इन सभी प्रकार के लिंक की तलाश करता है, तो उपयोग करता है htmx.ajax स्वेप करने के लिए। यह अनिवार्य रूप से है कि क्या HMMX किसी भी तरह सिर्फ 'Myy' करता है.

जैसा कि आप देख सकते हैं यह सिर्फ एक सरल समारोह है जो सब लिंक की तलाश करता है div.prose तत्व जो एक के साथ प्रारंभ होता है / फिर एक-दूसरे से अग्रसर हों, जब लिंक क्लिक किया जाता है तब URL निकाला जाता है और फिर होता है htmx.ajax फ़ंक्शन यूआरएल तथा अद्यतन करने के लिए लक्ष्य तत्व से काल किया गया है.

(function(window) {
   
    window.blogswitcher =() =>  {
        const blogLinks = document.querySelectorAll('div.prose  a[href^="/"]');

        // Iterate through all the selected blog links
        blogLinks.forEach(link => {
            link.addEventListener('click', function(event) {
               event.preventDefault();
                let link = event.currentTarget;
                let url = link.href;
                htmx.ajax('get', url, {
                    target: '#contentcontainer',  // The container to update
                    swap: 'innerHTML',            // Replace the content inside the target


                }).then(function() {
                    history.pushState(null, '', url);
                  
                        window.scrollTo({
                            top: 0,
                            behavior: 'smooth' // For a smooth scrolling effect
                        });
                    
                });
            });
        });
        
    };
})(window);

इसके अलावा एक बार जब लघुछवि बनाई गई तो मैं नए यूआरएल को ब्राउज़र इतिहास में ढकेल कर पृष्ठ के शीर्ष पर स्क्रॉल कर देता हूँ. मैं इसे कुछ स्थानों (जैसे खोज) में इस्तेमाल करता हूँ ताकि बढ़िया मक्खन का अनुभव कर सकूँ ।

पीछे बटन (यह काम करने के लिए मुश्किल है)

इस क़िस्म का अंतिम बटन समस्या उत्पन्‍न हो सकती है; बहुत से 'सही' भाषण के रूप में वापस बटन को अक्षम कर सकते हैं या इस गलत व्यवहार के साथ डाल सकते हैं. लेकिन मैं उम्मीद के रूप में वापस बटन काम करने के लिए सुनिश्चित करना चाहता था. ध्यान दीजिए: जितना उम्मीद की जाती है, उसे पूरा करने के लिए पीछे - पीछे काम करने के लिए हमें कुछ कदम उठाने की ज़रूरत है popState कार्यक्रम. यह घटना तब चुनी जाती है जब उपयोक्ता ब्राउज़र इतिहास में वापस या आगे बढ़ता है. जब यह घटना निकाल दी जाती है तो हम मौजूदा यूआरएल के लिए सामग्री को फिर से लोड कर सकते हैं.

window.addEventListener("popstate",   (event) => {
 // When the user navigates back, reload the content for the current URL
 event.preventDefault();
 let url = window.location.href;
 // Perform the HTMX AJAX request to load the content for the current state
 htmx.ajax('get', url, {
  target: '#contentcontainer',
  swap: 'innerHTML'
 }).then(function () {
  // Scroll to the top of the page
  window.scrollTo({
   top: 0,
   behavior: 'smooth'
  });
 });
});

इस कोड में हम डिफ़ॉल्ट ब्राउज़र पॉपअप बर्ताव को रोका event.preventDefault() फोन. फिर हम मौज़ूदा यूआरएल को बाहर कर देते है window.location.href गुण तथा HMAX AJAX निवेदन मौजूदा स्थिति को लोड करने के लिए. एक बार सामग्री लोड की गई है...... हम पृष्ठ के शीर्ष पर स्क्रॉल किया गया है.

जैसा कि पहले ज़िक्र किया गया है आप आत्म - त्याग का उपयोग नहीं कर सकते hx-pushurl इस प्रकार ब्राउज़र को पृष्ठ को दोहरा बटन पर फिर से लोड करने का कारण होगा.

HMX और अधिक सामान्य रूप से (और अप्रयोगियों)

जैसा कि आप शायद सोचा हो कि मैं HMMX के एक प्रशंसक हूँ, साथ ही अप्रयोगक के साथ कुछ भी. NE.NT और A.js यह एक वास्तव में अच्छा उपयोगकर्ता के अनुभव बनाने के लिए सक्षम करता है कम से कम प्रयास के साथ एक अच्छा उपयोगकर्ता के अनुभव बनाने के लिए सक्षम करता है. यह अभी भी मुझे एक पूर्ण सर्वर का अनुवाद दे देता है। NEERT कोरस के साथ। लेकिन एक SPAAT की 'की भावना' की तरह। As.j एक सरल क्लाएंट साइड एवेंशन सक्षम करता है, एक बहुत ही सरल सुविधा मैं हाल ही में जोड़ दिया था अपनी श्रेणी 'गुप्त' बना रहा था लेकिन किसी क्लिक पर विस्तार.

इस मतलब से कोई अतिरिक्त जावास्क्रिप्ट आवश्यक नहीं है.

        <div class="mb-8 mt-6 border-neutral-400 dark:border-neutral-600 border rounded-lg" x-data="{ showCategories: false }">
            <h4 
                class="px-5 py-1 bg-neutral-500  bg-opacity-10 rounded-lg  font-body text-primary dark:text-white w-full flex justify-between items-center cursor-pointer"
                x-on:click="showCategories = !showCategories"
            >
                Categories
                <span>
                    <i
                        class="bx text-2xl"
                        :class="showCategories ? 'bx-chevron-up' : 'bx-chevron-down'"
                    ></i>
                </span>
            </h4>
            <div 
                class="flex flex-wrap gap-2 pt-2 pl-5 pr-5 pb-2"
                x-show="showCategories" 
                x-cloak
                x-transition:enter="max-h-0 opacity-0"
                x-transition:enter-end="max-h-screen opacity-100"
                x-transition:leave="max-h-screen opacity-100"
                x-transition:leave-end="max-h-0 opacity-0"
            >
                @foreach (var category in ViewBag.Categories)
                {
                    <partial name="_Category" model="category"/>
                }
           
            </div>
        </div>

यहाँ पर आप देख सकते हैं कि मैं इस्तेमाल करता हूँ x-data इस मामले में एक नया अआवेलीय डाटा वस्तु बनाने के लिए गुण showCategories___ यह बुलियन है जो टॉगल किया जाता है जब h4 तत्व क्लिक किया गया है. वह x-on:click गुण को टॉगल फंक्शन में क्लिक करने के लिए प्रयोग में लिया जाता है.

श्रेणीओं की सूची के भीतर मैं तब इस्तेमाल करता हूँ x-show गुण को क़िस्म की सूची दिखाने या छुपाने के लिए showCategories___ मैं भी उपयोग x-transition जब वर्गों को दिखाया या छुपाया जाता है तब एक बढ़िया स्लाइड प्रभाव को जोड़ने के लिए गुण. वह x-cloak गुण जावास्क्रिप्ट चलाने से पहले दिखाए जाने वाले श्रेणियों के 'फ्कर' को बन्द करने के लिए इस्तेमाल किया जाता है. मैं इस के लिए परिभाषित एक छोटे से सीएसएस क्लास है:

[x-cloak] { display: none !important; }

ऑन्टियम

तो यह है कि यह एक छोटा सा लेख है कि कैसे HMMAX का उपयोग करने के लिए और AMLX की एक जगह का उपयोग करने के लिए.js अपनी साइट अधिक प्रतिक्रिया महसूस करने के लिए और 'SPAP-S- - के रूप में महसूस करने के लिए. मुझे आशा है कि आप इस उपयोगी मिल गया है, अगर आपके पास कोई सवाल या टिप्पणी है उन्हें नीचे छोड़ने के लिए स्वतंत्र महसूस करें.