开源netcore前后端分离,前端SSR方案
SPA单页面应用容器 开源地址: https://github.com/yuzd/Spa
@font-face { font-family: octicons-link; src: url(“data:font/woff;charset=utf-8;base64,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”) format(“woff”) }
.markdown-body { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 1.5; color: rgba(36, 41, 46, 1); font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”; font-size: 16px; word-wrap: break-word }
.markdown-body .pl-c { color: rgba(106, 115, 125, 1) }
.markdown-body .pl-c1, .markdown-body .pl-s .pl-v { color: rgba(0, 92, 197, 1) }
.markdown-body .pl-e, .markdown-body .pl-en { color: rgba(111, 66, 193, 1) }
.markdown-body .pl-smi, .markdown-body .pl-s .pl-s1 { color: rgba(36, 41, 46, 1) }
.markdown-body .pl-ent { color: rgba(34, 134, 58, 1) }
.markdown-body .pl-k { color: rgba(215, 58, 73, 1) }
.markdown-body .pl-s, .markdown-body .pl-pds, .markdown-body .pl-s .pl-pse .pl-s1, .markdown-body .pl-sr, .markdown-body .pl-sr .pl-cce, .markdown-body .pl-sr .pl-sre, .markdown-body .pl-sr .pl-sra { color: rgba(3, 47, 98, 1) }
.markdown-body .pl-v, .markdown-body .pl-smw { color: rgba(227, 98, 9, 1) }
.markdown-body .pl-bu { color: rgba(179, 29, 40, 1) }
.markdown-body .pl-ii { color: rgba(250, 251, 252, 1); background-color: rgba(179, 29, 40, 1) }
.markdown-body .pl-c2 { color: rgba(250, 251, 252, 1); background-color: rgba(215, 58, 73, 1) }
.markdown-body .pl-c2::before { content: “^M” }
.markdown-body .pl-sr .pl-cce { font-weight: bold; color: rgba(34, 134, 58, 1) }
.markdown-body .pl-ml { color: rgba(115, 92, 15, 1) }
.markdown-body .pl-mh, .markdown-body .pl-mh .pl-en, .markdown-body .pl-ms { font-weight: bold; color: rgba(0, 92, 197, 1) }
.markdown-body .pl-mi { font-style: italic; color: rgba(36, 41, 46, 1) }
.markdown-body .pl-mb { font-weight: bold; color: rgba(36, 41, 46, 1) }
.markdown-body .pl-md { color: rgba(179, 29, 40, 1); background-color: rgba(255, 238, 240, 1) }
.markdown-body .pl-mi1 { color: rgba(34, 134, 58, 1); background-color: rgba(240, 255, 244, 1) }
.markdown-body .pl-mc { color: rgba(227, 98, 9, 1); background-color: rgba(255, 235, 218, 1) }
.markdown-body .pl-mi2 { color: rgba(246, 248, 250, 1); background-color: rgba(0, 92, 197, 1) }
.markdown-body .pl-mdr { font-weight: bold; color: rgba(111, 66, 193, 1) }
.markdown-body .pl-ba { color: rgba(88, 96, 105, 1) }
.markdown-body .pl-sg { color: rgba(149, 157, 165, 1) }
.markdown-body .pl-corl { text-decoration: underline; color: rgba(3, 47, 98, 1) }
.markdown-body .octicon { display: inline-block; vertical-align: text-top; fill: currentColor }
.markdown-body a { background-color: rgba(0, 0, 0, 0) }
.markdown-body a:active, .markdown-body a:hover { outline-width: 0 }
.markdown-body strong { font-weight: inherit }
.markdown-body strong { font-weight: bolder }
.markdown-body h1 { font-size: 2em; margin: 0.67em 0 }
.markdown-body img { border-style: none }
.markdown-body code, .markdown-body kbd, .markdown-body pre { font-family: monospace, monospace; font-size: 1em }
.markdown-body hr { box-sizing: content-box; height: 0; overflow: visible }
.markdown-body input { margin: 0 }
.markdown-body input { overflow: visible }
.markdown-body [type=”checkbox”] { box-sizing: border-box; padding: 0 }
.markdown-body * { box-sizing: border-box }
.markdown-body input { font-family: inherit; font-size: inherit; line-height: inherit }
.markdown-body a { color: rgba(3, 102, 214, 1); text-decoration: none }
.markdown-body a:hover { text-decoration: underline }
.markdown-body strong { font-weight: 600 }
.markdown-body hr { height: 0; margin: 15px 0; overflow: hidden; background: rgba(0, 0, 0, 0); border-top: 0; border-right: 0; border-bottom: 1px solid rgba(223, 226, 229, 1); border-left: 0 }
.markdown-body hr::before { display: table; content: “” }
.markdown-body hr::after { display: table; clear: both; content: “” }
.markdown-body table { border-spacing: 0; border-collapse: collapse }
.markdown-body td, .markdown-body th { padding: 0 }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 0; margin-bottom: 0 }
.markdown-body h1 { font-size: 32px; font-weight: 600 }
.markdown-body h2 { font-size: 24px; font-weight: 600 }
.markdown-body h3 { font-size: 20px; font-weight: 600 }
.markdown-body h4 { font-size: 16px; font-weight: 600 }
.markdown-body h5 { font-size: 14px; font-weight: 600 }
.markdown-body h6 { font-size: 12px; font-weight: 600 }
.markdown-body p { margin-top: 0; margin-bottom: 10px }
.markdown-body blockquote { margin: 0 }
.markdown-body ul, .markdown-body ol { padding-left: 0; margin-top: 0; margin-bottom: 0 }
.markdown-body ol ol, .markdown-body ul ol { list-style-type: lower-roman }
.markdown-body ul ul ol, .markdown-body ul ol ol, .markdown-body ol ul ol, .markdown-body ol ol ol { list-style-type: lower-alpha }
.markdown-body dd { margin-left: 0 }
.markdown-body code { font-family: “SFMono-Regular”, Consolas, “Liberation Mono”, Menlo, Courier, monospace; font-size: 12px }
.markdown-body pre { margin-top: 0; margin-bottom: 0; font-family: “SFMono-Regular”, Consolas, “Liberation Mono”, Menlo, Courier, monospace; font-size: 12px }
.markdown-body .octicon { vertical-align: text-bottom }
.markdown-body .pl-0 { padding-left: 0 !important }
.markdown-body .pl-1 { padding-left: 4px !important }
.markdown-body .pl-2 { padding-left: 8px !important }
.markdown-body .pl-3 { padding-left: 16px !important }
.markdown-body .pl-4 { padding-left: 24px !important }
.markdown-body .pl-5 { padding-left: 32px !important }
.markdown-body .pl-6 { padding-left: 40px !important }
.markdown-body::before { display: table; content: “” }
.markdown-body::after { display: table; clear: both; content: “” }
.markdown-body>*:first-child { margin-top: 0 !important }
.markdown-body>*:last-child { margin-bottom: 0 !important }
.markdown-body a:not([href]) { color: inherit; text-decoration: none }
.markdown-body .anchor { float: left; padding-right: 4px; margin-left: -20px; line-height: 1 }
.markdown-body .anchor:focus { outline: none }
.markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre { margin-top: 0; margin-bottom: 16px }
.markdown-body hr { height: 0.25em; padding: 0; margin: 24px 0; background-color: rgba(225, 228, 232, 1); border: 0 }
.markdown-body blockquote { padding: 0 1em; color: rgba(106, 115, 125, 1); border-left: 0.25em solid rgba(223, 226, 229, 1) }
.markdown-body blockquote>:first-child { margin-top: 0 }
.markdown-body blockquote>:last-child { margin-bottom: 0 }
.markdown-body kbd { display: inline-block; padding: 3px 5px; font-size: 11px; line-height: 10px; color: rgba(68, 77, 86, 1); vertical-align: middle; background-color: rgba(250, 251, 252, 1); border-top: 1px solid rgba(198, 203, 209, 1); border-right: 1px solid rgba(198, 203, 209, 1); border-bottom: 1px solid rgba(149, 157, 165, 1); border-left: 1px solid rgba(198, 203, 209, 1); border-radius: 3px; box-shadow: inset 0 -1px rgba(149, 157, 165, 1) }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin-top: 24px; margin-bottom: 16px; font-weight: 600; line-height: 1.25 }
.markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, .markdown-body h4 .octicon-link, .markdown-body h5 .octicon-link, .markdown-body h6 .octicon-link { color: rgba(27, 31, 35, 1); vertical-align: middle; visibility: hidden }
.markdown-body h1:hover .anchor, .markdown-body h2:hover .anchor, .markdown-body h3:hover .anchor, .markdown-body h4:hover .anchor, .markdown-body h5:hover .anchor, .markdown-body h6:hover .anchor { text-decoration: none }
.markdown-body h1:hover .anchor .octicon-link, .markdown-body h2:hover .anchor .octicon-link, .markdown-body h3:hover .anchor .octicon-link, .markdown-body h4:hover .anchor .octicon-link, .markdown-body h5:hover .anchor .octicon-link, .markdown-body h6:hover .anchor .octicon-link { visibility: visible }
.markdown-body h1 { padding-bottom: 0.3em; font-size: 2em; border-bottom: 1px solid rgba(234, 236, 239, 1) }
.markdown-body h2 { padding-bottom: 0.3em; font-size: 1.5em; border-bottom: 1px solid rgba(234, 236, 239, 1) }
.markdown-body h3 { font-size: 1.25em }
.markdown-body h4 { font-size: 1em }
.markdown-body h5 { font-size: 0.875em }
.markdown-body h6 { font-size: 0.85em; color: rgba(106, 115, 125, 1) }
.markdown-body ul, .markdown-body ol { padding-left: 2em }
.markdown-body ul ul, .markdown-body ul ol, .markdown-body ol ol, .markdown-body ol ul { margin-top: 0; margin-bottom: 0 }
.markdown-body li { }
.markdown-body li>p { margin-top: 16px }
.markdown-body li+li { margin-top: 0.25em }
.markdown-body dl { padding: 0 }
.markdown-body dl dt { padding: 0; margin-top: 16px; font-size: 1em; font-style: italic; font-weight: 600 }
.markdown-body dl dd { padding: 0 16px; margin-bottom: 16px }
.markdown-body table { display: block; width: 100%; overflow: auto }
.markdown-body table th { font-weight: 600 }
.markdown-body table th, .markdown-body table td { padding: 6px 13px; border: 1px solid rgba(223, 226, 229, 1) }
.markdown-body table tr { background-color: rgba(255, 255, 255, 1); border-top: 1px solid rgba(198, 203, 209, 1) }
.markdown-body table tr:nth-child(2n) { background-color: rgba(246, 248, 250, 1) }
.markdown-body img { max-width: 100%; box-sizing: content-box; background-color: rgba(255, 255, 255, 1) }
.markdown-body img[align=”right”] { padding-left: 20px }
.markdown-body img[align=”left”] { padding-right: 20px }
.markdown-body code { padding: 0.2em 0.4em; margin: 0; font-size: 85%; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px }
.markdown-body pre { word-wrap: normal }
.markdown-body pre>code { padding: 0; margin: 0; font-size: 100%; word-break: normal; white-space: pre; background: rgba(0, 0, 0, 0); border: 0 }
.markdown-body .highlight { margin-bottom: 16px }
.markdown-body .highlight pre { margin-bottom: 0; word-break: normal }
.markdown-body .highlight pre, .markdown-body pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; background-color: rgba(246, 248, 250, 1); border-radius: 3px }
.markdown-body pre code { display: inline; padding: 0; margin: 0; overflow: visible; line-height: inherit; word-wrap: normal; background-color: rgba(0, 0, 0, 0); border: 0 }
.markdown-body .full-commit .btn-outline:not(:disabled):hover { color: rgba(0, 92, 197, 1); border-color: rgba(0, 92, 197, 1) }
.markdown-body kbd { display: inline-block; padding: 3px 5px; font: 11px / 10px “SFMono-Regular”, Consolas, “Liberation Mono”, Menlo, Courier, monospace; color: rgba(68, 77, 86, 1); vertical-align: middle; background-color: rgba(250, 251, 252, 1); border-top: 1px solid rgba(209, 213, 218, 1); border-right: 1px solid rgba(209, 213, 218, 1); border-bottom: 1px solid rgba(198, 203, 209, 1); border-left: 1px solid rgba(209, 213, 218, 1); border-radius: 3px; box-shadow: inset 0 -1px rgba(198, 203, 209, 1) }
.markdown-body :checked+.radio-label { position: relative; z-index: 1; border-color: rgba(3, 102, 214, 1) }
.markdown-body .task-list-item { list-style-type: none }
.markdown-body .task-list-item+.task-list-item { margin-top: 3px }
.markdown-body .task-list-item input { margin: 0 0.2em 0.25em -1.6em; vertical-align: middle }
.markdown-body hr { border-bottom-color: rgba(238, 238, 238, 1) }
.hljs { display: block; overflow-x: auto; padding: 0.5em; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.hljs-comment, .hljs-quote { color: rgba(153, 153, 136, 1); font-style: italic }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: rgba(51, 51, 51, 1); font-weight: bold }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr { color: rgba(0, 128, 128, 1) }
.hljs-string, .hljs-doctag { color: rgba(221, 17, 68, 1) }
.hljs-title, .hljs-section, .hljs-selector-id { color: rgba(153, 0, 0, 1); font-weight: bold }
.hljs-subst { font-weight: normal }
.hljs-type, .hljs-class .hljs-title { color: rgba(68, 85, 136, 1); font-weight: bold }
.hljs-tag, .hljs-name, .hljs-attribute { color: rgba(0, 0, 128, 1); font-weight: normal }
.hljs-regexp, .hljs-link { color: rgba(0, 153, 38, 1) }
.hljs-symbol, .hljs-bullet { color: rgba(153, 0, 115, 1) }
.hljs-built_in, .hljs-builtin-name { color: rgba(0, 134, 179, 1) }
.hljs-meta { color: rgba(153, 153, 153, 1); font-weight: bold }
.hljs-deletion { background: rgba(255, 221, 221, 1) }
.hljs-addition { background: rgba(221, 255, 221, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: bold }
.mermaid .label { color: rgba(51, 51, 51, 1) }
.node rect, .node circle, .node ellipse, .node polygon { fill: rgba(236, 236, 255, 1); stroke: rgba(204, 204, 255, 1); stroke-width: 1px }
.edgePath .path { stroke: rgba(51, 51, 51, 1) }
.edgeLabel { background-color: rgba(232, 232, 232, 1) }
.cluster rect { fill: rgba(255, 255, 222, 1) !important; rx: 4 !important; stroke: rgba(170, 170, 51, 1) !important; stroke-width: 1px !important }
.cluster text { fill: rgba(51, 51, 51, 1) }
.actor { stroke: rgba(204, 204, 255, 1); fill: rgba(236, 236, 255, 1) }
text.actor { fill: rgba(0, 0, 0, 1); stroke: none }
.actor-line { stroke: rgba(128, 128, 128, 1) }
.messageLine0 { stroke-width: 1.5; marker-end: “url(#arrowhead)”; stroke: rgba(51, 51, 51, 1) }
.messageLine1 { stroke-width: 1.5; stroke: rgba(51, 51, 51, 1) }
#arrowhead { fill: rgba(51, 51, 51, 1) }
#crosshead path { fill: rgba(51, 51, 51, 1) !important; stroke: rgba(51, 51, 51, 1) !important }
.messageText { fill: rgba(51, 51, 51, 1); stroke: none }
.labelBox { stroke: rgba(204, 204, 255, 1); fill: rgba(236, 236, 255, 1) }
.labelText { fill: rgba(0, 0, 0, 1); stroke: none }
.loopText { fill: rgba(0, 0, 0, 1); stroke: none }
.loopLine { stroke-width: 2; marker-end: “url(#arrowhead)”; stroke: rgba(204, 204, 255, 1) }
.note { stroke: rgba(170, 170, 51, 1); fill: rgba(255, 245, 173, 1) }
.noteText { fill: rgba(0, 0, 0, 1); stroke: none; font-family: “trebuchet ms”, verdana, arial; font-size: 14px }
.section { stroke: none; opacity: 0.2 }
.section0 { fill: rgba(102, 102, 255, 0.49) }
.section2 { fill: rgba(255, 244, 0, 1) }
.section1, .section3 { fill: rgba(255, 255, 255, 1); opacity: 0.2 }
.sectionTitle0 { fill: rgba(51, 51, 51, 1) }
.sectionTitle1 { fill: rgba(51, 51, 51, 1) }
.sectionTitle2 { fill: rgba(51, 51, 51, 1) }
.sectionTitle3 { fill: rgba(51, 51, 51, 1) }
.sectionTitle { text-anchor: start; font-size: 11px; text-height: 14px }
.grid .tick { stroke: rgba(211, 211, 211, 1); opacity: 0.3; shape-rendering: crispEdges }
.grid path { stroke-width: 0 }
.today { fill: none; stroke: rgba(255, 0, 0, 1); stroke-width: 2px }
.task { stroke-width: 2 }
.taskText { text-anchor: middle; font-size: 11px }
.taskTextOutsideRight { fill: rgba(0, 0, 0, 1); text-anchor: start; font-size: 11px }
.taskTextOutsideLeft { fill: rgba(0, 0, 0, 1); text-anchor: end; font-size: 11px }
.taskText0, .taskText1, .taskText2, .taskText3 { fill: rgba(255, 255, 255, 1) }
.task0, .task1, .task2, .task3 { fill: rgba(138, 144, 221, 1); stroke: rgba(83, 79, 188, 1) }
.taskTextOutside0, .taskTextOutside2 { fill: rgba(0, 0, 0, 1) }
.taskTextOutside1, .taskTextOutside3 { fill: rgba(0, 0, 0, 1) }
.active0, .active1, .active2, .active3 { fill: rgba(191, 199, 255, 1); stroke: rgba(83, 79, 188, 1) }
.activeText0, .activeText1, .activeText2, .activeText3 { fill: rgba(0, 0, 0, 1) !important }
.done0, .done1, .done2, .done3 { stroke: rgba(128, 128, 128, 1); fill: rgba(211, 211, 211, 1); stroke-width: 2 }
.doneText0, .doneText1, .doneText2, .doneText3 { fill: rgba(0, 0, 0, 1) !important }
.crit0, .crit1, .crit2, .crit3 { stroke: rgba(255, 136, 136, 1); fill: rgba(255, 0, 0, 1); stroke-width: 2 }
.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 { stroke: rgba(255, 136, 136, 1); fill: rgba(191, 199, 255, 1); stroke-width: 2 }
.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 { stroke: rgba(255, 136, 136, 1); fill: rgba(211, 211, 211, 1); stroke-width: 2; cursor: pointer; shape-rendering: crispEdges }
.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 { fill: rgba(0, 0, 0, 1) !important }
.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 { fill: rgba(0, 0, 0, 1) !important }
.titleText { text-anchor: middle; font-size: 18px; fill: rgba(0, 0, 0, 1) }
.node text { font-family: “trebuchet ms”, verdana, arial; font-size: 14px }
div.mermaidTooltip { position: absolute; text-align: center; max-width: 200px; padding: 2px; font-family: “trebuchet ms”, verdana, arial; font-size: 12px; background: rgba(255, 255, 222, 1); border: 1px solid rgba(170, 170, 51, 1); border-radius: 2px; pointer-events: none; z-index: 100 }
@font-face { font-family: KaTeX_AMS; src: url(“fonts/KaTeX_AMS-Regular-f4c3270b.woff2”) format(“woff2”), url(“fonts/KaTeX_AMS-Regular-e78f217c.woff”) format(“woff”), url(“fonts/KaTeX_AMS-Regular-9971d270.ttf”) format(“truetype”); font-weight: 400; font-style: normal }
@font-face { font-family: KaTeX_Caligraphic; src: url(“fonts/KaTeX_Caligraphic-Bold-a2e05225.woff2”) format(“woff2”), url(“fonts/KaTeX_Caligraphic-Bold-bac61997.woff”) format(“woff”), url(“fonts/KaTeX_Caligraphic-Bold-743b42a3.ttf”) format(“truetype”); font-weight: 700; font-style: normal }
@font-face { font-family: KaTeX_Caligraphic; src: url(“fonts/KaTeX_Caligraphic-Regular-479a68ec.woff2”) format(“woff2”), url(“fonts/KaTeX_Caligraphic-Regular-a64e1342.woff”) format(“woff”), url(“fonts/KaTeX_Caligraphic-Regular-244db27f.ttf”) format(“truetype”); font-weight: 400; font-style: normal }
@font-face { font-family: KaTeX_Fraktur; src: url(“fonts/KaTeX_Fraktur-Bold-8e5f883e.woff2”) format(“woff2”), url(“fonts/KaTeX_Fraktur-Bold-0a0aa194.woff”) format(“woff”), url(“fonts/KaTeX_Fraktur-Bold-ad26cc83.ttf”) format(“truetype”); font-weight: 700; font-style: normal }
@font-face { font-family: KaTeX_Fraktur; src: url(“fonts/KaTeX_Fraktur-Regular-ae2b6f43.woff2”) format(“woff2”), url(“fonts/KaTeX_Fraktur-Regular-f980ca72.woff”) format(“woff”), url(“fonts/KaTeX_Fraktur-Regular-d459632e.ttf”) format(“truetype”); font-weight: 400; font-style: normal }
@font-face { font-family: KaTeX_Main; src: url(“fonts/KaTeX_Main-Bold-83f8b326.woff2”) format(“woff2”), url(“fonts/KaTeX_Main-Bold-d8a629d2.woff”) format(“woff”), url(“fonts/KaTeX_Main-Bold-e69b9513.ttf”) format(“truetype”); font-weight: 700; font-style: normal }
@font-face { font-family: KaTeX_Main; src: url(“fonts/KaTeX_Main-BoldItalic-0719833c.woff2”) format(“woff2”), url(“fonts/KaTeX_Main-BoldItalic-5aeca883.woff”) format(“woff”), url(“fonts/KaTeX_Main-BoldItalic-bdbadb27.ttf”) format(“truetype”); font-weight: 700; font-style: italic }
@font-face { font-family: KaTeX_Main; src: url(“fonts/KaTeX_Main-Italic-07510ed0.woff2”) format(“woff2”), url(“fonts/KaTeX_Main-Italic-8dd42e02.woff”) format(“woff”), url(“fonts/KaTeX_Main-Italic-1b226149.ttf”) format(“truetype”); font-weight: 400; font-style: italic }
@font-face { font-family: KaTeX_Main; src: url(“fonts/KaTeX_Main-Regular-bd652252.woff2”) format(“woff2”), url(“fonts/KaTeX_Main-Regular-2dffc875.woff”) format(“woff”), url(“fonts/KaTeX_Main-Regular-d9162dfe.ttf”) format(“truetype”); font-weight: 400; font-style: normal }
@font-face { font-family: KaTeX_Math; src: url(“fonts/KaTeX_Math-BoldItalic-89e95efa.woff2”) format(“woff2”), url(“fonts/KaTeX_Math-BoldItalic-65a38aa6.woff”) format(“woff”), url(“fonts/KaTeX_Math-BoldItalic-fa111311.ttf”) format(“truetype”); font-weight: 700; font-style: italic }
@font-face { font-family: KaTeX_Math; src: url(“fonts/KaTeX_Math-Italic-afeebb76.woff2”) format(“woff2”), url(“fonts/KaTeX_Math-Italic-da586018.woff”) format(“woff”), url(“fonts/KaTeX_Math-Italic-55fbb3ac.ttf”) format(“truetype”); font-weight: 400; font-style: italic }
@font-face { font-family: “KaTeX_SansSerif”; src: url(“fonts/KaTeX_SansSerif-Bold-94911c5b.woff2”) format(“woff2”), url(“fonts/KaTeX_SansSerif-Bold-bfe58d70.woff”) format(“woff”), url(“fonts/KaTeX_SansSerif-Bold-f5f6a30d.ttf”) format(“truetype”); font-weight: 700; font-style: normal }
@font-face { font-family: “KaTeX_SansSerif”; src: url(“fonts/KaTeX_SansSerif-Italic-6a5b5cc9.woff2”) format(“woff2”), url(“fonts/KaTeX_SansSerif-Italic-dabdeee1.woff”) format(“woff”), url(“fonts/KaTeX_SansSerif-Italic-5110f85c.ttf”) format(“truetype”); font-weight: 400; font-style: italic }
@font-face { font-family: “KaTeX_SansSerif”; src: url(“fonts/KaTeX_SansSerif-Regular-7d5fa3e2.woff2”) format(“woff2”), url(“fonts/KaTeX_SansSerif-Regular-48c7df6f.woff”) format(“woff”), url(“fonts/KaTeX_SansSerif-Regular-8075d14a.ttf”) format(“truetype”); font-weight: 400; font-style: normal }
@font-face { font-family: KaTeX_Script; src: url(“fonts/KaTeX_Script-Regular-c472b570.woff2”) format(“woff2”), url(“fonts/KaTeX_Script-Regular-5acb381b.woff”) format(“woff”), url(“fonts/KaTeX_Script-Regular-abb12fc2.ttf”) format(“truetype”); font-weight: 400; font-style: normal }
@font-face { font-family: KaTeX_Size1; src: url(“fonts/KaTeX_Size1-Regular-feed6c70.woff2”) format(“woff2”), url(“fonts/KaTeX_Size1-Regular-bdd0d5e0.woff”) format(“woff”), url(“fonts/KaTeX_Size1-Regular-8cc60fd5.ttf”) format(“truetype”); font-weight: 400; font-style: normal }
@font-face { font-family: KaTeX_Size2; src: url(“fonts/KaTeX_Size2-Regular-8a86a0af.woff2”) format(“woff2”), url(“fonts/KaTeX_Size2-Regular-fd67fb35.woff”) format(“woff”), url(“fonts/KaTeX_Size2-Regular-5976fffd.ttf”) format(“truetype”); font-weight: 400; font-style: normal }
@font-face { font-family: KaTeX_Size3; src: url(“fonts/KaTeX_Size3-Regular-2c1ea030.woff2”) format(“woff2”), url(“fonts/KaTeX_Size3-Regular-943c94f8.woff”) format(“woff”), url(“fonts/KaTeX_Size3-Regular-e929f5d9.ttf”) format(“truetype”); font-weight: 400; font-style: normal }
@font-face { font-family: KaTeX_Size4; src: url(“fonts/KaTeX_Size4-Regular-680d35e3.woff2”) format(“woff2”), url(“fonts/KaTeX_Size4-Regular-68537743.woff”) format(“woff”), url(“fonts/KaTeX_Size4-Regular-81ab95e4.ttf”) format(“truetype”); font-weight: 400; font-style: normal }
@font-face { font-family: KaTeX_Typewriter; src: url(“fonts/KaTeX_Typewriter-Regular-8a6d8ed8.woff2”) format(“woff2”), url(“fonts/KaTeX_Typewriter-Regular-3e9e27f0.woff”) format(“woff”), url(“fonts/KaTeX_Typewriter-Regular-29017475.ttf”) format(“truetype”); font-weight: 400; font-style: normal }
.katex { font: normal 1.21em / 1.2 KaTeX_Main, Times New Roman, serif; text-indent: 0; text-rendering: auto }
.katex * { -ms-high-contrast-adjust: none !important }
.katex .katex-version:after { content: “0.10.2” }
.katex .katex-mathml { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden }
.katex .katex-html>.newline { display: block }
.katex .base { position: relative; white-space: nowrap }
.katex .base, .katex .strut { display: inline-block }
.katex .textbf { font-weight: 700 }
.katex .textit { font-style: italic }
.katex .textrm { font-family: KaTeX_Main }
.katex .textsf { font-family: KaTeX_SansSerif }
.katex .texttt { font-family: KaTeX_Typewriter }
.katex .mathdefault { font-family: KaTeX_Math; font-style: italic }
.katex .mathit { font-family: KaTeX_Main; font-style: italic }
.katex .mathrm { font-style: normal }
.katex .mathbf { font-family: KaTeX_Main; font-weight: 700 }
.katex .boldsymbol { font-family: KaTeX_Math; font-weight: 700; font-style: italic }
.katex .amsrm, .katex .mathbb, .katex .textbb { font-family: KaTeX_AMS }
.katex .mathcal { font-family: KaTeX_Caligraphic }
.katex .mathfrak, .katex .textfrak { font-family: KaTeX_Fraktur }
.katex .mathtt { font-family: KaTeX_Typewriter }
.katex .mathscr, .katex .textscr { font-family: KaTeX_Script }
.katex .mathsf, .katex .textsf { font-family: KaTeX_SansSerif }
.katex .mathboldsf, .katex .textboldsf { font-family: KaTeX_SansSerif; font-weight: 700 }
.katex .mathitsf, .katex .textitsf { font-family: KaTeX_SansSerif; font-style: italic }
.katex .mainrm { font-family: KaTeX_Main; font-style: normal }
.katex .vlist-t { display: inline-table; table-layout: fixed }
.katex .vlist-r { display: table-row }
.katex .vlist { display: table-cell; vertical-align: bottom; position: relative }
.katex .vlist>span { display: block; height: 0; position: relative }
.katex .vlist>span>span { display: inline-block }
.katex .vlist>span>.pstrut { overflow: hidden; width: 0 }
.katex .vlist-t2 { margin-right: -2px }
.katex .vlist-s { display: table-cell; vertical-align: bottom; font-size: 1px; width: 2px; min-width: 2px }
.katex .msupsub { text-align: left }
.katex .mfrac>span>span { text-align: center }
.katex .mfrac .frac-line { display: inline-block; width: 100%; border-bottom-style: solid }
.katex .hdashline, .katex .hline, .katex .mfrac .frac-line, .katex .overline .overline-line, .katex .rule, .katex .underline .underline-line { min-height: 1px }
.katex .mspace { display: inline-block }
.katex .clap, .katex .llap, .katex .rlap { width: 0; position: relative }
.katex .clap>.inner, .katex .llap>.inner, .katex .rlap>.inner { position: absolute }
.katex .clap>.fix, .katex .llap>.fix, .katex .rlap>.fix { display: inline-block }
.katex .llap>.inner { right: 0 }
.katex .clap>.inner, .katex .rlap>.inner { left: 0 }
.katex .clap>.inner>span { margin-left: -50%; margin-right: 50% }
.katex .rule { display: inline-block; border: 0 solid; position: relative }
.katex .hline, .katex .overline .overline-line, .katex .underline .underline-line { display: inline-block; width: 100%; border-bottom-style: solid }
.katex .hdashline { display: inline-block; width: 100%; border-bottom-style: dashed }
.katex .sqrt>.root { margin-left: 0.27777778em; margin-right: -0.55555556em }
.katex .fontsize-ensurer, .katex .sizing { display: inline-block }
.katex .fontsize-ensurer.reset-size1.size1, .katex .sizing.reset-size1.size1 { font-size: 1em }
.katex .fontsize-ensurer.reset-size1.size2, .katex .sizing.reset-size1.size2 { font-size: 1.2em }
.katex .fontsize-ensurer.reset-size1.size3, .katex .sizing.reset-size1.size3 { font-size: 1.4em }
.katex .fontsize-ensurer.reset-size1.size4, .katex .sizing.reset-size1.size4 { font-size: 1.6em }
.katex .fontsize-ensurer.reset-size1.size5, .katex .sizing.reset-size1.size5 { font-size: 1.8em }
.katex .fontsize-ensurer.reset-size1.size6, .katex .sizing.reset-size1.size6 { font-size: 2em }
.katex .fontsize-ensurer.reset-size1.size7, .katex .sizing.reset-size1.size7 { font-size: 2.4em }
.katex .fontsize-ensurer.reset-size1.size8, .katex .sizing.reset-size1.size8 { font-size: 2.88em }
.katex .fontsize-ensurer.reset-size1.size9, .katex .sizing.reset-size1.size9 { font-size: 3.456em }
.katex .fontsize-ensurer.reset-size1.size10, .katex .sizing.reset-size1.size10 { font-size: 4.148em }
.katex .fontsize-ensurer.reset-size1.size11, .katex .sizing.reset-size1.size11 { font-size: 4.976em }
.katex .fontsize-ensurer.reset-size2.size1, .katex .sizing.reset-size2.size1 { font-size: 0.83333333em }
.katex .fontsize-ensurer.reset-size2.size2, .katex .sizing.reset-size2.size2 { font-size: 1em }
.katex .fontsize-ensurer.reset-size2.size3, .katex .sizing.reset-size2.size3 { font-size: 1.16666667em }
.katex .fontsize-ensurer.reset-size2.size4, .katex .sizing.reset-size2.size4 { font-size: 1.33333333em }
.katex .fontsize-ensurer.reset-size2.size5, .katex .sizing.reset-size2.size5 { font-size: 1.5em }
.katex .fontsize-ensurer.reset-size2.size6, .katex .sizing.reset-size2.size6 { font-size: 1.66666667em }
.katex .fontsize-ensurer.reset-size2.size7, .katex .sizing.reset-size2.size7 { font-size: 2em }
.katex .fontsize-ensurer.reset-size2.size8, .katex .sizing.reset-size2.size8 { font-size: 2.4em }
.katex .fontsize-ensurer.reset-size2.size9, .katex .sizing.reset-size2.size9 { font-size: 2.88em }
.katex .fontsize-ensurer.reset-size2.size10, .katex .sizing.reset-size2.size10 { font-size: 3.45666667em }
.katex .fontsize-ensurer.reset-size2.size11, .katex .sizing.reset-size2.size11 { font-size: 4.14666667em }
.katex .fontsize-ensurer.reset-size3.size1, .katex .sizing.reset-size3.size1 { font-size: 0.71428571em }
.katex .fontsize-ensurer.reset-size3.size2, .katex .sizing.reset-size3.size2 { font-size: 0.85714286em }
.katex .fontsize-ensurer.reset-size3.size3, .katex .sizing.reset-size3.size3 { font-size: 1em }
.katex .fontsize-ensurer.reset-size3.size4, .katex .sizing.reset-size3.size4 { font-size: 1.14285714em }
.katex .fontsize-ensurer.reset-size3.size5, .katex .sizing.reset-size3.size5 { font-size: 1.28571429em }
.katex .fontsize-ensurer.reset-size3.size6, .katex .sizing.reset-size3.size6 { font-size: 1.42857143em }
.katex .fontsize-ensurer.reset-size3.size7, .katex .sizing.reset-size3.size7 { font-size: 1.71428571em }
.katex .fontsize-ensurer.reset-size3.size8, .katex .sizing.reset-size3.size8 { font-size: 2.05714286em }
.katex .fontsize-ensurer.reset-size3.size9, .katex .sizing.reset-size3.size9 { font-size: 2.46857143em }
.katex .fontsize-ensurer.reset-size3.size10, .katex .sizing.reset-size3.size10 { font-size: 2.96285714em }
.katex .fontsize-ensurer.reset-size3.size11, .katex .sizing.reset-size3.size11 { font-size: 3.55428571em }
.katex .fontsize-ensurer.reset-size4.size1, .katex .sizing.reset-size4.size1 { font-size: 0.625em }
.katex .fontsize-ensurer.reset-size4.size2, .katex .sizing.reset-size4.size2 { font-size: 0.75em }
.katex .fontsize-ensurer.reset-size4.size3, .katex .sizing.reset-size4.size3 { font-size: 0.875em }
.katex .fontsize-ensurer.reset-size4.size4, .katex .sizing.reset-size4.size4 { font-size: 1em }
.katex .fontsize-ensurer.reset-size4.size5, .katex .sizing.reset-size4.size5 { font-size: 1.125em }
.katex .fontsize-ensurer.reset-size4.size6, .katex .sizing.reset-size4.size6 { font-size: 1.25em }
.katex .fontsize-ensurer.reset-size4.size7, .katex .sizing.reset-size4.size7 { font-size: 1.5em }
.katex .fontsize-ensurer.reset-size4.size8, .katex .sizing.reset-size4.size8 { font-size: 1.8em }
.katex .fontsize-ensurer.reset-size4.size9, .katex .sizing.reset-size4.size9 { font-size: 2.16em }
.katex .fontsize-ensurer.reset-size4.size10, .katex .sizing.reset-size4.size10 { font-size: 2.5925em }
.katex .fontsize-ensurer.reset-size4.size11, .katex .sizing.reset-size4.size11 { font-size: 3.11em }
.katex .fontsize-ensurer.reset-size5.size1, .katex .sizing.reset-size5.size1 { font-size: 0.55555556em }
.katex .fontsize-ensurer.reset-size5.size2, .katex .sizing.reset-size5.size2 { font-size: 0.66666667em }
.katex .fontsize-ensurer.reset-size5.size3, .katex .sizing.reset-size5.size3 { font-size: 0.77777778em }
.katex .fontsize-ensurer.reset-size5.size4, .katex .sizing.reset-size5.size4 { font-size: 0.88888889em }
.katex .fontsize-ensurer.reset-size5.size5, .katex .sizing.reset-size5.size5 { font-size: 1em }
.katex .fontsize-ensurer.reset-size5.size6, .katex .sizing.reset-size5.size6 { font-size: 1.11111111em }
.katex .fontsize-ensurer.reset-size5.size7, .katex .sizing.reset-size5.size7 { font-size: 1.33333333em }
.katex .fontsize-ensurer.reset-size5.size8, .katex .sizing.reset-size5.size8 { font-size: 1.6em }
.katex .fontsize-ensurer.reset-size5.size9, .katex .sizing.reset-size5.size9 { font-size: 1.92em }
.katex .fontsize-ensurer.reset-size5.size10, .katex .sizing.reset-size5.size10 { font-size: 2.30444444em }
.katex .fontsize-ensurer.reset-size5.size11, .katex .sizing.reset-size5.size11 { font-size: 2.76444444em }
.katex .fontsize-ensurer.reset-size6.size1, .katex .sizing.reset-size6.size1 { font-size: 0.5em }
.katex .fontsize-ensurer.reset-size6.size2, .katex .sizing.reset-size6.size2 { font-size: 0.6em }
.katex .fontsize-ensurer.reset-size6.size3, .katex .sizing.reset-size6.size3 { font-size: 0.7em }
.katex .fontsize-ensurer.reset-size6.size4, .katex .sizing.reset-size6.size4 { font-size: 0.8em }
.katex .fontsize-ensurer.reset-size6.size5, .katex .sizing.reset-size6.size5 { font-size: 0.9em }
.katex .fontsize-ensurer.reset-size6.size6, .katex .sizing.reset-size6.size6 { font-size: 1em }
.katex .fontsize-ensurer.reset-size6.size7, .katex .sizing.reset-size6.size7 { font-size: 1.2em }
.katex .fontsize-ensurer.reset-size6.size8, .katex .sizing.reset-size6.size8 { font-size: 1.44em }
.katex .fontsize-ensurer.reset-size6.size9, .katex .sizing.reset-size6.size9 { font-size: 1.728em }
.katex .fontsize-ensurer.reset-size6.size10, .katex .sizing.reset-size6.size10 { font-size: 2.074em }
.katex .fontsize-ensurer.reset-size6.size11, .katex .sizing.reset-size6.size11 { font-size: 2.488em }
.katex .fontsize-ensurer.reset-size7.size1, .katex .sizing.reset-size7.size1 { font-size: 0.41666667em }
.katex .fontsize-ensurer.reset-size7.size2, .katex .sizing.reset-size7.size2 { font-size: 0.5em }
.katex .fontsize-ensurer.reset-size7.size3, .katex .sizing.reset-size7.size3 { font-size: 0.58333333em }
.katex .fontsize-ensurer.reset-size7.size4, .katex .sizing.reset-size7.size4 { font-size: 0.66666667em }
.katex .fontsize-ensurer.reset-size7.size5, .katex .sizing.reset-size7.size5 { font-size: 0.75em }
.katex .fontsize-ensurer.reset-size7.size6, .katex .sizing.reset-size7.size6 { font-size: 0.83333333em }
.katex .fontsize-ensurer.reset-size7.size7, .katex .sizing.reset-size7.size7 { font-size: 1em }
.katex .fontsize-ensurer.reset-size7.size8, .katex .sizing.reset-size7.size8 { font-size: 1.2em }
.katex .fontsize-ensurer.reset-size7.size9, .katex .sizing.reset-size7.size9 { font-size: 1.44em }
.katex .fontsize-ensurer.reset-size7.size10, .katex .sizing.reset-size7.size10 { font-size: 1.72833333em }
.katex .fontsize-ensurer.reset-size7.size11, .katex .sizing.reset-size7.size11 { font-size: 2.07333333em }
.katex .fontsize-ensurer.reset-size8.size1, .katex .sizing.reset-size8.size1 { font-size: 0.34722222em }
.katex .fontsize-ensurer.reset-size8.size2, .katex .sizing.reset-size8.size2 { font-size: 0.41666667em }
.katex .fontsize-ensurer.reset-size8.size3, .katex .sizing.reset-size8.size3 { font-size: 0.48611111em }
.katex .fontsize-ensurer.reset-size8.size4, .katex .sizing.reset-size8.size4 { font-size: 0.55555556em }
.katex .fontsize-ensurer.reset-size8.size5, .katex .sizing.reset-size8.size5 { font-size: 0.625em }
.katex .fontsize-ensurer.reset-size8.size6, .katex .sizing.reset-size8.size6 { font-size: 0.69444444em }
.katex .fontsize-ensurer.reset-size8.size7, .katex .sizing.reset-size8.size7 { font-size: 0.83333333em }
.katex .fontsize-ensurer.reset-size8.size8, .katex .sizing.reset-size8.size8 { font-size: 1em }
.katex .fontsize-ensurer.reset-size8.size9, .katex .sizing.reset-size8.size9 { font-size: 1.2em }
.katex .fontsize-ensurer.reset-size8.size10, .katex .sizing.reset-size8.size10 { font-size: 1.44027778em }
.katex .fontsize-ensurer.reset-size8.size11, .katex .sizing.reset-size8.size11 { font-size: 1.72777778em }
.katex .fontsize-ensurer.reset-size9.size1, .katex .sizing.reset-size9.size1 { font-size: 0.28935185em }
.katex .fontsize-ensurer.reset-size9.size2, .katex .sizing.reset-size9.size2 { font-size: 0.34722222em }
.katex .fontsize-ensurer.reset-size9.size3, .katex .sizing.reset-size9.size3 { font-size: 0.40509259em }
.katex .fontsize-ensurer.reset-size9.size4, .katex .sizing.reset-size9.size4 { font-size: 0.46296296em }
.katex .fontsize-ensurer.reset-size9.size5, .katex .sizing.reset-size9.size5 { font-size: 0.52083333em }
.katex .fontsize-ensurer.reset-size9.size6, .katex .sizing.reset-size9.size6 { font-size: 0.5787037em }
.katex .fontsize-ensurer.reset-size9.size7, .katex .sizing.reset-size9.size7 { font-size: 0.69444444em }
.katex .fontsize-ensurer.reset-size9.size8, .katex .sizing.reset-size9.size8 { font-size: 0.83333333em }
.katex .fontsize-ensurer.reset-size9.size9, .katex .sizing.reset-size9.size9 { font-size: 1em }
.katex .fontsize-ensurer.reset-size9.size10, .katex .sizing.reset-size9.size10 { font-size: 1.20023148em }
.katex .fontsize-ensurer.reset-size9.size11, .katex .sizing.reset-size9.size11 { font-size: 1.43981481em }
.katex .fontsize-ensurer.reset-size10.size1, .katex .sizing.reset-size10.size1 { font-size: 0.24108004em }
.katex .fontsize-ensurer.reset-size10.size2, .katex .sizing.reset-size10.size2 { font-size: 0.28929605em }
.katex .fontsize-ensurer.reset-size10.size3, .katex .sizing.reset-size10.size3 { font-size: 0.33751205em }
.katex .fontsize-ensurer.reset-size10.size4, .katex .sizing.reset-size10.size4 { font-size: 0.38572806em }
.katex .fontsize-ensurer.reset-size10.size5, .katex .sizing.reset-size10.size5 { font-size: 0.43394407em }
.katex .fontsize-ensurer.reset-size10.size6, .katex .sizing.reset-size10.size6 { font-size: 0.48216008em }
.katex .fontsize-ensurer.reset-size10.size7, .katex .sizing.reset-size10.size7 { font-size: 0.57859209em }
.katex .fontsize-ensurer.reset-size10.size8, .katex .sizing.reset-size10.size8 { font-size: 0.69431051em }
.katex .fontsize-ensurer.reset-size10.size9, .katex .sizing.reset-size10.size9 { font-size: 0.83317261em }
.katex .fontsize-ensurer.reset-size10.size10, .katex .sizing.reset-size10.size10 { font-size: 1em }
.katex .fontsize-ensurer.reset-size10.size11, .katex .sizing.reset-size10.size11 { font-size: 1.19961427em }
.katex .fontsize-ensurer.reset-size11.size1, .katex .sizing.reset-size11.size1 { font-size: 0.20096463em }
.katex .fontsize-ensurer.reset-size11.size2, .katex .sizing.reset-size11.size2 { font-size: 0.24115756em }
.katex .fontsize-ensurer.reset-size11.size3, .katex .sizing.reset-size11.size3 { font-size: 0.28135048em }
.katex .fontsize-ensurer.reset-size11.size4, .katex .sizing.reset-size11.size4 { font-size: 0.32154341em }
.katex .fontsize-ensurer.reset-size11.size5, .katex .sizing.reset-size11.size5 { font-size: 0.36173633em }
.katex .fontsize-ensurer.reset-size11.size6, .katex .sizing.reset-size11.size6 { font-size: 0.40192926em }
.katex .fontsize-ensurer.reset-size11.size7, .katex .sizing.reset-size11.size7 { font-size: 0.48231511em }
.katex .fontsize-ensurer.reset-size11.size8, .katex .sizing.reset-size11.size8 { font-size: 0.57877814em }
.katex .fontsize-ensurer.reset-size11.size9, .katex .sizing.reset-size11.size9 { font-size: 0.69453376em }
.katex .fontsize-ensurer.reset-size11.size10, .katex .sizing.reset-size11.size10 { font-size: 0.83360129em }
.katex .fontsize-ensurer.reset-size11.size11, .katex .sizing.reset-size11.size11 { font-size: 1em }
.katex .delimsizing.size1 { font-family: KaTeX_Size1 }
.katex .delimsizing.size2 { font-family: KaTeX_Size2 }
.katex .delimsizing.size3 { font-family: KaTeX_Size3 }
.katex .delimsizing.size4 { font-family: KaTeX_Size4 }
.katex .delimsizing.mult .delim-size1>span { font-family: KaTeX_Size1 }
.katex .delimsizing.mult .delim-size4>span { font-family: KaTeX_Size4 }
.katex .nulldelimiter { display: inline-block; width: 0.12em }
.katex .delimcenter, .katex .op-symbol { position: relative }
.katex .op-symbol.small-op { font-family: KaTeX_Size1 }
.katex .op-symbol.large-op { font-family: KaTeX_Size2 }
.katex .op-limits>.vlist-t { text-align: center }
.katex .accent>.vlist-t { text-align: center }
.katex .accent .accent-body { position: relative }
.katex .accent .accent-body:not(.accent-full) { width: 0 }
.katex .overlay { display: block }
.katex .mtable .vertical-separator { display: inline-block; margin: 0 -0.025em; border-right: 0.05em solid; min-width: 1px }
.katex .mtable .vs-dashed { border-right: 0.05em dashed }
.katex .mtable .arraycolsep { display: inline-block }
.katex .mtable .col-align-c>.vlist-t { text-align: center }
.katex .mtable .col-align-l>.vlist-t { text-align: left }
.katex .mtable .col-align-r>.vlist-t { text-align: right }
.katex .svg-align { text-align: left }
.katex svg { display: block; position: absolute; width: 100%; height: inherit; fill: currentColor; stroke: currentColor; fill-rule: nonzero; fill-opacity: 1; stroke-width: 1; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-dasharray: none; stroke-dashoffset: 0; stroke-opacity: 1 }
.katex svg path { stroke: none }
.katex img { border-style: none; min-width: 0; min-height: 0; max-width: none; max-height: none }
.katex .stretchy { width: 100%; display: block; position: relative; overflow: hidden }
.katex .stretchy:after, .katex .stretchy:before { content: “” }
.katex .hide-tail { width: 100%; position: relative; overflow: hidden }
.katex .halfarrow-left { position: absolute; left: 0; width: 50.2%; overflow: hidden }
.katex .halfarrow-right { position: absolute; right: 0; width: 50.2%; overflow: hidden }
.katex .brace-left { position: absolute; left: 0; width: 25.1%; overflow: hidden }
.katex .brace-center { position: absolute; left: 25%; width: 50%; overflow: hidden }
.katex .brace-right { position: absolute; right: 0; width: 25.1%; overflow: hidden }
.katex .x-arrow-pad { padding: 0 0.5em }
.katex .mover, .katex .munder, .katex .x-arrow { text-align: center }
.katex .boxpad { padding: 0 0.3em }
.katex .fbox, .katex .fcolorbox { box-sizing: border-box; border: 0.04em solid }
.katex .cancel-pad { padding: 0 0.2em }
.katex .cancel-lap { margin-left: -0.2em; margin-right: -0.2em }
.katex .sout { border-bottom-style: solid; border-bottom-width: 0.08em }
.katex-display { display: block; margin: 1em 0; text-align: center }
.katex-display>.katex { display: block; text-align: center; white-space: nowrap }
.katex-display>.katex>.katex-html { display: block; position: relative }
.katex-display>.katex>.katex-html>.tag { position: absolute; right: 0 }
.katex-display.leqno>.katex>.katex-html>.tag { left: 0; right: auto }
.katex-display.fleqn>.katex { text-align: left }
@media print { body { overflow: visible !important } .markdown-body table { overflow: visible !important } .ui-layout-north, .ui-layout-center, .ui-layout-toggler { display: none !important } .ui-layout-east { left: 0 !important; top: 0 !important; right: 0 !important; width: auto !important; background: rgba(255, 255, 255, 1) !important; overflow: visible !important } .ui-layout-east .ui-layout-toggler { display: none !important } .ui-layout-east .markdown-body { display: block !important; padding: 20px !important } .ui-layout-east .markdown-body [data-source-line] { break-inside: avoid } .markdown-body pre>code { word-break: normal; word-wrap: break-word; white-space: pre-wrap } }
body { margin: 0; padding: 0 }
.ui-layout-east { position: relative }
.markdown-body { min-width: 256px; max-width: 978px; margin: 0 auto; padding: 20px; font-size: 14px; tab-size: 4; font-family: “-apple-system”, BlinkMacSystemFont, “微软雅黑”, “PingFang SC”, Helvetica, Arial, “Hiragino Sans GB”, “Microsoft YaHei”, SimSun, “宋体”, Heiti, “黑体”, sans-serif }
.markdown-body h1 { font-size: 2.25em }
.markdown-body h2 { font-size: 1.75em }
.markdown-body h3 { font-size: 1.5em }
.markdown-body h4 { font-size: 1.25em }
.markdown-body h5, .markdown-body h6 { font-size: 1em }
.markdown-body pre>code { font-family: “SFMono-Regular”, Consolas, “Liberation Mono”, Menlo, Courier, monospace, sans-serif }
.markdown-body pre>code .zh-hans { font-family: “Microsoft YaHei”, “微软雅黑”, SimSun, sans-serif }
.markdown-body img:not([src]), .markdown-body img[src=””] { display: none }
div[data-role=”mermaid”] { text-align: center }
hr.footnotes-sep { margin: 64px 0 32px; height: 1px }
.footnotes { font-size: 90%; padding-left: 16px }
li.footnote-item>p { margin: 8px 0 }
.success, .info, .warning, .danger { padding: 15px; margin-bottom: 20px; border: 1px solid rgba(0, 0, 0, 0); border-radius: 4px }
.success>p:last-child, .info>p:last-child, .warning>p:last-child, .danger>p:last-child { margin-bottom: 0 }
.success { color: rgba(60, 118, 61, 1); background-color: rgba(223, 240, 216, 1); border-color: rgba(214, 233, 198, 1) }
.info { color: rgba(49, 112, 143, 1); background-color: rgba(217, 237, 247, 1); border-color: rgba(188, 232, 241, 1) }
.warning { color: rgba(138, 109, 59, 1); background-color: rgba(252, 248, 227, 1); border-color: rgba(250, 235, 204, 1) }
.danger { color: rgba(169, 68, 66, 1); background-color: rgba(242, 222, 222, 1); border-color: rgba(235, 204, 209, 1) }
abbr[title] { cursor: help; border-bottom: 1px dotted rgba(119, 119, 119, 1) }
ul.table-of-contents { list-style-type: none }
ul.table-of-contents li { margin: 4px 0 }
.markdown-body table { width: auto; display: table }
.markdown-body table td { word-break: break-all }
.markdown-body.ace_search .highlight pre, .markdown-body.ace_search pre { overflow: visible !important }
功能介绍
- 前端应用开发完后打包后自助上传部署发布
- 配合服务端脚本(javascript)实现服务端业务逻辑编写渲染SSR功能
- 可以快速回滚到上一个版本
- 可以设置环境变量供SSR功能使用
- 服务端脚本提供执行日志 redis db三大组件打造强大的基于js的ssr服务端运行脚本功能
快速部署(支持docker),各功能介绍使用 请查看wiki
截图介绍
首页
新建单页面应用
重新部署上传,回滚上一个上传版本
全局配置
服务端SSR脚本编辑器
日志查看
01.快速开始
将本项目clone到本地 git clone https://github.com/yuzd/Spa.git 或者 下载zip到本地
然后用vs 2017或以上版本 打开!
打开appsettings.json 进行您所使用环境的配置参数:
参数名称 | 说明 |
---|---|
BackUpLimit | 每个单页面上传会进行备份,这个参数是应用维度下最多保留几次上传历史 |
BasicAuth | 设置进入系统的账号密码 |
RedisConnection | 配置redis的连接字符串(为啥用redis请看ssr相关介绍) |
ConnectionString | 配置mysql的连接字符串(为啥用mysql请看ssr相关介绍) |
F5 运行
然后打开 http://localhost:5000/admin
02.单页面应用规范
系统跑起来之后,我们的前端容器就已经搞定了。
什么是单页面应用呢?
- 就是指一个系统只加载一次资源,之后的操作交互、数据交互是通过路由、ajax来进行,页面并没有刷新。
- 特点是加载次数少,加载以后性能较高
对于本套系统的规范
- 不管你用什么前端技术,只要是 静态的html,js,css 的前端资源,就可以部署到本系统!
- 需要有一个约束 需要有index.html
例如下面的例子:
03.单页面应用部署,回滚
下面我们开发一个最简单单页应用
有2个文件
- index.html
- index.js
然后我打包成 detai.zip 文件
进入系统 新建一个单页面应用
- 单页面名称我这里填 detail 发布成功后可以通过
- 选择刚刚的zip 然后点击【创建并部署】
- 然后打开 http://localhost:5000/detail 进行确认是否成功 如下图
接下来我要修改index.html 然后重新部署
重新打包zip 然后
重新访问 http://localhost:5000/detail 进行确认是否修改成功 如下图
大家应该注意到了,前端有改动 只要重新上传立刻生效!
如果发布之后发布改错了咋办,当然是立刻回滚到上一次的上传版本!
如下图 回滚功能:
重新访问 http://localhost:5000/detail 进行确认是否回滚成功 如下图
04.单页面应用做服务端渲染SSR
首先得理解下面两点
- 什么是服务端渲染? 关键词:后端代码+模板引擎
- 什么场景下需要用到服务端渲染?关键词:seo:动态的标题 Description 等meta信息
什么是服务端渲染?下面是我的理解
我写了一个网页,部署到web容器后,我打开浏览器请求,服务端收到请求后 先在服务端读取我的网页的内容,然后结合 后端代码+模板引擎的方式重新渲染再 返回给浏览器展示
什么场景下需要用到服务端渲染?下面是我的理解
当你的页面的标题,Description 等meta信息 需要动态指定的时候。 比如:
产品分享页面:
productId=1 productName = “产品A” http://localhost:5000/detai?productId=1
需要Title要指定为 “产品A”
productId=2 productName = “产品B” http://localhost:5000/detai?productId=2
需要Title要指定为 “产品B”
要满足这个需求 仅仅靠前端是没有办法完成的。因为你页面在页面ready后再去调用ajax方法是没有办法动态指定Title的。这点可以大家实验实验!
解决方案: 服务端代码+模板引擎
本系统最大的亮点来了:模板引擎约定好,前端自己就能搞定服务端js代码
是用上面的 产品分享页面 为例:
如下图,进入单应用的SSR脚本编辑功能
默认 脚本编辑器里面会 写好代码模板, 如下:
module.exports = {
main:function (path){
}
};
当提交保存 脚本代码后,访问 http://localhost:5000/detai?productId=2 会先把当前页面的请求url 作为path参数传到 脚本的 main 方法!
我们用 log 组件进行打日志记录下:
查看日志:
业务代码 做如下改写SSR脚本:
let log = require('log');
module.exports = {
main:function (path){
log.Info(path);
var requestparams = module.exports.GetRequest(path);
var productTid = requestparams.productId;
if(!productTid) return;
if(productTid == 1){
return {
ProductName:'产品A'
};
}
else if (productTid == 2){
return {
ProductName:'产品B'
};
}
else {
return {
ProductName:'其他产品'
};
}
},
/**
* [获取URL中的参数名及参数值的集合]
* 示例URL:http://localhost:5000/detail?productId=2
* @param {[string]} urlStr [当该参数不为空的时候,则解析该url中的参数集合]
* @return {[string]} [参数集合]
*/
GetRequest:function (urlStr) {
var url = "?" + urlStr.split("?")[1];
var theRequest = {};
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
}
}
return theRequest;
}
};
注意:上面我把main方法改造了 返回了 一个 对象
{
"ProductName" : "xxxxxx"
}
模板引擎其实很简单:
SSR脚本返回了什么对象 在html中用 @Model.xxxx 的形式使用!!简单吧!!如下图:
逻辑和上面的SSR脚本一致!
如上我们用SSR脚本代码的业务逻辑 + 模板引擎 解决服务端渲染!
上面的脚本代码我们用了log组件=》方便的把脚本的执行过程中记录日志, 当然了 正常业务的服务端渲染逻辑肯定不是这么简单的,不用担心我们接下来介绍另外2个组件: redis组件 和 db组件
05.SSR脚本的扩展组件介绍
本系统预制了 log组件 redis组件 db组件,如果还有其他需要也可以自行扩展
前面我们介绍了log组件。 组件的使用采用commmonJS的方式 先 require 进来 才可以使用
let log = require('log');
let db = require('db');
let redis = require('redis');
log组件
方法 | 参数 | 说明 |
---|---|---|
Info(msg) | string | 记录Info级别日志 |
Warn(msg) | string | 记录Warn级别日志 |
Error(msg) | string | 记录Error级别日志 |
Debug(msg) | string | 记录Debug级别日志 |
日志采用了开源的LogDashbord 中间件解析Nlog的日志文件
redis组件
前提:如上文中已提到,要在appsettings.json里面配置redisconnection连接字符串
方法 | 参数 | 说明 |
---|---|---|
Get(key) | string | 根据key从redis里面读取信息 |
Set(key,value,senconds) | string,string,int | 根据key把value设置到redis里面,经过senconds(秒)后失效 |
一般做服务端渲染的脚本里面讲究的是执行快,不然服务端代码执行很慢,很严重影响用户体验!
是用上面的 产品分享页面 为例:事先根据productId把product的对象记录在redis里面!
db组件
前提:如上文中已提到,要在appsettings.json里面配置db的连接字符串
方法 | 参数 | 说明 |
---|---|---|
Query(sql) | string | 根据sql从db里面读数据,返回db里row的jsonArry |
Query(sql,param) | string,object | 根据sql从db里面读数据,返回db里row的jsonArry,和上面的区别是可以指定查询替换符,这样可以防止sql注入 |
Excute(sql) | string | 执行db的 insert,update,delete语句 |
Excute(sql,param) | string,object | 执行db的 insert,update,delete语句,和上面的区别是可以指定查询替换符,这样可以防止sql注入 |
是用上面的 产品分享页面 为例:假如db里面 有一个product表
脚本可以这么写:
我在实际业务中还这么用过:
先从redis里面取,如果redis没有我就从db里面取了放进redis!这样就比较灵活,而且效率也很高!!
全局配置功能
全局配置提供一个json编辑器,配置的json信息,可以直接在html 用 @Model.Env.XXX 的方式使用
例如:我上面配置了一个 test : “111”