在知道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>标签数量: 107</div>
<div>最新文章: Wikitten使用说明</div>
<div>更新于: 2025-12-02 05:17:43</div>
</div>
</div>
<!-- 最新文章 -->
<div class="sidebar-widget">
<h3>最新文章</h3>
<div class="widget-list">
<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">20241101</span></a><a href="?path=%E9%9B%B6%E5%9D%80%E5%AF%BC%E8%88%AA.md" title="零址导航"><span class="title">零址导航</span><span class="date">20240625</span></a><a href="?path=C3.Web%2FPHP%2FPHP%E6%88%AA%E5%8F%96%E4%B8%AD%E6%96%87%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%92%8C%E6%97%A5%E6%9C%9F%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%88%AA%E5%8F%96.md" title="PHP截取中文字符串和日期字符串截取"><span class="title">PHP截取中文字符串和日期字符串截取</span><span class="date">20230902</span></a><a href="?path=Software%2FOfficeSoft%2F%E7%A0%B4%E8%A7%A3EXCEL%E5%B7%A5%E4%BD%9C%E8%A1%A8%E4%BF%9D%E6%8A%A4%E5%AF%86%E7%A0%81.md" title="破解EXCEL工作表保护密码"><span class="title">破解EXCEL工作表保护密码</span><span class="date">20230830</span></a><a href="?path=Software%2F%E5%90%BE%E7%88%B1%E7%A0%B4%E8%A7%A3%E4%B8%93%E7%94%A8%E8%99%9A%E6%8B%9F%E6%9C%BA2.0.md" title="吾爱破解专用虚拟机2.0"><span class="title">吾爱破解专用虚拟机2.0</span><span class="date">20230830</span></a><a href="?path=Software%2FK8%E5%B7%A5%E5%85%B7%E5%90%88%E9%9B%86.md" title="K8工具合集"><span class="title">K8工具合集</span><span class="date">20230830</span></a><a href="?path=Software%2FVentoyU%E7%9B%98%E5%90%AF%E5%8A%A8%E7%9B%98%E5%88%B6%E4%BD%9C%E5%B7%A5%E5%85%B7.md" title="Ventoy-U盘启动盘制作工具"><span class="title">Ventoy-U盘启动盘制作工具</span><span class="date">20230726</span></a><a href="?path=Software%2F%E9%9A%90%E8%97%8FRoot+-+Zygisk%E7%89%88%E9%9D%A2%E5%85%B7Magisk.md" title="隐藏Root - Zygisk版面具Magisk"><span class="title">隐藏Root - Zygisk版面具Magisk</span><span class="date">20230726</span></a><a href="?path=Software%2FOfficeSoft%2FVBA%E8%8E%B7%E5%8F%96%E6%8C%87%E5%AE%9A%E5%B7%A5%E4%BD%9C%E8%A1%A8%E7%9A%84%E8%A1%8C%E6%95%B0%E3%80%81%E5%88%97%E6%95%B0.md" title="VBA获取指定工作表的行数、列数"><span class="title">VBA获取指定工作表的行数、列数</span><span class="date">20230620</span></a><a href="?path=Software%2FOfficeSoft%2FExcel%E4%B8%AD%E4%BD%BF%E7%94%A8VBA%E5%8E%BB%E9%99%A4%E5%8D%95%E5%85%83%E6%A0%BC%E5%86%85%E7%9A%84%E6%8D%A2%E8%A1%8C%E7%AC%A6.md" title="Excel中使用VBA去除单元格内的换行符"><span class="title">Excel中使用VBA去除单元格内的换行符</span><span class="date">20230620</span></a> </div>
</div>
<!-- 随机文章 -->
<div class="sidebar-widget">
<h3>随机文章</h3>
<div class="widget-list">
<a href="?path=C3.Web%2F%E7%BD%91%E7%AB%99%E7%81%B0%E8%89%B2%E8%B0%83%E4%BB%A3%E7%A0%81.md" title="8.15哀悼日缅舟曲同胞-附网站灰色调代码"><span class="title">8.15哀悼日缅舟曲同胞-附网站灰色调代码</span><span class="date">20100815</span></a><a href="?path=C1.MyCode%2F%E7%BD%91%E5%85%B3%E6%A3%80%E6%B5%8B.md" title="网关检测"><span class="title">网关检测</span><span class="date">20120120</span></a><a href="?path=C3.Web%2FPHP%E4%B8%BA%E4%BB%BB%E6%84%8F%E9%A1%B5%E9%9D%A2%E8%AE%BE%E8%AE%BF%E9%97%AE%E5%AF%86%E7%A0%81.md" title="PHP为任意页面设访问密码"><span class="title">PHP为任意页面设访问密码</span><span class="date">20190406</span></a><a href="?path=C2.VC6.MFC%2FSHGetSpecialFolderPath%E8%8E%B7%E5%8F%96%E7%89%B9%E6%AE%8A%E8%B7%AF%E5%BE%84.md" title="SHGetSpecialFolderPath获取特殊路径"><span class="title">SHGetSpecialFolderPath获取特...</span><span class="date">20181112</span></a><a href="?path=C1.MyCode%2FCopy+VC6%E7%94%9F%E6%88%90Exe%E6%96%87%E4%BB%B6%E5%88%B0%E6%96%B0%E7%9A%84%E7%9B%AE%E5%BD%95.md" title="Copy VC6生成Exe文件到新的目录"><span class="title">Copy VC6生成Exe文件到新的目录</span><span class="date">20171113</span></a><a href="?path=Software%2FOS%2FWindowsXP%E5%B8%B8%E7%94%A8%E6%B3%A8%E5%86%8C%E8%A1%A8%E6%93%8D%E4%BD%9C.md" title="WindowsXP常用注册表操作"><span class="title">WindowsXP常用注册表操作</span><span class="date">20110113</span></a><a href="?path=C2.VC6.MFC%2Fmfc+%E6%B5%8F%E8%A7%88%E5%99%A8%E7%AA%97%E5%8F%A3%E5%86%85%E7%9A%84%E5%86%85%E5%AE%B9%E4%BF%9D%E5%AD%98%E4%B8%BA%E5%9B%BE%E7%89%87%E6%88%96pdf.md" title="mfc 浏览器窗口内的内容保存为图片或pdf"><span class="title">mfc 浏览器窗口内的内容保存为图片或pdf</span><span class="date">20160220</span></a><a href="?path=C3.Web%2F%E5%8A%A0%E5%85%A5%E7%BD%91%E9%A1%B5%E7%BB%9F%E8%AE%A1%E4%BB%A3%E7%A0%81.md" title="加入网页统计代码"><span class="title">加入网页统计代码</span><span class="date">20081025</span></a><a href="?path=C3.Web%2F%E4%BD%BF%E7%94%A8strapdown.js%E8%A7%A3%E6%9E%90markdown.md" title="使用strapdown.js解析markdown"><span class="title">使用strapdown.js解析markdown</span><span class="date">20200203</span></a><a href="?path=C2.VC6.MFC%2FCRichEditCtrl+GetLine+%E4%B8%AD%E6%96%87.md" title="CRichEditCtrl GetLine 中文"><span class="title">CRichEditCtrl GetLine 中文</span><span class="date">20190703</span></a> </div>
</div>
<!-- 日历 -->
<div class="sidebar-widget">
<h3>日历</h3>
<div class="calendar"><div class="calendar-header"><a href="?year=1970&month=10" class="calendar-nav"><</a><span>1970年11月</span><a href="?year=1970&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 empty"></div><div class="calendar-day" title="1970-11-01">1</div><div class="calendar-day" title="1970-11-02">2</div><div class="calendar-day" title="1970-11-03">3</div><div class="calendar-day" title="1970-11-04">4</div><div class="calendar-day" title="1970-11-05">5</div><div class="calendar-day" title="1970-11-06">6</div><div class="calendar-day" title="1970-11-07">7</div><div class="calendar-day" title="1970-11-08">8</div><div class="calendar-day" title="1970-11-09">9</div><div class="calendar-day" title="1970-11-10">10</div><div class="calendar-day" title="1970-11-11">11</div><div class="calendar-day" title="1970-11-12">12</div><div class="calendar-day" title="1970-11-13">13</div><div class="calendar-day" title="1970-11-14">14</div><div class="calendar-day" title="1970-11-15">15</div><div class="calendar-day" title="1970-11-16">16</div><div class="calendar-day" title="1970-11-17">17</div><div class="calendar-day" title="1970-11-18">18</div><div class="calendar-day" title="1970-11-19">19</div><div class="calendar-day" title="1970-11-20">20</div><div class="calendar-day" title="1970-11-21">21</div><div class="calendar-day" title="1970-11-22">22</div><div class="calendar-day" title="1970-11-23">23</div><div class="calendar-day" title="1970-11-24">24</div><div class="calendar-day" title="1970-11-25">25</div><div class="calendar-day" title="1970-11-26">26</div><div class="calendar-day" title="1970-11-27">27</div><div class="calendar-day" title="1970-11-28">28</div><div class="calendar-day" title="1970-11-29">29</div><div class="calendar-day" title="1970-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 deleteModal = document.getElementById('deleteModal');
const deleteModalClose = document.getElementById('deleteModalClose');
const confirmDelete = document.getElementById('confirmDelete');
const cancelDelete = document.getElementById('cancelDelete');
// 关闭删除模态框
deleteModalClose.addEventListener('click', function() {
deleteModal.style.display = 'none';
});
cancelDelete.addEventListener('click', function() {
deleteModal.style.display = 'none';
});
// 确认删除
confirmDelete.addEventListener('click', function() {
const path = this.getAttribute('data-path');
const isDirectory = this.getAttribute('data-is-directory') === 'true';
const form = document.createElement('form');
form.method = 'post';
if (isDirectory) {
form.innerHTML = '<input type="hidden" name="delete_path" value="' + path + '">' +
'<input type="hidden" name="delete_directory" value="1">';
} else {
form.innerHTML = '<input type="hidden" name="delete_path" value="' + path + '">' +
'<input type="hidden" name="delete_article" value="1">';
}
document.body.appendChild(form);
form.submit();
deleteModal.style.display = 'none';
});
// 点击模态框外部关闭
deleteModal.addEventListener('click', function(e) {
if (e.target === deleteModal) {
deleteModal.style.display = 'none';
}
});
// 移动文件模态框
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';
// 重置复制复选框
document.getElementById('copyCheckbox').checked = false;
document.getElementById('confirmMove').textContent = '确认移动';
document.querySelector('#moveModal .modal-title').textContent = '移动文件';
// 设置源文件路径
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;
const isCopy = document.getElementById('copyCheckbox').checked;
// 添加调试信息
console.log("操作类型:", isCopy ? "复制" : "移动");
console.log("源路径:", path);
console.log("目标目录:", newDir);
console.log("文件名:", path.split(/[/\\]/).pop());
const operationText = isCopy ? "复制" : "移动";
const confirmMessage = `确定要${operationText}文件 "${path.split(/[/\\]/).pop()}" 到 "${newDir === '' ? '根目录' : newDir}" 吗？`;
if (confirm(confirmMessage)) {
const form = document.createElement('form');
form.method = 'post';
if (isCopy) {
form.innerHTML = '<input type="hidden" name="copy_path" value="' + path + '">' +
'<input type="hidden" name="target_directory" value="' + newDir + '">' +
'<input type="hidden" name="copy_article" value="1">';
} else {
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('copyCheckbox').addEventListener('change', function() {
const isCopy = this.checked;
const confirmButton = document.getElementById('confirmMove');
const modalTitle = document.querySelector('#moveModal .modal-title');
if (isCopy) {
confirmButton.textContent = '确认复制';
modalTitle.textContent = '复制文件';
} else {
confirmButton.textContent = '确认移动';
modalTitle.textContent = '移动文件';
}
});
// 替换原来的删除事件处理代码，完全使用模态框
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;
// 显示删除确认模态框
deleteModal.style.display = 'flex';
// 设置删除信息
document.getElementById('delete-item-type').textContent = isDirectory ? '目录' : '文件';
document.getElementById('delete-item-name').textContent = itemName;
document.getElementById('delete-item-path').textContent = path;
// 存储删除信息
document.getElementById('confirmDelete').setAttribute('data-path', path);
document.getElementById('confirmDelete').setAttribute('data-is-directory', isDirectory);
// 如果是目录，显示额外警告
const extraWarning = document.getElementById('delete-extra-warning');
if (isDirectory) {
extraWarning.innerHTML = '<p style="color: #e67e22; margin-top: 10px;"><strong>注意：只能删除空目录。如果目录包含文件或子目录，删除操作将失败。</strong></p>';
extraWarning.style.display = 'block';
} else {
extraWarning.style.display = 'none';
}
}
});
// 重命名模态框
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-12-02 05:17:44
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>]]> 