لقد وضعت شريط ترشيح مناسب لقائمة المدونات: اللغة، مدى التاريخ، الصنف، والبطاطا التي تظل متقلبة مع HTMX.
إنها قريبة الآن - ولكن كما هو الحال دائماً، فإن ال20% الأخيرة هي الجزء الحار: التواريخ، المخابئ، و"لماذا يعمل ذلك محلياً وليس بعد المبادلة؟".إذا كنت تريد الغوص العميق مع الكثير من الرموز والرسوم التوضيحية، انظر:
///blog/ vVterبار التقدم والإسس
/blog/calendar-daysيُنتَجُ مِنْ a صغيرLinkUrlميزات الميزات المُطرَكَزات المُطرَكَجَزَة// Server: cache and vary for index
[ResponseCache(Duration = 300, VaryByHeader = "hx-request",
VaryByQueryKeys = new[] { "page", "pageSize", nameof(startDate), nameof(endDate), nameof(language), nameof(orderBy), nameof(orderDir) },
Location = ResponseCacheLocation.Any)]
[OutputCache(Duration = 3600, VaryByHeaderNames = new[] { "hx-request" },
VaryByQueryKeys = new[] { nameof(page), nameof(pageSize), nameof(startDate), nameof(endDate), nameof(language), nameof(orderBy), nameof(orderDir) })]
public async Task<IActionResult> Index(int page = 1, int pageSize = 20, DateTime? startDate = null, DateTime? endDate = null,
string language = MarkdownBaseService.EnglishLanguage, string orderBy = "date", string orderDir = "desc")
{
var posts = await blogViewService.GetPagedPosts(page, pageSize, language: language, startDate: startDate, endDate: endDate);
posts.LinkUrl = Url.Action("Index", "Blog", new { startDate, endDate, language, orderBy, orderDir });
if (Request.IsHtmx()) return PartialView("_BlogSummaryList", posts);
return View("Index", posts);
}
& مراقبة الشبهية والمحتوى
IsHidden:: يمكن الآن وضع علامات على الوظائف مخفية ()؛ScheduledPublishDateالوظائف التي يمكن أن يكون لها:IsPinned• وظيفة واحدة: وظيفة واحدة: وظيفة واحدة: وظيفة واحدة: وظيفة واحدة: وظيفة واحدة: وظيفة واحدة: وظيفة واحدة: وظيفة واحدة: وظيفة واحدة: وظيفة واحدة: وظيفة واحدة: وظيفة واحدة: وظيفة واحدة// BlogService now filters appropriately
var now = DateTimeOffset.UtcNow;
postQuery = postQuery.Where(x =>
!x.IsHidden &&
(x.ScheduledPublishDate == null || x.ScheduledPublishDate <= now));
// Pinned posts sorted first on page 1
if (isFirstPage)
{
postQuery = postQuery.OrderByDescending(x => x.IsPinned)
.ThenByDescending(x => x.PublishedDate.DateTime);
}
/blog/date-range**نقطة الوصل<clear-param>* مضافا<clear-param name="startDate">Clear Date</clear-param>
<clear-param all="true" exclude="language">Clear All Filters</clear-param>
new URL(window.location.href)بدء التشغيل من:langSelect.addEventListener('change', async function(){
const u = new URL(window.location.href);
u.searchParams.set('language', langSelect.value);
u.searchParams.set('page','1');
const [ob,od] = (orderSelect.value||'date_desc').split('_');
u.searchParams.set('orderBy', ob);
u.searchParams.set('orderDir', od);
if(input._flatpickr && input._flatpickr.selectedDates.length===2){
const [s,e] = input._flatpickr.selectedDates;
u.searchParams.set('startDate', s.toISOString().substring(0,10));
u.searchParams.set('endDate', e.toISOString().substring(0,10));
}
applyNavigation(u);
});
وفقط تجاوز تغير المجاميع؛ إذا كان مُنتقى المُنتقى مُنتقى، أعد تطبيقه.
fp.redraw()في: التدمير/الإعادة: التدمير/إعادة إنشاء النقطات المسطحة في الداخل، ثم جلب الملامح البارزة للشهر والمكالمات المرئيةhtmx:afterSwap.« ثم يعيدون » إلى يوم القيامة في يوم القيامة .
<html class>الثابت: يُلاحظfp.redraw()ومـا يتصـل ومـا يتصـلsequenceDiagram
participant User
participant JS as blog-index.js
participant HT as HTMX
participant S as Server
User->>JS: Change language/order or pick a date range
JS->>JS: Update URLSearchParams, pushState
JS->>HT: htmx.ajax('GET', /blog?...)
HT->>S: GET /blog
S-->>HT: HTML partial (_BlogSummaryList)
HT-->>User: Swap #content
HTMXXX HTMX صفحة طلب الكشف عن الطلبpagerequestيعمل شريط مرشح مخصصاً
public static bool IsPageRequest(this HttpRequest request)
{
return request.Headers.ContainsKey("pagerequest") &&
request.Headers["pagerequest"] == "true";
}
ترويسة لمساعدة الخادم في التمييز بين حمولات الصفحة الكاملة ومبادلات HTMX الجزئية:
**هذا يسمح للمتحكم أن يعيد فقط المنظر الجزئي لطلبات HTMX و كامل صفحات المتصفح للملاحة المباشرة.**ملاحظة ملاحظة
دعم دعم مفتاح دعم دعم على مقط
© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.