diff --git a/static/public/dnfs.html b/static/public/dnfs.html
index 2887e4d..23946c8 100644
--- a/static/public/dnfs.html
+++ b/static/public/dnfs.html
@@ -5,95 +5,46 @@
 		<!-- 移动端适配核心标签 -->
 		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
 		<title>DNFS · 树状笔记</title>
-		<style></style>
+		<style>
+			code {
+				color: red;
+				background-color: rgb(254, 235, 238);
+				padding: 5px;
+				border-radius: 5px;
+			}
+			pre > code {
+				display: block;
+				color: white;
+				background-color: rgb(96, 96, 96);
+				padding: 5px;
+				border-radius: 5px;
+			}
+			blockquote {
+				margin-right: 0px;
+				background-color: #cfcfcf;
+			}
+		</style>
 	</head>
 	<body>
+		<center>
 		<!-- 文章主标题 -->
-		<div id="article-title">
-			<h1>
-				<p>Python</p>
-			</h1>
-		</div>
+		<h1><div id="article-title">Python</div></h1>
 
 		<!-- 文章详情 -->
-		<div id="publish-time">
-			<p>发布时间：2026-07-11</p>
+		<div>
+			发布时间：<span id="publish-time">title</span>
 		</div>
 		<div>
-			<span id="visit-count">浏览：126</span>
-			<span id="like-count">点赞：28</span>
-			<span id="share-count">分享：7</span>
+			浏览：<span id="visit-count">999</span>
+			点赞：<span id="like-count">999</span>
+			分享：<span id="share-count">999</span>
 		</div>
-
+		</center>
 		<!-- 文章正文-->
-		<div id="article-content">
-			<p>
-				Python 的 <code>socket</code>
-				模块是网络编程的核心，其函数可分为<strong>核心套接字操作</strong>、<strong>套接字选项设置</strong>、<strong>辅助工具函数</strong>三大类。本文将逐一拆解所有函数的语法、参数、用法和实战示例，覆盖从基础到高级的所有场景。
-			</p>
-
-			<h2>一、模块初始化与核心对象</h2>
-			<h3>1. socket.socket()：创建套接字对象</h3>
-			<p><strong>语法</strong>：</p>
-			<pre><code>socket.socket(family=AF_INET, type=SOCK_STREAM, proto=0, fileno=None)</code></pre>
-			<p><strong>作用</strong>：创建一个套接字对象，是所有网络操作的基础。</p>
-			<p><strong>参数说明</strong>：</p>
-			<table>
-				<tr>
-					<th>参数</th>
-					<th>取值</th>
-					<th>说明</th>
-				</tr>
-				<tr>
-					<td><code>family</code></td>
-					<td><code>AF_INET</code>（默认）</td>
-					<td>IPv4 协议族（最常用）</td>
-				</tr>
-				<tr>
-					<td></td>
-					<td><code>AF_INET6</code></td>
-					<td>IPv6 协议族</td>
-				</tr>
-				<tr>
-					<td></td>
-					<td><code>AF_UNIX</code></td>
-					<td>Unix 域套接字（本地进程通信）</td>
-				</tr>
-				<tr>
-					<td><code>type</code></td>
-					<td><code>SOCK_STREAM</code>（默认）</td>
-					<td>TCP 套接字（面向连接、可靠）</td>
-				</tr>
-				<tr>
-					<td></td>
-					<td><code>SOCK_DGRAM</code></td>
-					<td>UDP 套接字（无连接、数据报）</td>
-				</tr>
-				<tr>
-					<td></td>
-					<td><code>SOCK_RAW</code></td>
-					<td>原始套接字（可操作 IP 层，用于抓包）</td>
-				</tr>
-				<tr>
-					<td><code>proto</code></td>
-					<td>0（默认）</td>
-					<td>协议编号，默认自动匹配 type（TCP=6，UDP=17）</td>
-				</tr>
-				<tr>
-					<td><code>fileno</code></td>
-					<td>None（默认）</td>
-					<td>复用已有文件描述符，无需手动指定</td>
-				</tr>
-			</table>
-		</div>
-		<div>
-			<label>新增节点</label><input id="input-note-title"></input><br>
-			<label>节点内容</label><textarea id="input-note-content"></textarea><br>
-			<button id="input-note-submit">提交</button>
-			<button id="input-note-clear">重置</button>
-		</div>
+		<div id="article-content">hello</div>
+		<hr>
 		<div class="other-recommend">
-			<!--<h3>其他推荐</h3> -->
+			<h3>其他推荐</h3>
 		</div>
 		<div class="recommend-list" id="recommend-list">
 			<ul>
@@ -104,6 +55,15 @@
 				<li><a href="https://www.baidu.com">百度推荐</a></li>
 			</ul>
 		</div>
+		<br>
+		<h3>节点操作</h3>
+		<div>
+			<label>新增节点</label><input id="input-note-title"></input><br>
+			<label>节点内容</label><textarea id="input-note-content"></textarea><br>
+			<button id="input-note-submit">提交</button>
+			<button id="input-note-clear">重置</button>
+		</div>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.0.0/markdown-it.min.js"></script>
 		<script src="/js/validation.js"></script>
 		<script src="/js/dnfs.js"></script>
 	</body>
diff --git a/static/public/js/dnfs.js b/static/public/js/dnfs.js
index 2c2f227..8ce1cbf 100644
--- a/static/public/js/dnfs.js
+++ b/static/public/js/dnfs.js
@@ -92,6 +92,13 @@ async function addNode(token, pid, title, content) {
 	}
 }
 
+function renderMarkdown(element, content) {
+	/*
+	Markdown渲染
+	*/
+	const md = window.markdownit();
+	element.innerHTML = md.render(content);
+}
 
 var article_title = document.getElementById('article-title');
 var article_content = document.getElementById('article-content');