{"id":88815,"date":"2024-12-18T17:49:52","date_gmt":"2024-12-18T14:19:52","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/creating-a-gallery-app-in-javascript-with-hmpl-40if\/"},"modified":"2024-12-18T17:49:52","modified_gmt":"2024-12-18T14:19:52","slug":"creating-a-gallery-app-in-javascript-with-hmpl-40if","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/creating-a-gallery-app-in-javascript-with-hmpl-40if\/","title":{"rendered":"\ud83c\udf37\u0627\u06cc\u062c\u0627\u062f \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u06af\u0627\u0644\u0631\u06cc \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627 HMPL"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u0647! \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0631\u0648\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u06af\u0627\u0644\u0631\u06cc \u0631\u0627 \u0634\u0631\u062d \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0631\u062f\u0627\u0631\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f (\u0641\u0642\u0637 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0622\u0646\u062c\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0645\u062c\u0648\u0632 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f). \u0627\u0632 \u0646\u0638\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0648\u0686\u06a9 \u0627\u0633\u062a \u060c \u0627\u0645\u0627 \u0628\u0647 \u0646\u0638\u0631 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631 \u06a9\u0627\u0645\u0644\u0627\u064b \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a.<\/p>\n

\u0638\u0627\u0647\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0686\u06cc\u0633\u062a \u0648 \u0686\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062f\u0627\u0631\u062f\u061f<\/p>\n

\u0628\u0631\u0646\u0627\u0645\u0647 \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u06a9\u0648\u0686\u06a9 \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u062f\u0631 \u0635\u0641\u062d\u0627\u062a \u0622\u0646 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u06a9\u0631\u062f. \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n

\u062f\u0633\u06a9\u062a\u0627\u067e<\/p>\n

\u0645\u0648\u0628\u0627\u06cc\u0644<\/p>\n

\u0627\u0632 \u0646\u0638\u0631 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 Next \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0635\u0641\u062d\u0647 \u0628\u0639\u062f \u0628\u0631\u0648\u06cc\u062f \u0648 \u0628\u0627 \u0632\u062f\u0646 \u062f\u06a9\u0645\u0647 Previous \u0628\u0647 \u0635\u0641\u062d\u0647 \u0627\u0648\u0644 \u0628\u0627\u0632\u06af\u0631\u062f\u06cc\u062f.<\/p>\n

\u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u0627\u06af\u0631 \u0631\u0648\u06cc \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u06a9\u0627\u0645\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n

\u0627\u06cc\u0646 \u0642\u0627\u0628\u0644\u06cc\u062a \u0627\u0635\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0648\u062c\u0648\u062f \u0627\u0633\u062a.<\/p>\n

\u0638\u0631\u0627\u0641\u062a \u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<\/p>\n

\u06cc\u06a9\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0627\u06cc\u0646 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u062a\u0635\u0627\u0648\u06cc\u0631\u060c \u0645\u0627\u0646\u0646\u062f \u0645\u062a\u0646 \u0639\u0646\u0648\u0627\u0646\u060c \u0627\u0632 \u0633\u0631\u0648\u0631 \u0645\u06cc \u0622\u06cc\u0646\u062f. \u06cc\u0639\u0646\u06cc 10 \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0645\u062e\u0632\u0646 \u0633\u0627\u06cc\u062a \u0631\u0648\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a \u0630\u062e\u06cc\u0631\u0647 \u0646\u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0647\u0645\u0647 \u0622\u0646\u0647\u0627 \u0627\u0632 \u0633\u0631\u0648\u0631 \u0645\u06cc \u0622\u06cc\u0646\u062f. \u0627\u06cc\u0646 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0627 \u0631\u0648\u06cc\u06a9\u0631\u062f\u06cc \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 HTML \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u0635\u0644\u06cc \u0631\u0627 \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u062f\u0631 \u0645\u0634\u062a\u0631\u06cc \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0628\u0631\u062e\u06cc \u0633\u0644\u0648\u0644 \u0647\u0627 \u062e\u0631\u0648\u062c\u06cc \u0645\u06cc \u062f\u0647\u06cc\u0645 \u06a9\u0647 \u062f\u0631 \u0627\u0635\u0644 \u0641\u0636\u0627\u06cc \u06a9\u0645\u06cc \u0631\u0627 \u0631\u0648\u06cc \u062f\u06cc\u0633\u06a9 \u0627\u0634\u063a\u0627\u0644 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n

\u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f\u060c \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0631\u0627 \u0627\u0632 \u06cc\u06a9 \u0645\u062e\u0632\u0646 \u0631\u0627\u0647 \u062f\u0648\u0631 \u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u062f\u060c \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u062f \u0628\u0633\u06cc\u0627\u0631 \u06a9\u0645\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0634\u0628\u06cc\u0647\u200c\u0633\u0627\u0632\u06cc \u0641\u06cc\u0644\u0645\u200c\u0647\u0627 \u06cc\u0627 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0632\u0645\u0627\u0646 \u0632\u06cc\u0627\u062f\u06cc \u0645\u06cc\u200c\u0628\u0631\u062f. \u0627\u06cc\u0646\u062c\u0627 \u0647\u0645 \u0647\u0645\u06cc\u0646\u0637\u0648\u0631 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0632\u06cc\u062a \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0686\u0646\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06cc \u0627\u0633\u062a.<\/p>\n

\u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u0631\u0648\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u060c \u0627\u06af\u0631 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u06af\u06cc\u0631\u06cc\u0645\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u062f\u0631 \u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0633\u0627\u06cc\u062a\u060c \u0628\u0631\u0627\u06cc \u0686\u0646\u062f \u062b\u0627\u0646\u06cc\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0634\u0648\u062f. \u0627\u0648 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0627\u06cc\u0646 \u0645\u0646\u0628\u0639 \u0631\u0627 \u0628\u0628\u0646\u062f\u062f \u0648 \u0628\u0647 \u0633\u0631\u0627\u063a \u0645\u0646\u0628\u0639 \u062f\u06cc\u06af\u0631\u06cc \u0628\u0631\u0648\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u0632 \u0646\u0638\u0631 \u067e\u0648\u0644\u06cc \u0627\u06cc\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062f\u0631 \u0628\u0631\u062e\u06cc \u0645\u0648\u0627\u0631\u062f \u062f\u0631 \u0628\u0648\u062f\u062c\u0647 \u0634\u0645\u0627 \u0635\u0631\u0641\u0647 \u062c\u0648\u06cc\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0627\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0633\u0631\u0648\u0631 \u0645\u062d\u0648\u0631 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0646\u06cc\u0633\u062a\u060c \u0632\u06cc\u0631\u0627 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627 \u0628\u0631 \u0631\u0648\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a \u0631\u0646\u062f\u0631 \u0645\u06cc \u0634\u0648\u0646\u062f \u0648 \u0631\u0648\u0628\u0627\u062a \u0647\u0627 \u0646\u062a\u06cc\u062c\u0647 \u0631\u0627 \u0646\u062e\u0648\u0627\u0647\u0646\u062f \u062f\u06cc\u062f.<\/p>\n

\u062f\u0631 \u0647\u0631 \u0635\u0648\u0631\u062a \u0627\u0645\u0631\u0648\u0632\u0647 \u0686\u0646\u06cc\u0646 \u0631\u0627\u0647\u06cc \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u0648 \u06a9\u0627\u0645\u0644\u0627 \u0631\u0627\u062d\u062a \u0627\u0633\u062a \u0648 \u0645\u0632\u0627\u06cc\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062f\u0627\u0631\u062f. \u0627\u0645\u0631\u0648\u0632\u0647 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0647\u0627 \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0634\u0627\u0628\u0647\u06cc \u0631\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u06cc\u06a9\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f HMPL \u0627\u0633\u062a.<\/p>\n

\u0641\u0631\u0622\u06cc\u0646\u062f \u062a\u0648\u0633\u0639\u0647 \u0648 \u062e\u0648\u062f \u06a9\u062f<\/p>\n

\u0627\u0648\u0644 \u0627\u0632 \u0647\u0645\u0647\u060c \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u067e\u0644\u062a\u0641\u0631\u0645 \u0647\u0627\u06cc\u06cc \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0648\u06cc \u0622\u0646\u0647\u0627 \u0646\u0648\u0634\u062a\u0647 \u0634\u0648\u062f. \u0645\u0646\u0638\u0648\u0631 \u0645\u0627 \u0627\u0632 \u067e\u0644\u062a\u0641\u0631\u0645 \u0647\u0627\u0633\u062a Express.js \u0628\u0631\u0627\u06cc \u0628\u0627\u0637\u0646\u060c \u0648 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0644\u06cc Node.js\u060c \u0628\u0647 \u062a\u0631\u062a\u06cc\u0628\u060c \u0648 \u062f\u0631 \u0645\u0634\u062a\u0631\u06cc \u0645\u0627 \u06cc\u06a9 \u0633\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a \u0628\u0633\u062a\u0647 \u0648\u0628 \u0645\u0648\u0646\u062a\u0627\u0698<\/p>\n

\u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc<\/p>\n

\u0631\u0648\u06cc\u06a9\u0631\u062f\u0647\u0627\u06cc \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0627\u0632 \u06a9\u062c\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0627\u0632 \u0633\u0631\u0648\u0631 \u06cc\u0627 \u0627\u0632 \u0645\u0634\u062a\u0631\u06cc. \u062f\u0631 \u0645\u0648\u0631\u062f \u0645\u0627\u060c \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u0627\u0632 \u0645\u0634\u062a\u0631\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645\u060c \u0632\u06cc\u0631\u0627 \u062f\u0631 \u0633\u0631\u0648\u0631 \u0645\u06cc \u062f\u0627\u0646\u06cc\u0645 \u06a9\u0647 \u0644\u06cc\u0633\u062a \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u0639\u0646\u0648\u0627\u0646 \u0642\u0628\u0644\u0627\u064b \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u0634\u0648\u062f\u060c \u0627\u0645\u0627 \u0686\u06af\u0648\u0646\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0646\u062d\u0648 \u062f\u0631 DOM \u0627\u062f\u063a\u0627\u0645 \u06a9\u0646\u06cc\u0645 – \u0627\u06cc\u0646 \u062f\u0642\u06cc\u0642\u0627\u064b \u0647\u0645\u0627\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645. \u0627\u0648\u0644 \u0628\u0641\u0647\u0645<\/p>\n

\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0641\u0627\u06cc\u0644 HTML \u0627\u0635\u0644\u06cc \u0628\u0631\u0648\u06cc\u0645:<\/p>\n

index.html<\/p>\n

lang=”en”https:\/\/dev.to\/anthonymax\/><\/p>\n

charset=”UTF-8″ \/>
\n name=”viewport” content=”width=device-width, initial-scale=1.0″ \/>
\n Gallery App<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f \u06a9\u0647 \u0627\u06cc\u0646\u062c\u0627 \u0686\u06cc\u0632\u06cc \u0646\u06cc\u0633\u062a\u060c \u0648 \u0628\u0644\u0647\u060c \u0634\u0645\u0627 \u062f\u0631\u0633\u062a \u0645\u06cc \u06af\u0648\u06cc\u06cc\u062f. \u0645\u0624\u0644\u0641\u0647 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627 \u062e\u0648\u0627\u0647\u0646\u062f \u0628\u0648\u062f \u062f\u0631 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u0634\u0648\u0646\u062f. \u0645\u0627 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u062c\u0627\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f .hmpl \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u067e\u0633\u0648\u0646\u062f\u06cc \u06a9\u0647 \u06a9\u0645\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc html \u0631\u0627 \u06af\u0633\u062a\u0631\u0634 \u0645\u06cc \u062f\u0647\u0646\u062f.<\/p>\n

\u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u06cc\u06a9 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u06cc\u0645 components \u067e\u0648\u0634\u0647 \u0627\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u0647\u0627 \u062f\u0631 \u0622\u0646 \u0630\u062e\u06cc\u0631\u0647 \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f. \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0627\u0632 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u0635\u0641\u062d\u0647 \u0645\u062a\u0635\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0622\u0646\u0647\u0627:<\/p>\n

Gallery.hmpl<\/p>\n

class=”gallery-initial” id=”gallery-initial”https:\/\/dev.to\/anthonymax\/>
\n {
\n {
\n src: “http:\/\/localhost:8000\/api\/images”,
\n method: “POST”
\n }
\n }<\/p>\n

class=”gallery” id=”gallery”https:\/\/dev.to\/anthonymax\/>
\n {
\n {
\n src: “http:\/\/localhost:8000\/api\/images”,
\n after:
\n “click:.navigation-button”,
\n method: “POST”
\n }
\n }<\/p>\n

class=”pagination”https:\/\/dev.to\/anthonymax\/>
\n class=”navigation-button” data-page=”1″ id=”previous” disabled>
\n Previous<\/p>\n

class=”navigation-button” data-page=”2″ id=”next”https:\/\/dev.to\/anthonymax\/>Next<\/p>\n

class=”modal” id=”modal”https:\/\/dev.to\/anthonymax\/><\/p>\n

src=”https:\/\/raw.githubusercontent.com\/hmpl-language\/media\/refs\/heads\/main\/logo.png”
\n alt=””
\n \/><\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0634\u0627\u06cc\u0627\u0646 \u0630\u06a9\u0631 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0648 \u0634\u06cc \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u0648\u0644\u06cc\u0646 \u0645\u0648\u0631\u062f \u0647\u0646\u06af\u0627\u0645 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0635\u0641\u062d\u0647 \u0641\u0639\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0645\u0648\u0631\u062f \u062f\u0648\u0645 \u067e\u0633 \u0627\u0632 \u06a9\u0644\u06cc\u06a9 \u0628\u0631 \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u0641\u0639\u0627\u0644 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0639\u0646\u0648\u0627\u0646.hmpl<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627\u060c \u0627\u0634\u06cc\u0627\u0621 \u0627\u0632 \u0633\u0631\u0648\u0631 \u0628\u0647 HTML \u062a\u063a\u06cc\u06cc\u0631 \u062e\u0648\u0627\u0647\u0646\u062f \u06a9\u0631\u062f. \u062f\u0631 \u062d\u0627\u0644 \u062d\u0627\u0636\u0631\u060c \u0622\u0646\u0647\u0627 \u0628\u0627\u06cc\u062f \u0645\u062a\u0635\u0644 \u0634\u0648\u0646\u062f. \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 main.js \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n

import “https:\/\/dev.to\/anthonymax\/.\/index.scss”https:\/\/dev.to\/anthonymax\/;
\nimport GalleryTemplate from “https:\/\/dev.to\/anthonymax\/.\/components\/Gallery\/Gallery.hmpl”https:\/\/dev.to\/anthonymax\/;
\nimport TitleTemplate from “https:\/\/dev.to\/anthonymax\/.\/components\/Title\/Title.hmpl”https:\/\/dev.to\/anthonymax\/;<\/p>\n

const { response: Title } = TitleTemplate();<\/p>\n

const { response: Gallery } = GalleryTemplate(({ request: { event } }) => {
\n return {
\n headers: {
\n “https:\/\/dev.to\/anthonymax\/Content-Type”https:\/\/dev.to\/anthonymax\/: “https:\/\/dev.to\/anthonymax\/application\/json”https:\/\/dev.to\/anthonymax\/,
\n },
\n body: JSON.stringify({
\n page: event ? Number(event.target.getAttribute(“https:\/\/dev.to\/anthonymax\/data-page”https:\/\/dev.to\/anthonymax\/)) : 1,
\n }),
\n };
\n});<\/p>\n

document.body.append(Title);
\ndocument.body.append(Gallery);<\/p>\n

const gallery = document.querySelector(“https:\/\/dev.to\/anthonymax\/#gallery”https:\/\/dev.to\/anthonymax\/);
\nconst galleryInitial = document.querySelector(“https:\/\/dev.to\/anthonymax\/#gallery-initial”https:\/\/dev.to\/anthonymax\/);
\nconst modal = document.querySelector(“https:\/\/dev.to\/anthonymax\/#modal”https:\/\/dev.to\/anthonymax\/);
\nconst modalImg = modal.querySelector(“https:\/\/dev.to\/anthonymax\/img”https:\/\/dev.to\/anthonymax\/);
\nconst navigationButtons = document.querySelectorAll(“https:\/\/dev.to\/anthonymax\/.navigation-button”https:\/\/dev.to\/anthonymax\/);<\/p>\n

const setActive = (e) => {
\n if (e.target.tagName === “https:\/\/dev.to\/anthonymax\/IMG”https:\/\/dev.to\/anthonymax\/) {
\n modalImg.src = e.target.src;
\n modal.classList.add(“https:\/\/dev.to\/anthonymax\/active”https:\/\/dev.to\/anthonymax\/);
\n }
\n};<\/p>\n

modal.addEventListener(“https:\/\/dev.to\/anthonymax\/click”https:\/\/dev.to\/anthonymax\/, () => {
\n modal.classList.remove(“https:\/\/dev.to\/anthonymax\/active”https:\/\/dev.to\/anthonymax\/);
\n});<\/p>\n

galleryInitial.addEventListener(“https:\/\/dev.to\/anthonymax\/click”https:\/\/dev.to\/anthonymax\/, (e) => {
\n setActive(e);
\n});<\/p>\n

gallery.addEventListener(“https:\/\/dev.to\/anthonymax\/click”https:\/\/dev.to\/anthonymax\/, (e) => {
\n setActive(e);
\n});<\/p>\n

for (let i = 0; i < navigationButtons.length; i++) {
\n const btn = navigationButtons[i];
\n btn.addEventListener(“https:\/\/dev.to\/anthonymax\/click”https:\/\/dev.to\/anthonymax\/, () => {
\n if (!galleryInitial.classList.contains(“https:\/\/dev.to\/anthonymax\/hidden”https:\/\/dev.to\/anthonymax\/))
\n galleryInitial.classList.add(“https:\/\/dev.to\/anthonymax\/hidden”https:\/\/dev.to\/anthonymax\/);
\n btn.setAttribute(“https:\/\/dev.to\/anthonymax\/disabled”https:\/\/dev.to\/anthonymax\/, “”https:\/\/dev.to\/anthonymax\/);
\n navigationButtons[i === 0 ? 1 : 0].removeAttribute(“https:\/\/dev.to\/anthonymax\/disabled”https:\/\/dev.to\/anthonymax\/);
\n });
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u062f\u0631 main.js \u0645\u0627 \u0645\u0646\u0637\u0642 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0634\u0631\u062d \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u062f. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc \u0631\u0627 \u0628\u0647 \u0633\u0631\u0648\u0631 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 HTML \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0647\u0646\u0648\u0632 \u0622\u0646 \u0631\u0627 \u0622\u0645\u0627\u062f\u0647 \u0646\u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u0627\u0645\u0627 \u062f\u0631 \u0637\u06cc \u0645\u0631\u0627\u062d\u0644 \u062a\u0648\u0633\u0639\u0647 \u0622\u0646 \u0631\u0627 \u0622\u0645\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 HTML \u0633\u0631\u0648\u0631 \u062f\u0631 div \u0628\u0644\u0648\u06a9\u060c \u0645\u0627 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u062c\u0632\u0627\u06cc\u06cc \u0631\u0627 \u0628\u0647 DOM \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u0628\u062f\u0648\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0645\u0646\u062a\u0638\u0631 \u067e\u0627\u0633\u062e \u0628\u0627\u0634\u06cc\u0645.<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0627\u06cc\u062f \u0633\u0648\u06cc\u06cc\u0686 \u062f\u06cc\u06af\u0631\u06cc \u0628\u06cc\u0646 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f disabled \u0648\u06cc\u0698\u06af\u06cc \u0628\u0631\u0627\u06cc \u062f\u06a9\u0645\u0647 \u0647\u0627 \u062f\u0631 \u062d\u0627\u0644\u062a \u0627\u06cc\u062f\u0647 \u0622\u0644\u060c \u0627\u0631\u0632\u0634 \u062f\u0631\u06cc\u0627\u0641\u062a \u062a\u0639\u062f\u0627\u062f \u0635\u0641\u062d\u0627\u062a \u0627\u0632 \u0633\u0631\u0648\u0631 \u0648 \u062a\u0645\u0631\u06a9\u0632 \u0631\u0648\u06cc \u0622\u0646 \u0631\u0627 \u062f\u0627\u0631\u062f\u060c \u0627\u0645\u0627 \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u06a9\u0648\u0686\u06a9 \u0627\u0633\u062a \u0648 \u0647\u0645\u0647 \u062b\u0627\u0628\u062a \u0647\u0627 \u0627\u0632 \u0642\u0628\u0644 \u0645\u0634\u062e\u0635 \u0647\u0633\u062a\u0646\u062f\u060c \u0628\u0647\u062a\u0631 \u0627\u0633\u062a \u0622\u0646 \u0631\u0627 \u0628\u0627 \u06a9\u062f \u0627\u0636\u0627\u0641\u06cc \u0627\u0636\u0627\u0641\u0647 \u0646\u06a9\u0646\u06cc\u062f. \u0628\u0647 \u0647\u0631 \u062d\u0627\u0644\u060c \u062a\u063a\u06cc\u06cc\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0648 \u062f\u0631 \u0635\u0648\u0631\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0647 API \u0627\u062a\u0641\u0627\u0642 \u0645\u06cc \u0627\u0641\u062a\u062f.<\/p>\n

\u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u062a\u0635\u0648\u06cc\u0631 \u0631\u0627 \u0631\u0648\u06cc \u06a9\u0644\u06cc\u06a9 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f – \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0627 \u0622\u0648\u06cc\u0632\u0627\u0646 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0631 \u0631\u0648\u06cc \u0628\u0631\u0686\u0633\u0628 wrapper \u0648 \u062a\u0639\u06cc\u06cc\u0646 \u0627\u06cc\u0646\u06a9\u0647 \u0627\u06af\u0631 \u06cc\u06a9 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627\u0634\u062f\u060c \u0628\u0644\u0648\u06a9 \u0628\u0627\u06cc\u062f \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0633\u0627\u0633 \u0641\u0639\u0627\u0644 \u0634\u0648\u062f \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0633\u0628\u06a9 \u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0628\u0647 \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0647\u0633\u062a\u0646\u062f:<\/p>\n

index.scss<\/p>\n

body {
\n font-family: Arial, sans-serif;
\n margin: 0;
\n padding: 0;
\n display: flex;
\n flex-direction: column;
\n align-items: center;
\n background-color: #f4f4f4;
\n}<\/p>\n

h1 {
\n margin: 20px 0;
\n color: #333;
\n}<\/p>\n

.gallery-initial.active {
\n display: flex;
\n}<\/p>\n

.gallery,
\n.gallery-initial {
\n display: flex;
\n gap: 20px;
\n width: 90%;
\n max-width: 1000px;<\/p>\n

@media (max-width:1023px) {
\n display: grid;
\n grid-template-columns: repeat(2, 1fr);
\n max-width: unset;
\n justify-content: center;
\n align-items: center;
\n width: 100%;
\n }
\n}<\/p>\n

.hidden {
\n display: none;
\n}<\/p>\n

.gallery img,
\n.gallery-initial img {
\n width: 150px;
\n height: 100px;
\n border-radius: 5px;
\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
\n cursor: pointer;
\n transition: transform 0.2s;
\n}<\/p>\n

.gallery img:hover,
\n.gallery-initial img:hover {
\n transform: scale(1.05);
\n}<\/p>\n

.modal {
\n display: none;
\n position: fixed;
\n top: 0;
\n left: 0;
\n width: 100%;
\n height: 100%;
\n background: rgba(0, 0, 0, 0.8);
\n justify-content: center;
\n align-items: center;
\n}<\/p>\n

.modal img {
\n max-width: 90%;
\n max-height: 90%;
\n border-radius: 10px;
\n}<\/p>\n

.modal.active {
\n display: flex;
\n}<\/p>\n

.pagination {
\n margin: 20px 0;
\n display: flex;
\n gap: 10px;
\n align-items: center;
\n justify-content: center;
\n}<\/p>\n

.pagination button {
\n padding: 10px 20px;
\n border: none;
\n background-color: #333;
\n color: #fff;
\n border-radius: 5px;
\n cursor: pointer;
\n transition: background-color 0.2s;
\n}<\/p>\n

.pagination button:hover {
\n background-color: #555;
\n}<\/p>\n

.pagination button:disabled {
\n background-color: #ccc;
\n cursor: not-allowed;
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0633\u0628\u06a9 \u0647\u0627 \u0645\u06cc\u0646\u06cc\u0645\u0627\u0644 \u0647\u0633\u062a\u0646\u062f\u060c \u0641\u0642\u0637 \u0628\u0647 \u0627\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u06a9\u0647 \u06af\u0627\u0644\u0631\u06cc \u06a9\u0645 \u0648 \u0628\u06cc\u0634 \u0642\u0627\u0628\u0644 \u0627\u0631\u0627\u0626\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f.<\/p>\n

\u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u0645\u0646 \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0627\u0632 \u0645\u062c\u0645\u0648\u0639\u0647 \u0647\u0627\u06cc \u0622\u0645\u0627\u062f\u0647 \u0648\u0628 \u067e\u06a9 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u0645\u062f\u062a \u0647\u0627 \u067e\u06cc\u0634 \u0633\u0627\u062e\u062a\u0647 \u0628\u0648\u062f\u0645 (\u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0628\u0631\u0627\u06cc \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9 \u0628\u0633\u0627\u0632\u0645)\u060c \u0627\u0645\u0627 \u0627\u06a9\u0646\u0648\u0646 \u062f\u06cc\u06af\u0631 \u0647\u06cc\u0686 \u0641\u0627\u06cc\u062f\u0647 \u0627\u06cc \u0646\u062f\u0627\u0631\u062f \u06a9\u0647 \u062f\u0631 \u0645\u0648\u0631\u062f \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0645\u0648\u0627\u0631\u062f\u06cc \u06a9\u0647 \u0645\u0633\u0626\u0648\u0644 \u0686\u0647 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u0635\u062d\u0628\u062a \u06a9\u0646\u0645. webpack.config.js. \u0641\u0627\u06cc\u0644 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0642\u0627\u0628\u0644 \u0645\u0634\u0627\u0647\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u0632\u0645\u0627\u0646 \u0622\u0646 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u0633\u0645\u062a \u0628\u0627\u0637\u0646 \u062d\u0631\u06a9\u062a \u06a9\u0646\u06cc\u0645.<\/p>\n

Backend<\/p>\n

\u0647\u0646\u06af\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 Backend\u060c \u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0627 \u0622\u0631\u0627\u0645\u0634 \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0631 \u0627\u06cc\u0646 \u0627\u0633\u0627\u0633 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0622\u0646 \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645. \u0641\u0631\u0636 \u06a9\u0646\u06cc\u062f \u0645\u0646 \u06cc\u06a9 \u06af\u0627\u0644\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645 – \u0639\u0627\u0644\u06cc \u0627\u0633\u062a\u060c \u0633\u067e\u0633 \u0628\u0627\u06cc\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u0645 \u0648 \u0645\u0633\u06cc\u0631\u06cc \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0622\u0646\u062c\u0627 \u062a\u0648\u0636\u06cc\u062d \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u0645.<\/p>\n

\u0645\u06cc \u0628\u06cc\u0646\u06cc\u0645 \u06a9\u0647 \u0645\u0633\u06cc\u0631\u06cc \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u0634\u0648\u062f \u0647\u0645\u06cc\u0646 \u0627\u0633\u062a \/api\/images:<\/p>\n

src: “http:\/\/localhost:8000\/api\/images”, <\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06a9\u0646\u0648\u0646\u060c \u0628\u0631\u0627\u06cc \u0622\u0646\u060c \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc HTML \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u067e\u0627\u0633\u062e \u0635\u0627\u062f\u0631 \u0645\u06cc \u0634\u0648\u062f\u060c \u0622\u0645\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0631\u0648\u0634 \u0628\u0631\u0627\u06cc \u0645\u0633\u06cc\u0631 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f POST\u060c \u0632\u06cc\u0631\u0627 \u062f\u0631 body \u0627\u0632 RequestInit \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0639\u0628\u0648\u0631 \u06a9\u0646\u06cc\u062f page \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 \u0644\u0627\u0632\u0645 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u0645\u0634\u0627\u0628\u0647 \u0631\u0627 \u062a\u0639\u06cc\u06cc\u0646 \u06a9\u0646\u06cc\u0645:<\/p>\n

routes\/post.js<\/p>\n

const express = require(“https:\/\/dev.to\/anthonymax\/express”https:\/\/dev.to\/anthonymax\/);
\nconst expressRouter = express.Router();<\/p>\n

const imagePaths = [
\n “https:\/\/dev.to\/anthonymax\/http:\/\/localhost:8000\/images\/img1.jpg”https:\/\/dev.to\/anthonymax\/,
\n “https:\/\/dev.to\/anthonymax\/http:\/\/localhost:8000\/images\/img2.jpg”https:\/\/dev.to\/anthonymax\/,
\n “https:\/\/dev.to\/anthonymax\/http:\/\/localhost:8000\/images\/img3.jpg”https:\/\/dev.to\/anthonymax\/,
\n “https:\/\/dev.to\/anthonymax\/http:\/\/localhost:8000\/images\/img4.jpg”https:\/\/dev.to\/anthonymax\/,
\n “https:\/\/dev.to\/anthonymax\/http:\/\/localhost:8000\/images\/img5.jpg”https:\/\/dev.to\/anthonymax\/,
\n “https:\/\/dev.to\/anthonymax\/http:\/\/localhost:8000\/images\/img6.jpg”https:\/\/dev.to\/anthonymax\/,
\n “https:\/\/dev.to\/anthonymax\/http:\/\/localhost:8000\/images\/img7.jpg”https:\/\/dev.to\/anthonymax\/,
\n “https:\/\/dev.to\/anthonymax\/http:\/\/localhost:8000\/images\/img8.jpg”https:\/\/dev.to\/anthonymax\/,
\n “https:\/\/dev.to\/anthonymax\/http:\/\/localhost:8000\/images\/img9.jpg”https:\/\/dev.to\/anthonymax\/,
\n “https:\/\/dev.to\/anthonymax\/http:\/\/localhost:8000\/images\/img10.jpg”https:\/\/dev.to\/anthonymax\/,
\n];<\/p>\n

const imagesController = (req, res) => {
\n const { page } = req.body;<\/p>\n

if (!page || isNaN(page)) {
\n return res.status(400).send(“https:\/\/dev.to\/anthonymax\/Page number error”https:\/\/dev.to\/anthonymax\/);
\n }<\/p>\n

const pageNumber = parseInt(page);
\n const itemsPerPage = 5;
\n const startIndex = (pageNumber – 1) * itemsPerPage;
\n const endIndex = startIndex + itemsPerPage;<\/p>\n

if (startIndex >= imagePaths.length || pageNumber < 1) {
\n return res.status(404).send(“https:\/\/dev.to\/anthonymax\/Page not found”https:\/\/dev.to\/anthonymax\/);
\n }<\/p>\n

const imagesForPage = imagePaths.slice(startIndex, endIndex);<\/p>\n

const htmlResponse = `
\n ${imagesForPage
\n .map((img, index) => `${img}” alt=”\u062a\u0635\u0648\u06cc\u0631${index}”\/>`)
\n .join(“https:\/\/dev.to\/anthonymax\/\\n”https:\/\/dev.to\/anthonymax\/)}
\n `;<\/p>\n

res.send(htmlResponse);
\n};<\/p>\n

expressRouter.post(“https:\/\/dev.to\/anthonymax\/\/images”https:\/\/dev.to\/anthonymax\/, imagesController);<\/p>\n

module.exports = expressRouter;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 \u0645\u0647\u0645 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0633\u062a\u0647 \u0628\u0647 \u0635\u0641\u062d\u0647\u060c \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u06cc\u0645. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0634\u0627\u06cc\u0627\u0646 \u0630\u06a9\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0633\u06cc\u0631 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0647 \u067e\u0648\u0634\u0647 \u0647\u0627 \u0622\u062f\u0631\u0633 \u062f\u0627\u062f\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f\u060c \u0628\u0644\u06a9\u0647 \u0622\u062f\u0631\u0633 \u062e\u0648\u062f \u0622\u062f\u0631\u0633 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. \u062f\u0631 app.js \u0641\u0627\u06cc\u0644\u060c \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u0645 \u062a\u0627 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0632 \u067e\u0648\u0634\u0647 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0634\u0648\u0646\u062f.<\/p>\n

\u062d\u0627\u0644\u0627\u060c \u062e\u06cc\u0644\u06cc \u0633\u0627\u062f\u0647 \u0627\u0633\u062a. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0627 \u06cc\u06a9 GET \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0639\u0646\u0648\u0627\u0646\u060c \u0645\u0627 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 html \u0633\u0627\u062f\u0647 \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u06a9\u062f \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f:<\/p>\n

routes\/get.js<\/p>\n

const express = require(“https:\/\/dev.to\/anthonymax\/express”https:\/\/dev.to\/anthonymax\/);
\nconst expressRouter = express.Router();
\nconst path = require(“https:\/\/dev.to\/anthonymax\/path”https:\/\/dev.to\/anthonymax\/);<\/p>\n

const titleController = (req, res) => {
\n res.sendFile(path.join(__dirname, “https:\/\/dev.to\/anthonymax\/..\/components\/GET\/title.html”https:\/\/dev.to\/anthonymax\/));
\n};<\/p>\n

expressRouter.use(“https:\/\/dev.to\/anthonymax\/\/title”https:\/\/dev.to\/anthonymax\/, titleController);<\/p>\n

module.exports = expressRouter;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0641\u0627\u06cc\u0644 html \u0641\u0642\u0637 \u06cc\u06a9 \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a span \u0628\u0627 \u0645\u062a\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u06af\u0627\u0644\u0631\u06cc \u0648 \u0628\u0633 \u062f\u0631 \u0627\u0635\u0644\u060c \u0627\u0645\u06a9\u0627\u0646 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 POST \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0646\u06cc\u062f \u0648 \u0686\u0646\u062f\u0632\u0628\u0627\u0646\u06af\u06cc \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u0628\u0627\u0631 \u062f\u06cc\u06af\u0631 \u0628\u0631 \u0631\u0648\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0633\u062a. \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u0622\u0646 \u0631\u0627 \u06a9\u0645 \u0648 \u0628\u06cc\u0634 \u0633\u0627\u062f\u0647 \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u0632\u06cc\u0628\u0627 \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u06a9\u0646\u0645.<\/p>\n

\u0627\u06a9\u0646\u0648\u0646 \u062a\u0646\u0647\u0627 \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u0628\u0627\u0642\u06cc \u0645\u06cc \u0645\u0627\u0646\u062f \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0645\u0647 \u0627\u06cc\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u0645\u062a\u0635\u0644 \u06a9\u0631\u062f\u0647 \u0648 \u0633\u0631\u0648\u0631 \u062e\u0648\u062f \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u0645 \u0648 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u06a9\u0633\u067e\u0631\u0633 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645:<\/p>\n

app.js<\/p>\n

const express = require(“https:\/\/dev.to\/anthonymax\/express”https:\/\/dev.to\/anthonymax\/);
\nconst path = require(“https:\/\/dev.to\/anthonymax\/path”https:\/\/dev.to\/anthonymax\/);
\nconst bodyParser = require(“https:\/\/dev.to\/anthonymax\/body-parser”https:\/\/dev.to\/anthonymax\/);
\nconst cors = require(“https:\/\/dev.to\/anthonymax\/cors”https:\/\/dev.to\/anthonymax\/);<\/p>\n

const PORT = 8000;
\nconst app = express();<\/p>\n

const getRoutes = require(“https:\/\/dev.to\/anthonymax\/.\/routes\/get”https:\/\/dev.to\/anthonymax\/);
\nconst postRoutes = require(“https:\/\/dev.to\/anthonymax\/.\/routes\/post”https:\/\/dev.to\/anthonymax\/);<\/p>\n

app.use(express.json());
\napp.use(bodyParser.urlencoded({ extended: false }));
\napp.use(cors({ origin: true, credentials: true }));<\/p>\n

const imagesFolder = path.join(__dirname, “https:\/\/dev.to\/anthonymax\/.\/images”https:\/\/dev.to\/anthonymax\/);
\napp.use(“https:\/\/dev.to\/anthonymax\/\/images”https:\/\/dev.to\/anthonymax\/, express.static(imagesFolder));<\/p>\n

app.use(express.static(path.join(__dirname, “https:\/\/dev.to\/anthonymax\/src”https:\/\/dev.to\/anthonymax\/)));<\/p>\n

app.get(“https:\/\/dev.to\/anthonymax\/\/”https:\/\/dev.to\/anthonymax\/, (req, res) => {
\n res.sendFile(path.join(__dirname, “https:\/\/dev.to\/anthonymax\/src\/index.html”https:\/\/dev.to\/anthonymax\/));
\n});<\/p>\n

app.use(“https:\/\/dev.to\/anthonymax\/\/api”https:\/\/dev.to\/anthonymax\/, getRoutes);
\napp.use(“https:\/\/dev.to\/anthonymax\/\/api”https:\/\/dev.to\/anthonymax\/, postRoutes);<\/p>\n

app.listen(PORT, () => {
\n console.log(`Server is running on http:\/\/localhost:${PORT}`);
\n});<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646\u062c\u0627 \u0645\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0631\u062f\u06cc\u0645 CORS \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u062f\u06cc\u06af\u0631\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u0645 localhost \u067e\u0648\u0631\u062a\u060c \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0632 \u06cc\u06a9 \u067e\u0648\u0634\u0647. \u0628\u0647 \u0637\u0648\u0631 \u062e\u0627\u0635\u060c \u0645\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u0645:<\/p>\n

const imagesFolder = path.join(__dirname, “https:\/\/dev.to\/anthonymax\/.\/images”https:\/\/dev.to\/anthonymax\/);
\napp.use(“https:\/\/dev.to\/anthonymax\/\/images”https:\/\/dev.to\/anthonymax\/, express.static(imagesFolder));<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062e\u0648\u062f \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0646\u06cc\u062f PORT \u0628\u0631\u0627\u06cc \u0633\u0631\u0648\u0631\u060c \u0627\u0645\u0627 \u0645\u0646 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0631\u0627 \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f\u0645 8000. \u0634\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627\u06cc\u062f \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f bodyParser \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0631\u0627\u062d\u062a \u0628\u0627 HTML \u0648 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0641\u0642\u0637 \u0645\u0633\u06cc\u0631\u0647\u0627 \u0631\u0627 \u0628\u0647 api \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u062f. \u0648 \u0627\u06a9\u0646\u0648\u0646\u060c \u0645\u0646 \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u0645\u060c \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f!<\/p>\n

\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n

\u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647\u060c \u062d\u062a\u06cc \u0686\u0646\u06cc\u0646 \u0628\u0647 \u0638\u0627\u0647\u0631 \u06a9\u0648\u0686\u06a9\u060c \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0627\u06cc\u0646\u06a9\u0647 \u062d\u062f\u0627\u0642\u0644 \u0639\u0645\u0644\u06a9\u0631\u062f \u0627\u062c\u0631\u0627 \u0634\u062f\u0647 \u0628\u0648\u062f\u060c \u0628\u0633\u06cc\u0627\u0631 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0648\u062f. \u0627\u0645\u0627\u060c \u0627\u06cc\u0646 \u0646\u06cc\u0632 \u062c\u0627\u0644\u0628 \u0627\u0633\u062a\u060c \u0632\u06cc\u0631\u0627 \u0632\u0645\u06cc\u0646\u0647 \u0627\u06cc \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a\u060c \u0645\u0648\u0646\u062a\u0627\u0698 \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u0628\u0627\u0644\u0627 \u0648 \u0645\u0627\u0698\u0648\u0644 \u0647\u0627\u06cc \u0633\u0627\u062f\u0647 \u0645\u062f\u0631\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f backend \u0631\u0627 \u062f\u0631 PHP \u06cc\u0627 \u0686\u06cc\u0632 \u062f\u06cc\u06af\u0631\u06cc \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0645\u0639\u0646\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0644\u0627\u06cc\u0646\u062a \u062a\u063a\u06cc\u06cc\u0631 \u0686\u0646\u062f\u0627\u0646\u06cc \u0646\u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062d\u06cc\u0648\u0627\u0646 \u062e\u0627\u0646\u06af\u06cc \u0646\u06cc\u0632 \u0628\u0647 \u062e\u0648\u0628\u06cc \u067e\u06cc\u0634 \u0628\u0631\u0648\u062f.<\/p>\n

\u0627\u0632 \u0647\u0645\u0647 \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u062e\u0648\u0627\u0646\u062f\u0646 \u0645\u0642\u0627\u0644\u0647 \u0628\u0633\u06cc\u0627\u0631 \u0633\u067e\u0627\u0633\u06af\u0632\u0627\u0631\u0645! \u062e\u06cc\u0644\u06cc \u0628\u0632\u0631\u06af \u0628\u0648\u062f\u060c \u062d\u062a\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f\u06cc \u06a9\u0647 \u0633\u0639\u06cc \u06a9\u0631\u062f\u0645 \u0631\u0648\u0627\u06cc\u062a \u0631\u0627 \u062f\u0631 \u062c\u0627\u06cc\u06cc \u06a9\u0648\u062a\u0627\u0647 \u06a9\u0646\u0645\u060c \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0638\u0631\u0627\u0641\u062a \u0647\u0627 \u0631\u0627 \u067e\u0648\u0634\u0634 \u0646\u062f\u0647\u062f\u060c \u0627\u0645\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0648\u062c\u0648\u062f \u0628\u0633\u06cc\u0627\u0631 \u0632\u06cc\u0627\u062f \u0628\u0648\u062f\u060c \u0627\u0645\u0627\u060c \u0627\u0645\u06cc\u062f\u0648\u0627\u0631\u0645\u060c \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u062c\u0627\u0644\u0628 \u0648 \u0645\u0641\u06cc\u062f \u0628\u0627\u0634\u062f!<\/p>\n

\u0645\u062e\u0632\u0646 \u067e\u0631\u0648\u0698\u0647<\/p>\n

\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 GitHub \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f. \u062f\u0631 \u0622\u0646\u062c\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u0628\u0627 \u06a9\u062f \u0622\u0634\u0646\u0627 \u0634\u0648\u06cc\u062f. \u062f\u0631 \u0622\u06cc\u0646\u062f\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631\u06cc \u0646\u06cc\u0632 \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f \u06a9\u0647 \u0645\u0634\u0627\u0628\u0647 \u0648 \u06cc\u0627 \u062d\u062a\u06cc \u0633\u0631\u062f\u062a\u0631 \u0628\u0627\u0634\u0646\u062f.<\/p>\n

\u0644\u06cc\u0633\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062f\u0631 HMPL<\/p>\n

\u0627\u06cc\u0646 \u0645\u062e\u0632\u0646 \u0634\u0627\u0645\u0644 \u0644\u06cc\u0633\u062a\u06cc \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0632\u0628\u0627\u0646 \u0642\u0627\u0644\u0628 HMPL \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0646\u062f. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u06af\u06cc\u0631\u06cc\u062f \u0648 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f (\u0641\u0642\u0637 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627\u06cc\u062f \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0634\u0648\u0646\u062f).<\/p>\n

\u0628\u0631\u0646\u0627\u0645\u0647 \u06af\u0627\u0644\u0631\u06cc<\/p>\n

\u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u06af\u0627\u0644\u0631\u06cc \u06af\u0644 \u0628\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0635\u0641\u062d\u0647 \u0628\u0646\u062f\u06cc. \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0646\u0627\u0645 \u062e\u0648\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0632 \u0633\u0631\u0648\u0631 \u0622\u067e\u0644\u0648\u062f \u0645\u06cc \u0634\u0648\u062f.<\/p>\n

\u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u062e\u0648\u0634\u062d\u0627\u0644 \u062e\u0648\u0627\u0647\u0645 \u0634\u062f \u06a9\u0647 \u0627\u0632 \u0622\u0646 \u062d\u0645\u0627\u06cc\u062a \u06a9\u0646\u06cc\u062f \u067e\u0631\u0648\u0698\u0647 \u0628\u0627 \u0633\u062a\u0627\u0631\u0647 \u0634\u0645\u0627. \u0645\u062a\u0634\u06a9\u0631\u0645<\/p>\n

\u0633\u062a\u0627\u0631\u0647 HMPL \u2606<\/p>\n

\n

\u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u0647! \u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u0631\u0648\u0646\u062f \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u06af\u0627\u0644\u0631\u06cc \u0631\u0627 \u0634\u0631\u062d \u062e\u0648\u0627\u0647\u0645 \u062f\u0627\u062f. \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u062e\u06cc\u0627\u0644 \u0631\u0627\u062d\u062a \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0631\u062f\u0627\u0631\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u062f (\u0641\u0642\u0637 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0622\u0646\u062c\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 \u0645\u062c\u0648\u0632 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f). \u0627\u0632 \u0646\u0638\u0631 \u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0648\u0686\u06a9 \u0627\u0633\u062a \u060c \u0627\u0645\u0627 \u0628\u0647 \u0646\u0638\u0631 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631 \u06a9\u0627\u0645\u0644\u0627\u064b \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a.<\/p>\n

\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n