# 过滤栏: 进度、 错误和小赢
2025-11-10T14:10
## 一. 导言 导言 导言 导言 导言 导言 一,导言 导言 导言 导言 导言 导言
我一直在为博客列表建立一个适当的过滤栏:语言、日期范围、排序和排程与HTMX保持同步。
与往常一样, 最后20%是辣味部分:日期、缓存和“为什么这在当地可行,[如果您想要用大量的代码和图表进行深度潜水,请看:](/blog/filterbarprogressandissues)
> /博客/过滤器的进展和问题
[TOC]
## 记住这个网站是正在进行的工作, 这种东西会发生在你吃自己的狗粮的时候!
- TL; DR TR; TL; TDR
- 新过滤栏: 语言 + 排序 + 日期范围
- HTMX 部分交换使页面保持快速; 背/ 前工作 因为我总是按更新的 URL`/blog/calendar-days`日历概要来自一个小
- 终点
- 固定:改变语文/顺序时减少日期幅度
- 固定: HTMX 互换或主题更改后不刷新日历
## 服务器缓存现在因所有相关查询键而异
- 哪些措施效果良好
- URL 第一个行为: 所有互动更新 URL; 您可以与过滤状态进行深链接`LinkUrl`Pagnation 保留了当前过滤器( ) (% 1) 。
- 设置在服务器上)
```csharp
// 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 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`员额:
```csharp
// 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);
}
```
### 第1页首页总是首页(大号待宣布)
- **日期范围改进`/blog/date-range`新建新设新**终点
- **:返回所有文章(语言意识)的分钟/最大日期,以便选择日期的人能够设定合理的界限**清除参数标签助手``:增加数
```cshtml
Clear Date
Clear All Filters
```
### 方便清除查询参数的标签工具工具
- 错误修正
- 转换语言或顺序时丢失日期范围`new URL(window.location.href)`固定固定: 开始于
```js
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);
});
```
- 只覆盖更改的参数; 如果 Flatpickr 有选择, 请重新应用它 。
- HTMX 交换后日历突出显示不刷新`fp.redraw()`固定 : 销毁/ 重新创建 开始时的 Flatpickrer, 然后获取可见月份的亮点并调用`htmx:afterSwap`.
- ; 并重新运行连接
- 对日历不适用的黑暗模式样式``固定:观察`fp.redraw()`调和调
## 当变化时。
```mermaid
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
```
## 碎片是如何说话的
HTMX 页面请求检测`pagerequest`过滤栏使用自定义
```csharp
public static bool IsPageRequest(this HttpRequest request)
{
return request.Headers.ContainsKey("pagerequest") &&
request.Headers["pagerequest"] == "true";
}
```
帮助服务器区分整页负载和部分 HTMX 交换的页眉 :
> **这使控制器能够只返回HTMX请求的部分视图和直接导航的完整页面视图。**注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注的注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注注
## 标签助手扩展和查询参数更清晰的 Alpine.js 组件值得自己进行深度潜水。 我将在未来关于建筑可重复使用的HTMX/Alpine组件的文章中详细论述这些内容。
- 仍待完成
- 快速日期预设(最近7/30天,今年)
- 当地语言教育种子
区域拾取器键盘支持