{"id":63806,"date":"2024-05-26T20:01:45","date_gmt":"2024-05-26T16:31:45","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/unlock-the-power-of-microsoft-blazor-seamless-integration-with-workflow-designer-check-out-guide-now-22fn\/"},"modified":"2024-05-26T20:01:45","modified_gmt":"2024-05-26T16:31:45","slug":"unlock-the-power-of-microsoft-blazor-seamless-integration-with-workflow-designer-check-out-guide-now-22fn","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/unlock-the-power-of-microsoft-blazor-seamless-integration-with-workflow-designer-check-out-guide-now-22fn\/","title":{"rendered":"\u0642\u062f\u0631\u062a \u0645\u0627\u06cc\u06a9\u0631\u0648\u0633\u0627\u0641\u062a Blazor \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f: \u0627\u062f\u063a\u0627\u0645 \u0628\u062f\u0648\u0646 \u062f\u0631\u0632 \u0628\u0627 \u0637\u0631\u0627\u062d \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 &#8211; \u0627\u06a9\u0646\u0648\u0646 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f!"},"content":{"rendered":"<div data-article-id=\"1845141\" id=\"article-body\">\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 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=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><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\/unlock-the-power-of-microsoft-blazor-seamless-integration-with-workflow-designer-check-out-guide-now-22fn\/#%D9%85%D9%82%D8%AF%D9%85%D9%87\" >\u0645\u0642\u062f\u0645\u0647<\/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\/unlock-the-power-of-microsoft-blazor-seamless-integration-with-workflow-designer-check-out-guide-now-22fn\/#%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C_%D8%A7%D8%AC%D9%85%D8%A7%D9%84%DB%8C\" >\u0628\u0631\u0631\u0633\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc<\/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\/unlock-the-power-of-microsoft-blazor-seamless-integration-with-workflow-designer-check-out-guide-now-22fn\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%DA%AF%D8%B1%D8%AF%D8%B4_%DA%A9%D8%A7%D8%B1_CSS_%D9%88_JS_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B7%D8%B1%D8%A7%D8%AD_%DA%AF%D8%B1%D8%AF%D8%B4_%DA%A9%D8%A7%D8%B1\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 CSS \u0648 JS \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/unlock-the-power-of-microsoft-blazor-seamless-integration-with-workflow-designer-check-out-guide-now-22fn\/#%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%B5%D9%81%D8%AD%D9%87_%D8%AC%D8%AF%DB%8C%D8%AF\" >\u0627\u0641\u0632\u0648\u062f\u0646 \u0635\u0641\u062d\u0647 \u062c\u062f\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/unlock-the-power-of-microsoft-blazor-seamless-integration-with-workflow-designer-check-out-guide-now-22fn\/#%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\" >\u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/unlock-the-power-of-microsoft-blazor-seamless-integration-with-workflow-designer-check-out-guide-now-22fn\/#%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=\"%D9%85%D9%82%D8%AF%D9%85%D9%87\"><\/span>\n<p>  \u0645\u0642\u062f\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0635\u0644\u06cc \u0627\u062f\u063a\u0627\u0645 Workflow Designer \u0628\u0627 Blazor \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645\u060c \u0645\u0646\u0637\u0642\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0632\u0627\u06cc\u0627\u06cc \u0639\u0645\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u062e\u0648\u0627\u0646\u0646\u062f\u06af\u0627\u0646 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u0645.  \u0627\u06af\u0631 \u0642\u0628\u0644\u0627\u064b \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0641\u06a9\u0631 \u0646\u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f\u060c \u06cc\u0627 \u0627\u06af\u0631 \u0627\u0646\u06af\u06cc\u0632\u0647 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u0648\u062a\u0648\u0631 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0631\u0627 \u0646\u062f\u0627\u0634\u062a\u0647\u200c\u0627\u06cc\u062f\u060c \u0645\u0637\u0645\u0626\u0646\u0627\u064b \u0627\u06cc\u0646 \u0648\u06cc\u062f\u06cc\u0648\u06cc YouTube \u062a\u0648\u0633\u0637 \u062c\u0641 \u0641\u0631\u06cc\u062a\u0632 \u0634\u0645\u0627 \u0631\u0627 \u0645\u062c\u0630\u0648\u0628 \u062e\u0648\u062f \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f.  \u062c\u0641 \u0641\u0631\u06cc\u062a\u0632 \u0645\u062f\u06cc\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0627\u0635\u0644\u06cc \u062f\u0631 \u0628\u062e\u0634 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0645\u0627\u06cc\u06a9\u0631\u0648\u0633\u0627\u0641\u062a \u0627\u0633\u062a \u06a9\u0647 \u0628\u0631 \u0631\u0648\u06cc \u062a\u06cc\u0645 \u0627\u0646\u062c\u0645\u0646 \u062f\u0627\u062a \u0646\u062a \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f.  \u0645\u0627 \u0645\u0637\u0645\u0626\u0646 \u0647\u0633\u062a\u06cc\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u0648\u06cc\u062f\u06cc\u0648 \u0628\u0647 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u0645\u0632\u0627\u06cc\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc Workflow Engine \u0628\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0628\u0635\u0631\u06cc \u0631\u0627 \u062f\u0631\u06a9 \u06a9\u0646\u06cc\u062f \u0648 \u0647\u0631\u06af\u0648\u0646\u0647 \u0634\u06a9 \u0648 \u062a\u0631\u062f\u06cc\u062f\u06cc \u0631\u0627 \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u0628\u0631\u0637\u0631\u0641 \u06a9\u0646\u062f.<\/p>\n<p>\u062c\u0641 \u0641\u0631\u06cc\u062a\u0632 \u0628\u0647 \u0631\u0648\u0634\u06cc \u0633\u0627\u062f\u0647 \u0648 \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633\u060c \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u062a\u062d\u0648\u06cc\u0644\u060c \u062a\u0648\u0636\u06cc\u062d \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u062a\u0648\u0631 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0628\u0647 \u0633\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062a\u0648\u0633\u0639\u0647 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0632\u0645\u0627\u0646 \u0648 \u062a\u0644\u0627\u0634 \u0635\u0631\u0641 \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u0648 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0631\u0627 \u06a9\u0627\u0647\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=vpMzm6TsdDY\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.youtube.com\/watch?v=vpMzm6TsdDY<\/a><br \/>\n<\/iframe>\n <\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A8%D8%B1%D8%B1%D8%B3%DB%8C_%D8%A7%D8%AC%D9%85%D8%A7%D9%84%DB%8C\"><\/span>\n<p>  \u0628\u0631\u0631\u0633\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0647\u0645\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u06a9 \u0627\u0646\u062f \u062f\u0627\u062a \u0646\u062a \u062f\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc \u0641\u0631\u0627\u0646\u062a \u0627\u0646\u062f \u0645\u062d\u0628\u0648\u0628 \u0645\u0627\u0646\u0646\u062f React \u06cc\u0627 Angular \u062a\u062e\u0635\u0635 \u0646\u062f\u0627\u0631\u0646\u062f.  \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0627\u0637\u0646 \u062f\u0627\u062a \u0646\u062a \u0627\u063a\u0644\u0628 \u062f\u0627\u0631\u0627\u06cc \u0645\u0647\u0627\u0631\u062a \u062f\u0631 Microsoft Blazor \u0647\u0633\u062a\u0646\u062f.  \u0645\u0627 \u0627\u063a\u0644\u0628 \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u200c\u0647\u0627\u06cc\u06cc \u0627\u0632 \u062a\u06cc\u0645 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0641\u0646\u06cc \u062e\u0648\u062f \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u062a\u0627 \u0646\u0645\u0648\u0646\u0647\u200c\u0627\u06cc \u0627\u0632 \u0627\u062f\u063a\u0627\u0645 \u0646\u0633\u062e\u0647 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc Optimajet WorkflowEngine (\u06a9\u0647 \u0634\u0627\u0645\u0644 \u06cc\u06a9 \u0637\u0631\u0627\u062d \u0628\u0635\u0631\u06cc \u0627\u0633\u062a) \u0628\u0627 Microsoft Blazor \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u0647\u200c\u0627\u06cc\u0645 \u0648 \u06cc\u06a9 \u0645\u062b\u0627\u0644 \u0648 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u062f\u0631 \u0645\u062e\u0632\u0646 GitHub \u0628\u0627 \u0634\u0645\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0645\u06cc\u200c\u06af\u0630\u0627\u0631\u06cc\u0645).<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>blazorserver<\/code> \u0642\u0627\u0644\u0628.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">mkdir <\/span>workflow-designer-blazor\n<span class=\"nb\">cd <\/span>workflow-designer-blazor\ndotnet new blazorserver\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\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u06cc\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>dotnet watch<\/code> \u062f\u0633\u062a\u0648\u0631 \u062f\u0627\u062f\u0647 \u0648 \u06a9\u062f \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0644\u062d\u0638\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.  \u0627\u06cc\u0646 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0639\u0627\u0644\u06cc \u0627\u0632 <code>dotnet<\/code> CLI!  \u0627\u06af\u0631<br \/>\u0627\u06af\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f\u060c \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u06cc\u062f:<\/p>\n<p><strong>\u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Empty Blazor<\/strong><\/p>\n<p><\/p>\n<p>\u0622\u0646\u0686\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<ol>\n<li>\u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc CSS \u0648 JS \u0628\u0631\u0627\u06cc Workflow Designer \u0627\u0632 CDN.<\/li>\n<li>\n<em>\u0637\u0631\u0627\u062d<\/em> \u0639\u0646\u0635\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u062f\u0631 \u067e\u0627\u0646\u0644 \u0633\u0645\u062a \u0686\u067e \u0628\u0627 \u0635\u0641\u062d\u0647 \u0645\u0631\u0628\u0648\u0637\u0647.<\/li>\n<li>\u0637\u0631\u0627\u062d \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u062f\u0631 \u0635\u0641\u062d\u0647 \u062c\u062f\u06cc\u062f Blazor.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%DA%AF%D8%B1%D8%AF%D8%B4_%DA%A9%D8%A7%D8%B1_CSS_%D9%88_JS_%D8%A8%D8%B1%D8%A7%DB%8C_%D8%B7%D8%B1%D8%A7%D8%AD_%DA%AF%D8%B1%D8%AF%D8%B4_%DA%A9%D8%A7%D8%B1\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 CSS \u0648 JS \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f CSS \u0648 JS \u0631\u0627 \u0627\u0632 Workflow Designer \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 Designer \u0631\u0627 \u0628\u0647 \u0635\u0641\u062d\u0647 \u062c\u062f\u06cc\u062f\u06cc \u0645\u062a\u0635\u0644 \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0646\u06cc\u0632 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f<br \/>\u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u062a\u0635\u0627\u0644 jQuery \u062f\u0627\u0631\u06cc\u062f\u060c \u0632\u06cc\u0631\u0627 Workflow Designer \u0627\u0632 \u0622\u0646 \u062f\u0631 \u06a9\u0627\u0631 \u062e\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<p>\u0645\u0627 \u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc Designer \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u0627\u0632 CDN \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.  \u0627\u0644\u0628\u062a\u0647\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u062c\u0627\u06cc CDN \u0627\u0632 \u0641\u0627\u06cc\u0644 \u0647\u0627\u06cc \u0645\u062d\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0645\u062e\u0635\u0648\u0635\u0627\u064b<br \/>\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u062f\u0631 \u0645\u062d\u06cc\u0637\u06cc \u0628\u0627 \u062f\u0633\u062a\u0631\u0633\u06cc \u0645\u062d\u062f\u0648\u062f \u0628\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0645\u0647\u0645 \u0627\u0633\u062a.<\/p>\n<p><strong>\u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0647\u0645<\/strong><\/p>\n<p>\u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0646\u062d\u0648\u0647 \u06a9\u0627\u0631 Blazor \u0628\u0627 \u06a9\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\u060c \u06a9\u062f \u062e\u0627\u0631\u062c\u06cc \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627\u06cc\u062f \u0628\u0639\u062f \u0627\u0632 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u06af\u0646\u062c\u0627\u0646\u062f\u0647 \u0634\u0648\u062f. <code>blazor.server.js<\/code>.<\/p>\n<p>\u0628\u0627\u0632 \u06a9\u0646 <code>Pages\/_Host.cshtml<\/code> \u0641\u0627\u06cc\u0644 \u0648 \u062e\u0637\u0648\u0637 \u0628\u0631\u062c\u0633\u062a\u0647 \u0634\u062f\u0647 \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u0634\u06a9\u0644 \u0632\u06cc\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.  \u0633\u0628\u06a9 \u0647\u0627 \u062f\u0631 \u062f\u0627\u062e\u0644 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f <code\/> tag, scripts are added to the end of the page.<\/p>\n<p>Pages\/_Host.cshtml<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>@page \"https:\/\/dev.to\/\"\n@using Microsoft.AspNetCore.Components.Web\n@namespace workflow_designer_blazor.Pages\n@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers\n\n<span class=\"cp\"\/>\n<span class=\"nt\"> <span class=\"na\">lang=<\/span><span class=\"s\">\"en\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n    <span class=\"nt\"><meta\/> <span class=\"na\">charset=<\/span><span class=\"s\">\"utf-8\"<\/span><span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><meta\/> <span class=\"na\">name=<\/span><span class=\"s\">\"viewport\"<\/span> <span class=\"na\">content=<\/span><span class=\"s\">\"width=device-width, initial-scale=1.0\"<\/span><span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><base\/> <span class=\"na\">href=<\/span><span class=\"s\">\"~\/\"<\/span><span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"css\/bootstrap\/bootstrap.min.css\"<\/span><span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">href=<\/span><span class=\"s\">\"css\/site.css\"<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span><span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">href=<\/span><span class=\"s\">\"workflow-designer-blazor.styles.css\"<\/span> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span><span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"stylesheet\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"https:\/\/unpkg.com\/@@optimajet\/workflow-designer@12.5.1\/dist\/workflowdesigner.min.css\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><link\/> <span class=\"na\">rel=<\/span><span class=\"s\">\"icon\"<\/span> <span class=\"na\">type=<\/span><span class=\"s\">\"image\/png\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"favicon.png\"<\/span><span class=\"nt\">\/&gt;<\/span>\n    <span class=\"nt\"><component> <span class=\"na\">type=<\/span><span class=\"s\">\"typeof(HeadOutlet)\"<\/span> <span class=\"na\">render-mode=<\/span><span class=\"s\">\"ServerPrerendered\"<\/span><span class=\"nt\">\/&gt;<\/span>\n<span class=\"nt\"\/>\n<span class=\"nt\"\/>\n<span class=\"nt\"><component> <span class=\"na\">type=<\/span><span class=\"s\">\"typeof(App)\"<\/span> <span class=\"na\">render-mode=<\/span><span class=\"s\">\"ServerPrerendered\"<\/span><span class=\"nt\">\/&gt;<\/span>\n\n<span class=\"nt\"><div> <span class=\"na\">id=<\/span><span class=\"s\">\"blazor-error-ui\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><environment> <span class=\"na\">include=<\/span><span class=\"s\">\"Staging,Production\"<\/span><span class=\"nt\">&gt;<\/span>\n        An error has occurred. This application may no longer respond until reloaded.\n    <span class=\"nt\"\/><\/environment><\/span>\n    <span class=\"nt\"><environment> <span class=\"na\">include=<\/span><span class=\"s\">\"Development\"<\/span><span class=\"nt\">&gt;<\/span>\n        An unhandled exception has occurred. See browser dev tools for details.\n    <span class=\"nt\"\/><\/environment><\/span>\n    <span class=\"nt\"><a> <span class=\"na\">href=<\/span><span class=\"s\">\"\"<\/span> <span class=\"na\">class=<\/span><span class=\"s\">\"reload\"<\/span><span class=\"nt\">&gt;<\/span>Reload<span class=\"nt\"\/><\/span>\n    <span class=\"nt\"><a> <span class=\"na\">class=<\/span><span class=\"s\">\"dismiss\"<\/span><span class=\"nt\">&gt;<\/span>\ud83d\uddd9<span class=\"nt\"\/><\/span>\n<span class=\"nt\"\/><\/div><\/span>\n\n<span class=\"nt\"><script><![CDATA[<span class=\"na\">src=]]><\/script><\/span><span class=\"s\">\"_framework\/blazor.server.js\"<\/span><span class=\"nt\">&gt;<\/span>\n\/\/ <span class=\"err\">&amp;<\/span>new&gt;\n<span class=\"nt\"><script><![CDATA[<span class=\"na\">src=]]><\/script><\/span><span class=\"s\">\"https:\/\/code.jquery.com\/jquery-3.7.1.min.js\"<\/span>\n        <span class=\"na\">integrity=<\/span><span class=\"s\">\"sha256-\/JqT3SQfawRcv\/BIHPThkBvs0OEvtFFmqPF\/lYI\/Cxo=\"<\/span>\n        <span class=\"na\">crossorigin=<\/span><span class=\"s\">\"anonymous\"<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"><script><![CDATA[<span class=\"na\">src=]]><\/script><\/span><span class=\"s\">\"https:\/\/unpkg.com\/@@optimajet\/workflow-designer@12.5.1\/dist\/workflowdesignerfull.min.js\"<\/span>\n        <span class=\"na\">async<\/span> <span class=\"na\">defer<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n<span class=\"nt\"><script><![CDATA[<span class=\"na\">src=]]><\/script><\/span><span class=\"s\">\"js\/designerInterop.js\"<\/span><span class=\"nt\">&gt;<\/span>\n\/\/ <span class=\"nt\">&lt;<\/span><span class=\"err\">&amp;<\/span><span class=\"na\">new<\/span>\n<span class=\"err\"\/><span class=\"na\">body<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/>\n<\/component><\/span><\/component><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/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>\u0627\u06a9\u0646\u0648\u0646 Workflow Designer \u0628\u0627 \u0633\u0628\u06a9 \u0647\u0627\u06cc \u062e\u0648\u062f \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0645\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0628\u0647 \u0641\u0627\u06cc\u0644 \u062f\u0642\u062a \u06a9\u0646\u06cc\u062f <code>js\/designerInterop.js<\/code>.  \u0627\u06cc\u0646 \u0641\u0627\u06cc\u0644 \u062d\u0627\u0648\u06cc \u062a\u0648\u0627\u0628\u0639 \u06a9\u0645\u06a9\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 Designer \u0627\u0633\u062a.<br \/>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 <code>wwwroot\/js\/designerInterop.js<\/code> \u0645\u0633\u06cc\u0631:<\/p>\n<p>wwwroot\/js\/designerInterop.js<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">function<\/span> <span class=\"nf\">renderWorkflowDesigner<\/span><span class=\"p\">(<\/span><span class=\"nx\">options<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">var<\/span> <span class=\"nx\">wfdesigner<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">WorkflowDesigner<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">apiurl<\/span><span class=\"p\">:<\/span> <span class=\"nx\">options<\/span><span class=\"p\">.<\/span><span class=\"nx\">apiUrl<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">wfe<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">language<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">en<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">renderTo<\/span><span class=\"p\">:<\/span> <span class=\"nx\">options<\/span><span class=\"p\">.<\/span><span class=\"nx\">elementId<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">graphwidth<\/span><span class=\"p\">:<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerWidth<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">400<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">graphheight<\/span><span class=\"p\">:<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">innerHeight<\/span> <span class=\"o\">-<\/span> <span class=\"mi\">100<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">showSaveButton<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n    <span class=\"p\">})<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">data<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n        <span class=\"na\">schemecode<\/span><span class=\"p\">:<\/span> <span class=\"nx\">options<\/span><span class=\"p\">.<\/span><span class=\"nx\">schemeCode<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">processid<\/span><span class=\"p\">:<\/span> <span class=\"nx\">options<\/span><span class=\"p\">.<\/span><span class=\"nx\">processId<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">wfdesigner<\/span><span class=\"p\">.<\/span><span class=\"nf\">exists<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">))<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">wfdesigner<\/span><span class=\"p\">.<\/span><span class=\"nf\">load<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">wfdesigner<\/span><span class=\"p\">.<\/span><span class=\"nf\">create<\/span><span class=\"p\">(<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">schemecode<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">waitForJsAndRender<\/span><span class=\"p\">(<\/span><span class=\"nx\">options<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">typeof<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">WorkflowDesigner<\/span> <span class=\"o\">!==<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">undefined<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nf\">renderWorkflowDesigner<\/span><span class=\"p\">(<\/span><span class=\"nx\">options<\/span><span class=\"p\">)<\/span>\n        <span class=\"k\">return<\/span>\n    <span class=\"p\">}<\/span>\n\n    <span class=\"c1\">\/\/ the interval here is only needed to wait for the javascript to load with the designer<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">interval<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">setInterval<\/span><span class=\"p\">(()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n        <span class=\"c1\">\/\/ if the designer hasn't been uploaded yet, we'll wait a little longer<\/span>\n        <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">typeof<\/span> <span class=\"nb\">window<\/span><span class=\"p\">.<\/span><span class=\"nx\">WorkflowDesigner<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">undefined<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"k\">return<\/span>\n\n        <span class=\"nf\">clearInterval<\/span><span class=\"p\">(<\/span><span class=\"nx\">interval<\/span><span class=\"p\">)<\/span>\n        <span class=\"nf\">renderWorkflowDesigner<\/span><span class=\"p\">(<\/span><span class=\"nx\">options<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">},<\/span> <span class=\"mi\">30<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0641\u0642\u0637 \u062f\u0648 \u062a\u0627\u0628\u0639 \u062f\u0631 \u0641\u0627\u06cc\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f:<\/p>\n<ol>\n<li>\n<code>renderWorkflowDesigner<\/code>  &#8211; \u0637\u0631\u0627\u062d \u0631\u0627 \u0628\u0627 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0645\u0634\u062e\u0635 \u0634\u062f\u0647 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/li>\n<li>\n<code>waitForJsAndRender<\/code>  &#8211; \u0645\u0646\u062a\u0638\u0631 \u0645\u06cc \u0645\u0627\u0646\u062f \u062a\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627 \u0637\u0631\u0627\u062d \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0634\u0648\u062f \u0648 \u0631\u0646\u062f\u0631 \u0637\u0631\u0627\u062d \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f.  \u0645\u0627 \u0628\u0647 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u0645 \u0632\u06cc\u0631\u0627 Designer \u067e\u0633 \u0627\u0632 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0635\u0641\u062d\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0646\u0627\u0647\u0645\u0632\u0645\u0627\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0645\u06cc \u0634\u0648\u062f.<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%81%D8%B2%D9%88%D8%AF%D9%86_%D8%B5%D9%81%D8%AD%D9%87_%D8%AC%D8%AF%DB%8C%D8%AF\"><\/span>\n<p>  \u0627\u0641\u0632\u0648\u062f\u0646 \u0635\u0641\u062d\u0647 \u062c\u062f\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0627\u0632 \u06a9\u0646 <code>Shared\/NavMenu.razor<\/code> \u0631\u0627 \u0641\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u062f \u0648 \u062e\u0637\u0648\u0637 \u0628\u0631\u062c\u0633\u062a\u0647 \u0634\u062f\u0647 \u0631\u0627 \u0628\u0639\u062f \u0627\u0632 \u0622\u0646 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <em>\u0648\u0627\u06a9\u0634\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627<\/em> \u0644\u06cc\u0646\u06a9 \u0646\u0627\u0648\u0628\u0631\u06cc<\/p>\n<p>Shared\/NavMenu.razor<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>\n<span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"@NavMenuCssClass nav-scrollable\"<\/span> <span class=\"err\">@<\/span><span class=\"na\">onclick=<\/span><span class=\"s\">\"ToggleNavMenu\"<\/span><span class=\"nt\">&gt;<\/span>\n    <span class=\"nt\"><nav> <span class=\"na\">class=<\/span><span class=\"s\">\"flex-column\"<\/span><span class=\"nt\">&gt;<\/span>\n        <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"nav-item px-3\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><navlink> <span class=\"na\">class=<\/span><span class=\"s\">\"nav-link\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"\"<\/span> <span class=\"na\">Match=<\/span><span class=\"s\">\"NavLinkMatch.All\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\"><span> <span class=\"na\">class=<\/span><span class=\"s\">\"oi oi-home\"<\/span> <span class=\"na\">aria-hidden=<\/span><span class=\"s\">\"true\"<\/span><span class=\"nt\">&gt;<\/span><\/span> Home\n            <span class=\"nt\"\/><\/span><\/navlink><\/span>\n        <span class=\"nt\"\/><\/p><\/span>\n        <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"nav-item px-3\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><navlink> <span class=\"na\">class=<\/span><span class=\"s\">\"nav-link\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"counter\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\"><span> <span class=\"na\">class=<\/span><span class=\"s\">\"oi oi-plus\"<\/span> <span class=\"na\">aria-hidden=<\/span><span class=\"s\">\"true\"<\/span><span class=\"nt\">&gt;<\/span><\/span> Counter\n            <span class=\"nt\"\/><\/span><\/navlink><\/span>\n        <span class=\"nt\"\/><\/p><\/span>\n        <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"nav-item px-3\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><navlink> <span class=\"na\">class=<\/span><span class=\"s\">\"nav-link\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"fetchdata\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\"><span> <span class=\"na\">class=<\/span><span class=\"s\">\"oi oi-list-rich\"<\/span> <span class=\"na\">aria-hidden=<\/span><span class=\"s\">\"true\"<\/span><span class=\"nt\">&gt;<\/span><\/span> Fetch data\n            <span class=\"nt\"\/><\/span><\/navlink><\/span>\n        <span class=\"nt\"\/><\/p><\/span>\n        \/\/ <span class=\"err\">&amp;<\/span>new&gt;\n        <span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"nav-item px-3\"<\/span><span class=\"nt\">&gt;<\/span>\n            <span class=\"nt\"><navlink> <span class=\"na\">class=<\/span><span class=\"s\">\"nav-link\"<\/span> <span class=\"na\">href=<\/span><span class=\"s\">\"designer\"<\/span><span class=\"nt\">&gt;<\/span>\n                <span class=\"nt\"><span> <span class=\"na\">class=<\/span><span class=\"s\">\"oi oi-copywriting\"<\/span> <span class=\"na\">aria-hidden=<\/span><span class=\"s\">\"true\"<\/span><span class=\"nt\">&gt;<\/span><\/span> Designer\n            <span class=\"nt\"\/><\/span><\/navlink><\/span>\n        <span class=\"nt\"\/><\/p><\/span>\n        \/\/ <span class=\"nt\">&lt;<\/span><span class=\"err\">&amp;<\/span><span class=\"na\">new<\/span>\n    <span class=\"err\"\/><span class=\"na\">nav<\/span><span class=\"nt\">&gt;<\/span>\n<span class=\"nt\"\/><\/nav><\/span><\/div><\/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>\u062d\u0627\u0644\u0627 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f <code>Pages\/Designer.razor<\/code> \u0648 \u0645\u062d\u062a\u0648\u0627\u06cc \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0622\u0646\u062c\u0627 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f:<\/p>\n<p>Pages\/Designer.razor<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code>@page \"\/designer\"\n@inject IJSRuntime JSRuntime\n\n<span class=\"nt\"><pagetitle\/><\/span>Workflow designer<span class=\"nt\"\/>\n\n<span class=\"nt\"><p> <span class=\"na\">id=<\/span><span class=\"s\">\"root\"<\/span><span class=\"nt\">&gt;<\/span><\/p><\/span>\n\n@code\n{\n    protected override async Task OnAfterRenderAsync(bool firstRender)\n    {\n        if (firstRender)\n        {\n            var options = new\n            {\n                apiUrl = \"https:\/\/demo.workflowengine.io\/Designer\/API\",\n                elementId = \"root\",\n                schemeCode = \"SimpleWF\"\n            };\n            await JSRuntime.InvokeAsync<span class=\"nt\"><task\/><\/span>(\"waitForJsAndRender\", options);\n        }\n    }\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\u0647 \u0686\u06cc\u0632 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u0633\u0627\u062f\u0647 \u0627\u0633\u062a.  \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f <code>div<\/code> \u0639\u0646\u0635\u0631 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0628\u0627 \u0634\u0646\u0627\u0633\u0647 <code>root<\/code>.  \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0635\u0641\u062d\u0647 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u0631\u0646\u062f\u0631 \u0645\u06cc \u0634\u0648\u062f\u060c \u062f\u0631<br \/><code>OnAfterRenderAsync<\/code>  \u0631\u0648\u0634\u060c \u0645\u0627 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 <code>waitForJsAndRender<\/code>\u060c \u0639\u0628\u0648\u0631 \u0627\u0632 <code>options<\/code> \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u0631\u0627\u0645\u062a\u0631<\/p>\n<p>\u062f\u0631 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627 \u0639\u0628\u0648\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645:<\/p>\n<ol>\n<li>\n<code>elementId<\/code>  &#8211; \u0634\u0646\u0627\u0633\u0647 \u0639\u0646\u0635\u0631 HTML \u06a9\u0647 Designer \u0628\u0627\u06cc\u062f \u062f\u0631 \u0622\u0646 \u062a\u0631\u0633\u06cc\u0645 \u0634\u0648\u062f.<\/li>\n<li>\n<code>apiUrl<\/code>  &#8211; URL \u06a9\u0647 API \u0637\u0631\u0627\u062d \u062f\u0631 \u0622\u0646 \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f.<\/li>\n<li>\n<code>schemeCode<\/code>  &#8211; \u06a9\u062f \u0637\u0631\u062d<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B1%D8%A7%D9%87_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%DB%8C_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87\"><\/span>\n<p>  \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0628\u0631\u0646\u0627\u0645\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 <code>dotnet run<\/code> \u06cc\u0627 <code>dotnet watch<\/code> \u0641\u0631\u0645\u0627\u0646  \u067e\u0633 \u0627\u0632 \u0622\u0646\u060c \u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0635\u0641\u062d\u0647 \u062c\u062f\u06cc\u062f\u06cc \u0628\u0631\u0648\u06cc\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u0628\u0627\u06cc\u062f Workflow Designer \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n<p><strong>\u0637\u0631\u0627\u062d \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Blazor<\/strong><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqs6628m4zrb812w0t0gw.png\" alt=\"\u0637\u0631\u0627\u062d \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u062f\u0631 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 Blazor\" loading=\"lazy\" width=\"800\" height=\"415\" title=\"\"><\/p>\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>\u0645\u0627 \u0628\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0632 \u06cc\u06a9 \u0634\u0628\u06a9\u0647 \u062a\u062d\u0648\u06cc\u0644 \u0645\u062d\u062a\u0648\u0627 (CDN) Workflow Designer \u0631\u0627 \u0628\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 Blazor \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645. <br \/>\u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0628\u0627 \u0637\u0631\u0627\u062d\u060c \u0627\u0632 \u0645\u06a9\u0627\u0646\u06cc\u0633\u0645 interop \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645. <br \/>\u062e\u06cc\u0644\u06cc \u0631\u0627\u062d\u062a \u0628\u0648\u062f!<\/p>\n<p><strong>\u0646\u0638\u0631\u0627\u062a \u0634\u0645\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a<\/strong><br \/>\u0627\u06cc\u0646 \u0628\u0647 \u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f \u0628\u0641\u0647\u0645\u06cc\u0645 \u06a9\u0647 \u0622\u06cc\u0627 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0645\u0641\u06cc\u062f \u0628\u0648\u062f\u0647 \u0627\u0633\u062a\u060c \u0686\u0642\u062f\u0631 \u0648\u0627\u0636\u062d \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0648 \u0686\u0647 \u0686\u06cc\u0632 \u062f\u06cc\u06af\u0631\u06cc \u062f\u0648\u0633\u062a \u062f\u0627\u0631\u06cc\u062f \u062f\u0631 \u0645\u0648\u0631\u062f \u0622\u0646 \u0628\u06cc\u0627\u0645\u0648\u0632\u06cc\u062f.  \u0644\u0637\u0641\u0627\u064b \u0633\u0624\u0627\u0644\u0627\u062a \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u0646\u0638\u0631\u0627\u062a \u0628\u067e\u0631\u0633\u06cc\u062f \u06cc\u0627 \u0628\u062d\u062b \u0631\u0627 \u062f\u0631 GitHub \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f.<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0642\u062f\u0645\u0647 \u0642\u0628\u0644 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0628\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0635\u0644\u06cc \u0627\u062f\u063a\u0627\u0645 Workflow Designer \u0628\u0627 Blazor \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645\u060c \u0645\u0646\u0637\u0642\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0632\u0627\u06cc\u0627\u06cc \u0639\u0645\u0644\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u062e\u0648\u0627\u0646\u0646\u062f\u06af\u0627\u0646 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0646\u06cc\u0645. \u0627\u06af\u0631 \u0642\u0628\u0644\u0627\u064b \u0628\u0647 \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u0641\u06a9\u0631 \u0646\u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u062f\u060c \u06cc\u0627 \u0627\u06af\u0631 \u0627\u0646\u06af\u06cc\u0632\u0647 \u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u0648\u062a\u0648\u0631 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0631\u0627 \u0646\u062f\u0627\u0634\u062a\u0647\u200c\u0627\u06cc\u062f\u060c \u0645\u0637\u0645\u0626\u0646\u0627\u064b \u0627\u06cc\u0646 \u0648\u06cc\u062f\u06cc\u0648\u06cc YouTube \u062a\u0648\u0633\u0637 \u062c\u0641 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":63808,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-63806","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\/63806","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=63806"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/63806\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/63808"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=63806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=63806"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=63806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}