Skip to content

Commit

Permalink
📝 docs: Update the css href of icon (#476)
Browse files Browse the repository at this point in the history
  • Loading branch information
capdiem authored May 18, 2022
1 parent cc65cf6 commit ecf6aa7
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 15 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"Order": 0,
"Title": "Install",
"Html": "<section id=\"section-577242659\">\r\n <h1 class=\"m-heading text-h3 text-sm-h3 mb-2\">\r\n <a class=\"text-decoration-none text-right text-md-left\">#</a>\r\n Install\r\n </h1>\n<p>Let's start with MASA Blazor. MASA Blazor is the UI component library of the .NET Blazor framework for building feature-rich and fast applications.</p>\n\r\n <div class=\"mb-8\">&nbsp;</div><section id=section-741625053>\r\n <h2 class=\"m-heading text-h4 text-sm-h4 mb-3\">\r\n <a class=\"text-decoration-none text-right text-md-left\">#</a>\r\n Prerequisites\r\n </h2>\n<p>All products of the MASA series are developed based on .Net 6.0, please make sure that you have installed <a href=\"https://dotnet.microsoft.com/download/dotnet/6.0\" target=\"_blank\">.NET 6.0</a> 。</p>\n<br/>\n\r\n </section><section id=section-118153470>\r\n <h2 class=\"m-heading text-h4 text-sm-h4 mb-3\">\r\n <a class=\"text-decoration-none text-right text-md-left\">#</a>\r\n Presentation\r\n </h2>\n<p>The video content is the MASA Blazor template to create the Blazor Server demo video, you can choose to view or directly view the CLI creation part.</p>\n<iframe src=\"https://cdn.masastack.com/stack/images/website/masa-blazor/video.mp4\" scrolling=\"no\" width=\"800px\" height=\"600px\" border=\"0\" frameborder=\"no\" framespacing=\"0\" allowfullscreen=\"true\"> </iframe>\n<br/>\n\r\n </section><section id=section-700434144>\r\n <h2 class=\"m-heading text-h4 text-sm-h4 mb-3\">\r\n <a class=\"text-decoration-none text-right text-md-left\">#</a>\r\n CLI Creation\r\n </h2>\n<h3>Install Masa.Template</h3>\n<p>Masa.Template, contains all project templates of the MASA series. The corresponding template of MASA Blazor is named <code>masab</code></p>\n<pre><code>dotnet new --install Masa.Template\n</code></pre>\n<br/>\n<h3>Create project</h3>\n<p>Create a project based on the project template name and specify the output directory, which is the root folder of the project.</p>\n<pre><code>dotnet new masab -o MasaBlazorApp\n</code></pre>\n<blockquote>\n<p>The default is Server mode, through the parameter --mode WebAssembly to create a WebAssembly mode project.</p>\n</blockquote>\n<br/>\n<h3>Startup project</h3>\n<p>Switch to the MasaBlazorApp directory by command <code>cd MasaBlazorApp</code>. \nStart the project with <code>dotnet run</code>, open the corresponding URL according to the program output, and you can see the effect of the MASA Blazor template project.</p>\n<br/>\n\r\n </section><section id=section-773856508>\r\n <h2 class=\"m-heading text-h4 text-sm-h4 mb-3\">\r\n <a class=\"text-decoration-none text-right text-md-left\">#</a>\r\n Create manually\r\n </h2>\n<h3>Create a Blazor Server project</h3>\n<p>Create a new Blazor application named BlazorApp in the command line interface:</p>\n<pre><code class=\"language-sh\">$ dotnet new blazorserver -o BlazorApp\n</code></pre>\n<p>or</p>\n<pre><code class=\"language-sh\">$ dotnet new blazorwasm -o BlazorApp\n</code></pre>\n<blockquote>\n<p><code>blazorserver</code> is Blazor Server App template shortname。<code>blazorwasm</code> is Blazor WebAssembly App template shortname</p>\n</blockquote>\n<br/>\n<h3>Install NuGet package</h3>\n<pre><code class=\"language-sh\">$ dotnet add package Masa.Blazor\n</code></pre>\n<br/>\n<h3>Import resource files</h3>\n<h4>Blazor Server</h4>\n<p>in <code>Pages/_Host.cshtml</code> import resource files:</p>\n<pre><code class=\"language-html\">&lt;!--masa blazor css style--&gt;\n&lt;link href=&quot;_content/Masa.Blazor/css/masa-blazor.css&quot; rel=&quot;stylesheet&quot; /&gt;\n&lt;link href=&quot;_content/Masa.Blazor/css/masa-extend-blazor.css&quot; rel=&quot;stylesheet&quot; /&gt;\n&lt;!--icon file,import need to use--&gt;\n&lt;link href=&quot;https://cdn.masastack.com/npm/@(&quot;@mdi&quot;)/[email protected]/css/materialdesignicons.min.css&quot; rel=&quot;stylesheet&quot;&gt;\n&lt;link href=&quot;https://cdn.masastack.com/npm/materialicons/materialicons.css&quot; rel=&quot;stylesheet&quot;&gt;\n&lt;link href=&quot;https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css&quot; rel=&quot;stylesheet&quot;&gt;\n&lt;!--js(should lay the end of file)--&gt;\n&lt;script src=&quot;_content/BlazorComponent/js/blazor-component.js&quot;&gt;&lt;/script&gt;\n</code></pre>\n<br/>\n<h4>Blazor WebAssembly</h4>\n<p>in <code>wwwroot\\index.html</code> import resource files:</p>\n<pre><code class=\"language-html\">&lt;link href=&quot;_content/Masa.Blazor/css/masa-blazor.css&quot; rel=&quot;stylesheet&quot; /&gt;\n&lt;link href=&quot;_content/Masa.Blazor/css/masa-extend-blazor.css&quot; rel=&quot;stylesheet&quot; /&gt;\n&lt;link\n href=&quot;https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css&quot;\n rel=&quot;stylesheet&quot;\n/&gt;\n&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Material+Icons&quot; rel=&quot;stylesheet&quot; /&gt;\n&lt;link href=&quot;https://use.fontawesome.com/releases/v5.0.13/css/all.css&quot; rel=&quot;stylesheet&quot; /&gt;\n&lt;script src=&quot;_content/BlazorComponent/js/blazor-component.js&quot;&gt;&lt;/script&gt;\n</code></pre>\n<br/>\n<h3>Inject services</h3>\n<p>Program.cs file add Masa.Blazor related services:</p>\n<pre><code class=\"language-c#\">// Add services to the container.\nbuilder.Services.AddMasaBlazor();\n</code></pre>\n<br/>\n<h3>Global reference</h3>\n<p>update <code>_Imports.razor</code> file,Add:</p>\n<pre><code class=\"language-c#\">@using Masa.Blazor\n</code></pre>\n<p>update <code>Shared/MainLayout.razor</code> file,set MApp as root element:</p>\n<pre><code class=\"language-html\">&lt;MApp&gt; //layout &lt;/MApp&gt;\n</code></pre>\n<br/>\n\r\n </section><section id=section-2023003>\r\n <h2 class=\"m-heading text-h4 text-sm-h4 mb-3\">\r\n <a class=\"text-decoration-none text-right text-md-left\">#</a>\r\n Use\r\n </h2>\n<p>Refer to official documents <a href=\"https://masa-blazor-docs-dev.lonsid.cn/components/application\">Component</a>,Add related components。\n<code>dotnet run</code> start project Preview the MasaBlazor。</p>\n</section>"
"Html": "<section id=\"section-577242659\">\r\n <h1 class=\"m-heading text-h3 text-sm-h3 mb-2\">\r\n <a class=\"text-decoration-none text-right text-md-left\">#</a>\r\n Install\r\n </h1>\n<p>Let's start with MASA Blazor. MASA Blazor is the UI component library of the .NET Blazor framework for building feature-rich and fast applications.</p>\n\r\n <div class=\"mb-8\">&nbsp;</div><section id=section-741625053>\r\n <h2 class=\"m-heading text-h4 text-sm-h4 mb-3\">\r\n <a class=\"text-decoration-none text-right text-md-left\">#</a>\r\n Prerequisites\r\n </h2>\n<p>All products of the MASA series are developed based on .Net 6.0, please make sure that you have installed <a href=\"https://dotnet.microsoft.com/download/dotnet/6.0\" target=\"_blank\">.NET 6.0</a> 。</p>\n<br/>\n\r\n </section><section id=section-118153470>\r\n <h2 class=\"m-heading text-h4 text-sm-h4 mb-3\">\r\n <a class=\"text-decoration-none text-right text-md-left\">#</a>\r\n Presentation\r\n </h2>\n<p>The video content is the MASA Blazor template to create the Blazor Server demo video, you can choose to view or directly view the CLI creation part.</p>\n<iframe src=\"https://cdn.masastack.com/stack/images/website/masa-blazor/video.mp4\" scrolling=\"no\" width=\"800px\" height=\"600px\" border=\"0\" frameborder=\"no\" framespacing=\"0\" allowfullscreen=\"true\"> </iframe>\n<br/>\n\r\n </section><section id=section-700434144>\r\n <h2 class=\"m-heading text-h4 text-sm-h4 mb-3\">\r\n <a class=\"text-decoration-none text-right text-md-left\">#</a>\r\n CLI Creation\r\n </h2>\n<h3>Install Masa.Template</h3>\n<p>Masa.Template, contains all project templates of the MASA series. The corresponding template of MASA Blazor is named <code>masab</code></p>\n<pre><code>dotnet new --install Masa.Template\n</code></pre>\n<br/>\n<h3>Create project</h3>\n<p>Create a project based on the project template name and specify the output directory, which is the root folder of the project.</p>\n<pre><code>dotnet new masab -o MasaBlazorApp\n</code></pre>\n<blockquote>\n<p>The default is Server mode, through the parameter --mode WebAssembly to create a WebAssembly mode project.</p>\n</blockquote>\n<br/>\n<h3>Startup project</h3>\n<p>Switch to the MasaBlazorApp directory by command <code>cd MasaBlazorApp</code>. \nStart the project with <code>dotnet run</code>, open the corresponding URL according to the program output, and you can see the effect of the MASA Blazor template project.</p>\n<br/>\n\r\n </section><section id=section-773856508>\r\n <h2 class=\"m-heading text-h4 text-sm-h4 mb-3\">\r\n <a class=\"text-decoration-none text-right text-md-left\">#</a>\r\n Create manually\r\n </h2>\n<h3>Create a Blazor Server project</h3>\n<p>Create a new Blazor application named BlazorApp in the command line interface:</p>\n<pre><code class=\"language-sh\">$ dotnet new blazorserver -o BlazorApp\n</code></pre>\n<p>or</p>\n<pre><code class=\"language-sh\">$ dotnet new blazorwasm -o BlazorApp\n</code></pre>\n<blockquote>\n<p><code>blazorserver</code> is Blazor Server App template shortname。<code>blazorwasm</code> is Blazor WebAssembly App template shortname</p>\n</blockquote>\n<br/>\n<h3>Install NuGet package</h3>\n<pre><code class=\"language-sh\">$ dotnet add package Masa.Blazor\n</code></pre>\n<br/>\n<h3>Import resource files</h3>\n<h4>Blazor Server</h4>\n<p>in <code>Pages/_Host.cshtml</code> import resource files:</p>\n<pre><code class=\"language-html\">&lt;!--masa blazor css style--&gt;\n&lt;link href=&quot;_content/Masa.Blazor/css/masa-blazor.css&quot; rel=&quot;stylesheet&quot; /&gt;\n&lt;link href=&quot;_content/Masa.Blazor/css/masa-extend-blazor.css&quot; rel=&quot;stylesheet&quot; /&gt;\n&lt;!--icon file,import need to use--&gt;\n&lt;link href=&quot;https://cdn.masastack.com/npm/@(&quot;@mdi&quot;)/[email protected]/css/materialdesignicons.min.css&quot; rel=&quot;stylesheet&quot;&gt;\n&lt;link href=&quot;https://cdn.masastack.com/npm/materialicons/materialicons.css&quot; rel=&quot;stylesheet&quot;&gt;\n&lt;link href=&quot;https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css&quot; rel=&quot;stylesheet&quot;&gt;\n&lt;!--js(should lay the end of file)--&gt;\n&lt;script src=&quot;_content/BlazorComponent/js/blazor-component.js&quot;&gt;&lt;/script&gt;\n</code></pre>\n<br/>\n<h4>Blazor WebAssembly</h4>\n<p>in <code>wwwroot\\index.html</code> import resource files:</p>\n<pre><code class=\"language-html\">&lt;link href=&quot;_content/Masa.Blazor/css/masa-blazor.css&quot; rel=&quot;stylesheet&quot; /&gt;\n&lt;link href=&quot;_content/Masa.Blazor/css/masa-extend-blazor.css&quot; rel=&quot;stylesheet&quot; /&gt;\n\n&lt;link href=&quot;https://cdn.masastack.com/npm/@mdi/[email protected]/css/materialdesignicons.min.css&quot; rel=&quot;stylesheet&quot;&gt;\n&lt;link href=&quot;https://cdn.masastack.com/npm/materialicons/materialicons.css&quot; rel=&quot;stylesheet&quot;&gt;\n&lt;link href=&quot;https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css&quot; rel=&quot;stylesheet&quot;&gt;\n\n&lt;script src=&quot;_content/BlazorComponent/js/blazor-component.js&quot;&gt;&lt;/script&gt;\n</code></pre>\n<br/>\n<h3>Inject services</h3>\n<p>Program.cs file add Masa.Blazor related services:</p>\n<pre><code class=\"language-c#\">// Add services to the container.\nbuilder.Services.AddMasaBlazor();\n</code></pre>\n<br/>\n<h3>Global reference</h3>\n<p>update <code>_Imports.razor</code> file,Add:</p>\n<pre><code class=\"language-c#\">@using Masa.Blazor\n</code></pre>\n<p>update <code>Shared/MainLayout.razor</code> file,set MApp as root element:</p>\n<pre><code class=\"language-html\">&lt;MApp&gt; //layout &lt;/MApp&gt;\n</code></pre>\n<br/>\n\r\n </section><section id=section-2023003>\r\n <h2 class=\"m-heading text-h4 text-sm-h4 mb-3\">\r\n <a class=\"text-decoration-none text-right text-md-left\">#</a>\r\n Use\r\n </h2>\n<p>Refer to official documents <a href=\"https://masa-blazor-docs-dev.lonsid.cn/components/application\">Component</a>,Add related components。\n<code>dotnet run</code> start project Preview the MasaBlazor。</p>\n</section>"
}
Original file line number Diff line number Diff line change
Expand Up @@ -110,12 +110,11 @@ in `wwwroot\index.html` import resource files:
```html
<link href="_content/Masa.Blazor/css/masa-blazor.css" rel="stylesheet" />
<link href="_content/Masa.Blazor/css/masa-extend-blazor.css" rel="stylesheet" />
<link
href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />

<link href="https://cdn.masastack.com/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.masastack.com/npm/materialicons/materialicons.css" rel="stylesheet">
<link href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css" rel="stylesheet">

<script src="_content/BlazorComponent/js/blazor-component.js"></script>
```

Expand Down
Loading

0 comments on commit ecf6aa7

Please sign in to comment.