diff --git a/Docs/WebSite/css/demo.css b/Docs/WebSite/css/demo.css new file mode 100644 index 0000000..3290cdf --- /dev/null +++ b/Docs/WebSite/css/demo.css @@ -0,0 +1,16 @@ +.demo-outer { + background-color: green; + padding: 50px; +} + +.demo-inner { + width: 400px; + height: 100px; + line-height: 96px; + margin: 0 auto; + border: 2px solid darkorange; + background-color: cadetblue; + text-align: center; + font-size: 25px; +} + diff --git a/Docs/WebSite/css/index.css b/Docs/WebSite/css/index.css new file mode 100644 index 0000000..991d78a --- /dev/null +++ b/Docs/WebSite/css/index.css @@ -0,0 +1,57 @@ + +/*#region*/ +.container { + /* width: 700px; */ + min-height: 400px; + margin: 0px auto; + + background-color: purple; + + display: flex; + flex-wrap: wrap; + + justify-content: space-evenly; + align-items: center; +} + +.item { + width: 200px; + height: 100px; + line-height: 100px; + text-align: center; + font-size: 30px; +} + +.item::after { + content: "点我变色"; +} + +.item1 { + background-color: blueviolet; +} + +.item2 { + background-color: green; +} + +.item3 { + background-color: skyblue; +} + +.item4 { + background-color: coral; +} + +.item5 { + background-color: deeppink; +} + +.item6 { + background-color: forestgreen; +} + +.item7 { + background-color: saddlebrown; +} + +/* #endregion */ \ No newline at end of file diff --git a/Docs/WebSite/demo.html b/Docs/WebSite/demo.html new file mode 100644 index 0000000..b7e6fb3 --- /dev/null +++ b/Docs/WebSite/demo.html @@ -0,0 +1,120 @@ + + + + + + + 引用了css 和 js文件的示例 + + + + +
+
x
+
x
+
+ xgj3 +
+
+ +
+
x
+
x
+
+ xgj3 +
+ +
x
+ +
+ xgj5 +
+ +
x
+ +
+ xgj7 +
+
+ + + + \ No newline at end of file diff --git a/Docs/WebSite/images/001.jpg b/Docs/WebSite/images/001.jpg new file mode 100644 index 0000000..be2a2f7 Binary files /dev/null and b/Docs/WebSite/images/001.jpg differ diff --git a/Docs/WebSite/images/002.jpg b/Docs/WebSite/images/002.jpg new file mode 100644 index 0000000..6642dbe Binary files /dev/null and b/Docs/WebSite/images/002.jpg differ diff --git a/Docs/WebSite/images/003.jpg b/Docs/WebSite/images/003.jpg new file mode 100644 index 0000000..176d725 Binary files /dev/null and b/Docs/WebSite/images/003.jpg differ diff --git a/Docs/WebSite/images/004.jpg b/Docs/WebSite/images/004.jpg new file mode 100644 index 0000000..05c4199 Binary files /dev/null and b/Docs/WebSite/images/004.jpg differ diff --git a/Docs/WebSite/images/005.jpg b/Docs/WebSite/images/005.jpg new file mode 100644 index 0000000..45cb70a Binary files /dev/null and b/Docs/WebSite/images/005.jpg differ diff --git a/Docs/WebSite/images/006.jpg b/Docs/WebSite/images/006.jpg new file mode 100644 index 0000000..b3d42ac Binary files /dev/null and b/Docs/WebSite/images/006.jpg differ diff --git a/Docs/WebSite/index.html b/Docs/WebSite/index.html new file mode 100644 index 0000000..4a61263 --- /dev/null +++ b/Docs/WebSite/index.html @@ -0,0 +1,28 @@ + + + + + + + 笔记本直接引用外部 html 文件 + + + + + + +

html中引用的外部css文件、js文件路径要相对于笔记本文件而不是html本身的路径。

+
+
+
+
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/Docs/WebSite/js/demo.js b/Docs/WebSite/js/demo.js new file mode 100644 index 0000000..bbb92b3 --- /dev/null +++ b/Docs/WebSite/js/demo.js @@ -0,0 +1,15 @@ +// #region 切换背景颜色 +var flag =false; +document.getElementById("js-file-test").onclick = function() +{ + if(flag) + { + event.currentTarget.style.backgroundColor = "goldenrod"; + } + else + { + event.currentTarget.style.backgroundColor = "green"; + } + flag = !flag; +}; +// #endregion \ No newline at end of file diff --git a/Docs/WebSite/js/index.js b/Docs/WebSite/js/index.js new file mode 100644 index 0000000..d98d71e --- /dev/null +++ b/Docs/WebSite/js/index.js @@ -0,0 +1,20 @@ +// #region 随机背景色 + +function GetRandomColor() { + var r = Math.floor(Math.random() * 255); + var g = Math.floor(Math.random() * 255); + var b = Math.floor(Math.random() * 255); + + return "rgb(" + r + "," + g + "," + b + ")"; +} + +function ChangeColor(event){ + event.currentTarget.style.backgroundColor = GetRandomColor(); +}; + +//设置单击事件 +var items = document.getElementsByClassName("item"); +for (var i = 0; i < items.length; i++) { + items[i].onclick = ChangeColor; +} +// #endregion \ No newline at end of file diff --git a/Docs/多语言笔记.3.1.交互式 Razor.ipynb b/Docs/多语言笔记.3.1.交互式 Razor.ipynb index 6c9aebe..4f68851 100644 --- a/Docs/多语言笔记.3.1.交互式 Razor.ipynb +++ b/Docs/多语言笔记.3.1.交互式 Razor.ipynb @@ -18,7 +18,7 @@ }, { "cell_type": "code", - "execution_count": 1, + "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" @@ -27,39 +27,7 @@ "kernelName": "csharp" } }, - "outputs": [ - { - "data": { - "text/html": [ - "
Installed Packages
" - ] - }, - "metadata": {}, - "output_type": "display_data" - }, - { - "data": { - "text/plain": [ - "Loading extensions from `C:\\Users\\ruyu\\.nuget\\packages\\razorinteractive\\1.1.8\\interactive-extensions\\dotnet\\RazorInteractive.dll`" - ] - }, - "metadata": {}, - "output_type": "display_data" - }, - { - "data": { - "text/html": [ - "
\n", - " Renders the code block as Razor markup in dotnet-interactive notebooks.\n", - "

This extension adds a new kernel that can render Razor markdown.

\n", - "

All C# and F# variables are available in the @Model property.

\n", - "
" - ] - }, - "metadata": {}, - "output_type": "display_data" - } - ], + "outputs": [], "source": [ "// 可以先添加包源\n", "\n", @@ -76,7 +44,7 @@ }, { "cell_type": "code", - "execution_count": 2, + "execution_count": null, "metadata": { "dotnet_interactive": { "language": "csharp" @@ -100,29 +68,48 @@ }, { "cell_type": "code", - "execution_count": 4, + "execution_count": 3, "metadata": { "dotnet_interactive": { - "language": "csharp" + "language": "razor" }, "polyglot_notebook": { - "kernelName": "csharp" + "kernelName": "razor" } }, "outputs": [ { - "data": { - "text/html": [ - "
\n", - "
    \n", - "
  1. red
    2. \n", - "
  2. green
    3. \n", - "
  3. blue
    4. \n", - "
" - ] - }, - "metadata": {}, - "output_type": "display_data" + "ename": "Error", + "evalue": "Required command was not provided.\r\nValue '{' not found in kernel .NET\r\nValue 'foreach(var' not found in kernel .NET\r\nUnrecognized command or argument '#!razor'.\r\nUnrecognized command or argument 'var'.\r\nUnrecognized command or argument 'colors'.\r\nUnrecognized command or argument '='.\r\nUnrecognized command or argument 'new'.\r\nUnrecognized command or argument '[]'.\r\nUnrecognized command or argument '{'.\r\nUnrecognized command or argument 'red'.\r\nUnrecognized command or argument ','.\r\nUnrecognized command or argument 'green'.\r\nUnrecognized command or argument ','.\r\nUnrecognized command or argument 'blue'.\r\nUnrecognized command or argument '};'.\r\nUnrecognized command or argument '}'.\r\nUnrecognized command or argument '
    '.\r\nUnrecognized command or argument 'color'.\r\nUnrecognized command or argument 'in'.\r\nUnrecognized command or argument 'colors)'.\r\nUnrecognized command or argument '{'.\r\nUnrecognized command or argument '@color'.\r\nUnrecognized command or argument '}'.\r\nUnrecognized command or argument '
'.", + "output_type": "error", + "traceback": [ + "Required command was not provided.\r\n", + "Value '{' not found in kernel .NET\r\n", + "Value 'foreach(var' not found in kernel .NET\r\n", + "Unrecognized command or argument '#!razor'.\r\n", + "Unrecognized command or argument 'var'.\r\n", + "Unrecognized command or argument 'colors'.\r\n", + "Unrecognized command or argument '='.\r\n", + "Unrecognized command or argument 'new'.\r\n", + "Unrecognized command or argument '[]'.\r\n", + "Unrecognized command or argument '{'.\r\n", + "Unrecognized command or argument 'red'.\r\n", + "Unrecognized command or argument ','.\r\n", + "Unrecognized command or argument 'green'.\r\n", + "Unrecognized command or argument ','.\r\n", + "Unrecognized command or argument 'blue'.\r\n", + "Unrecognized command or argument '};'.\r\n", + "Unrecognized command or argument '}'.\r\n", + "Unrecognized command or argument '
    '.\r\n", + "Unrecognized command or argument 'color'.\r\n", + "Unrecognized command or argument 'in'.\r\n", + "Unrecognized command or argument 'colors)'.\r\n", + "Unrecognized command or argument '{'.\r\n", + "Unrecognized command or argument '@color'.\r\n", + "Unrecognized command or argument '}'.\r\n", + "Unrecognized command or argument '
'." + ] } ], "source": [ diff --git a/Docs/多语言笔记.9.1.使用html.ipynb b/Docs/多语言笔记.9.1.使用html.ipynb new file mode 100644 index 0000000..ea49bbf --- /dev/null +++ b/Docs/多语言笔记.9.1.使用html.ipynb @@ -0,0 +1,479 @@ +{ + "cells": [ + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "在多语言笔记本中使用 html\n", + "=======================" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 方式一：纯(传统)html方式" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### hello html" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "html" + }, + "polyglot_notebook": { + "kernelName": "html" + } + }, + "outputs": [], + "source": [ + "\n", + "#!html\n", + "\n", + "hellow html !\n" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### 使用：完整html文档" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "html" + }, + "polyglot_notebook": { + "kernelName": "html" + } + }, + "outputs": [], + "source": [ + "\n", + "\n", + "\n", + " \n", + " \n", + " \n", + " 完整html文档\n", + "\n", + "\n", + "
\n", + " hello, html !\n", + "
\n", + "\n", + "" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### 使用：html片断" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "html" + }, + "polyglot_notebook": { + "kernelName": "html" + } + }, + "outputs": [], + "source": [ + "\n", + "#!html\n", + "\n", + "
\n", + " 使用html片断\n", + "
" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### 使用：行内(内联)样式" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "html" + }, + "polyglot_notebook": { + "kernelName": "html" + } + }, + "outputs": [], + "source": [ + "#!html\n", + "\n", + "
\n", + "
\n", + " 使用 行内 样式\n", + "
\n", + "
" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### 使用：内部样式" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "csharp" + }, + "polyglot_notebook": { + "kernelName": "csharp" + } + }, + "outputs": [], + "source": [ + "#!html\n", + "\n", + "\n", + "
\n", + "
\n", + " 使用 内部 样式\n", + "
\n", + "
" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### 引用：外部样式表文件" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "html" + }, + "polyglot_notebook": { + "kernelName": "html" + } + }, + "outputs": [], + "source": [ + "#!html\n", + "\n", + "\n", + "
\n", + "
\n", + " 引用 外部 样式表文件\n", + "
\n", + "
" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### 使用：嵌入式 javascript ［基本不用］" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "csharp" + }, + "polyglot_notebook": { + "kernelName": "csharp" + } + }, + "outputs": [], + "source": [ + "#!html\n", + "\n", + "
\n", + " 点我改变背景变色\n", + "
" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### 使用行内 javascript" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "html" + }, + "polyglot_notebook": { + "kernelName": "html" + } + }, + "outputs": [], + "source": [ + "#!html\n", + "\n", + "
\n", + " 点我切换背景颜色\n", + "
\n", + "" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### 引用：外部 javascript 文件" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "html" + }, + "polyglot_notebook": { + "kernelName": "html" + } + }, + "outputs": [], + "source": [ + "#!html\n", + "\n", + "
\n", + " 点我切换背景颜色\n", + "
\n", + "" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### 引用：外部html文件" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "有问题：html中引用的外部css文件、js文件路径要相对于笔记本文件而不是html本身的路径。这点特别恶心，目前没找到完美的解决方法。可以入两次暂时解决演示用或者笔记与html文件同目录！" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "html" + }, + "polyglot_notebook": { + "kernelName": "html" + } + }, + "outputs": [], + "source": [ + "#!html\n", + "\n", + "#!import ./WebSite/index.html" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## 方式二：结合 asp.net 的 Razor方式 " + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "注意：此方法动态生成html，可以操作数据库、请求第三方接口等，也可以使用共享变量，非常方便。" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "csharp" + }, + "polyglot_notebook": { + "kernelName": "csharp" + } + }, + "outputs": [], + "source": [ + "// 添加包源(省略即使用默认nuget包源)\n", + "#i \"nuget:https://api.nuget.org/v3/index.json\"\n", + "\n", + "// 引用Razor包\n", + "#r \"nuget: RazorInteractive\"\n", + "\n", + "//使用 Razor 生成 html或html片断" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "dotnet_interactive": { + "language": "csharp" + }, + "polyglot_notebook": { + "kernelName": "csharp" + } + }, + "outputs": [], + "source": [ + "#!razor\n", + "\n", + "\n", + "\n", + "\n", + " \n", + " \n", + " \n", + " 笔记本直接引用外部 html 文件\n", + " \n", + " \n", + " \n", + "\n", + "\n", + "
\n", + " @{\n", + " for(int i=1;i<=7; i++)\n", + " {\n", + "
\n", + " }\n", + " }\n", + "
\n", + "\n", + "\n", + "" + ] + } + ], + "metadata": { + "kernelspec": { + "display_name": ".NET (C#)", + "language": "C#", + "name": ".net-csharp" + }, + "language_info": { + "name": "polyglot-notebook" + }, + "orig_nbformat": 4, + "polyglot_notebook": { + "kernelInfo": { + "defaultKernelName": "csharp", + "items": [ + { + "aliases": [], + "name": "csharp" + }, + { + "aliases": [], + "name": "razor" + } + ] + } + } + }, + "nbformat": 4, + "nbformat_minor": 2 +}