{"id":63026,"date":"2024-04-11T08:18:02","date_gmt":"2024-04-11T04:48:02","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-a-dynamic-client-side-blog-with-secutio-and-bootstrap-29nf\/"},"modified":"2024-04-11T08:18:02","modified_gmt":"2024-04-11T04:48:02","slug":"building-a-dynamic-client-side-blog-with-secutio-and-bootstrap-29nf","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-a-dynamic-client-side-blog-with-secutio-and-bootstrap-29nf\/","title":{"rendered":"\u0633\u0627\u062e\u062a \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u062f\u0627\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0628\u0627 Secutio \u0648 Bootstrap"},"content":{"rendered":"<div data-article-id=\"1808961\" id=\"article-body\">\n<p>\u0628\u0647 \u0637\u0648\u0631 \u0633\u0646\u062a\u06cc\u060c \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0634\u0627\u0645\u0644 \u0632\u0628\u0627\u0646 \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0645\u0627\u0646\u0646\u062f PHP \u0628\u0648\u062f.  \u0627\u0645\u0627 \u0627\u06af\u0631 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u0642\u062f\u0631\u062a \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0628\u0647 \u0647\u0645\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0633\u062a \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f \u0686\u0647\u061f<\/p>\n<p>\u0627\u06cc\u0646\u062c\u0627\u0633\u062a \u06a9\u0647 \u0686\u0627\u0631\u0686\u0648\u0628 Secutio \u0648\u0627\u0631\u062f \u0645\u06cc\u200c\u0634\u0648\u062f. Secutio \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0648\u06cc\u0627 \u062f\u0631 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u0648 \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0627\u0644\u0628\u200c\u0647\u0627\u06cc \u062a\u062d\u062a \u0627\u0644\u0644\u0641\u0638\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u0648\u0628\u0644\u0627\u06af \u06a9\u0627\u0645\u0644 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0631\u0627 \u062a\u0635\u0648\u0631 \u06a9\u0646\u06cc\u062f: \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0648\u0628 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u0627\u0646\u0646\u062f \u06cc\u06a9 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0633\u0646\u062a\u06cc \u0639\u0645\u0644 \u06a9\u0646\u062f \u0648 \u0628\u0627 URL\u200c\u0647\u0627\u06cc \u067e\u0633\u062a \u0641\u0631\u062f\u06cc \u06a9\u0647 \u0633\u0626\u0648\u0633\u0627\u0632 \u0647\u0633\u062a\u0646\u062f\u060c \u06a9\u0627\u0645\u0644 \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0628\u0644\u0627\u06af \u0634\u0645\u0627 \u0631\u0627 \u06a9\u0634\u0641 \u0648 \u0641\u0647\u0631\u0633\u062a \u06a9\u0646\u0646\u062f \u0648 \u062f\u06cc\u062f \u0622\u0646\u0644\u0627\u06cc\u0646 \u0634\u0645\u0627 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u0646\u062f.<\/p>\n<p><\/p>\n<p>\u0646\u06af\u0627\u0647\u06cc \u06a9\u0648\u062a\u0627\u0647 \u0628\u06cc\u0627\u0646\u062f\u0627\u0632\u06cc\u062f!  \u0622\u06cc\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0642\u0628\u0644 \u0627\u0632 \u0641\u0631\u0648 \u0631\u0641\u062a\u0646 \u062f\u0631 \u062c\u0632\u0626\u06cc\u0627\u062a\u060c \u067e\u0631\u0648\u0698\u0647 \u0646\u0647\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f\u061f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nv\">$ <\/span>git clone https:\/\/github.com\/mrhdias\/secutio\n<span class=\"nv\">$ <\/span><span class=\"nb\">cd <\/span>secutio\/examples\/blog\n<span class=\"nv\">$ <\/span>python3 <span class=\"nt\">-m<\/span> http.server <span class=\"nt\">-d<\/span> public\nServing HTTP on 0.0.0.0 port 8000 <span class=\"o\">(<\/span>http:\/\/0.0.0.0:8000\/<span class=\"o\">)<\/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>\u067e\u0631\u0648\u0698\u0647 Secutio \u0646\u0633\u0628\u062a\u0627\u064b \u062c\u062f\u06cc\u062f \u0627\u0633\u062a\u060c \u06a9\u0647 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u0646\u0628\u0648\u0647\u06cc \u0627\u0632 \u0686\u0627\u0631\u0686\u0648\u0628\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0647\u062f\u0641 \u06cc\u06a9\u0633\u0627\u0646\u06cc \u0627\u0632 \u0627\u0631\u0627\u0626\u0647 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0633\u0631\u06cc\u0639 \u0648 \u0622\u0633\u0627\u0646 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u062f\u0627\u0631\u0646\u062f\u060c \u0686\u0627\u0644\u0634\u06cc \u0631\u0627 \u062f\u0631 \u062c\u0644\u0628 \u062a\u0648\u062c\u0647 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0648 \u062c\u0644\u0628 \u062a\u0648\u062c\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc\u200c\u06a9\u0646\u062f.  \u0639\u0644\u06cc\u0631\u063a\u0645 \u0627\u06cc\u0646 \u0633\u0646\u0627\u0631\u06cc\u0648\u06cc \u0631\u0642\u0627\u0628\u062a\u06cc\u060c \u0645\u0646 \u0628\u0647 \u0647\u0645\u0633\u0648\u06cc\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0628\u0627 \u0627\u06cc\u0646 \u0627\u0647\u062f\u0627\u0641 \u0627\u0639\u062a\u0642\u0627\u062f \u062f\u0627\u0631\u0645\u060c \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u0645\u0627 \u0631\u0627 \u0628\u0647 \u062c\u0644\u0648 \u0633\u0648\u0642 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/building-a-dynamic-client-side-blog-with-secutio-and-bootstrap-29nf\/#%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D8%A8%D9%88%D8%AA_%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D9%81%D8%B2%D8%A7%DB%8C%D8%B4_%D8%AA%D8%AC%D8%B1%D8%A8%D9%87_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C\" >\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0648\u062a \u0627\u0633\u062a\u0631\u067e \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/building-a-dynamic-client-side-blog-with-secutio-and-bootstrap-29nf\/#%D8%B3%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D9%88%D8%A8_%D8%B3%D8%A7%DB%8C%D8%AA_%D8%A8%D8%A7_%D9%82%D8%A7%D9%84%D8%A8_%D9%87%D8%A7\" >\u0633\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0628\u0627 \u0642\u0627\u0644\u0628 \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/building-a-dynamic-client-side-blog-with-secutio-and-bootstrap-29nf\/#%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_HTML_%D8%B1%D8%A7_%D8%A8%D8%A7_%D9%88%D8%B8%D8%A7%DB%8C%D9%81_%D9%85%D8%B1%D8%AA%D8%A8%D8%B7_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 HTML \u0631\u0627 \u0628\u0627 \u0648\u0638\u0627\u06cc\u0641 \u0645\u0631\u062a\u0628\u0637 \u06a9\u0646\u06cc\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/building-a-dynamic-client-side-blog-with-secutio-and-bootstrap-29nf\/#%D9%88%D8%B8%D8%A7%DB%8C%D9%81_%D8%B1%D8%A7_%D8%AA%D8%B9%D8%B1%DB%8C%D9%81_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0648\u0638\u0627\u06cc\u0641 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/building-a-dynamic-client-side-blog-with-secutio-and-bootstrap-29nf\/#%D9%85%D9%86%D8%A7%D8%A8%D8%B9_%D8%A7%D8%B7%D9%84%D8%A7%D8%B9%D8%A7%D8%AA\" >\u0645\u0646\u0627\u0628\u0639 \u0627\u0637\u0644\u0627\u0639\u0627\u062a<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/building-a-dynamic-client-side-blog-with-secutio-and-bootstrap-29nf\/#%D9%BE%D8%B1_%DA%A9%D8%B1%D8%AF%D9%86_%D9%82%D8%A7%D9%84%D8%A8_%D9%87%D8%A7_%D8%A8%D8%A7_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7\" >\u067e\u0631 \u06a9\u0631\u062f\u0646 \u0642\u0627\u0644\u0628 \u0647\u0627 \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/building-a-dynamic-client-side-blog-with-secutio-and-bootstrap-29nf\/#%D9%86%D8%AD%D9%88%D9%87_%D8%B1%D9%81%D8%B9_%D9%85%D8%B4%DA%A9%D9%84%D8%A7%D8%AA_%D8%B3%D8%A6%D9%88_%D8%AF%D8%B1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7%DB%8C_%D9%88%D8%A8_%D8%AA%DA%A9_%D8%B5%D9%81%D8%AD%D9%87_%D8%A7%DB%8C_SPA\" >\u0646\u062d\u0648\u0647 \u0631\u0641\u0639 \u0645\u0634\u06a9\u0644\u0627\u062a \u0633\u0626\u0648 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u062a\u06a9 \u0635\u0641\u062d\u0647 \u0627\u06cc (SPA)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/building-a-dynamic-client-side-blog-with-secutio-and-bootstrap-29nf\/#%D9%BE%DB%8C%D8%B4_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D8%B2%D9%86%D8%AF%D9%87\" >\u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0632\u0646\u062f\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/building-a-dynamic-client-side-blog-with-secutio-and-bootstrap-29nf\/#%D9%86%D8%AA%DB%8C%D8%AC%D9%87\" >\u0646\u062a\u06cc\u062c\u0647<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%A7%D8%B2_%D8%A8%D9%88%D8%AA_%D8%A7%D8%B3%D8%AA%D8%B1%D9%BE_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%A7%D9%81%D8%B2%D8%A7%DB%8C%D8%B4_%D8%AA%D8%AC%D8%B1%D8%A8%D9%87_%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C\"><\/span>\n<p>  \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0628\u0648\u062a \u0627\u0633\u062a\u0631\u067e \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/nabfollower.com\/blog\/wp-content\/uploads\/2024\/04\/\u0633\u0627\u062e\u062a-\u06cc\u06a9-\u0648\u0628\u0644\u0627\u06af-\u062f\u0627\u06cc\u0646\u0627\u0645\u06cc\u06a9-\u0633\u0645\u062a-\u0645\u0634\u062a\u0631\u06cc-\u0628\u0627-Secutio-\u0648-Bootstrap.jpg\" alt=\"\u0646\u0645\u0648\u0646\u0647 \u0648\u0628\u0644\u0627\u06af \u0628\u0648\u062a \u0627\u0633\u062a\u0631\u067e\" loading=\"lazy\" width=\"480\" height=\"300\" title=\"\"><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0645\u0648\u062b\u0631 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc Secutio \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0633\u0631\u06cc\u0639 \u0648\u0628\u060c \u0645\u0627 \u0686\u0627\u0631\u0686\u0648\u0628 \u0645\u062d\u0628\u0648\u0628 Bootstrap \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u06cc\u0647 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645.  \u0628\u0648\u062a \u0627\u0633\u062a\u0631\u067e \u06cc\u06a9 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0642\u0648\u06cc \u0648 \u06a9\u0627\u0631\u0628\u0631\u067e\u0633\u0646\u062f \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0627\u06cc\u062f\u0647 \u0622\u0644 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u067e\u0627\u06cc\u0647 \u067e\u0631\u0648\u0698\u0647 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0641\u0647\u0648\u0645 \u0648\u0628\u0644\u0627\u06af \u0628\u0648\u062a \u0627\u0633\u062a\u0631\u067e \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0648\u062f\u060c \u0627\u0645\u0627 \u0628\u0627 \u06cc\u06a9 \u0646\u0648\u0622\u0648\u0631\u06cc \u06a9\u0644\u06cc\u062f\u06cc: \u0647\u0631 \u067e\u0633\u062a \u0648\u0628\u0644\u0627\u06af \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0627\u0632 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0628\u0647 \u0622\u0646 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f\u060c \u062f\u0631 \u06cc\u06a9 \u067e\u0646\u062c\u0631\u0647 \u0645\u0648\u062f\u0627\u0644 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0647\u0631 \u067e\u0633\u062a \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 URL \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u062f\u06cc\u062f \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0628\u0647\u06cc\u0646\u0647 \u0628\u0631\u0627\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u06a9\u0634\u0641 \u0628\u0647\u062a\u0631 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AF%D9%87_%D8%B3%D8%A7%D8%B2%DB%8C_%D8%AA%D9%88%D8%B3%D8%B9%D9%87_%D9%88%D8%A8_%D8%B3%D8%A7%DB%8C%D8%AA_%D8%A8%D8%A7_%D9%82%D8%A7%D9%84%D8%A8_%D9%87%D8%A7\"><\/span>\n<p>  \u0633\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0628\u0627 \u0642\u0627\u0644\u0628 \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062a\u0648\u0633\u0639\u0647 \u06cc\u06a9 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u067e\u0648\u06cc\u0627 \u0627\u063a\u0644\u0628 \u0634\u0627\u0645\u0644 \u062a\u06a9\u0631\u0627\u0631 \u0645\u062d\u062a\u0648\u0627 \u0627\u0633\u062a\u060c \u0686\u0627\u0644\u0634\u06cc \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0627 \u062a\u0628\u062f\u06cc\u0644 \u0622\u0646 \u0628\u0647 \u0642\u0627\u0644\u0628\u200c\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u06cc\u0627 \u0627\u062c\u0632\u0627\u06cc \u0648\u0628\u060c \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u0627\u0698\u0648\u0644\u0627\u0631 \u0628\u0648\u062f\u0646 \u0648 \u06a9\u0627\u0631\u0627\u06cc\u06cc\u060c \u0628\u0647 \u0637\u0648\u0631 \u0645\u0624\u062b\u0631 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0637\u0631\u0641 \u06a9\u0631\u062f.<\/p>\n<p>\u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u0628\u0627 \u062a\u062c\u0632\u06cc\u0647 \u0648 \u062a\u062d\u0644\u06cc\u0644 \u06a9\u0627\u0645\u0644 \u0633\u0627\u062e\u062a\u0627\u0631 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0628\u0631\u0627\u06cc \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0628\u062e\u0634 \u0647\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631\u0634\u0648\u0646\u062f\u0647 \u0645\u0627\u0646\u0646\u062f \u0645\u0646\u0648\u0647\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634\u060c \u067e\u0633\u062a \u0647\u0627\u06cc \u0627\u062e\u06cc\u0631 \u06cc\u0627 \u0641\u0647\u0631\u0633\u062a \u0647\u0627\u06cc \u0622\u0631\u0634\u06cc\u0648 \u0622\u063a\u0627\u0632 \u0645\u06cc \u0634\u0648\u062f.  \u0633\u067e\u0633 \u0647\u0631 \u0628\u062e\u0634 \u0634\u0646\u0627\u0633\u0627\u06cc\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0634\u062f\u0647 \u0648 \u0628\u0647 \u06cc\u06a9 \u0627\u0644\u06af\u0648 \u06cc\u0627 \u062c\u0632\u0621 \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u0642\u0627\u0644\u0628\u200c\u0647\u0627 \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u0628\u0632\u0627\u0631\u06a9\u200c\u0647\u0627\u06cc \u0648\u0631\u062f\u067e\u0631\u0633 \u0639\u0645\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648 \u0627\u0635\u0644\u0627\u062d \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u062a\u0633\u0647\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u062e\u0627\u0635\u060c \u0627\u06cc\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f \u0645\u0646\u062c\u0631 \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u062f\u0648\u0627\u0632\u062f\u0647 \u0627\u0644\u06af\u0648\u06cc \u0645\u062c\u0632\u0627 \u0634\u062f \u06a9\u0647 \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u062e\u0627\u0635 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0628\u0648\u062f\u0646\u062f.  \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648\u0647\u0627 \u0628\u0647 \u0637\u0648\u0631 \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u062f\u0631 \u0641\u0647\u0631\u0633\u062a \u0648\u0628 \u0633\u0627\u06cc\u062a \u0627\u062f\u063a\u0627\u0645 \u0634\u062f\u0646\u062f \u0648 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631\u06cc \u06a9\u0644\u06cc \u0648 \u0633\u0647\u0648\u0644\u062a \u0645\u062f\u06cc\u0631\u06cc\u062a \u0622\u0646 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0627\u062f\u0646\u062f.<\/p>\n<p>\u0648\u0628\u0644\u0627\u06af<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\u251c\u2500\u2500 blog\/\n\u2502   \u251c\u2500\u2500 public\/\n\u2502   \u2502   \u251c\u2500\u2500 templates\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 top-bar.html\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 nav-bar.html\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 featured-post.html\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 featured-posts.html\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 panel-posts.html\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 list-posts.html\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 panel-archives.html\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 panel-elsewhere.html\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 footer.html\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 btn-scroll-to-top.html\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 modal-post.html\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 nav-modal.html\n\u2502   \u2502   \u251c\u2500\u2500 assets\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 css\/\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 styles.css\n\u2502   \u2502   \u251c\u2500\u2500 index.html\n\u2502   \u2502   \u251c\u2500\u2500 post.html\n\u2502   \u2502   \u251c\u2500\u2500 tasks.json\n\u2502   \u2502   \u251c\u2500\u2500 tasks-post.json\n\u2514\u2500\u2500 server.py\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 \u0645\u0648\u0631\u062f SPA (\u0628\u0631\u0646\u0627\u0645\u0647 \u062a\u06a9 \u0635\u0641\u062d\u0647 \u0627\u06cc)\u060c \u062a\u0646\u0647\u0627 \u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u0627\u0632 \u06cc\u06a9 \u0635\u0641\u062d\u0647 HTML \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u06cc\u0647 \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0646 \u0627\u06cc\u0646 \u0646\u06a9\u062a\u0647 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 SPA \u0628\u0647 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0631\u0628\u0627\u062a\u200c\u0647\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u0646\u062f \u062a\u0627 \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0647\u062f\u0627\u0641 SEO \u0641\u0647\u0631\u0633\u062a \u06a9\u0646\u0646\u062f.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0645\u0627 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0627\u0636\u0627\u0641\u06cc \u0628\u0647 \u0646\u0627\u0645 &#8220;post.html&#8221; \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0633\u062a \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u062f\u0633\u062a\u0631\u0633\u06cc \u0627\u0632 \u0637\u0631\u06cc\u0642 URL \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF%D9%87%D8%A7%DB%8C_%D8%B9%D9%86%D8%A7%D8%B5%D8%B1_HTML_%D8%B1%D8%A7_%D8%A8%D8%A7_%D9%88%D8%B8%D8%A7%DB%8C%D9%81_%D9%85%D8%B1%D8%AA%D8%A8%D8%B7_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0639\u0646\u0627\u0635\u0631 HTML \u0631\u0627 \u0628\u0627 \u0648\u0638\u0627\u06cc\u0641 \u0645\u0631\u062a\u0628\u0637 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0635\u0644 \u06a9\u0627\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 Secutio \u0634\u0627\u0645\u0644 \u0645\u0631\u062a\u0628\u0637 \u06a9\u0631\u062f\u0646 \u0648\u0638\u0627\u06cc\u0641 \u0628\u0627 \u0639\u0646\u0627\u0635\u0631 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0627\u0633\u062a.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%88%D8%B8%D8%A7%DB%8C%D9%81_%D8%B1%D8%A7_%D8%AA%D8%B9%D8%B1%DB%8C%D9%81_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0648\u0638\u0627\u06cc\u0641 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u067e\u0633 \u0627\u0632 \u0628\u0631\u0634 \u0647\u0631 \u0642\u0637\u0639\u0647 \u0627\u0632 \u0635\u0641\u062d\u0647 &#8216;index.html&#8217; \u0648 \u0642\u0631\u0627\u0631 \u062f\u0627\u062f\u0646 \u0622\u0646\u0647\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0647\u0627\u060c \u06af\u0627\u0645 \u0628\u0639\u062f\u06cc \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0648\u0638\u0627\u06cc\u0641\u06cc \u0631\u0627 \u0628\u0647 \u0647\u0631 \u0639\u0646\u0635\u0631 HTML \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0647\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0645\u062d\u062a\u0648\u0627 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0633\u067e\u0633 \u0627\u06cc\u0646 \u0648\u0638\u0627\u06cc\u0641 \u0628\u0627 \u0627\u0644\u06af\u0648\u06cc \u0645\u0631\u0628\u0648\u0637\u0647 \u0645\u0631\u062a\u0628\u0637 \u06cc\u0627 \u0645\u0631\u062a\u0628\u0637 \u0645\u06cc \u0634\u0648\u0646\u062f.<\/p>\n<p>\u06a9\u062f HTML \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0632\u06cc\u0631 \u0628\u0627 \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0648\u0628\u0644\u0627\u06af Bootstrap \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f <a>\u0645\u062b\u0627\u0644.  \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647\u060c \u067e\u06cc\u0648\u0646\u062f\u06cc \u0628\u0647 \u0641\u0627\u06cc\u0644 JSON \u062d\u0627\u0648\u06cc \u0648\u0638\u0627\u06cc\u0641 (<code>&lt;script data-tasktable type=\"application\/json\" src=\"https:\/\/dev.to\/mrhdias\/tasks.json\"&gt;&lt;\/script&gt;<\/code>) \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0622\u062f\u0631\u0633 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 Secutio \u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u0639\u0646\u0635\u0631 \u0628\u062f\u0646\u0647 HTML \u06af\u0646\u062c\u0627\u0646\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>public\/index.html<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"cp\">&lt;!doctype html&gt;<\/span>\n<span class=\"nt\">&lt;html<\/span> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span> <span class=\"na\">data-bs-theme=<\/span><span class=\"s\">\"auto\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\">&lt;head&gt;<\/span>\n    <span class=\"c\">&lt;!-- missing content --&gt;<\/span>\n    <span class=\"nt\">&lt;link<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span>\n        <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/cdn.jsdelivr.net\/npm\/@docsearch\/css@3\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;link<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span>\n        <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\"<\/span>\n        <span class=\"na\">crossorigin=<\/span><span class=\"s\">\"anonymous\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"c\">&lt;!-- Custom styles for this template --&gt;<\/span>\n    <span class=\"nt\">&lt;link<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span>\n        <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/fonts.googleapis.com\/css?family=Playfair&amp;#43;Display:700,900&amp;amp;display=swap\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;link<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span>\n        <span class=\"na\">href=<\/span><span class=\"s\">\"assets\/css\/styles.css\"<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;script <\/span><span class=\"na\">data-tasktable<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"application\/json\"<\/span> <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/dev.to\/mrhdias\/tasks.json\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\n<span class=\"nt\">&lt;\/head&gt;<\/span>\n<span class=\"nt\">&lt;body&gt;<\/span>\n    <span class=\"c\">&lt;!-- missing content --&gt;<\/span>\n    <span class=\"nt\">&lt;script <\/span><span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"<\/span>\n        <span class=\"na\">crossorigin=<\/span><span class=\"s\">\"anonymous\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\n    <span class=\"nt\">&lt;script <\/span><span class=\"na\">type=<\/span><span class=\"s\">\"text\/javascript\"<\/span> <span class=\"na\">src=<\/span><span class=\"s\">\"https:\/\/cdn.jsdelivr.net\/gh\/mrhdias\/secutio@master\/dist\/js\/secutio.min.js\"<\/span><span class=\"nt\">&gt;&lt;\/script&gt;<\/span>\n<span class=\"nt\">&lt;\/body&gt;<\/span>\n<span class=\"nt\">&lt;\/html&gt;<\/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>\u0628\u0639\u062f \u0627\u0632 \u0639\u0646\u0635\u0631 HTML &#8220;body&#8221;\u060c \u0633\u0631\u0635\u0641\u062d\u0647 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0634\u0627\u0645\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f \u06a9\u0647 \u0627\u0632 \u06cc\u06a9 \u0646\u0648\u0627\u0631 \u0628\u0627\u0644\u0627 \u0648 \u06cc\u06a9 \u0645\u0646\u0648 \u0628\u0627 \u062f\u0633\u062a\u0647\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062a\u0634\u06a9\u06cc\u0644 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>public\/index.html<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\">&lt;!-- missing content --&gt;<\/span>\n<span class=\"c\">&lt;!-- header with topbar and menu with categories --&gt;<\/span>\n<span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"container\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\">&lt;header<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"top-bar\"<\/span>\n        <span class=\"na\">data-tasks=<\/span><span class=\"s\">\"add-topbar\"<\/span>\n        <span class=\"na\">class=<\/span><span class=\"s\">\"border-bottom lh-1 py-3\"<\/span><span class=\"nt\">&gt;&lt;\/header&gt;<\/span>\n\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"py-1 mb-3 border-bottom\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\">&lt;nav<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"navbar navbar-expand-lg\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\">&lt;div<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"container-fluid\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\">&lt;button<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"navbar-toggler\"<\/span>\n                    <span class=\"na\">type=<\/span><span class=\"s\">\"button\"<\/span>\n                    <span class=\"na\">data-bs-toggle=<\/span><span class=\"s\">\"collapse\"<\/span>\n                    <span class=\"na\">data-bs-target=<\/span><span class=\"s\">\"#large-nav-bar\"<\/span>\n                    <span class=\"na\">aria-controls=<\/span><span class=\"s\">\"large-nav-bar\"<\/span>\n                    <span class=\"na\">aria-expanded=<\/span><span class=\"s\">\"false\"<\/span>\n                    <span class=\"na\">aria-label=<\/span><span class=\"s\">\"Toggle navigation\"<\/span><span class=\"nt\">&gt;<\/span>\n                    <span class=\"nt\">&lt;span<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"navbar-toggler-icon\"<\/span><span class=\"nt\">&gt;&lt;\/span&gt;<\/span>\n                <span class=\"nt\">&lt;\/button&gt;<\/span>\n                <span class=\"nt\">&lt;div<\/span> <span class=\"na\">id=<\/span><span class=\"s\">\"large-nav-bar\"<\/span>\n                    <span class=\"na\">data-tasks=<\/span><span class=\"s\">\"add-navbar\"<\/span>\n                    <span class=\"na\">class=<\/span><span class=\"s\">\"collapse navbar-collapse justify-content-center\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\">&lt;\/div&gt;<\/span>\n            <span class=\"nt\">&lt;\/div&gt;<\/span>\n        <span class=\"nt\">&lt;\/nav&gt;<\/span>\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\n<span class=\"nt\">&lt;\/div&gt;<\/span>\n<span class=\"c\">&lt;!-- missing content --&gt;<\/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>\u0639\u0646\u0635\u0631 \u0647\u062f\u0631 HTML \u0648 \u0639\u0646\u0635\u0631 \u0628\u0627 \u0634\u0646\u0627\u0633\u0647 &#8220;#large-nav-bar&#8221; \u0647\u0631 \u062f\u0648 \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0646\u0627\u0645 &#8220;data-tasks&#8221; \u0647\u0633\u062a\u0646\u062f.  \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0634\u0627\u0645\u0644 \u0646\u0627\u0645 \u0648\u0638\u06cc\u0641\u0647 \u0627\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0647\u0646\u06af\u0627\u0645 \u0648\u0642\u0648\u0639 \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u0645\u0634\u062e\u0635 \u0627\u062c\u0631\u0627 \u0634\u0648\u062f\u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0641\u0627\u06cc\u0644 &#8220;https:\/\/dev.to\/mrhdias\/tasks.json&#8221; \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a.  \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0648\u0631\u062f \u062e\u0627\u0635\u060c \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u06a9\u0647 \u0645\u0633\u0626\u0648\u0644 \u0627\u062c\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0627\u0633\u062a &#8220;init&#8221; \u0646\u0627\u0645\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u067e\u0633 \u0627\u0632 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0635\u0641\u062d\u0647 HTML \u0622\u063a\u0627\u0632 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631 \u0646\u062f\u0627\u0631\u062f.<\/p>\n<p>public\/tasks.json<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"add-topbar\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"trigger\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"init\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"template\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"templates\/top-bar.html\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"#top-bar\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"swap\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"inner\"<\/span><span class=\"w\">\n    <\/span><span class=\"p\">},<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"add-navbar\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"trigger\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"init\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"src-data\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"data\/navbar.json\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"template\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"templates\/nav-bar.html\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"#large-nav-bar\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"swap\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"inner\"<\/span><span class=\"w\">\n    <\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/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\u0645\u0627\u0645 \u062e\u0648\u0627\u0635 \u062f\u0631 \u0627\u0633\u0646\u0627\u062f Secutio \u0645\u0633\u062a\u0646\u062f \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0628\u0627\u0644\u0627 \u0630\u06a9\u0631 \u0634\u062f\u060c \u0641\u0642\u0637 \u0648\u0638\u0627\u06cc\u0641 \u0628\u0627 \u0631\u0648\u06cc\u062f\u0627\u062f &#8220;init&#8221; \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062f\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0635\u0641\u062d\u0647 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0645\u06cc \u0634\u0648\u0646\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0648\u06cc\u0698\u06af\u06cc &#8220;next&#8221; \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0631\u0627 \u062f\u0631 \u0647\u0645\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0642\u0637\u0639\u0647 \u06a9\u062f \u0632\u06cc\u0631 \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u062f\u06a9\u0645\u0647 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u0647 \u0628\u0627\u0644\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f\u060c \u0645\u062b\u0627\u0644 \u0645\u06cc \u0632\u0646\u06cc\u0645.<\/p>\n<p>public\/tasks.json<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"add-footer\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"trigger\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"init\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"template\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"templates\/footer.html\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"footer\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"swap\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"inner\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"before\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"add-footer-classes\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"next\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"add-btn-scroll-to-top\"<\/span><span class=\"w\">\n    <\/span><span class=\"p\">},<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"add-footer-classes\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"selector\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"footer\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"add\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n            <\/span><span class=\"nl\">\"class\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"py-5 text-center text-body-secondary bg-body-tertiary\"<\/span><span class=\"w\">\n        <\/span><span class=\"p\">}<\/span><span class=\"w\">\n    <\/span><span class=\"p\">},<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"add-btn-scroll-to-top\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"template\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"templates\/btn-scroll-to-top.html\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"footer\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"swap\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"after\"<\/span><span class=\"w\">\n    <\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/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>\u0648\u06cc\u0698\u06af\u06cc &#8220;next&#8221; \u062f\u0631 \u0648\u0638\u0627\u06cc\u0641 \u0628\u0647 \u0632\u0646\u062c\u06cc\u0631\u0647 \u0632\u062f\u0646 \u0686\u0646\u062f\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628 \u0645\u0634\u062e\u0635 \u0627\u062c\u0631\u0627 \u0634\u0648\u0646\u062f.  \u0628\u0647 \u0637\u0648\u0631 \u0645\u0634\u0627\u0628\u0647\u060c \u0648\u06cc\u0698\u06af\u06cc \u00ab\u062f\u0627\u062f\u0647-\u0648\u0638\u0627\u06cc\u0641\u00bb \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0641\u0647\u0631\u0633\u062a\u06cc \u0627\u0632 \u0648\u0638\u0627\u06cc\u0641 \u062c\u062f\u0627 \u0634\u062f\u0647 \u0628\u0627 \u0641\u0627\u0635\u0644\u0647 \u0631\u0627 \u062f\u0631 \u062e\u0648\u062f \u062c\u0627\u06cc \u062f\u0647\u062f\u060c \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0648\u0638\u0627\u06cc\u0641 \u0628\u0631\u0627\u06cc \u0647\u0645\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f\u06cc \u06a9\u0647 \u062e\u0648\u062f \u0639\u0646\u0635\u0631 \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0647 \u0646\u0634\u062f\u0647 \u0628\u0627\u0634\u062f\u060c \u0627\u0645\u06a9\u0627\u0646 \u0627\u062c\u0631\u0627\u06cc \u0686\u0646\u062f\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n<p>\u0633\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0627\u0636\u0627\u0641\u06cc\u060c \u00abthen\u00bb\u060c \u00ab\u067e\u06cc\u0634 \u0627\u0632 \u0627\u06cc\u0646\u00bb \u0648 \u00abafter\u00bb \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u06a9\u0647 \u06a9\u0644\u0627\u0633\u200c\u0647\u0627 \u0648 \u0633\u0628\u06a9\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u062d\u06cc\u0646 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u0636\u0627\u0641\u0647 \u06cc\u0627 \u062d\u0630\u0641 \u06a9\u0646\u06cc\u062f.  \u0648\u06cc\u0698\u06af\u06cc &#8220;then&#8221; \u0628\u0644\u0627\u0641\u0627\u0635\u0644\u0647 \u067e\u0633 \u0627\u0632 \u0634\u0631\u0648\u0639 \u0631\u0648\u06cc\u062f\u0627\u062f \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u06cc\u06a9 \u0686\u0631\u062e\u0634 \u0628\u0631\u0627\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u067e\u06cc\u0634\u0631\u0641\u062a \u0639\u0627\u0644\u06cc \u0627\u0633\u062a.  \u0648\u06cc\u0698\u06af\u06cc &#8220;before&#8221; \u0642\u0628\u0644 \u0627\u0632 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc (&#8220;swap&#8221;) \u0645\u062d\u062a\u0648\u0627 \u062f\u0631 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641 \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0648\u06cc\u0698\u06af\u06cc &#8220;after&#8221; \u067e\u0633 \u0627\u0632 \u062a\u06a9\u0645\u06cc\u0644 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0627\u062c\u0631\u0627 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0642\u0637\u0639\u0647 \u0648\u0638\u0627\u06cc\u0641 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc &#8220;src-data&#8221; \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f.  \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0646\u0628\u0639 \u062f\u0627\u062f\u0647 \u0627\u06cc\u0633\u062a\u0627 \u0631\u0627 \u0645\u0634\u062e\u0635 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f JSON \u06cc\u0627 \u0641\u0627\u06cc\u0644 \u0645\u062a\u0646\u06cc \u0628\u0627\u0634\u062f.  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062f\u0631 \u062f\u0627\u062e\u0644 \u06cc\u06a9 \u06a9\u0627\u0631 \u0627\u0639\u0644\u0627\u0646 \u0645\u06cc \u0634\u0648\u062f\u060c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0646\u0628\u0639 \u062a\u0648\u0633\u0637 \u0648\u0638\u0627\u06cc\u0641 \u0628\u0639\u062f\u06cc \u06a9\u0647 \u062a\u0648\u0633\u0637 \u0628\u0631\u062e\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u0634\u0648\u0646\u062f \u0628\u0647 \u0627\u0631\u062b \u0645\u06cc \u0631\u0633\u0646\u062f.  \u0627\u06cc\u0646 \u0648\u0631\u0627\u062b\u062a \u0627\u062f\u0627\u0645\u0647 \u0645\u06cc \u06cc\u0627\u0628\u062f \u0645\u06af\u0631 \u0627\u06cc\u0646\u06a9\u0647 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062c\u062f\u06cc\u062f &#8220;src-data&#8221; \u0628\u0647 \u0635\u0631\u0627\u062d\u062a \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u06a9\u0627\u0631 \u062e\u0627\u0635 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f \u06cc\u0627 \u0628\u0627 \u0648\u06cc\u0698\u06af\u06cc &#8220;\u0648\u06cc\u0698\u06af\u06cc-src-data&#8221; \u0644\u063a\u0648 \u0634\u0648\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D9%86%D8%A7%D8%A8%D8%B9_%D8%A7%D8%B7%D9%84%D8%A7%D8%B9%D8%A7%D8%AA\"><\/span>\n<p>  \u0645\u0646\u0627\u0628\u0639 \u0627\u0637\u0644\u0627\u0639\u0627\u062a<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0648\u0628\u0644\u0627\u06af \u0627\u0632 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062b\u0627\u0628\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627 \u0628\u0627\u06cc\u062f \u0627\u0632 \u0642\u0628\u0644 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc JSON \u0622\u0645\u0627\u062f\u0647 \u0648 \u0630\u062e\u06cc\u0631\u0647 \u0634\u0648\u062f.  \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0627\u06cc\u062c\u0627\u062f \u062f\u0633\u062a\u06cc \u06cc\u06a9 \u06af\u0632\u06cc\u0646\u0647 \u0627\u0633\u062a\u060c \u062a\u0648\u0635\u06cc\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f.  \u06cc\u06a9 \u0631\u0648\u06cc\u06a9\u0631\u062f \u06a9\u0627\u0631\u0622\u0645\u062f\u062a\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0647\u0631 \u067e\u0633\u062a \u0645\u0633\u062a\u0642\u06cc\u0645\u0627\u064b \u0627\u0632 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u06cc\u0627 \u0628\u0627\u0637\u0646 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647\u060c \u0645\u0627 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645.  \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0632\u06cc\u0631 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0647\u0631 \u067e\u0633\u062a \u062f\u0631 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc JSON \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u06a9\u0647 \u062f\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc &#8220;data\/raw&#8221; \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u0646\u062f\u060c \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f:<\/p>\n<p>\u0639\u0645\u0648\u0645\u06cc\/\u062f\u0627\u062f\u0647\/\u062e\u0627\u0645<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\u251c\u2500\u2500 blog\/\n\u2502   \u251c\u2500\u2500 bin\/\n\u2502   \u2502   \u2502\u2500\u2500 metamorph.py\n\u2502   \u251c\u2500\u2500 public\/\n\u2502   \u2502   \u251c\u2500\u2500 data\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 raw\/\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 1.json\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 2.json\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 3.json\n\u2502   \u2502   \u251c\u2500\u2500 templates\/\n\u2502   \u2502   \u251c\u2500\u2500 assets\/\n\u2502   \u2502   \u251c\u2500\u2500 index.html\n\u2502   \u2502   \u251c\u2500\u2500 post.html\n\u2502   \u2502   \u251c\u2500\u2500 tasks.json\n\u2502   \u2502   \u251c\u2500\u2500 tasks-post.json\n\u2514\u2500\u2500 server.py\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>\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0645\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0641\u0627\u06cc\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0627 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0631\u062a\u0628\u0637 \u0628\u0631\u0627\u06cc \u067e\u0631 \u06a9\u0631\u062f\u0646 \u0648\u0628\u0644\u0627\u06af\u060c \u06cc\u0627 \u0627\u0632 \u06cc\u06a9 Backend \u0627\u0632 \u0637\u0631\u06cc\u0642 REST API \u06cc\u0627 \u062d\u062a\u06cc \u0627\u0632 WordPress REST API \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.  \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u0686\u0646\u062f\u0632\u0628\u0627\u0646\u0647 \u062b\u0627\u0628\u062a \u0628\u0627 \u0627\u0641\u0632\u0648\u062f\u0646 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc \u0627\u0636\u0627\u0641\u06cc \u0628\u0627 \u0632\u0628\u0627\u0646 \u0628\u0647 \u0641\u0647\u0631\u0633\u062a \u00ab\u062f\u0627\u062f\u0647\/\u062e\u0627\u0645\u00bb \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u0648\u062f.<\/p>\n<p>public\/data\/raw\/1.json<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"id\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"mi\">1<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"category\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"Naturale\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"date_created\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"2023-09-30T18:01:14\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"title\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"Curabitur volutpat\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"excerpt\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"Gravida ligula accumsan cursus. Donec consequat nibh id diam accumsan, eu suscipit ipsum condimentum.\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"text\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"Maecenas lacinia est hendrerit lobortis suscipit. Curabitur purus neque, dignissim vel lacinia eleifend, pellentesque imperdiet augue. Suspendisse vestibulum rutrum nibh, in facilisis urna pharetra at. Integer posuere nunc eu justo ultrices semper. Aliquam ut ullamcorper purus, et malesuada dui. Fusce nec lorem ultrices, malesuada ipsum a, feugiat dui. Donec tortor nulla, sagittis et erat a, finibus dapibus libero.\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"image\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"src\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"uploads\/woman-tearing-mint-leaves.jpg\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"alt\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"\"<\/span><span class=\"w\">\n    <\/span><span class=\"p\">},<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"permalink\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"post.html?id=1\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"author\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"Aliquam Tincidunt\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"views\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"mi\">5<\/span><span class=\"p\">,<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"featured\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"kc\">true<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/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>\u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u067e\u0627\u06cc\u062a\u0648\u0646 \u0628\u0647 \u0646\u0627\u0645 &#8220;metamorph.py&#8221; \u06a9\u0647 \u062f\u0631 \u0641\u0647\u0631\u0633\u062a &#8220;bin&#8221; \u0645\u062e\u0632\u0646 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646 \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641\u06cc \u0627\u0632 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc JSON \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0635\u0631\u0641 \u062a\u0648\u0633\u0637 \u0627\u0644\u06af\u0648\u0647\u0627 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0631\u062f.  \u0641\u06cc\u0644\u0645\u0646\u0627\u0645\u0647 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0647 \u062a\u0641\u0635\u06cc\u0644 \u062a\u062d\u0644\u06cc\u0644 \u06a9\u0631\u062f.<\/p>\n<p>\u067e\u0633 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a &#8220;metamorph.py&#8221;\u060c \u062f\u0627\u062f\u0647 \u0647\u0627 \u0648 \u0633\u0627\u062e\u062a\u0627\u0631 \u0641\u0647\u0631\u0633\u062a \u0641\u0627\u06cc\u0644 \u0628\u0647 \u0635\u0648\u0631\u062a \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\u251c\u2500\u2500 blog\/\n\u2502   \u251c\u2500\u2500 bin\/\n\u2502   \u2502   \u2502\u2500\u2500 metamorph.py\n\u2502   \u251c\u2500\u2500 public\/\n\u2502   \u2502   \u251c\u2500\u2500 data\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 archives\/\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 2023-09\/\n\u2502   \u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 1.json\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 2024-02\/\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 2024-04\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 categories\/\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 all\/\n\u2502   \u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 1.json\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 imaginatio\/\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 mundos\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 posts\/\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 1.json\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 2.json\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 3.json\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 raw\/\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 1.json\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 2.json\n\u2502   \u2502   \u2502   \u2502   \u251c\u2500\u2500 3.json\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 archives.json\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 elsewhere.json\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 featured-post.json\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 featured-posts.json\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 most-read.json\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 navbar.json\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 recent-posts.json\n\u2502   \u2502   \u251c\u2500\u2500 templates\/\n\u2502   \u2502   \u251c\u2500\u2500 assets\/\n\u2502   \u2502   \u251c\u2500\u2500 index.html\n\u2502   \u2502   \u251c\u2500\u2500 post.html\n\u2502   \u2502   \u251c\u2500\u2500 tasks.json\n\u2502   \u2502   \u251c\u2500\u2500 tasks-post.json\n\u2514\u2500\u2500 server.py\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>\u0645\u062d\u062a\u0648\u06cc\u0627\u062a \u0633\u0627\u062e\u062a\u0627\u0631 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u062f\u0631 \u0645\u062e\u0632\u0646 \u06a9\u0647 \u0648\u0628\u0644\u0627\u06af \u0646\u0645\u0648\u0646\u0647 \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0631\u062f.<\/p>\n<p>\u062f\u0631 \u0632\u06cc\u0631 \u0641\u0627\u06cc\u0644 JSON \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u067e\u0631 \u06a9\u0631\u062f\u0646 \u0642\u0627\u0644\u0628 \u0646\u0648\u0627\u0631 \u0645\u0646\u0648 \u0627\u0633\u062a.<\/p>\n<p>public\/data\/navbar.json<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">[<\/span><span class=\"w\">\n    <\/span><span class=\"p\">{<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"category\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"Most Recent\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"category_slug\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"all\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"page\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"mi\">1<\/span><span class=\"w\">\n    <\/span><span class=\"p\">},<\/span><span class=\"w\">\n    <\/span><span class=\"p\">{<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"category\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"Imaginatio\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"category_slug\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"imaginatio\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"page\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"mi\">1<\/span><span class=\"w\">\n    <\/span><span class=\"p\">},<\/span><span class=\"w\">\n    <\/span><span class=\"p\">{<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"category\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"Mundos\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"category_slug\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"mundos\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"page\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"mi\">1<\/span><span class=\"w\">\n    <\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><span class=\"p\">]<\/span><span class=\"w\">\n<\/span><\/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<h3><span class=\"ez-toc-section\" id=\"%D9%BE%D8%B1_%DA%A9%D8%B1%D8%AF%D9%86_%D9%82%D8%A7%D9%84%D8%A8_%D9%87%D8%A7_%D8%A8%D8%A7_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7\"><\/span>\n<p>  \u067e\u0631 \u06a9\u0631\u062f\u0646 \u0642\u0627\u0644\u0628 \u0647\u0627 \u0628\u0627 \u062f\u0627\u062f\u0647 \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0644\u06af\u0648\u0647\u0627 \u0648 \u0646\u062d\u0648\u0647 \u0627\u0631\u062a\u0628\u0627\u0637 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0627 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0627\u0644\u06af\u0648\u06cc \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0645\u0646\u0648\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0631\u0627 \u06a9\u0647 \u062a\u0648\u0633\u0637 \u06a9\u0627\u0631 &#8220;add-navbar&#8221; \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f:<\/p>\n<p>public\/templates\/nav-bar.html<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\">&lt;ul<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"navbar-nav nav-underline\"<\/span><span class=\"nt\">&gt;<\/span>${(() =&gt; {\n    if (!task.ok) {\n        return task.status === 404 ? `<span class=\"nt\">&lt;strong&gt;<\/span>${data}<span class=\"nt\">&lt;\/strong&gt;<\/span>` : 'an error happened!';\n    }\n\n    return data.map(record =&gt; `<span class=\"nt\">&lt;li<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"nav-item\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\">&lt;a<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"\/?page=1&amp;category-slug=${record.category_slug}#posts-list\"<\/span>\n            <span class=\"err\">${<\/span><span class=\"na\">window.location.pathname<\/span> <span class=\"err\">!==<\/span> <span class=\"err\">'\/<\/span><span class=\"na\">post.html<\/span><span class=\"err\">'<\/span> <span class=\"err\">?<\/span>\n                <span class=\"err\">`<\/span><span class=\"na\">data-tasks=<\/span><span class=\"s\">\"show-posts-list\"<\/span>\n                <span class=\"na\">data-trigger=<\/span><span class=\"s\">\"click\"<\/span>\n                <span class=\"na\">data-after=<\/span><span class=\"s\">\"remove-active-menu add-active-menu scroll-into-posts-list\"<\/span>\n                <span class=\"na\">data-src-data=<\/span><span class=\"s\">\"data\/categories\/${record.category_slug}\/1.json\"<\/span><span class=\"err\">`<\/span> <span class=\"na\">:<\/span> <span class=\"err\">''}<\/span>\n                <span class=\"na\">class=<\/span><span class=\"s\">\"nav-item nav-link ${window.location.pathname !== '\/post.html' &amp;&amp;\n                    record.category_slug === 'all' ? 'active' : ''}\"<\/span><span class=\"nt\">&gt;<\/span>${record.category}<span class=\"nt\">&lt;\/a&gt;<\/span>\n        <span class=\"nt\">&lt;\/li&gt;<\/span>`).join(\"\");\n})()}<span class=\"nt\">&lt;\/ul&gt;<\/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>\u0642\u0627\u0644\u0628 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0627\u0632 HTML \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a.  \u0628\u0631\u0627\u06cc \u062f\u0631\u06a9 \u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f\u060c \u0646\u062d\u0648\u0647 \u062a\u0648\u0644\u06cc\u062f \u0635\u0641\u062d\u0627\u062a PHP \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631 \u0628\u06af\u06cc\u0631\u06cc\u062f.  \u062f\u0631 PHP\u060c \u06a9\u062f \u062f\u0631 HTML \u062c\u0627\u0633\u0627\u0632\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.  \u0628\u0647 \u0637\u0648\u0631 \u0645\u0634\u0627\u0628\u0647\u060c \u0627\u06cc\u0646 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0627\u0632 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0631\u0627\u06cc \u0631\u0633\u06cc\u062f\u0646 \u0628\u0647 \u0647\u0645\u0627\u0646 \u0647\u062f\u0641 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u0627\u0632 \u0627\u06cc\u0646 \u062a\u0639\u0631\u06cc\u0641: &#8220;\u0627\u0644\u0641\u0638 \u0627\u0644\u06af\u0648\u060c \u062d\u0631\u0648\u0641\u06cc \u0647\u0633\u062a\u0646\u062f \u06a9\u0647 \u0628\u0627 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u0628\u06a9 \u062a\u06cc\u06a9 (`) \u0645\u062d\u062f\u0648\u062f \u0634\u062f\u0647 \u0627\u0646\u062f\u060c \u06a9\u0647 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0634\u062a\u0647 \u0647\u0627\u06cc \u0686\u0646\u062f \u062e\u0637\u06cc\u060c \u062f\u0631\u0648\u0646\u06cc\u0627\u0628\u06cc \u0631\u0634\u062a\u0647 \u0627\u06cc \u0628\u0627 \u0639\u0628\u0627\u0631\u0627\u062a \u062a\u0639\u0628\u06cc\u0647 \u0634\u062f\u0647 \u0648 \u0633\u0627\u062e\u062a\u0627\u0631\u0647\u0627\u06cc \u062e\u0627\u0635\u06cc \u0628\u0647 \u0646\u0627\u0645 \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0628\u0631\u0686\u0633\u0628 \u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.&#8221;<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644\u060c \u06cc\u06a9 \u0634\u06cc \u0628\u0647 \u0646\u0627\u0645 &#8220;\u062a\u06a9\u0644\u06cc\u0641&#8221; \u0648 \u06cc\u06a9 \u0645\u062a\u063a\u06cc\u0631 \u0628\u0647 \u0646\u0627\u0645 &#8220;\u062f\u0627\u062f\u0647&#8221; \u0631\u0627 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u0645.  \u062f\u0631 \u0627\u0635\u0644\u060c \u0645\u062a\u063a\u06cc\u0631 &#8220;\u062f\u0627\u062f\u0647&#8221; \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u06cc\u0627\u0646\u0628\u0631 \u0628\u0631\u0627\u06cc &#8220;task.result&#8221; \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f.  \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc &#8220;ok&#8221; \u0648 &#8220;\u0648\u0636\u0639\u06cc\u062a&#8221; \u062f\u0631 \u0634\u06cc &#8220;\u0648\u0638\u06cc\u0641\u0647&#8221; \u0646\u062a\u06cc\u062c\u0647 \u06a9\u0627\u0631 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0628\u0627 \u0646\u062a\u06cc\u062c\u0647 \u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0645\u0637\u0627\u0628\u0642\u062a \u062f\u0627\u0631\u062f.  \u0628\u0639\u0644\u0627\u0648\u0647\u060c \u0634\u06cc\u0621 &#8220;\u062a\u06a9\u0644\u06cc\u0641&#8221; \u062d\u0627\u0648\u06cc \u0634\u06cc &#8220;\u0631\u0648\u06cc\u062f\u0627\u062f&#8221; \u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0648\u06cc\u0698\u06af\u06cc &#8220;\u0631\u0648\u06cc\u062f\u0627\u062f&#8221; \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633\u06cc \u0627\u0633\u062a: &#8220;task.event&#8221;.<\/p>\n<p>\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0627\u0644\u06af\u0648\u0647\u0627 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0639\u0646\u0635\u0631 HTML &#8220;\u0627\u0644\u06af\u0648&#8221; \u062f\u0631 \u06a9\u062f HTML \u06af\u0646\u062c\u0627\u0646\u06cc\u062f \u06cc\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0648\u06cc\u0698\u06af\u06cc &#8220;is-template&#8221; \u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0645\u0646\u062a\u0642\u0644 \u0634\u062f\u060c \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0647 \u06cc\u0627 \u062f\u0631 &#8221; \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0627\u0633\u062a.<code>Secutio-Transformation: is-template:true<\/code>&#8221; header. \u062f\u0631 \u0627\u06cc\u0646 \u0633\u0646\u0627\u0631\u06cc\u0648\u060c \u0648\u06cc\u0698\u06af\u06cc template \u0628\u0647 \u0634\u06cc &#8220;task&#8221; \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0627\u0632 \u0637\u0631\u06cc\u0642 &#8220;task.template&#8221; \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u0627\u0644\u06af\u0648 \u0631\u0627 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>public\/tasks.json<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"show-posts-list\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"trigger\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"init\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"attribute-trigger\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"data-trigger\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"src-data\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"data\/categories\/all\/1.json\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"attribute-src-data\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"data-src-data\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"template\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"templates\/list-posts.html\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"target\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"#posts-list\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"swap\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"inner\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"after\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"scroll-into-posts-list\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"attribute-after\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"data-after\"<\/span><span class=\"w\">\n    <\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/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>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0642\u0627\u0644\u0628 \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f\u060c \u0648\u0638\u06cc\u0641\u0647 &#8220;show-posts-list&#8221; \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u067e\u0633 \u0627\u0632 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0648\u0628\u0644\u0627\u06af \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0622\u062e\u0631\u06cc\u0646 \u067e\u0633\u062a \u0647\u0627 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0628\u0647 \u067e\u0633\u062a\u200c\u0647\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u0644\u06cc\u0633\u062a \u06a9\u0644\u06cc\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f\u060c \u0645\u06a9\u0627\u0646\u06cc\u0633\u0645 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0645\u06cc \u0645\u062a\u0641\u0627\u0648\u062a \u0627\u0633\u062a.<\/p>\n<p>\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u062a\u0641\u06a9\u06cc\u06a9 \u0627\u0632 \u0631\u0648\u0646\u062f \u0627\u0633\u062a:<\/p>\n<ul>\n<li>\u0639\u0646\u0635\u0631 HTML \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0648\u0638\u06cc\u0641\u0647 \u0627\u0639\u0644\u0627\u0646 \u0645\u06cc \u0634\u0648\u062f \u062f\u0627\u0631\u0627\u06cc \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0647 \u0646\u0627\u0645 &#8220;data-trigger&#8221; \u0627\u0633\u062a.<\/li>\n<li>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0644\u06cc\u0633\u062a \u0631\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u0642\u062f\u0627\u0631 \u0648\u06cc\u0698\u06af\u06cc &#8220;data-trigger&#8221; \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc &#8220;trigger&#8221; \u062f\u0631 \u0627\u0639\u0644\u0627\u0646 \u0648\u0638\u06cc\u0641\u0647 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<li>\u0627\u06cc\u0646 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646\u06cc \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc &#8220;src-data&#8221; \u0648 &#8220;after&#8221; \u0648\u0638\u06cc\u0641\u0647 \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ul>\n<p>\u0627\u06af\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0627\u0632 \u06cc\u06a9 \u06a9\u0627\u0631 \u0645\u0648\u062c\u0648\u062f \u0645\u0648\u0631\u062f \u0646\u0638\u0631 \u0646\u06cc\u0633\u062a\u060c \u06cc\u06a9 \u06a9\u0627\u0631 \u062c\u062f\u06cc\u062f \u0647\u0645\u06cc\u0634\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0637\u0648\u0631 \u062e\u0627\u0635 \u0628\u0631\u0627\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0627\u0639\u0644\u0627\u0645 \u0634\u0648\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%86%D8%AD%D9%88%D9%87_%D8%B1%D9%81%D8%B9_%D9%85%D8%B4%DA%A9%D9%84%D8%A7%D8%AA_%D8%B3%D8%A6%D9%88_%D8%AF%D8%B1_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D9%87%D8%A7%DB%8C_%D9%88%D8%A8_%D8%AA%DA%A9_%D8%B5%D9%81%D8%AD%D9%87_%D8%A7%DB%8C_SPA\"><\/span>\n<p>  \u0646\u062d\u0648\u0647 \u0631\u0641\u0639 \u0645\u0634\u06a9\u0644\u0627\u062a \u0633\u0626\u0648 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u062a\u06a9 \u0635\u0641\u062d\u0647 \u0627\u06cc (SPA)<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0631\u0627\u06cc \u0628\u0647\u0628\u0648\u062f \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u0648\u062a\u0648\u0631 \u062c\u0633\u062a\u062c\u0648 (SEO) \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u062a\u06a9 \u0635\u0641\u062d\u0647\u200c\u0627\u06cc (SPA)\u060c \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0632 \u0646\u0642\u0634\u0647\u200c\u0647\u0627\u06cc \u0633\u0627\u06cc\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f \u0648 \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u0635\u0641\u062d\u0627\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0641\u06a9\u0631 \u06a9\u0646\u0646\u062f.  \u0627\u06cc\u0646 \u0628\u0647 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u0646\u062f \u0648 \u0628\u0647 \u0637\u0648\u0631 \u0628\u0627\u0644\u0642\u0648\u0647 \u0641\u0647\u0631\u0633\u062a \u0628\u0646\u062f\u06cc \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u062f\u0631 SPA \u0628\u0647\u0628\u0648\u062f \u0628\u062e\u0634\u0646\u062f.<\/p>\n<p>\u062f\u0631 SPA \u0647\u0627\u060c \u0631\u0648\u0634 &#8220;replaceState()&#8221; \u0631\u0627\u0628\u0637 History \u0628\u0631\u0627\u06cc \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc URL \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u062e\u0627\u0635\u06cc \u0647\u062f\u0627\u06cc\u062a \u0645\u06cc \u0634\u0648\u0646\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f.  \u0627\u06cc\u0646 \u0631\u0648\u0634 \u0648\u0631\u0648\u062f\u06cc \u062a\u0627\u0631\u06cc\u062e\u0686\u0647 \u0641\u0639\u0644\u06cc \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u06cc\u06a9 \u0634\u06cc\u0621 \u062d\u0627\u0644\u062a \u0648 \u06cc\u06a9 URL \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0631\u0627 \u0645\u0646\u0639\u06a9\u0633 \u0645\u06cc \u06a9\u0646\u062f \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>public\/templates\/single-post.html<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>${(() =&gt; {\n    if (!task.ok) {\n        return task.status === 404 ?\n            `<span class=\"nt\">&lt;strong&gt;<\/span>${data}<span class=\"nt\">&lt;\/strong&gt;<\/span>` : 'an error happened!';\n    }\n\n    history.replaceState({}, \"\", data.permalink);\n\n    return `<span class=\"nt\">&lt;h3<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"pb-4 mb-4 fst-italic border-bottom\"<\/span><span class=\"nt\">&gt;<\/span>From the ${data.category}<span class=\"nt\">&lt;\/h3&gt;<\/span>\n        <span class=\"nt\">&lt;article<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"blog-post\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\">&lt;h2<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"display-6 link-body-emphasis mb-1\"<\/span><span class=\"nt\">&gt;<\/span>${(() =&gt; {\n            document.title=\"Large - \" + data.title;\n            return data.title;\n        })()}<span class=\"nt\">&lt;\/h2&gt;<\/span>\n        <span class=\"nt\">&lt;p<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"blog-post-meta\"<\/span><span class=\"nt\">&gt;<\/span>${(() =&gt; {\n            const dc = new Date(data.date_created + 'Z');\n            return dc.toLocaleString('en-us',{year:'numeric', month:'long', day:'numeric'});\n        })()} by <span class=\"nt\">&lt;a<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"#\"<\/span><span class=\"nt\">&gt;<\/span>${data.author}<span class=\"nt\">&lt;\/a&gt;<\/span>\n        <span class=\"nt\">&lt;\/p&gt;<\/span>\n        <span class=\"nt\">&lt;p&gt;<\/span>\n            <span class=\"nt\">&lt;img<\/span> <span class=\"na\">src=<\/span><span class=\"s\">\"${data.image.src}\"<\/span>\n                <span class=\"na\">class=<\/span><span class=\"s\">\"figure-img img-thumbnail rounded\"<\/span>\n                <span class=\"na\">alt=<\/span><span class=\"s\">\"${data.image.alt}\"<\/span>\n                <span class=\"na\">style=<\/span><span class=\"s\">\"width: 50%;float: left;margin-right: 20px;\"<\/span><span class=\"nt\">&gt;<\/span>\n            ${data.text}\n        <span class=\"nt\">&lt;\/p&gt;<\/span>\n    <span class=\"nt\">&lt;\/article&gt;<\/span>`;\n})()}\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>\u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0627\u0632 \u0627\u0644\u06af\u0648\u06cc \u0628\u0627\u0644\u0627 \u0645\u0634\u062e\u0635 \u0627\u0633\u062a\u060c \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u06cc\u06a9 \u067e\u0633\u062a \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f\u060c URL \u0645\u0634\u062a\u0631\u06cc \u0628\u0647 URL \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u062f\u0631 \u0645\u0646\u0628\u0639 \u062f\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0622\u0646 \u067e\u0633\u062a (&#8220;data.permalink&#8221;) \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f.  \u0647\u0645\u06cc\u0646 \u0631\u0641\u062a\u0627\u0631 \u0647\u0646\u06af\u0627\u0645 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u0647 \u06cc\u06a9 \u062f\u0633\u062a\u0647 \u0627\u0632 \u0645\u0646\u0648 \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc\u200c\u0627\u0641\u062a\u062f\u060c \u067e\u0633 \u0627\u0632 \u0622\u0646 \u0641\u0647\u0631\u0633\u062a \u0645\u0642\u0627\u0644\u0627\u062a \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0622\u0646 \u062f\u0633\u062a\u0647 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f (public\/templates\/list-posts.html).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%B4_%D9%86%D9%85%D8%A7%DB%8C%D8%B4_%D8%B2%D9%86%D8%AF%D9%87\"><\/span>\n<p>  \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0632\u0646\u062f\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0627\u0632 \u0647\u06cc\u0686 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc \u06a9\u0646\u062f.  \u0627\u06cc\u0646 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u062b\u0627\u0628\u062a \u0627\u0633\u062a \u0648 \u0641\u0642\u0637 \u0628\u0647 \u06cc\u06a9 \u0633\u0631\u0648\u0631 HTTP \u0628\u0631\u0627\u06cc \u0627\u062c\u0631\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f.  \u0647\u0631\u06af\u0648\u0646\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0633\u062a\u06cc \u062f\u0631 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc JSON \u062f\u0631 \u0641\u0647\u0631\u0633\u062a \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc &#8220;data\/raw&#8221; \u0646\u06cc\u0627\u0632\u0645\u0646\u062f \u0627\u062c\u0631\u0627\u06cc \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a &#8220;metamorph.py&#8221; \u0628\u0631\u0627\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0641\u0627\u06cc\u0644\u200c\u0647\u0627\u06cc \u0628\u0627\u0642\u06cc\u200c\u0645\u0627\u0646\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u0644\u0627\u06af \u06a9\u0627\u0641\u06cc \u0627\u0633\u062a \u0627\u0632 \u0633\u0631\u0648\u0631 HTTP \u067e\u0627\u06cc\u062a\u0648\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0633\u062a\u0648\u0631 \u0632\u06cc\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>$ cd blog\n$ python3 -m http.server -d public\nServing HTTP on 0.0.0.0 port 8000 (http:\/\/0.0.0.0:8000\/) ...\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<h2><span class=\"ez-toc-section\" id=\"%D9%86%D8%AA%DB%8C%D8%AC%D9%87\"><\/span>\n<p>  \u0646\u062a\u06cc\u062c\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647\u060c \u0647\u062f\u0641 \u0645\u0627 \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0646 \u0627\u062b\u0631\u0628\u062e\u0634\u06cc \u0627\u062f\u063a\u0627\u0645 \u0686\u0627\u0631\u0686\u0648\u0628 Secutio \u0628\u0627 Bootstrap \u0628\u0631\u0627\u06cc \u0633\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u067e\u0648\u06cc\u0627 \u0628\u0648\u062f.  \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc PHP \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a\u060c \u0631\u0648\u06cc\u06a9\u0631\u062f \u0648\u0638\u06cc\u0641\u0647 \u0645\u062d\u0648\u0631 Secutio \u0628\u0627 \u0642\u0627\u0644\u0628 \u0647\u0627\u06cc \u062a\u062d\u062a \u0627\u0644\u0644\u0641\u0638\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0646\u06cc\u0627\u0632 \u0628\u0647 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06af\u0633\u062a\u0631\u062f\u0647 \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u06a9\u0627\u0631 \u0628\u0627 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc Bootstrap \u0628\u0647 \u062d\u062f\u0627\u0642\u0644 \u0645\u06cc \u0631\u0633\u0627\u0646\u062f.  \u0627\u06cc\u0646 \u0631\u0648\u0634 \u067e\u062a\u0627\u0646\u0633\u06cc\u0644 \u0627\u06cc\u0646 \u0631\u0627 \u062f\u0627\u0631\u062f \u06a9\u0647 \u0632\u0645\u0627\u0646 \u0648 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0628\u0647 \u0645\u06cc\u0632\u0627\u0646 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u06a9\u0627\u0647\u0634 \u062f\u0647\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u062a\u0639\u0627\u0645\u0644\u06cc \u0648 \u067e\u0627\u0633\u062e\u06af\u0648 \u0645\u0646\u0627\u0633\u0628 \u06a9\u0646\u062f.<\/p>\n<hr\/>\n<p>\u06a9\u062f \u0645\u0646\u0628\u0639 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a.<\/p>\n<p>\u062c\u0632\u0626\u06cc\u0627\u062a \u0648 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0627\u0636\u0627\u0641\u06cc \u062f\u0631 \u0627\u0633\u0646\u0627\u062f \u0686\u0627\u0631\u0686\u0648\u0628 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a.  \u0627\u0632 \u0627\u06cc\u0646\u062c\u0627 \u0647\u0645 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u06a9\u062f \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0627 \u062a\u0634\u06a9\u0631 \u0627\u0632 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646!<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0628\u0647 \u0637\u0648\u0631 \u0633\u0646\u062a\u06cc\u060c \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u0634\u0627\u0645\u0644 \u0632\u0628\u0627\u0646 \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0645\u0627\u0646\u0646\u062f PHP \u0628\u0648\u062f. \u0627\u0645\u0627 \u0627\u06af\u0631 \u0628\u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0648 \u0642\u062f\u0631\u062a \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u06a9\u0644\u0627\u06cc\u0646\u062a \u0628\u0647 \u0647\u0645\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0633\u062a \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f \u0686\u0647\u061f \u0627\u06cc\u0646\u062c\u0627\u0633\u062a \u06a9\u0647 \u0686\u0627\u0631\u0686\u0648\u0628 Secutio \u0648\u0627\u0631\u062f \u0645\u06cc\u200c\u0634\u0648\u062f. Secutio \u0628\u0647 \u0634\u0645\u0627 \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0648\u06cc\u0627 \u062f\u0631 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0628\u0633\u0627\u0632\u06cc\u062f \u0648 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":63027,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-63026","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\/63026","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=63026"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/63026\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/63027"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=63026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=63026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=63026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}