在知道markdown之前一直觉得像csdn博客这种网站页面很高大上，比如文字格式、添加代码块等，也以为很难实现，后来才知道有markdown，这样实现这些就so easy，但是我这个人还是太懒了，不想自己写markdown翻译的代码，就用了strapdown.js这个库，下面说说具体的使用
项目地址：http://strapdownjs.com/
使用很简单，在页面中引入这个库就可以了
不过由于是国外的网站，速度有时候比较慢，所以建议把js和相关css代码拷到本地使用
strapdown.js提供了多种样式，有：amelia、cerulean、cyborg、journal、readable、simplex、slate、spacelab、spacelab、spruce、superhero、united等，使用方法很简单
<![CDATA[
<p>这是官方的例子：</p>
<pre><code><!DOCTYPE html>
<html>
<title>Hello Strapdown</title><script async src="http://c.cnzz.com/core.php"></script>
<xmp theme="united" style="display:none;">
# Markdown text goes in here
## Chapter 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
## Chapter 2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html></code></pre>
<p>那么想像csdn博客一样显示代码块应该怎么办？很简单，只需要在代码前后加上```就可以了</p>
</div> </div>
<!-- 右侧边栏 -->
<div class="right-sidebar" id="right-sidebar">
<!-- 搜索 -->
<div class="sidebar-widget">
<h3>搜索</h3>
<form method="get">
<input type="text" name="search" placeholder="搜索文章..." style="width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px;" value="">
<button type="submit" style="margin-top: 8px; padding: 6px 12px; background-color: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; width: 100%;">搜索</button>
</form>
</div>
<!-- 网站统计 -->
<div class="sidebar-widget">
<h3>网站统计</h3>
<div class="widget-list">
<div>文章总数: 206</div>
<div>分类数量: 8</div>
<div>标签数量: 102</div>
<div>最新文章: 使用libxl库读取excel文件</div>
<div>更新于: 2025-11-30 04:08:43</div>
</div>
</div>
<!-- 最新文章 -->
<div class="sidebar-widget">
<h3>最新文章</h3>
<div class="widget-list">
<a href="?path=C2.VC6.MFC%2F%E4%BD%BF%E7%94%A8libxl%E5%BA%93%E8%AF%BB%E5%8F%96excel%E6%96%87%E4%BB%B6.md" title="使用libxl库读取excel文件"><span class="title">使用libxl库读取excel文件</span><span class="date">20251129</span></a><a href="?path=LearningNotes%2FWikitten%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E.md" title="Wikitten使用说明"><span class="title">Wikitten使用说明</span><span class="date">20251129</span></a><a href="?path=C2.VC6.MFC%2F%E9%80%9A%E8%BF%87%E6%B3%A8%E5%86%8C%E8%A1%A8%E4%BB%A5%E5%8F%8A%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C%E7%9A%84%E6%96%B9%E5%BC%8F%E8%8E%B7%E5%8F%96%E5%BD%93%E5%89%8D%E6%AD%A3%E5%9C%A8%E5%AE%9E%E9%99%85%E4%BD%BF%E7%94%A8%E7%9A%84%E7%89%A9%E7%90%86%E7%BD%91%E5%8D%A1MAC%E5%9C%B0%E5%9D%80.md" title="通过注册表以及文件操作的方式获取当前正在实际使用的物理网卡MAC地址"><span class="title">通过注册表以及文件操作的方式获取当前正在实际使用的...</span><span class="date">20251129</span></a><a href="?path=C2.VC6.MFC%2FVC%E6%A8%A1%E6%8B%9F%E9%BC%A0%E6%A0%87%E7%9A%84%E4%B8%A4%E7%A7%8D%E6%96%B9%E5%BC%8F%28SendMessage%E3%80%81mouse_event%29.md" title="VC模拟鼠标的两种方式(SendMessage、mouse_event)"><span class="title">VC模拟鼠标的两种方式(SendMessage、m...</span><span class="date">20251129</span></a><a href="?path=C2.VC6.MFC%2FMFC%E5%B0%86%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%98%BE%E7%A4%BA%E5%9C%A8%E6%9C%80%E5%89%8D%E7%AB%AF.md" title="MFC将应用程序显示在最前端"><span class="title">MFC将应用程序显示在最前端</span><span class="date">20251129</span></a><a href="?path=C2.VC6.MFC%2FVC6%E8%8E%B7%E5%8F%96%E4%B8%80%E5%AE%9A%E8%8C%83%E5%9B%B4%E5%86%85%E7%9A%84%E9%9A%8F%E6%9C%BA%E6%95%B0.md" title="VC6获取一定范围内的随机数"><span class="title">VC6获取一定范围内的随机数</span><span class="date">20251129</span></a><a href="?path=C3.Web%2F%E8%AE%BE%E4%B8%BA%E9%A6%96%E9%A1%B5%E3%80%81%E5%8A%A0%E5%85%A5%E6%94%B6%E8%97%8F%E4%BB%A3%E7%A0%81.md" title="设为首页、加入收藏代码"><span class="title">设为首页、加入收藏代码</span><span class="date">20251129</span></a><a href="?path=LearningNotes%2FVPS%E6%96%B0%E6%89%8B%E6%8C%87%E5%8D%97%E6%95%99%E7%A8%8B.md" title="VPS新手指南教程"><span class="title">VPS新手指南教程</span><span class="date">20251129</span></a><a href="?path=C2.VC6.MFC%2Fvc%E4%B8%AD%E8%B0%83%E7%94%A8%E5%85%B6%E4%BB%96%E5%BA%94%E7%94%A8%EF%BC%9Awinexec%E3%80%81shellexecute%E3%80%81createprocess.md" title="vc中调用其他应用：winexec、shellexecute、createprocess"><span class="title">vc中调用其他应用：winexec、shellex...</span><span class="date">20251129</span></a><a href="?path=C2.VC6.MFC%2FCRichEditCtrl%E7%9A%84%E4%BD%BF%E7%94%A8.md" title="CRichEditCtrl的使用"><span class="title">CRichEditCtrl的使用</span><span class="date">20251129</span></a> </div>
</div>
<!-- 随机文章 -->
<div class="sidebar-widget">
<h3>随机文章</h3>
<div class="widget-list">
<a href="?path=Software%2FNet%2F%E7%BB%BF%E7%8E%AFFTP%E6%95%B0%E6%8D%AE%E5%A4%87%E4%BB%BDV1.5.md" title="绿环FTP数据备份V1.5"><span class="title">绿环FTP数据备份V1.5</span><span class="date">20100408</span></a><a href="?path=Software%2Fnssm%E5%90%AF%E5%8A%A8%E4%BB%BB%E6%84%8F%E7%A8%8B%E5%BA%8F%E4%B8%BA%E6%9C%8D%E5%8A%A1%E7%9A%84%E8%BD%AF%E4%BB%B6.md" title="nssm启动任意程序为服务的软件"><span class="title">nssm启动任意程序为服务的软件</span><span class="date">20160512</span></a><a href="?path=C2.VC6.MFC%2F%E6%8C%89%E8%A1%8C%E8%AF%BB%E5%8F%96ANSI%E3%80%81UNICODE+%E3%80%81UNICODE+big+endian%E3%80%81UTF-8%E5%9B%9B%E7%A7%8D%E6%96%87%E6%9C%AC%E6%96%87%E4%BB%B6.md" title="按行读取ANSI、UNICODE 、UNICODE big endian、UTF-8四种文本文件"><span class="title">按行读取ANSI、UNICODE 、UNICODE...</span><span class="date">20160115</span></a><a href="?path=Software%2FOfficeSoft%2FWord%E5%9C%A8%E6%96%B9%E6%A1%86%E9%87%8C%E6%89%93%E5%8B%BE.md" title="Word在方框里打勾"><span class="title">Word在方框里打勾</span><span class="date">20200515</span></a><a href="?path=C1.MyCode%2F%E6%96%87%E6%A1%A3%E6%94%B6%E8%97%8F%E5%8A%A9%E6%89%8B%E7%A8%8B%E5%BA%8F.md" title="文档收藏助手程序"><span class="title">文档收藏助手程序</span><span class="date">20081103</span></a><a href="?path=C2.VC6.MFC%2FVC%E4%B8%AD%E6%96%87%E4%BB%B6%E6%93%8D%E4%BD%9C.md" title="VC中文件操作"><span class="title">VC中文件操作</span><span class="date">20090219</span></a><a href="?path=C3.Web%2FBlogMi%E5%A2%9E%E5%8A%A0%E6%90%9C%E7%B4%A2%E5%8A%9F%E8%83%BD.md" title="BlogMi增加搜索功能"><span class="title">BlogMi增加搜索功能</span><span class="date">20180120</span></a><a href="?path=C2.VC6.MFC%2FC%E7%89%88%E5%AE%9E%E7%8E%B0Base64UrlEncode%E7%BC%96%E7%A0%81.md" title="C&C++版实现Base64UrlEncode等"><span class="title">C&C++版实现Base64UrlEncode等</span><span class="date">20160821</span></a><a href="?path=C2.VC6.MFC%2Flibcurl%E4%BD%BF%E7%94%A8%E5%BF%83%E5%BE%97-%E5%85%8D%E8%B4%B9%E5%BC%80%E6%BA%90url%E4%BC%A0%E8%BE%93%E5%BA%93.md" title="libcurl使用心得-免费开源url传输库"><span class="title">libcurl使用心得-免费开源url传输库</span><span class="date">20170325</span></a><a href="?path=C2.VC6.MFC%2FUnicode%E7%BC%96%E7%A0%81%E4%B8%8B%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9B%B8%E4%BA%92%E8%BD%AC%E6%8D%A2.md" title="Unicode编码下字符串相互转换"><span class="title">Unicode编码下字符串相互转换</span><span class="date">20160710</span></a> </div>
</div>
<!-- 日历 -->
<div class="sidebar-widget">
<h3>日历</h3>
<div class="calendar"><div class="calendar-header"><a href="?year=2008&month=10" class="calendar-nav"><</a><span>2008年11月</span><a href="?year=2008&month=12" class="calendar-nav">></a></div><div class="calendar-weekdays"><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div><div>日</div></div><div class="calendar-days"><div class="calendar-day empty"></div><div class="calendar-day empty"></div><div class="calendar-day empty"></div><div class="calendar-day empty"></div><div class="calendar-day empty"></div><div class="calendar-day" title="2008-11-01">1</div><div class="calendar-day has-articles" title="2008-11-02 - 2篇文章
• 虚拟还原技术探讨
• 虚拟还原的工作原理探讨
"><a href="?year=2008&month=11&day=2" class="calendar-day-link">2</a></div><div class="calendar-day has-articles" title="2008-11-03 - 2篇文章
• 文档收藏助手程序
• 置顶项颜色修改
"><a href="?year=2008&month=11&day=3" class="calendar-day-link">3</a></div><div class="calendar-day" title="2008-11-04">4</div><div class="calendar-day" title="2008-11-05">5</div><div class="calendar-day" title="2008-11-06">6</div><div class="calendar-day" title="2008-11-07">7</div><div class="calendar-day" title="2008-11-08">8</div><div class="calendar-day" title="2008-11-09">9</div><div class="calendar-day" title="2008-11-10">10</div><div class="calendar-day" title="2008-11-11">11</div><div class="calendar-day" title="2008-11-12">12</div><div class="calendar-day" title="2008-11-13">13</div><div class="calendar-day" title="2008-11-14">14</div><div class="calendar-day" title="2008-11-15">15</div><div class="calendar-day" title="2008-11-16">16</div><div class="calendar-day" title="2008-11-17">17</div><div class="calendar-day" title="2008-11-18">18</div><div class="calendar-day" title="2008-11-19">19</div><div class="calendar-day" title="2008-11-20">20</div><div class="calendar-day" title="2008-11-21">21</div><div class="calendar-day" title="2008-11-22">22</div><div class="calendar-day" title="2008-11-23">23</div><div class="calendar-day" title="2008-11-24">24</div><div class="calendar-day" title="2008-11-25">25</div><div class="calendar-day" title="2008-11-26">26</div><div class="calendar-day" title="2008-11-27">27</div><div class="calendar-day" title="2008-11-28">28</div><div class="calendar-day" title="2008-11-29">29</div><div class="calendar-day" title="2008-11-30">30</div></div></div> </div>
</div>
</div>
<!-- 右下角固定按钮 -->
<div class="fixed-buttons">
<a class="fixed-btn home" href="?" title="回到主页">🏠</a>
<a class="fixed-btn qq" href="tencent://message/?uin=123456789&Site=&Menu=yes" title="联系QQ">💬</a>
<button class="fixed-btn" id="back-to-top" title="回到顶部">⬆️</button>
</div>
<!-- 左下角固定按钮 -->
<div class="left-fixed-buttons">
<button class="left-fixed-btn" id="dark-mode-toggle" title="明暗模式切换">🌙</button>
<button class="left-fixed-btn mobile-only" id="mobile-menu-left" title="显示目录">📁</button>
<button class="left-fixed-btn mobile-only" id="mobile-menu-right" title="显示侧边栏">📊</button>
</div>
<!-- 页脚 -->
<footer>
<div class="container">
<p>Powered by <a href="https://chat.deepseek.com/" target="_blank">DeepSeek生成</a> & <a href="https://my.liluohost.com/" target="_blank">籬落VPS</a></p>
<p>Copyright © 2008 - 2024 <a href="http://www.cool02.com" target="_blank">零贰</a> All Rights Reserved.</p>
</div>
</footer>
<script>
// 回到顶部功能
const backToTop = document.getElementById('back-to-top');
backToTop.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 明暗模式切换
const darkModeToggle = document.getElementById('dark-mode-toggle');
// 检查本地存储中的主题设置
if (localStorage.getItem('dark-mode') === 'enabled') {
document.body.classList.add('dark-mode');
darkModeToggle.innerHTML = '☼';
darkModeToggle.title = '切换到明亮模式';
}
darkModeToggle.addEventListener('click', function(e) {
e.preventDefault();
document.body.classList.toggle('dark-mode');
// 更新本地存储
if (document.body.classList.contains('dark-mode')) {
localStorage.setItem('dark-mode', 'enabled');
this.innerHTML = '☼';
this.title = '切换到明亮模式';
} else {
localStorage.setItem('dark-mode', 'disabled');
this.innerHTML = '🌙';
this.title = '切换到暗色模式';
}
});
// 目录树功能
function toggleFolder(element) {
const children = element.parentNode.querySelector('.tree-children');
if (children) {
children.classList.toggle('expanded');
}
}
// 自动展开当前文章路径
document.addEventListener('DOMContentLoaded', function() {
const activeItem = document.querySelector('.tree-item.file.active');
if (activeItem) {
let parent = activeItem.parentNode;
while (parent && !parent.classList.contains('directory-tree')) {
if (parent.classList.contains('tree-children')) {
parent.classList.add('expanded');
}
parent = parent.parentNode;
}
}
});
// 搜索功能
const searchInput = document.getElementById('tree-search');
if (searchInput) {
searchInput.addEventListener('input', function() {
const query = this.value.toLowerCase();
const treeItems = document.querySelectorAll('.tree-item.file');
treeItems.forEach(item => {
const text = item.textContent.toLowerCase();
if (text.includes(query)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
// 显示匹配的文件夹
const folders = document.querySelectorAll('.tree-item.directory');
folders.forEach(folder => {
const folderName = folder.querySelector('.tree-name').textContent.toLowerCase();
const children = folder.querySelectorAll('.tree-item.file');
let hasVisibleChild = false;
children.forEach(child => {
if (child.style.display !== 'none') {
hasVisibleChild = true;
}
});
if (folderName.includes(query) || hasVisibleChild) {
folder.style.display = 'block';
// 展开文件夹
const childrenContainer = folder.querySelector('.tree-children');
if (childrenContainer) {
childrenContainer.classList.add('expanded');
}
} else {
folder.style.display = 'none';
}
});
});
}
// 右键菜单功能
const contextMenu = document.getElementById('contextMenu');
let selectedItem = null;
document.addEventListener('contextmenu', function(e) {
const treeItem = e.target.closest('.tree-item');
if (treeItem && false) {
e.preventDefault();
selectedItem = treeItem;
// 根据项目类型显示不同的菜单项
const isDirectory = treeItem.classList.contains('directory');
const isFile = treeItem.classList.contains('file');
document.getElementById('contextNew').style.display = isDirectory ? 'block' : 'none';
document.getElementById('contextEdit').style.display = isFile ? 'block' : 'none';
document.getElementById('contextMove').style.display = isFile ? 'block' : 'none';
document.getElementById('contextRename').style.display = 'block';
document.getElementById('contextRename').style.display = 'block';// 目录和文件都显示删除选项
// 定位菜单
contextMenu.style.left = e.pageX + 'px';
contextMenu.style.top = e.pageY + 'px';
contextMenu.style.display = 'block';
}
});
document.addEventListener('click', function() {
contextMenu.style.display = 'none';
});
// 右键菜单操作
document.getElementById('contextNew').addEventListener('click', function(e) {
e.preventDefault();
if (selectedItem) {
const path = selectedItem.getAttribute('data-path');
// 如果是目录，在目录下新建；如果是文件，在相同目录新建
const isDirectory = selectedItem.classList.contains('directory');
const basePath = isDirectory ? path : path.substring(0, path.lastIndexOf('/'));
window.location.href = '?action=new&dir=' + encodeURIComponent(basePath);
}
});
document.getElementById('contextEdit').addEventListener('click', function(e) {
e.preventDefault();
if (selectedItem) {
const path = selectedItem.getAttribute('data-path');
window.location.href = '?path=' + encodeURIComponent(path) + '&action=edit';
}
});
// 移动文件模态框
const moveModal = document.getElementById('moveModal');
const moveModalClose = document.getElementById('moveModalClose');
const confirmMove = document.getElementById('confirmMove');
const cancelMove = document.getElementById('cancelMove');
document.getElementById('contextMove').addEventListener('click', function(e) {
e.preventDefault();
if (selectedItem) {
// 显示模态框
moveModal.style.display = 'flex';
// 设置源文件路径
const path = selectedItem.getAttribute('data-path');
document.getElementById('source-file-path').textContent = path;
// 设置当前目录为默认选项
const currentDir = path.substring(0, path.lastIndexOf('/'));
const targetDirectory = document.getElementById('targetDirectory');
// 查找并选中当前目录
for (let i = 0; i < targetDirectory.options.length; i++) {
if (targetDirectory.options[i].value === currentDir) {
targetDirectory.selectedIndex = i;
break;
}
}
}
});
// 关闭模态框
moveModalClose.addEventListener('click', function() {
moveModal.style.display = 'none';
});
cancelMove.addEventListener('click', function() {
moveModal.style.display = 'none';
});
// 确认移动
confirmMove.addEventListener('click', function() {
if (selectedItem) {
const path = selectedItem.getAttribute('data-path');
const newDir = document.getElementById('targetDirectory').value;
// 添加调试信息
console.log("移动操作:");
console.log("源路径:", path);
console.log("目标目录:", newDir);
console.log("文件名:", path.split(/[/\\]/).pop());
if (confirm('确定要将文件 "' + path.split(/[/\\]/).pop() + '" 移动到 "' + (newDir === '' ? '根目录' : newDir) + '" 吗？')) {
const form = document.createElement('form');
form.method = 'post';
form.innerHTML = '<input type="hidden" name="move_path" value="' + path + '">' +
'<input type="hidden" name="new_directory" value="' + newDir + '">' +
'<input type="hidden" name="move_article" value="1">';
document.body.appendChild(form);
form.submit();
}
}
moveModal.style.display = 'none';
});
document.getElementById('contextDelete').addEventListener('click', function(e) {
e.preventDefault();
if (selectedItem) {
const path = selectedItem.getAttribute('data-path');
const isDirectory = selectedItem.classList.contains('directory');
const itemName = selectedItem.querySelector('.tree-name').textContent;
if (isDirectory) {
if (confirm(`确定要删除目录 "${itemName}" 吗？\n\n注意：只能删除空目录。如果目录包含文件或子目录，删除操作将失败。`)) {
const form = document.createElement('form');
form.method = 'post';
form.innerHTML = '<input type="hidden" name="delete_path" value="' + path + '">' +
'<input type="hidden" name="delete_directory" value="1">';
document.body.appendChild(form);
form.submit();
}
} else {
if (confirm('确定要删除这篇文章吗？')) {
const form = document.createElement('form');
form.method = 'post';
form.innerHTML = '<input type="hidden" name="delete_path" value="' + path + '">' +
'<input type="hidden" name="delete_article" value="1">';
document.body.appendChild(form);
form.submit();
}
}
}
});
// 重命名模态框
const renameModal = document.getElementById('renameModal');
const renameModalClose = document.getElementById('renameModalClose');
const confirmRename = document.getElementById('confirmRename');
const cancelRename = document.getElementById('cancelRename');
const renameCurrentPath = document.getElementById('rename-current-path');
const renameCurrentName = document.getElementById('rename-current-name');
const newItemName = document.getElementById('newItemName');
document.getElementById('contextRename').addEventListener('click', function(e) {
e.preventDefault();
if (selectedItem) {
const path = selectedItem.getAttribute('data-path');
const isDirectory = selectedItem.classList.contains('directory');
const isFile = selectedItem.classList.contains('file');
console.log("原始路径:", path); // 调试信息
// 获取纯文件名（不含路径）- 处理两种路径分隔符
let fileName = path;
if (path.includes('/') || path.includes('\\')) {
// 如果有路径分隔符，取最后一部分
// 使用正则表达式处理两种路径分隔符
const pathParts = path.split(/[/\\]/);
fileName = pathParts[pathParts.length - 1];
}
console.log("提取的文件名:", fileName); // 调试信息
// 对于文件，移除扩展名
let displayName = fileName;
if (isFile && fileName.includes('.')) {
displayName = fileName.substring(0, fileName.lastIndexOf('.'));
}
console.log("显示名称:", displayName); // 调试信息
// 获取路径部分（不含文件名）
let dirPath = '';
if (path.includes('/') || path.includes('\\')) {
// 使用正则表达式处理两种路径分隔符
const lastSeparatorIndex = Math.max(
path.lastIndexOf('/'),
path.lastIndexOf('\\')
);
dirPath = path.substring(0, lastSeparatorIndex);
} else {
dirPath = '根目录';
}
// 显示模态框
renameModal.style.display = 'flex';
renameCurrentPath.textContent = dirPath;
renameCurrentName.textContent = fileName; // 显示完整文件名（含扩展名）
newItemName.value = displayName; // 输入框只显示纯文件名（不含路径和扩展名）
newItemName.focus();
// 存储完整路径和项目类型
newItemName.setAttribute('data-full-path', path);
if (isDirectory) {
newItemName.setAttribute('data-item-type', 'directory');
} else {
newItemName.setAttribute('data-item-type', 'file');
}
}
});
// 关闭重命名模态框
renameModalClose.addEventListener('click', function() {
renameModal.style.display = 'none';
});
cancelRename.addEventListener('click', function() {
renameModal.style.display = 'none';
});
// 确认重命名
confirmRename.addEventListener('click', function() {
console.log("确认重命名按钮被点击"); // 调试信息
const fullPath = newItemName.getAttribute('data-full-path');
const newName = newItemName.value.trim();
const itemType = newItemName.getAttribute('data-item-type');
console.log("完整路径:", fullPath); // 调试信息
console.log("新名称:", newName); // 调试信息
console.log("项目类型:", itemType); // 调试信息
if (!newName) {
alert('请输入新的名称！');
return;
}
// 检查新名称是否包含路径分隔符
if (newName.includes('/') || newName.includes('\\')) {
alert('名称中不能包含路径分隔符！');
return;
}
// 对于文件，自动添加.md扩展名
let finalNewName = newName;
if (itemType === 'file') {
if (!finalNewName.endsWith('.md')) {
finalNewName += '.md';
}
}
console.log("最终名称:", finalNewName); // 调试信息
// 提交表单
const form = document.createElement('form');
form.method = 'post';
form.innerHTML = '<input type="hidden" name="rename_path" value="' + fullPath + '">' +
'<input type="hidden" name="new_name" value="' + finalNewName + '">' +
'<input type="hidden" name="rename_item" value="1">';
document.body.appendChild(form);
console.log("准备提交表单"); // 调试信息
form.submit();
renameModal.style.display = 'none';
});
// 点击模态框外部关闭
renameModal.addEventListener('click', function(e) {
if (e.target === renameModal) {
renameModal.style.display = 'none';
}
});
// 在输入框中按Enter键确认重命名
newItemName.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
confirmRename.click();
}
});
// 插入表头功能
const insertHeaderBtn = document.getElementById('insert-header');
if (insertHeaderBtn) {
insertHeaderBtn.addEventListener('click', function() {
const defaultHeader = `\`\`\`
title: 新文章
author: 零贰
date: 2025-11-30 04:29:22
category: [未分类]
tags: []
draft: false
\`\`\`\n\n\n`;
const textarea = document.getElementById('new_content') || document.getElementById('edit_content');
if (textarea) {
// 在光标位置插入表头
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
textarea.value = textarea.value.substring(0, start) + defaultHeader + textarea.value.substring(end);
// 设置光标位置到插入内容之后
textarea.selectionStart = start + defaultHeader.length;
textarea.selectionEnd = start + defaultHeader.length;
textarea.focus();
}
});
}
// MD格式插入功能
function insertText(text) {
const textarea = document.getElementById('new_content') || document.getElementById('edit_content');
if (textarea) {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const selectedText = textarea.value.substring(start, end);
// 如果有选中文本，用格式包围它
if (selectedText) {
// 根据不同的格式类型处理
if (text.startsWith('**') && text.endsWith('**')) {
textarea.value = textarea.value.substring(0, start) +
'**' + selectedText + '**' +
textarea.value.substring(end);
textarea.selectionStart = start + 2;
textarea.selectionEnd = end + 2;
} else if (text.startsWith('*') && text.endsWith('*')) {
textarea.value = textarea.value.substring(0, start) +
'*' + selectedText + '*' +
textarea.value.substring(end);
textarea.selectionStart = start + 1;
textarea.selectionEnd = end + 1;
} else if (text.startsWith('[') && text.includes('](')) {
textarea.value = textarea.value.substring(0, start) +
'[' + selectedText + '](http://example.com)' +
textarea.value.substring(end);
textarea.selectionStart = start + 1;
textarea.selectionEnd = end + 1;
} else if (text.startsWith(') {
textarea.value = textarea.value.substring(0, start) +
'' +
textarea.value.substring(end);
textarea.selectionStart = start + 2;
textarea.selectionEnd = end + 2;
} else if (text.startsWith('# ') || text.startsWith('- ') || text.startsWith('> ')) {
const lines = selectedText.split('\n');
const formattedLines = lines.map(line => text + line);
textarea.value = textarea.value.substring(0, start) +
formattedLines.join('\n') +
textarea.value.substring(end);
textarea.selectionStart = start;
textarea.selectionEnd = start + formattedLines.join('\n').length;
} else if (text.startsWith('```')) {
textarea.value = textarea.value.substring(0, start) +
'```\n' + selectedText + '\n```' +
textarea.value.substring(end);
textarea.selectionStart = start + 4;
textarea.selectionEnd = end + 4;
} else {
// 默认直接插入
textarea.value = textarea.value.substring(0, start) +
text +
textarea.value.substring(end);
textarea.selectionStart = start + text.length;
textarea.selectionEnd = start + text.length;
}
} else {
// 没有选中文本，直接插入
textarea.value = textarea.value.substring(0, start) +
text +
textarea.value.substring(end);
textarea.selectionStart = start + text.length;
textarea.selectionEnd = start + text.length;
}
textarea.focus();
}
}
// 分类和归档的展开/折叠功能
document.addEventListener('click', function(e) {
if (e.target.classList.contains('toggle-section') || e.target.closest('.toggle-section')) {
const target = e.target.classList.contains('toggle-section') ? e.target : e.target.closest('.toggle-section');
const targetId = target.getAttribute('data-target');
const content = document.getElementById(targetId);
const icon = target.querySelector('.toggle-icon');
if (content.classList.contains('expanded')) {
content.classList.remove('expanded');
content.style.display = 'none';
icon.textContent = '+';
} else {
content.classList.add('expanded');
content.style.display = 'block';
icon.textContent = '−';
}
}
});
// 移动端菜单切换
const mobileMenuLeft = document.getElementById('mobile-menu-left');
const mobileMenuRight = document.getElementById('mobile-menu-right');
const sidebar = document.getElementById('sidebar');
const rightSidebar = document.getElementById('right-sidebar');
if (mobileMenuLeft && sidebar) {
mobileMenuLeft.addEventListener('click', function() {
sidebar.classList.toggle('active');
if (rightSidebar) rightSidebar.classList.remove('active');
});
}
if (mobileMenuRight && rightSidebar) {
mobileMenuRight.addEventListener('click', function() {
rightSidebar.classList.toggle('active');
if (sidebar) sidebar.classList.remove('active');
});
}
// 点击页面其他地方关闭移动端菜单
document.addEventListener('click', function(e) {
if (!e.target.closest('.sidebar') && !e.target.closest('#mobile-menu-left') && sidebar) {
sidebar.classList.remove('active');
}
if (!e.target.closest('.right-sidebar') && !e.target.closest('#mobile-menu-right') && rightSidebar) {
rightSidebar.classList.remove('active');
}
});
// 移除所有按钮的焦点边框
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('button, .fixed-btn, .left-fixed-btn, .logout-btn');
buttons.forEach(button => {
button.addEventListener('focus', function() {
this.blur();
});
});
});
</script>
</body>
</html>]]> 