front/submission/index.html
2024-07-03 01:17:03 +08:00

973 lines
44 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" dir="auto">
<head><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="index, follow">
<title>内容投稿 | NEU小站</title>
<meta name="keywords" content="">
<meta name="description" content="感谢您进行内容投稿!为防止内容丢失,请您使用电脑进行投稿操作。下面的加粗项为必填项。
如您已经进行过投稿操作,请使用和之前一样的邮箱,谢谢合作。 基本信息 投稿时间: 您想要投稿的板块为:
新生指南
资源共享
说明:新生指南板块主要用于给新生提供学习和生活上的攻略信息或经验等,资源共享板块主要用于分享各类有价值的学习资源。
您的邮箱为: 您的昵称为: 您的头像为: 请注意1. 如不填写昵称则不展示投稿者昵称和头像。如填写了昵称未填写头像则展示默认头像。头像文件不应超过1MB建议选择长宽比为1:1的图片文件。
2. 如您之前已经使用此邮箱和昵称投稿成功并上传头像,则不需要再次上传头像。
上传文件: 说明1. 若投稿板块为新生指南,则上传文件非必填项;若投稿至资源共享板块,则必须上传文件。
2. 单个文件大小不能超过2MB一次投稿最多上传10个文件。若上传文件有压缩文件则只允许上传单个.zip或.rar格式压缩文件大小不得超过20MB。
3. 若超过大小限制,请填写网盘外链。如有提取密码,请填写网盘提取密码。直接上传文件和网盘外链只能选择一种,禁止同时上传文件和填写网盘外链!
网盘外链: 网盘提取密码: 备注: 备注中可以填写自己想获得的用于访问加密内容的自定义密码。如已经获取过,请勿再次填写。
内容详情 内容详情主要用于新生指南板块。如果您想投稿至资源共享板块,可以把此部分留空。 内容详情使用 markdown 语法。本页底部提供了一些基本的语法教程,已经熟悉此语法的投稿者可以跳过教程内容。 如需在内容详情上传图片,请先填写好邮箱信息,然后在此处上传图片以获取标签,以直接粘贴到 markdown 中进行引用。我们推荐使用HTML标签以手动控制图片大小。 如果您的内容较多,建议您在编辑预览时将文本内容同步做好本地保存,或使用本地 markdown 编辑器如Visual Studio Code、Typora等编辑完成后再进行预览、投稿操作。如您需要多次获取图片标签为了保证一致性请务必使用同一个邮箱 若您使用本地 markdown 编辑器,如需引用图片,请务必使用从此处获取的图片标签进行引用。请您放心:若图片不违规,您在此处上传的图片将在我们的服务器中长期保存,您获取的图片标签也长期有效,随时都能进行预览。 严禁上传任何与内容无关的图片!
图片HTML引用标签
复制引用标签
提交
markdown 基本语法教程 空格与换行 markdown 语法对于空格与换行并不敏感。您即使输入多个空格markdown 也只会渲染一个空格。例如:
这是一个 示例文本,含有多个空格。 效果:
这是一个 示例文本,含有多个空格。
要创建换行,请在行末尾增加一个额外的行,例如:
这是第一行。 这是第二行。 效果:
这是第一行。
这是第二行。
加粗与斜体 使用**文本**和*文本*来分别表示加粗和斜体。例如:
**加粗** *斜体* 效果:
加粗
斜体">
<meta name="author" content="
">
<link rel="canonical" href="https://xn--xhq44jb2fzpc.com/submission/">
<link rel="stylesheet" href="/css/custom.css">
<link crossorigin="anonymous" href="/assets/css/stylesheet.css" rel="preload stylesheet" as="style">
<link rel="icon" href="https://xn--xhq44jb2fzpc.com/icons/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="https://xn--xhq44jb2fzpc.com/icons/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://xn--xhq44jb2fzpc.com/icons/favicon-32x32.png">
<link rel="apple-touch-icon" href="https://xn--xhq44jb2fzpc.com/icons/apple-touch-icon.png">
<link rel="mask-icon" href="https://xn--xhq44jb2fzpc.com/safari-pinned-tab.svg">
<meta name="theme-color" content="#2e2e33">
<meta name="msapplication-TileColor" content="#2e2e33">
<link rel="alternate" type="application/rss+xml" href="https://xn--xhq44jb2fzpc.com/submission/index.xml">
<link rel="alternate" hreflang="en" href="https://xn--xhq44jb2fzpc.com/submission/">
<noscript>
<style>
#theme-toggle,
.top-link {
display: none;
}
</style>
<style>
@media (prefers-color-scheme: dark) {
:root {
--theme: rgb(29, 30, 32);
--entry: rgb(46, 46, 51);
--primary: rgb(218, 218, 219);
--secondary: rgb(155, 156, 157);
--tertiary: rgb(65, 66, 68);
--content: rgb(196, 196, 197);
--code-block-bg: rgb(46, 46, 51);
--code-bg: rgb(55, 56, 62);
--border: rgb(51, 51, 51);
}
.list {
background: var(--theme);
}
.list:not(.dark)::-webkit-scrollbar-track {
background: 0 0;
}
.list:not(.dark)::-webkit-scrollbar-thumb {
border-color: var(--theme);
}
}
</style>
</noscript>
<meta property="og:title" content="内容投稿" />
<meta property="og:description" content="" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://xn--xhq44jb2fzpc.com/submission/" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="内容投稿"/>
<meta name="twitter:description" content=""/>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1 ,
"name": "内容投稿",
"item": "https://xn--xhq44jb2fzpc.com/submission/"
}
]
}
</script>
<link rel="stylesheet" href="/css/custom.css">
</head>
<body class="list" id="top">
<script>
if (localStorage.getItem("pref-theme") === "dark") {
document.body.classList.add('dark');
} else if (localStorage.getItem("pref-theme") === "light") {
document.body.classList.remove('dark')
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
</script>
<header class="header">
<nav class="nav">
<div class="logo">
<a href="https://xn--xhq44jb2fzpc.com/" accesskey="h" title="NEU小站 (Alt + H)">NEU小站</a>
<div class="logo-switches">
<button id="theme-toggle" accesskey="t" title="(Alt + T)">
<svg id="moon" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
</svg>
<svg id="sun" xmlns="http://www.w3.org/2000/svg" width="24" height="18" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</button>
</div>
</div>
<ul id="menu">
<li>
<a href="https://xn--xhq44jb2fzpc.com/" title="主页">
<span>主页</span>
</a>
</li>
<li>
<a href="https://xn--xhq44jb2fzpc.com/freshman/" title="新生指南">
<span>新生指南</span>
</a>
</li>
<li>
<a href="https://xn--xhq44jb2fzpc.com/rapidlinks/%E5%BF%AB%E9%80%9F%E9%93%BE%E6%8E%A5/" title="快速链接">
<span>快速链接</span>
</a>
</li>
<li>
<a href="https://xn--xhq44jb2fzpc.com/resources/" title="资源共享">
<span>资源共享</span>
</a>
</li>
<li>
<a href="https://xn--xhq44jb2fzpc.com/search/" title="搜索">
<span>搜索</span>
</a>
</li>
<li>
<a href="https://xn--xhq44jb2fzpc.com/ratings/" title="选修课评分">
<span>选修课评分</span>
</a>
</li>
<li>
<a href="https://f.wps.cn/g/QuaZnovL/" title="意见反馈"target="_blank">
<span>意见反馈</span>&nbsp;
<svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="12" width="12">
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
<path d="M15 3h6v6"></path>
<path d="M10 14L21 3"></path>
</svg>
</a>
</li>
<li>
<a href="https://xn--xhq44jb2fzpc.com/submission/" title="投稿">
<span class="active">投稿</span>
</a>
</li>
<li>
<a href="https://xn--xhq44jb2fzpc.com/log/" title="更新日志">
<span>更新日志</span>
</a>
</li>
</ul>
</nav>
</header>
<main class="main">
<header class="page-header">
<h1>
内容投稿
</h1>
</header>
<div class="post-content">
<p>感谢您进行内容投稿!为防止内容丢失,请您使用电脑进行投稿操作。下面的加粗项为必填项。</p>
<ul>
<li><strong>如您已经进行过投稿操作,请使用和之前一样的邮箱,谢谢合作。</strong></li>
</ul>
<h2 id="基本信息">基本信息<a hidden class="anchor" aria-hidden="true" href="#基本信息">#</a></h2>
<ul>
<li>投稿时间:<span id="beijing-time" style="display: inline"></span></li>
</ul>
<div>
<ul>
<li><strong>您想要投稿的板块为:</strong><select id="section" name="section">
<option value="新生指南">新生指南</option>
<option value="资源共享">资源共享</option>
</select></li>
</ul>
</div>
<blockquote>
<p><strong>说明:</strong><code>新生指南</code>板块主要用于给新生提供学习和生活上的攻略信息或经验等,<code>资源共享</code>板块主要用于分享各类有价值的学习资源。</p>
</blockquote>
<ul>
<li><strong>您的邮箱为:</strong><input type="text" class="simpleInput" name="email" placeholder="请输入您的邮箱以便我们回复您。"></li>
<li>您的昵称为:<input type="text" class="simpleInput" name="name" placeholder="展示在内容详情页的昵称。"></li>
<li>您的头像为:<input type="file" id="imagePicker" name="image" accept="image/*" onchange="validateAvatarFile(event)" /></li>
</ul>
<blockquote>
<p><strong>请注意:</strong>1. 如不填写昵称,则不展示投稿者昵称和头像。如填写了昵称未填写头像,则展示默认头像。<strong>头像文件不应超过1MB</strong>建议选择长宽比为1:1的图片文件。<br>
2. 如您之前已经使用此邮箱和昵称投稿成功并上传头像,则不需要再次上传头像。</p>
</blockquote>
<ul>
<li>上传文件:<input type="file" id="filePicker" multiple onchange="validateFiles(event)"></li>
</ul>
<blockquote>
<p><strong>说明:</strong>1. 若投稿板块为<code>新生指南</code>,则上传文件非必填项;若投稿至<code>资源共享</code>板块,则必须上传文件。<br>
2. 单个文件大小不能超过2MB一次投稿最多上传10个文件。若上传文件有压缩文件则只允许上传单个.zip或.rar格式压缩文件大小不得超过20MB。<br>
3. 若超过大小限制,请填写网盘外链。如有提取密码,请填写网盘提取密码。<strong>直接上传文件和网盘外链只能选择一种,禁止同时上传文件和填写网盘外链!</strong></p>
<ul>
<li>网盘外链:<input type="text" class="simpleInput" name="wp" placeholder="请输入网盘外链。"></li>
<li>网盘提取密码:<input type="text" class="simpleInput" name="wppassword" placeholder="请输入网盘提取密码(如果有)。"></li>
</ul>
</blockquote>
<ul>
<li>备注:<input type="text" class="simpleInput" name="note" placeholder="备注内容。"></li>
</ul>
<blockquote>
<p>备注中可以填写自己想获得的用于访问加密内容的自定义密码。如已经获取过,请勿再次填写。</p>
</blockquote>
<h2 id="内容详情">内容详情<a hidden class="anchor" aria-hidden="true" href="#内容详情">#</a></h2>
<ul>
<li>内容详情主要用于<code>新生指南</code>板块。如果您想投稿至<code>资源共享</code>板块,可以把此部分留空。</li>
<li>内容详情使用 markdown 语法。本页底部提供了一些<a href="#markdown-%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95%E6%95%99%E7%A8%8B">基本的语法教程</a>,已经熟悉此语法的投稿者可以跳过教程内容。</li>
<li>如需在内容详情上传图片,<strong>请先填写好邮箱信息</strong>,然后在此处上传图片以获取标签,以直接粘贴到 markdown 中进行<a href="#%E5%9B%BE%E7%89%87">引用</a>。我们推荐使用HTML标签以手动控制图片大小。</li>
<li>如果您的内容较多,建议您在编辑预览时将文本内容同步做好本地保存,或使用本地 markdown 编辑器如Visual Studio Code、Typora等编辑完成后再进行预览、投稿操作。如您需要多次获取图片标签为了保证一致性请务必使用同一个邮箱</li>
<li>若您使用本地 markdown 编辑器,如需引用图片,请务必使用从此处获取的图片标签进行引用。请您放心:若图片不违规,您在此处上传的图片将在我们的服务器中长期保存,您获取的图片标签也长期有效,随时都能进行预览。</li>
<li><strong>严禁上传任何与内容无关的图片!</strong><br>
<input type="file" id="imageUploader" accept="image/*" onchange="uploadImage(event)"><br>
<p>图片HTML引用标签<a id="imageUrl" target="_blank"></a></p>
<button class="Button" id="copyButton" onclick="copyImageUrl()" style="display: none;">复制引用标签</button><br>
<img id="imagePreview" src="" alt="图片预览" style="max-width: 40%; display: none;"><br>
</li>
</ul>
<textarea id="input" placeholder="请在此处编辑并预览您的内容详情。"></textarea>
<div id="preview"></div>
<div class="button-container">
<button class="Button" id="SubmitButton">提交</button><br>
</div>
<h3 id="markdown-基本语法教程">markdown 基本语法教程<a hidden class="anchor" aria-hidden="true" href="#markdown-基本语法教程">#</a></h3>
<h4 id="空格与换行">空格与换行<a hidden class="anchor" aria-hidden="true" href="#空格与换行">#</a></h4>
<p>markdown 语法对于空格与换行并不敏感。您即使输入多个空格markdown 也只会渲染一个空格。例如:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>这是一个 示例文本,含有多个空格。
</span></span></code></pre></div><p>效果:</p>
<p>这是一个 示例文本,含有多个空格。</p>
<p>要创建换行,请在行末尾增加一个额外的行,例如:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>这是第一行。
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span>这是第二行。
</span></span></code></pre></div><p>效果:</p>
<p>这是第一行。<br>
这是第二行。</p>
<h4 id="加粗与斜体">加粗与斜体<a hidden class="anchor" aria-hidden="true" href="#加粗与斜体">#</a></h4>
<p>使用<code>**文本**</code><code>*文本*</code>来分别表示加粗和斜体。例如:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>**加粗**
</span></span><span style="display:flex;"><span>*斜体*
</span></span></code></pre></div><p>效果:<br>
<strong>加粗</strong><br>
<em>斜体</em></p>
<h4 id="多级标题">多级标题<a hidden class="anchor" aria-hidden="true" href="#多级标题">#</a></h4>
<p>使用<code>#</code>符号来表示标题。一级标题使用一个<code>#</code>,二级标题使用两个<code>#</code>,以此类推。例如:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span># 一级标题
</span></span><span style="display:flex;"><span>## 二级标题
</span></span><span style="display:flex;"><span>### 三级标题
</span></span><span style="display:flex;"><span>#### 四级标题
</span></span><span style="display:flex;"><span>##### 五级标题
</span></span><span style="display:flex;"><span>###### 六级标题
</span></span></code></pre></div><p>效果:</p>
<h1 id="一级标题">一级标题<a hidden class="anchor" aria-hidden="true" href="#一级标题">#</a></h1>
<h2 id="二级标题">二级标题<a hidden class="anchor" aria-hidden="true" href="#二级标题">#</a></h2>
<h3 id="三级标题">三级标题<a hidden class="anchor" aria-hidden="true" href="#三级标题">#</a></h3>
<h4 id="四级标题">四级标题<a hidden class="anchor" aria-hidden="true" href="#四级标题">#</a></h4>
<h5 id="五级标题">五级标题<a hidden class="anchor" aria-hidden="true" href="#五级标题">#</a></h5>
<h6 id="六级标题">六级标题<a hidden class="anchor" aria-hidden="true" href="#六级标题">#</a></h6>
<h4 id="分割线">分割线<a hidden class="anchor" aria-hidden="true" href="#分割线">#</a></h4>
<p>使用三个或更多的<code>-</code><code>*</code><code>_</code>符号可以创建分割线。例如:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>---
</span></span><span style="display:flex;"><span>***
</span></span><span style="display:flex;"><span>___
</span></span></code></pre></div><p>效果:</p>
<hr>
<hr>
<hr>
<h4 id="引用块">引用块<a hidden class="anchor" aria-hidden="true" href="#引用块">#</a></h4>
<p>使用<code>&gt;</code>符号表示引用块。例如:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>&gt; 这是一个引用块。
</span></span><span style="display:flex;"><span>&gt;&gt; 这是一个嵌套的引用块。
</span></span></code></pre></div><p>效果:</p>
<blockquote>
<p>这是一个引用块。</p>
<blockquote>
<p>这是一个嵌套的引用块。</p>
</blockquote>
</blockquote>
<h4 id="链接">链接<a hidden class="anchor" aria-hidden="true" href="#链接">#</a></h4>
<p>使用<code>[显示文本](URL)</code>格式创建链接。例如:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>[NEU小站](https://www.东北大学.com)
</span></span></code></pre></div><p>效果:</p>
<p><a href="https://www.%E4%B8%9C%E5%8C%97%E5%A4%A7%E5%AD%A6.com">NEU小站</a></p>
<h4 id="行内代码">行内代码<a hidden class="anchor" aria-hidden="true" href="#行内代码">#</a></h4>
<p>使用反引号<code>`</code>符号将文字包裹起来,表示行内代码。例如:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>这是一个`行内代码`示例。
</span></span></code></pre></div><p>效果:</p>
<p>这是一个<code>行内代码</code>示例。</p>
<h4 id="代码块">代码块<a hidden class="anchor" aria-hidden="true" href="#代码块">#</a></h4>
<p>使用三个反引号<code>```</code>包裹代码块,或者用缩进四个空格来表示代码块。例如:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>```
</span></span><span style="display:flex;"><span>这是一个代码块。
</span></span><span style="display:flex;"><span>```
</span></span></code></pre></div><p>效果:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>这是一个代码块。
</span></span></code></pre></div><h4 id="图片">图片<a hidden class="anchor" aria-hidden="true" href="#图片">#</a></h4>
<p>使用 HTML 标签的 <code>width</code><code>height</code> 属性来在引用的同时调整图片的大小。例如:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://emberimg.oss-cn-beijing.aliyuncs.com/images/neucartoon.png&#34;</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;图片&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;100&#34;</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;100&#34;</span>&gt;
</span></span></code></pre></div><p>效果:</p>
<img src="https://emberimg.oss-cn-beijing.aliyuncs.com/images/neucartoon.png" alt="图片" width="100" height="100">
<p>您也可以只设置 <code>width</code><code>height</code>,浏览器会自动按比例调整图片。例如:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;https://emberimg.oss-cn-beijing.aliyuncs.com/images/neucartoon.png&#34;</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;图片&#34;</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;150&#34;</span>&gt;
</span></span></code></pre></div><p>效果:</p>
<img src="https://emberimg.oss-cn-beijing.aliyuncs.com/images/neucartoon.png" alt="图片" width="150">
<h4 id="表格">表格<a hidden class="anchor" aria-hidden="true" href="#表格">#</a></h4>
<p>Markdown 允许使用简单的语法创建表格。使用竖线(<code>|</code>)分隔列,使用短横线(<code>-</code>)分隔表头和表内容。以下是一个基本的表格示例:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>| 姓名 | 年龄 | 性别 |
</span></span><span style="display:flex;"><span>| ------ | ---- | ---- |
</span></span><span style="display:flex;"><span>| 张三 | 25 | 男 |
</span></span><span style="display:flex;"><span>| 李四 | 30 | 女 |
</span></span><span style="display:flex;"><span>| 王五 | 28 | 男 |
</span></span></code></pre></div><p>效果:</p>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td></td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td></td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td></td>
</tr>
</tbody>
</table>
<h4 id="对齐方式">对齐方式<a hidden class="anchor" aria-hidden="true" href="#对齐方式">#</a></h4>
<p>通过在分隔表头和表内容的短横线两侧添加冒号(<code>:</code>)可以控制文本对齐方式。可以选择左对齐、右对齐和居中对齐。</p>
<ul>
<li>左对齐:在短横线左侧添加冒号 <code>:---</code></li>
<li>右对齐:在短横线右侧添加冒号 <code>---:</code></li>
<li>居中对齐:在短横线两侧都添加冒号 <code>:---:</code></li>
</ul>
<p>示例如下:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-text" data-lang="text"><span style="display:flex;"><span>| 姓名 | 年龄 | 性别 |
</span></span><span style="display:flex;"><span>| :---- | ---: | :--: |
</span></span><span style="display:flex;"><span>| 张三 | 25 | 男 |
</span></span><span style="display:flex;"><span>| 李四 | 30 | 女 |
</span></span><span style="display:flex;"><span>| 王五 | 28 | 男 |
</span></span></code></pre></div><p>效果:</p>
<table>
<thead>
<tr>
<th style="text-align:left">姓名</th>
<th style="text-align:right">年龄</th>
<th style="text-align:center">性别</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">张三</td>
<td style="text-align:right">25</td>
<td style="text-align:center"></td>
</tr>
<tr>
<td style="text-align:left">李四</td>
<td style="text-align:right">30</td>
<td style="text-align:center"></td>
</tr>
<tr>
<td style="text-align:left">王五</td>
<td style="text-align:right">28</td>
<td style="text-align:center"></td>
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"></script>
<script src="https://emberimg.oss-cn-beijing.aliyuncs.com/password/crypto-js.js"></script>
<script>
const input = document.getElementById('input');
const preview = document.getElementById('preview');
input.addEventListener('input', () => {
const markdownText = input.value;
preview.innerHTML = marked.parse(markdownText);
});
// Initialize with empty content
preview.innerHTML = marked.parse('');
function validateAvatarFile(event) {
const maxFileSize = 1 * 1024 * 1024; // 1MB in bytes
const file = event.target.files[0]; // 仅选择第一个文件
if (file.size > maxFileSize) {
alert(`文件 "${file.name}" 超过了大小限制1MB`);
event.target.value = ''; // 清除已选文件
}
}
function validateFiles(event) {
const maxFiles = 10;
const maxFileSize = 2 * 1024 * 1024; // 2MB in bytes
const maxCompressedFileSize = 20 * 1024 * 1024; // 20MB in bytes
const files = event.target.files;
if (files.length > maxFiles) {
alert(`您只能选择最多 ${maxFiles} 个文件。`);
event.target.value = ''; // 清除已选文件
return;
}
let hasCompressedFile = false;
for (let i = 0; i < files.length; i++) {
const file = files[i];
const fileName = file.name;
const fileSize = file.size;
const fileExtension = fileName.split('.').pop().toLowerCase();
if (fileExtension === 'zip' || fileExtension === 'rar') {
if (hasCompressedFile) {
alert(`您只能上传一个压缩文件。`);
event.target.value = ''; // 清除已选文件
return;
}
hasCompressedFile = true;
if (fileSize > maxCompressedFileSize) {
alert(`压缩文件 "${fileName}" 超过了大小限制20MB`);
event.target.value = ''; // 清除已选文件
return;
}
} else {
if (fileSize > maxFileSize) {
alert(`文件 "${fileName}" 超过了大小限制2MB`);
event.target.value = ''; // 清除已选文件
return;
}
}
}
if (hasCompressedFile && files.length > 1) {
alert('上传压缩文件时,只能上传一个文件。');
event.target.value = ''; // 清除已选文件
return;
}
}
// 显示时间
function getBeijingTime() {
const now = new Date();
const utcOffset = now.getTimezoneOffset() * 60000;
const beijingOffset = 8 * 60 * 60 * 1000;
const beijingTime = new Date(now.getTime() + utcOffset + beijingOffset);
return beijingTime.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
}
function displayBeijingTime() {
const beijingTimeElement = document.getElementById('beijing-time');
beijingTimeElement.textContent = getBeijingTime();
}
window.onload = function() {
displayBeijingTime();
}
let client;
async function f1() {
try {
const r1 = await fetch('https://emberimg.oss-cn-beijing.aliyuncs.com/upload/json/s.json');
const d1 = await r1.json();
const m1 = d1.masterKey;
const k1 = CryptoJS.SHA256(m1);
const c1 = {
region: d2(d1.encryptedRegion, k1),
accessKeyId: d2(d1.encryptedKeyId, k1),
accessKeySecret: d2(d1.encryptedKeySecret, k1),
bucket: d2(d1.encryptedBucket, k1)
};
client = new OSS(c1);
console.log("OSS Client Initialized Successfully with decrypted config", client);
} catch (e1) {
console.error('Failed to fetch or decrypt OSS config:', e1);
}
}
function d2(e2, k2) {
e2 = e2.replace(/\s/g, '');
const e3 = CryptoJS.enc.Base64.parse(e2);
const iv = CryptoJS.lib.WordArray.create(e3.words.slice(0, 4));
const e4 = CryptoJS.lib.WordArray.create(e3.words.slice(4));
const d3 = CryptoJS.AES.decrypt({ ciphertext: e4 }, k2, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return d3.toString(CryptoJS.enc.Utf8);
}
document.addEventListener('DOMContentLoaded', function() {
f1().then(() => {
if (client) {
} else {
console.error('Failed to initialize OSS client due to decryption error.');
}
}).catch(e2 => {
console.log('Error initializing OSS Client:', e2);
});
});
// 获取当前北京时间并转化为纯数字格式
function getNumericBeijingTime() {
const beijingTimeElement = document.getElementById('beijing-time').textContent.trim();
const [date, time] = beijingTimeElement.split(' ');
const [year, month, day] = date.split('/');
const [hours, minutes] = time.split(':');
return `${year}${month.padStart(2, '0')}${day.padStart(2, '0')}${hours.padStart(2, '0')}${minutes.padStart(2, '0')}`;
}
async function uploadImage(event) {
const file = event.target.files[0];
const email = document.querySelector("input[name='email']").value.trim();
const time = getNumericBeijingTime();
if (!file) {
alert("请先选择图片文件!");
return;
}
if (file.size > 2 * 1024 * 1024) {
alert("图片文件大小不能超过2MB");
event.target.value = '';
return;
}
if (!email) {
alert("请先填写邮箱信息!");
event.target.value = '';
return;
}
const filePath = `upload/${email}/${time}/postimg/${file.name}`;
try {
const result = await client.put(filePath, file);
const imageUrl = `https://emberimg.oss-cn-beijing.aliyuncs.com/${filePath}`;
const imageTag = `<img src="${imageUrl}" alt="自定义图片文字" width="150">`;
// 展示图片URL和HTML标签
document.getElementById("imageUrl").innerText = imageTag;
// document.getElementById("imageUrl").href = imageUrl;
document.getElementById("imagePreview").src = imageUrl;
document.getElementById("imagePreview").style.display = "block"; // 设置图片预览为显示状态
document.getElementById("copyButton").style.display = "inline-block";
} catch (error) {
console.error("图片上传失败:", error);
alert("图片上传失败!");
event.target.value = '';
}
}
// 复制HTML标签到剪贴板
function copyImageUrl() {
const imageTag = document.getElementById("imageUrl").innerText;
// 创建一个临时文本区域元素
const textArea = document.createElement("textarea");
textArea.value = imageTag;
document.body.appendChild(textArea);
textArea.select();
try {
const successful = document.execCommand('copy');
const msg = successful ? '标签已复制到剪贴板!请直接粘贴到 markdown 编辑区中,并根据预览效果调整大小。' : '复制失败!';
alert(msg);
} catch (err) {
alert("复制失败!", err);
}
document.body.removeChild(textArea);
}
document.getElementById('SubmitButton').onclick = function() {
// 获取输入的值
const section = document.getElementById('section').value;
const email = document.querySelector("input[name='email']").value.trim();
const name = document.querySelector("input[name='name']").value.trim();
const wp = document.querySelector("input[name='wp']").value.trim();
const wppassword = document.querySelector("input[name='wppassword']").value.trim();
const note = document.querySelector("input[name='note']").value.trim();
const markdownContent = document.getElementById('input').value.trim();
// 检查必填项是否填写
if (!section || !email) {
alert('您有必填项未填写!');
return;
}
// 弹出确认对话框
if (!confirm('请仔细检查后提交,多次提交无关内容将被禁止访问网站!')) {
return; // 用户点击取消,终止提交
}
// 执行上传操作
uploadData();
async function uploadData() {
const time = getNumericBeijingTime();
const userInfoText = `时间:${getBeijingTime()}\n邮箱:${email}\n板块:${section}\n昵称:${name}\n备注:${note}\n网盘外链:${wp}\n网盘提取密码:${wppassword}\n资源展示页:\n${markdownContent}`;
const userTextFilePath = `upload/${email}/${time}/userinfo.txt`;
const imageFile = document.getElementById('imagePicker').files[0];
const files = document.getElementById('filePicker').files;
try {
// 上传用户信息文本文件
await client.put(userTextFilePath, new Blob([userInfoText], {type: 'text/plain'}));
// 上传头像文件,如果有
if (imageFile) {
await client.put(`upload/${email}/${time}/avatar`, imageFile);
}
// 上传其他文件
for (let i = 0; i < files.length; i++) {
await client.put(`upload/${email}/${time}/files/${files[i].name}`, files[i]);
}
// 跳转到投稿成功页
window.location.href = '/submissionsuccess/';
} catch (error) {
console.error("上传失败:", error);
alert("投稿失败,请重试!");
}
}
};
</script>
<style>
#section {
display: "inline"
font-size: 24px;
height: 30px;
width: 90px;
}
.simpleInput {
width: 400px;
}
#input {
font-family: Arial, sans-serif;
width: 100%;
height: 400px;
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
resize: none; /* 禁止调整大小 */
}
#preview {
padding: 10px;
font-family: Arial, sans-serif;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
}
.Button {
background-color: #4CAF50; /* 绿色背景 */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px; /* 圆角 */
transition: background-color 0.3s; /* 过渡效果 */
}
.Button:hover {
background-color: #45a049; /* 鼠标悬停时的背景色 */
}
.dark .simpleInput, .dark #input {
color: rgb(196,196,197);
}
.dark #preview {
background-color: rgb(29,30,32);
}
.button-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中(如果需要) */
}
</style>
<hr>
</div>
</main>
<footer class="footer">
<span>&copy; 2024 <a href="https://xn--xhq44jb2fzpc.com/">NEU小站</a></span> ·
<span id="ember-container">
Ember
<div id="qr-code" class="hidden">
<img src="https://www.xn--xhq44jb2fzpc.com/qrcode/ember.png" alt="QR Code" />
</div>
</span>
</footer>
<a href="#top" aria-label="go to top" title="Go to Top (Alt + G)" class="top-link" id="top-link" accesskey="g">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentColor">
<path d="M12 6H0l6-6z" />
</svg>
</a>
<style>
#ember-container {
position: relative;
display: inline-block;
cursor: pointer;
}
#qr-code {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#qr-code img {
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
#ember-container:hover #qr-code,
#ember-container:focus #qr-code {
opacity: 1;
visibility: visible;
}
</style>
<script>
let menu = document.getElementById('menu')
if (menu) {
menu.scrollLeft = localStorage.getItem("menu-scroll-position");
menu.onscroll = function () {
localStorage.setItem("menu-scroll-position", menu.scrollLeft);
}
}
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener("click", function (e) {
e.preventDefault();
var id = this.getAttribute("href").substr(1);
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({
behavior: "smooth"
});
} else {
document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView();
}
if (id === "top") {
history.replaceState(null, null, " ");
} else {
history.pushState(null, null, `#${id}`);
}
});
});
document.addEventListener('DOMContentLoaded', function() {
var emberContainer = document.getElementById('ember-container');
emberContainer.addEventListener('mouseenter', function() {
var qrCode = document.getElementById('qr-code');
qrCode.classList.remove('hidden');
});
emberContainer.addEventListener('mouseleave', function() {
var qrCode = document.getElementById('qr-code');
qrCode.classList.add('hidden');
});
});
</script>
<script>
var mybutton = document.getElementById("top-link");
window.onscroll = function () {
if (document.body.scrollTop > 800 || document.documentElement.scrollTop > 800) {
mybutton.style.visibility = "visible";
mybutton.style.opacity = "1";
} else {
mybutton.style.visibility = "hidden";
mybutton.style.opacity = "0";
}
};
</script>
<script>
document.getElementById("theme-toggle").addEventListener("click", () => {
if (document.body.className.includes("dark")) {
document.body.classList.remove('dark');
localStorage.setItem("pref-theme", 'light');
} else {
document.body.classList.add('dark');
localStorage.setItem("pref-theme", 'dark');
}
})
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$']],
displayMath: [['$$','$$']],
processEscapes: true,
processEnvironments: true,
skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
TeX: { equationNumbers: { autoNumber: "AMS" },
extensions: ["AMSmath.js", "AMSsymbols.js"] }
}
});
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for(i = 0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
}
});
</script>
<style>
code.has-jax {
font: inherit;
font-size: 100%;
background: inherit;
border: inherit;
color: #515151;
}
</style>
</body>
</html>