952 lines
40 KiB
HTML
952 lines
40 KiB
HTML
<!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="投稿者中心
|
||
邮箱：
|
||
密码：
|
||
登录
|
||
未注册的用户将自动注册。
|
||
我要投稿
|
||
个人信息
|
||
我的投稿
|
||
修改
|
||
Nickname
|
||
V
|
||
修改
|
||
email@example.com
|
||
请注意：修改头像或昵称可能会有延迟。已经通过的投稿不能更改头像和昵称信息。
|
||
基本信息 投稿时间： 内容标题： 您想要投稿的板块为：
|
||
新生指南
|
||
资源共享
|
||
说明：新生指南板块主要用于给新生提供学习和生活上的攻略信息或经验等，资源共享板块主要用于分享各类有价值的学习资源。
|
||
上传文件： 说明：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>
|
||
<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">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="post-content">
|
||
|
||
<script>
|
||
|
||
async function fetchNoCache(url) {
|
||
const timestamp = new Date().getTime();
|
||
const noCacheUrl = `${url}?timestamp=${timestamp}`;
|
||
return fetch(noCacheUrl);
|
||
}
|
||
</script>
|
||
<div id="login">
|
||
<h1>投稿者中心</h1>
|
||
<form id="loginForm">
|
||
<label for="email">邮箱：</label>
|
||
<input type="email" id="email" name="email" required>
|
||
<label for="password">密码：</label>
|
||
<input type="password" id="password" name="password" required>
|
||
<button type="submit">登录</button>
|
||
</form>
|
||
<div id="message"></div>
|
||
<div class="center-text">
|
||
<br>未注册的用户将自动注册。
|
||
</div>
|
||
</div>
|
||
<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>
|
||
<style>
|
||
.center-text {
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
#login {
|
||
max-width: 400px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 8px;
|
||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
/* background-color: #fff; */
|
||
}
|
||
|
||
#login h1 {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
#login label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
#login input[type="email"],
|
||
#login input[type="password"] {
|
||
width: 100%;
|
||
padding: 10px;
|
||
margin-bottom: 20px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.dark #login input[type="email"],
|
||
.dark #login input[type="password"] {
|
||
color: white;
|
||
}
|
||
|
||
#login button {
|
||
width: 100%;
|
||
padding: 10px;
|
||
background-color: #4CAF50;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 16px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
#login button:hover {
|
||
background-color: #45a049;
|
||
}
|
||
</style>
|
||
<div id="navContainer" class="navContainer" style="display: none">
|
||
<button class="navButton" id="我要投稿" onclick="showSubmission()">我要投稿</button>
|
||
<button class="navButton" id="个人信息" onclick="showMyInfo()">个人信息</button>
|
||
<button class="navButton" id="我的投稿" onclick="showMySubmissions()">我的投稿</button>
|
||
</div>
|
||
<style>
|
||
/* 基本样式 */
|
||
.navContainer {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
width: 100%; /* 容器宽度设置为100% */
|
||
padding: 0 20px;
|
||
margin: 20px 0;
|
||
margin-left: 200px;
|
||
}
|
||
|
||
.navButton {
|
||
padding: 10px 20px;
|
||
border: none;
|
||
background-color: #f8f8f8;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
outline: none; /* 移除焦点时的外边框 */
|
||
}
|
||
|
||
.navButton.selected {
|
||
background-color: #4CAF50; /* 选中按钮的绿色背景 */
|
||
color: white;
|
||
}
|
||
|
||
/* 移动端样式 */
|
||
@media (max-width: 768px) {
|
||
.navContainer {
|
||
flex-direction: column;
|
||
align-items: center; /* 确保按钮在移动端居中对齐 */
|
||
width: 100%; /* 容器在移动端宽度为100% */
|
||
margin-left: 0;
|
||
}
|
||
|
||
.navButton {
|
||
width: 90%; /* 将按钮宽度设置为容器宽度的90%，可以根据需要调整 */
|
||
padding: 15px;
|
||
font-size: 18px;
|
||
margin: 5px 0;
|
||
}
|
||
}
|
||
|
||
/* Dark mode styles */
|
||
.dark .navContainer {
|
||
background-color: rgb(29,30,32); /* Darker background for the container */
|
||
}
|
||
|
||
.dark .navButton {
|
||
background-color: #555; /* Dark background for buttons */
|
||
color: #ddd; /* Light text for readability */
|
||
border-color: #666; /* Dark border for contrast */
|
||
}
|
||
|
||
.dark .navButton.selected {
|
||
background-color: #00897B; /* A different color for selected state */
|
||
color: #fff; /* White text for selected button */
|
||
}
|
||
|
||
</style>
|
||
<div id="myinfo" style="display: none; align-items: center; padding: 20px;">
|
||
<div class="profile-pic-container">
|
||
<img id="myinfoavatar" src="https://emberimg.oss-cn-beijing.aliyuncs.com/avatar/default.png" alt="Profile Avatar" class="profile-pic">
|
||
<div class="overlay">
|
||
<span class="text">修改</span>
|
||
<input type="file" id="fileInput" accept="image/*" style="display: none;" onchange="uploadAvatar(event)">
|
||
</div>
|
||
</div>
|
||
<div class="info">
|
||
<div style="display: flex; align-items: center;">
|
||
<h3 id="nickname">Nickname<a hidden class="anchor" aria-hidden="true" href="#nickname">#</a></h3>
|
||
<span class="verified-icon" id="verified-icon" title="已认证优质内容分享者" style="display: none;">
|
||
<svg class="verified-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
|
||
<circle cx="12" cy="12" r="12" fill="gold"/>
|
||
<text class="verified-text" x="12" y="16" dy="0.1em">V</text>
|
||
</svg>
|
||
</span>
|
||
<button id="editNicknameBtn">修改</button>
|
||
</div>
|
||
<p id="userEmail">email@example.com</p>
|
||
<p id="note">请注意：修改头像或昵称可能会有延迟。已经通过的投稿不能更改头像和昵称信息。</p>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
|
||
.verified-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
margin-left: 10px;
|
||
transform: translateY(2px);
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.verified-svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.verified-text {
|
||
fill: white;
|
||
font-family: 'Arial', sans-serif;
|
||
font-size: 16px;
|
||
text-anchor: middle;
|
||
font-weight: normal;
|
||
}
|
||
|
||
|
||
.profile-pic-container {
|
||
position: relative;
|
||
width: 100px;
|
||
height: 100px;
|
||
margin-right: 20px;
|
||
color: rgb(245,245,245);
|
||
}
|
||
|
||
.profile-pic {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
box-shadow: 0 4px 8px rgba(245,245,245,0.1); /* Light mode shadow */
|
||
transition: box-shadow 0.3s;
|
||
}
|
||
|
||
.overlay {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.6); /* Black, semi-transparent background */
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.overlay:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.overlay .text {
|
||
color: white;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.dark .profile-pic {
|
||
box-shadow: 0 4px 8px rgba(29,30,32,0.1); /* Night mode shadow */
|
||
}
|
||
|
||
#editNicknameBtn {
|
||
background-color: #4CAF50; /* 绿色背景 */
|
||
margin-top: 10px;
|
||
color: white; /* 白色文字 */
|
||
border: none; /* 无边框 */
|
||
padding: 5px 10px; /* 内边距 */
|
||
margin-left: 15px; /* 左边距 */
|
||
cursor: pointer; /* 鼠标指针 */
|
||
border-radius: 4px; /* 圆角 */
|
||
}
|
||
|
||
#editNicknameBtn:hover {
|
||
background-color: #45a049; /* 悬停时稍微变暗 */
|
||
}
|
||
|
||
/* 夜间模式 */
|
||
.dark #editNicknameBtn {
|
||
background-color: #333; /* 深色背景 */
|
||
color: #ddd; /* 浅色文字 */
|
||
}
|
||
|
||
.dark #editNicknameBtn:hover {
|
||
background-color: #555; /* 悬停时稍微变亮 */
|
||
}
|
||
|
||
|
||
</style>
|
||
<div id="mysubmission" style="display: none">
|
||
</div>
|
||
<div id="submission-area" style="display: none">
|
||
<h2 id="基本信息">基本信息<a hidden class="anchor" aria-hidden="true" href="#基本信息">#</a></h2>
|
||
<ul>
|
||
<li>投稿时间：<span id="beijing-time" style="display: inline"></span></li>
|
||
<li><strong>内容标题：</strong><input type="text" class="simpleInput" name="title" placeholder="请输入内容的标题。"></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>上传文件：<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>></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>效果：</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><<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://emberimg.oss-cn-beijing.aliyuncs.com/images/neucartoon.png"</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">"图片"</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"100"</span> <span style="color:#a6e22e">height</span><span style="color:#f92672">=</span><span style="color:#e6db74">"100"</span>>
|
||
</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><<span style="color:#f92672">img</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://emberimg.oss-cn-beijing.aliyuncs.com/images/neucartoon.png"</span> <span style="color:#a6e22e">alt</span><span style="color:#f92672">=</span><span style="color:#e6db74">"图片"</span> <span style="color:#a6e22e">width</span><span style="color:#f92672">=</span><span style="color:#e6db74">"150"</span>>
|
||
</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>
|
||
</div>
|
||
<script src="https://emberimg.oss-cn-beijing.aliyuncs.com/password/marked.min.js"></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>
|
||
<script src="https://emberimg.oss-cn-beijing.aliyuncs.com/upload/submission.js"></script>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<span>© 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>
|