{"id":91972,"date":"2025-01-09T01:52:39","date_gmt":"2025-01-08T22:22:39","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/creating-a-to-do-app-with-htmx-and-django-part-8-organizing-components-with-django-cotton-424f\/"},"modified":"2025-01-09T01:52:39","modified_gmt":"2025-01-08T22:22:39","slug":"creating-a-to-do-app-with-htmx-and-django-part-8-organizing-components-with-django-cotton-424f","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/creating-a-to-do-app-with-htmx-and-django-part-8-organizing-components-with-django-cotton-424f\/","title":{"rendered":"\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 To-do \u0628\u0627 HTMX \u0648 Django\u060c \u0642\u0633\u0645\u062a 8: \u0648\u06cc\u0631\u0627\u06cc\u0634 \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Iconify"},"content":{"rendered":"<div data-article-id=\"2196433\" id=\"article-body\">\n<p>\u0628\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u067e\u0633\u062a \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646\u0647\u0627 \u0631\u0648\u0646\u062f \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc HTMX \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u062c\u0646\u06af\u0648 \u0645\u0633\u062a\u0646\u062f \u0645\u06cc \u06a9\u0646\u0645\u060c \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f. \u062a\u0627 \u06a9\u0646\u0648\u0646 \u0645\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0648\u0627\u0631\u062f \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631\u060c \u062d\u0630\u0641 \u0622\u0646\u0647\u0627\u060c \u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u062a\u06a9\u0645\u06cc\u0644 \u0622\u0646\u0647\u0627 \u0648 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u06a9\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u06cc\u0627 \u0645\u0642\u0627\u0644\u0627\u062a\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f dev.to\/rodbv \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f. \u0645\u062e\u0632\u0646 \u06a9\u062f \u062a\u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 github.com\/rodbv\/todo-mx \u0627\u0633\u062a.<\/p>\n<p>\u0647\u062f\u0641 \u0628\u0639\u062f\u06cc \u0627\u062c\u0631\u0627\u06cc \u0648\u06cc\u0631\u0627\u06cc\u0634 \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc \u0645\u0648\u0631\u062f todo \u0627\u0633\u062a: \u0648\u0642\u062a\u06cc \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 &#8220;\u0648\u06cc\u0631\u0627\u06cc\u0634&#8221; \u062f\u0631 \u062c\u0627\u06cc\u06cc \u0627\u0632 \u0622\u06cc\u062a\u0645 \u0644\u06cc\u0633\u062a \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u06cc\u06a9 \u0645\u062a\u0646 \u0648\u0631\u0648\u062f\u06cc \u0628\u0627 \u0639\u0646\u0648\u0627\u0646 \u06a9\u0627\u0631 \u0648 \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647\/\u0644\u063a\u0648 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. <\/p>\n<p>\u0637\u0628\u0642 \u0645\u0639\u0645\u0648\u0644\u060c \u0686\u0646\u062f \u0627\u062d\u062a\u0645\u0627\u0644 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u06cc\u06a9\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0631 \u062f\u0648 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u06a9\u0646\u06cc\u062f <code><span\/><\/code> \u0628\u0627 \u0639\u0646\u0648\u0627\u0646\u060c \u0648 \u06cc\u06a9 \u0641\u0631\u0645 \u0628\u0627 <code><input\/><\/code> \u0628\u0631\u0627\u06cc \u0647\u0631 \u0631\u062f\u06cc\u0641\u060c \u0648 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0633\u0627\u062f\u0647 (\u06cc\u0627 AlpineJS) \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u062d\u0627\u0644\u062a \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u062a\u0631\u062c\u06cc\u062d \u0645\u06cc\u200c\u062f\u0647\u0645 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0628\u0631\u0631\u0633\u0627\u0646\u0647\u200c\u0627\u06cc\/\u0633\u0631\u0648\u0631\u0645\u062d\u0648\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u0645 \u0648 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0648 \u0622\u06cc\u062a\u0645 \u0628\u0647 \u0633\u0631\u0648\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0641\u0631\u0645 \u0631\u062f\u06cc\u0641 \u0631\u0627 \u0628\u0631\u06af\u0631\u062f\u0627\u0646\u0645. \u0628\u0647 \u0639\u0628\u0627\u0631\u062a \u062f\u06cc\u06af\u0631\u060c \u06cc\u06a9 \u062f\u06a9\u0645\u0647 &#8220;\u0648\u06cc\u0631\u0627\u06cc\u0634&#8221; \u0631\u0627 \u0631\u0648\u06cc \u0631\u062f\u06cc\u0641\u06cc \u06a9\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>tasks\/:id\/edit<\/code> \u06a9\u0647 \u0628\u0647 \u0646\u0648\u0628\u0647 \u062e\u0648\u062f \u0641\u0631\u0645 \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0645\u0627 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f \u0648 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u06a9\u0644 \u062e\u0637 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0627\u0628\u062a\u062f\u0627\u060c \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u06cc\u06a9 \u062f\u06a9\u0645\u0647 \u062c\u062f\u06cc\u062f\u060c &#8220;\u0648\u06cc\u0631\u0627\u06cc\u0634&#8221;\u060c \u062f\u0631 \u0646\u0632\u062f\u06cc\u06a9\u06cc \u062f\u06a9\u0645\u0647 &#8220;\u062d\u0630\u0641&#8221; \u0645\u0648\u062c\u0648\u062f\u060c \u06a9\u0647 \u0628\u0627 <code>GET<\/code> \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645:<\/p>\n<p>\u0627\u06cc\u0646 \u062f\u06a9\u0645\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f:<\/p>\n<p><\/p>\n<p>\u0628\u0639\u062f\u0627\u064b \u0627\u0632 Iconify \u0628\u0631\u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u0686\u0646\u062f \u0622\u06cc\u06a9\u0648\u0646 \u0632\u06cc\u0628\u0627 \u0628\u0647 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f\u060c \u0627\u0645\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06a9\u0646\u0648\u0646 \u0631\u0648\u06cc \u06a9\u0627\u0631 \u062a\u0645\u0631\u06a9\u0632 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\u0628\u0627 \u062f\u0627\u0634\u062a\u0646 \u062f\u06a9\u0645\u0647 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0641\u0631\u0645 \u0648\u06cc\u0631\u0627\u06cc\u0634\u060c \u0648\u0642\u062a \u0622\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0622\u062f\u0631\u0633 \u0648 \u0645\u0634\u0627\u0647\u062f\u0647 \u062c\u062f\u06cc\u062f \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0627\u0648\u0644\u060c \u062f\u0631 <code>core\/urls.py<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight python\"><code><span class=\"c1\"># core\/urls.py\n<\/span>\n<span class=\"kn\">from<\/span> <span class=\"n\">django.urls<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">path<\/span>\n<span class=\"kn\">from<\/span> <span class=\"n\">.<\/span> <span class=\"kn\">import<\/span> <span class=\"n\">views<\/span>\n\n<span class=\"n\">urlpatterns<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nf\">path<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">views<\/span><span class=\"p\">.<\/span><span class=\"n\">index<\/span><span class=\"p\">,<\/span> <span class=\"n\">name<\/span><span class=\"o\">=<\/span><span class=\"sh\">\"<\/span><span class=\"s\">index<\/span><span class=\"sh\">\"<\/span><span class=\"p\">),<\/span>\n    <span class=\"nf\">path<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">tasks\/<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">views<\/span><span class=\"p\">.<\/span><span class=\"n\">tasks<\/span><span class=\"p\">,<\/span> <span class=\"n\">name<\/span><span class=\"o\">=<\/span><span class=\"sh\">\"<\/span><span class=\"s\">tasks<\/span><span class=\"sh\">\"<\/span><span class=\"p\">),<\/span>\n    <span class=\"nf\">path<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">tasks\/<task_id>\/toggle\/<\/task_id><\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">views<\/span><span class=\"p\">.<\/span><span class=\"n\">toggle_todo<\/span><span class=\"p\">,<\/span> <span class=\"n\">name<\/span><span class=\"o\">=<\/span><span class=\"sh\">\"<\/span><span class=\"s\">toggle_todo<\/span><span class=\"sh\">\"<\/span><span class=\"p\">),<\/span>\n    <span class=\"nf\">path<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">tasks\/<task_id>\/<\/task_id><\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">views<\/span><span class=\"p\">.<\/span><span class=\"n\">task_details<\/span><span class=\"p\">,<\/span> <span class=\"n\">name<\/span><span class=\"o\">=<\/span><span class=\"sh\">\"<\/span><span class=\"s\">task_details<\/span><span class=\"sh\">\"<\/span><span class=\"p\">),<\/span>\n    <span class=\"c1\"># NEW\n<\/span>    <span class=\"nf\">path<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">tasks\/<task_id>\/edit\/<\/task_id><\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">views<\/span><span class=\"p\">.<\/span><span class=\"n\">edit_task<\/span><span class=\"p\">,<\/span> <span class=\"n\">name<\/span><span class=\"o\">=<\/span><span class=\"sh\">\"<\/span><span class=\"s\">edit_task<\/span><span class=\"sh\">\"<\/span><span class=\"p\">),<\/span>\n<span class=\"p\">]<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633 \u062f\u0631 <code>core\/views.py<\/code>:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight python\"><code>\n<span class=\"c1\"># core\/views.py\n<\/span>\n<span class=\"p\">...<\/span><span class=\"n\">previous<\/span> <span class=\"n\">code<\/span>\n\n<span class=\"c1\"># NEW\n<\/span><span class=\"nd\">@login_required<\/span>\n<span class=\"nd\">@require_http_methods<\/span><span class=\"p\">([<\/span><span class=\"sh\">\"<\/span><span class=\"s\">GET<\/span><span class=\"sh\">\"<\/span><span class=\"p\">])<\/span>\n<span class=\"k\">def<\/span> <span class=\"nf\">edit_task<\/span><span class=\"p\">(<\/span><span class=\"n\">request<\/span><span class=\"p\">,<\/span> <span class=\"n\">task_id<\/span><span class=\"p\">):<\/span>\n    <span class=\"n\">todo<\/span> <span class=\"o\">=<\/span> <span class=\"n\">request<\/span><span class=\"p\">.<\/span><span class=\"n\">user<\/span><span class=\"p\">.<\/span><span class=\"n\">todos<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"nb\">id<\/span><span class=\"o\">=<\/span><span class=\"n\">task_id<\/span><span class=\"p\">)<\/span>\n    <span class=\"k\">return<\/span> <span class=\"nf\">render<\/span><span class=\"p\">(<\/span>\n        <span class=\"n\">request<\/span><span class=\"p\">,<\/span>\n        <span class=\"sh\">\"<\/span><span class=\"s\">tasks.html#todo-item-edit<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">{<\/span><span class=\"sh\">\"<\/span><span class=\"s\">todo<\/span><span class=\"sh\">\"<\/span><span class=\"p\">:<\/span> <span class=\"n\">todo<\/span><span class=\"p\">},<\/span>\n    <span class=\"p\">)<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 url\/view \u062c\u062f\u06cc\u062f \u06cc\u06a9 \u0646\u0627\u0645 \u062c\u0632\u0626\u06cc \u062c\u062f\u06cc\u062f \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f\u060c <code>tasks.html#todo-item-edit<\/code>. \u0648\u0642\u062a \u0622\u0646 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0627\u06cc\u0646 \u062c\u0632\u0626\u06cc \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u0645 <code>tasks.html<\/code>. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u062c\u0632\u0626\u06cc \u0641\u0642\u0637 \u062f\u0631 \u0635\u0648\u0631\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u06cc\u0646 \u0646\u0645\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u0634\u0648\u062f\u060c \u0645\u0627 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0645\u0642\u062f\u0627\u0631 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0646\u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>inline<\/code> \u0648\u06cc\u0698\u06af\u06cc\u060c \u06a9\u0647 \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u0628\u0647 \u0637\u0648\u0631 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0631\u0646\u062f\u0631 \u0634\u0648\u062f.<\/p>\n<p>\u062f\u0631 <code>core\/templates\/tasks.html<\/code>\u060c \u062f\u0631 \u0627\u06cc\u0646 \u062a\u0627 \u0627\u0646\u062a\u0647\u0627\u06cc \u0641\u0627\u06cc\u0644:<\/p>\n<p>\u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>is_completed<\/code> \u0686\u06a9 \u0628\u0627\u06a9\u0633\u060c \u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0648\u0636\u0639\u06cc\u062a \u06a9\u0627\u0631\u060c \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u062a\u0635\u0645\u06cc\u0645 \u0628\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u0622\u0646 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u0647\u0645\u0631\u0627\u0647 \u0628\u0627 \u0641\u0631\u0645 \u0627\u0631\u0633\u0627\u0644 \u062e\u0648\u0627\u0647\u062f \u0634\u062f. \u062a\u0648\u062c\u0647 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0645\u0627 \u0622\u0646 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0631\u062f\u06cc\u0645 <code>hx-put<\/code> \u0645\u0627\u0634\u0647 \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u0645\u062a\u0646 \u0648\u0631\u0648\u062f\u06cc \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u0635\u0648\u0631\u062a \u0646\u06cc\u0627\u0632 \u062a\u0646\u0638\u06cc\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0631\u0627\u06cc \u0639\u0646\u0648\u0627\u0646\u060c \u0648 \u062f\u0648 \u062f\u06a9\u0645\u0647:<\/p>\n<ul>\n<li>\u062f\u06a9\u0645\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0641\u0631\u0645 \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f <code>\/tasks\/:id\/details<\/code>\u060c \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u062c\u062f\u06cc\u062f \u0639\u0646\u0648\u0627\u0646;<\/li>\n<li>\u062f\u06a9\u0645\u0647 \u0644\u063a\u0648 \u06cc\u06a9 \u0631\u0627 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f <code>GET<\/code> \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0647 \u0647\u0645\u0627\u0646 \u0645\u0633\u06cc\u0631\u060c \u06a9\u0647 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0645\u0648\u0631\u062f todo \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0632\u0626\u06cc \u0645\u0639\u0645\u0648\u0644 \u0628\u0631\u0627\u06cc todo\u0647\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f. <code>tasks.html#todo-items-partial<\/code>. \u0645\u0627 \u0628\u0647 \u0632\u0648\u062f\u06cc \u0628\u0647 \u0627\u06cc\u0646 \u06a9\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u0631\u0633\u06cc\u062f\u060c \u0627\u0628\u062a\u062f\u0627 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0639\u0645\u0644 \u0628\u0628\u06cc\u0646\u06cc\u0645 \u062a\u0627 \u0622\u0646\u0686\u0647 \u0631\u0627 \u06a9\u0647 \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u06cc\u0645 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u0645.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjcy2lp298aab7gf4dsfq.gif\" alt=\"\u0645\u0648\u0631\u062f todo \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0631\u0648\u0646 \u062e\u0637\u06cc \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"761\" height=\"455\" data-animated=\"true\" title=\"\"><\/p>\n<p>\u06cc\u06a9\u06cc \u0627\u0632 \u0639\u0648\u0627\u0631\u0636 \u062c\u0627\u0646\u0628\u06cc \u062e\u0648\u0628 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0641\u0631\u0645 \u0628\u0631\u0627\u06cc \u0648\u06cc\u0631\u0627\u06cc\u0634 \u0622\u06cc\u062a\u0645 todo \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0644\u06cc\u062f Enter\/Return \u0646\u06cc\u0632 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0627 \u0642\u0628\u0644\u0627\u064b \u0622\u062f\u0631\u0633\/\u0646\u0645\u0627\u06cc\u0634 \u0631\u0627 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0647\u0645 \u062a\u0648\u0633\u0637 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0648 \u0647\u0645 \u0644\u063a\u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f &#8211; \u0647\u0631 \u062f\u0648 \u062f\u0631 \u062d\u0627\u0644 \u062a\u0645\u0627\u0633 \u0647\u0633\u062a\u0646\u062f <code>task_details<\/code>\u060c \u0628\u0627 \u0631\u0648\u0634 \u0647\u0627 <code>POST<\/code> \u0648 <code>GET<\/code> \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0641\u0642\u0637 \u062a\u0627\u0628\u0639 view \u0631\u0627 \u06af\u0633\u062a\u0631\u0634 \u062f\u0647\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight python\"><code><span class=\"c1\"># core\/views.py\n<\/span>\n<span class=\"p\">...<\/span> <span class=\"n\">previous<\/span> <span class=\"n\">code<\/span>\n\n<span class=\"nd\">@login_required<\/span>\n<span class=\"nd\">@require_http_methods<\/span><span class=\"p\">([<\/span><span class=\"sh\">\"<\/span><span class=\"s\">DELETE<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">POST<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">GET<\/span><span class=\"sh\">\"<\/span><span class=\"p\">])<\/span>\n<span class=\"k\">def<\/span> <span class=\"nf\">task_details<\/span><span class=\"p\">(<\/span><span class=\"n\">request<\/span><span class=\"p\">,<\/span> <span class=\"n\">task_id<\/span><span class=\"p\">):<\/span>\n    <span class=\"n\">todo<\/span> <span class=\"o\">=<\/span> <span class=\"n\">request<\/span><span class=\"p\">.<\/span><span class=\"n\">user<\/span><span class=\"p\">.<\/span><span class=\"n\">todos<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"nb\">id<\/span><span class=\"o\">=<\/span><span class=\"n\">task_id<\/span><span class=\"p\">)<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"n\">request<\/span><span class=\"p\">.<\/span><span class=\"n\">method<\/span> <span class=\"o\">==<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">DELETE<\/span><span class=\"sh\">\"<\/span><span class=\"p\">:<\/span>\n        <span class=\"n\">todo<\/span><span class=\"p\">.<\/span><span class=\"nf\">delete<\/span><span class=\"p\">()<\/span>\n        <span class=\"n\">response<\/span> <span class=\"o\">=<\/span> <span class=\"nc\">HttpResponse<\/span><span class=\"p\">(<\/span><span class=\"n\">status<\/span><span class=\"o\">=<\/span><span class=\"n\">HTTPStatus<\/span><span class=\"p\">.<\/span><span class=\"n\">NO_CONTENT<\/span><span class=\"p\">)<\/span>\n        <span class=\"n\">response<\/span><span class=\"p\">[<\/span><span class=\"sh\">\"<\/span><span class=\"s\">HX-Trigger<\/span><span class=\"sh\">\"<\/span><span class=\"p\">]<\/span> <span class=\"o\">=<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">todo-deleted<\/span><span class=\"sh\">\"<\/span>\n        <span class=\"k\">return<\/span> <span class=\"n\">response<\/span>\n\n    <span class=\"k\">if<\/span> <span class=\"n\">request<\/span><span class=\"p\">.<\/span><span class=\"n\">method<\/span> <span class=\"o\">==<\/span> <span class=\"sh\">\"<\/span><span class=\"s\">POST<\/span><span class=\"sh\">\"<\/span><span class=\"p\">:<\/span>\n        <span class=\"n\">title<\/span> <span class=\"o\">=<\/span> <span class=\"n\">request<\/span><span class=\"p\">.<\/span><span class=\"n\">POST<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">title<\/span><span class=\"sh\">\"<\/span><span class=\"p\">)<\/span>\n        <span class=\"k\">if<\/span> <span class=\"ow\">not<\/span> <span class=\"n\">title<\/span><span class=\"p\">:<\/span>\n            <span class=\"k\">raise<\/span> <span class=\"nc\">ValueError<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">Title is required<\/span><span class=\"sh\">\"<\/span><span class=\"p\">)<\/span>\n\n        <span class=\"n\">todo<\/span><span class=\"p\">.<\/span><span class=\"n\">title<\/span> <span class=\"o\">=<\/span> <span class=\"n\">title<\/span>\n        <span class=\"n\">todo<\/span><span class=\"p\">.<\/span><span class=\"n\">is_completed<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">bool<\/span><span class=\"p\">(<\/span><span class=\"n\">request<\/span><span class=\"p\">.<\/span><span class=\"n\">POST<\/span><span class=\"p\">.<\/span><span class=\"nf\">get<\/span><span class=\"p\">(<\/span><span class=\"sh\">\"<\/span><span class=\"s\">is_completed<\/span><span class=\"sh\">\"<\/span><span class=\"p\">))<\/span>\n        <span class=\"n\">todo<\/span><span class=\"p\">.<\/span><span class=\"nf\">save<\/span><span class=\"p\">()<\/span>\n\n    <span class=\"c1\"># both POST and GET will just return the todo details\n<\/span>    <span class=\"k\">return<\/span> <span class=\"nf\">render<\/span><span class=\"p\">(<\/span>\n        <span class=\"n\">request<\/span><span class=\"p\">,<\/span>\n        <span class=\"sh\">\"<\/span><span class=\"s\">tasks.html#todo-items-partial<\/span><span class=\"sh\">\"<\/span><span class=\"p\">,<\/span>\n        <span class=\"p\">{<\/span><span class=\"sh\">\"<\/span><span class=\"s\">todos<\/span><span class=\"sh\">\"<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"n\">todo<\/span><span class=\"p\">]},<\/span>\n    <span class=\"p\">)<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u062f\u0631 \u0646\u0645\u0627 \u0627\u0633\u062a.<\/p>\n<p>\u062f\u0631 \u062d\u0627\u0644\u062a \u0627\u06cc\u062f\u0647 \u0622\u0644\u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u0627\u0632 th \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>PUT<\/code> \u0631\u0648\u0634\u060c \u0646\u0647 <code>POST<\/code>. \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0628\u0647 \u06a9\u062f \u0628\u0633\u06cc\u0627\u0631 \u0628\u06cc\u0634\u062a\u0631\u06cc \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f\u060c \u0645\u0627 \u0628\u0627\u06cc\u062f \u0641\u0631\u0645 \u0631\u0627 \u0631\u0647\u0627 \u06a9\u0631\u062f\u0647 \u0648 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u0645 <code>hx-put<\/code> \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0627\u0632 \u062f\u06a9\u0645\u0647 \u0630\u062e\u06cc\u0631\u0647\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>hx-vals<\/code> \u0628\u0631\u0627\u06cc \u062c\u0645\u0639 \u0622\u0648\u0631\u06cc \u0645\u0642\u0627\u062f\u06cc\u0631 <code>is_completed<\/code> \u0648 <code>title<\/code>. \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0648 \u0645\u0632\u06cc\u062a \u0641\u0631\u0645 \u0631\u0627 \u06a9\u0647 \u0628\u0648\u0645\u06cc \u0627\u0633\u062a \u0627\u0632 \u062f\u0633\u062a \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f <code>required<\/code> \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u0648\u0631\u0648\u062f\u06cc\u060c \u0648 <code>autofocus<\/code> \u0628\u0631\u0627\u06cc \u0648\u0631\u0648\u062f\u06cc \u0639\u0646\u0648\u0627\u0646\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0646 \u0641\u06a9\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u06cc\u06a9 \u0645\u0639\u0627\u0648\u0636\u0647 \u0645\u0646\u0637\u0642\u06cc \u0628\u0627 \u062e\u0644\u0648\u0635 REST-ful \u0627\u0633\u062a.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa80t71bdmid5sj00kfjw.png\" alt=\"\u0627\u0639\u062a\u0628\u0627\u0631 \u0641\u06cc\u0644\u062f - \u0639\u0646\u0648\u0627\u0646 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u062f\u0631 \u0639\u0645\u0644\" loading=\"lazy\" width=\"800\" height=\"241\" title=\"\"><\/p>\n<h2>\n<p>  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Iconify \u0628\u0631\u0627\u06cc \u0622\u06cc\u06a9\u0648\u0646 \u0647\u0627<br \/>\n<\/h2>\n<p>\u0622\u062e\u0631\u06cc\u0646 \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062f\u06a9\u0645\u0647 \u0647\u0627 \u0631\u0627 \u0632\u06cc\u0628\u0627\u062a\u0631 \u06a9\u0646\u06cc\u0645. \u0645\u0646 \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0647 \u0627\u0645 \u0627\u0632 Iconify\u060c \u06cc\u06a9 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0648 \u0631\u0627\u06cc\u06af\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645. \u0628\u0647 \u0637\u0648\u0631 \u062e\u0627\u0635\u060c \u0645\u062c\u0645\u0648\u0639\u0647 &#8220;Ming Cute &#8211; Line&#8221; \u0622\u0646\u0647\u0627.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8qswguje6f12s5lvmpki.png\" alt=\"\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Iconify\" loading=\"lazy\" width=\"800\" height=\"454\" title=\"\"><\/p>\n<p>\u0645\u0627 \u0641\u0642\u0637 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 CSS \u0631\u0627 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u067e\u06cc \u06a9\u0646\u06cc\u0645\u060c \u062f\u0631 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645\u060c <code>\/core\/static\/css\/styles.css<\/code> (\u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u06a9\u062f \u0627\u06cc\u0646\u062c\u0627 \u0631\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f). \u0645\u0646 \u06cc\u06a9 \u0646\u0627\u0645 \u06a9\u0644\u0627\u0633 \u062f\u0648\u0645 \u0628\u0647 \u0647\u0631 \u0633\u0628\u06a9 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u062a\u0627 \u0645\u0631\u0627\u062c\u0639\u0647 \u0628\u0647 \u0646\u0627\u0645 \u06a9\u0644\u0627\u0633 \u0647\u0627 \u0633\u0627\u062f\u0647 \u062a\u0631 \u0634\u0648\u062f. \u0627\u06cc\u0646 \u0627\u06cc\u062f\u0647 \u062e\u0648\u0628\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0646\u0627\u0645 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0631\u062c\u0639 \u062f\u0631 Iconify \u0646\u06af\u0647 \u062f\u0627\u0631\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* \nTo get more icons, go to \nhttps:\/\/icon-sets.iconify.design\/mingcute\/page-3.html?suffixes=Fill \n*\/<\/span>\n\n<span class=\"nc\">.icon-delete<\/span><span class=\"o\">,<\/span>\n<span class=\"nc\">.mingcute--folder-delete-line<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">inline-block<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">width<\/span><span class=\"p\">:<\/span> <span class=\"m\">18px<\/span><span class=\"p\">;<\/span>\n    <span class=\"nl\">height<\/span><span class=\"p\">:<\/span> <span class=\"m\">18px<\/span><span class=\"p\">;<\/span>\n\n<span class=\"err\">...rest<\/span> <span class=\"err\">of<\/span> <span class=\"err\">CSS<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 <code>core\/templates\/tasks.html<\/code> \u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u06cc\u06a9 \u0645\u0631\u062c\u0639 \u0628\u0647 \u0641\u0627\u06cc\u0644 CSS \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u0648 \u0627\u0632 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0647\u0631 \u062f\u06a9\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight jinja\"><code>  <span class=\"nt\"><button> <span class=\"na\">class=<\/span><span class=\"s\">\"btn btn-circle btn-sm btn-error btn-outline\"<\/span> \n    <span class=\"na\">hx-get=<\/span><span class=\"s\">\"<\/span><span class=\"cp\">{%<\/span> <span class=\"nv\">url<\/span> <span class=\"s1\">'task_details'<\/span> <span class=\"nv\">todo.id<\/span> <span class=\"cp\">%}<\/span><span class=\"s\">\"<\/span> \n    <span class=\"na\">hx-swap=<\/span><span class=\"s\">\"outerHTML\"<\/span> \n    <span class=\"na\">hx-target=<\/span><span class=\"s\">\"closest li\"<\/span>\n  <span class=\"nt\">&gt;<span> <span class=\"na\">class=<\/span><span class=\"s\">\"icon-back\"<\/span><span class=\"nt\">&gt;<\/span><\/span><\/span><\/button><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646\u0637\u0648\u0631\u06cc \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f. \u06a9\u0644 \u06a9\u062f \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062f\u0631 \u0634\u0627\u062e\u0647 8 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u067e\u0633\u062a \u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u0647\u0631 \u0686\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0628\u067e\u0631\u0633\u06cc\u062f!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3uo48mau5tltha9mcu0g.gif\" alt=\"\u0648\u06cc\u0631\u0627\u06cc\u0634 \u0641\u0631\u0645 \u062f\u0631 \u0639\u0645\u0644\" loading=\"lazy\" width=\"761\" height=\"455\" data-animated=\"true\" title=\"\"><\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0628\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u067e\u0633\u062a \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0622\u0646\u0647\u0627 \u0631\u0648\u0646\u062f \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc HTMX \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u062c\u0646\u06af\u0648 \u0645\u0633\u062a\u0646\u062f \u0645\u06cc \u06a9\u0646\u0645\u060c \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f. \u062a\u0627 \u06a9\u0646\u0648\u0646 \u0645\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0641\u0632\u0648\u062f\u0646 \u0645\u0648\u0627\u0631\u062f \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631\u060c \u062d\u0630\u0641 \u0622\u0646\u0647\u0627\u060c \u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u062a\u06a9\u0645\u06cc\u0644 \u0622\u0646\u0647\u0627 \u0648 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u06cc \u0646\u0647\u0627\u06cc\u062a \u0631\u0627 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645. \u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u06a9\u0644 \u0645\u062c\u0645\u0648\u0639\u0647 \u06cc\u0627 \u0645\u0642\u0627\u0644\u0627\u062a\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f dev.to\/rodbv \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f. \u0645\u062e\u0632\u0646 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":91974,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-91972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/91972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=91972"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/91972\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/91974"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=91972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=91972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=91972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}