网上看到一个很简单纯粹的写作页面，觉得很不错，想摘下来做成一个单独的源码包，既可以上传到仓库做成一个项目，供其他人搭建一个单独的写作页面，也用来给自己嵌入到博客网站。
网页地址：Zen
网页下载及修改
进入页面https://zen.unit.ms，查看源码(ctrl+U)把代码给全部下载至本地，Zen.html。
VS code打开Zen.html，删除谷歌统计的无用脚本，将其他Css、Js、音频文件、图片Logo等网页路径资源全部下载到本地，并按代码中的路径存放，保证代码中的路径与文件一致。
里面的音频文件在html页面找不到，记录在js/bundle.js里面，而这个文件被压缩了，不便于查找；
我使用手机浏览器Via进入页面使用资源嗅探，找到三个音频文件路径：
https://zen.unit.ms/sfx/manual_key.ogg
https://zen.unit.ms/sfx/manual_return.ogg
https://zen.unit.ms/sfx/manual_space.ogg同样，把这三个文件下载下来，并保存在根目录下的sfx文件下即可正常听到打字的声音。
文件目录结构如下：
修改代码如下：
<!DOCTYPE html>
<html>
<head>
<!-- MISC/META -->
<title>Zen - Online Text Editor</title>
<meta charset="utf-8">
<meta name="description" content="Zen by Unit is a free, minimal, fast, private writing app. Just open and use.">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
<!-- CSS -->
<link href="css/zencss.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" media="all">
<!-- Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
<body class="scheme-light" style="display: none">
<div class="overlay">
<div class="description modal">
<h1>About Zen</h1>
<p>
Zen is clean and simple web text editor modified by <a href="http://xmq.plus/" target="_blank">肆零肆</a> Individual.
<br />It's 100% private and stores all the data only locally in your browser.
<br /><br />
<a href="https://xmq.plus" target="_blank">Blog</a>
| <a href="https://github.com/Sumsung524" target="_blank">Github</a>
| <a href="mailto:me@xmq.plus">Email</a>
<br /><br />
Support Zen:
<br /><a href="https://forms.gle/bFebcfkb7D4qwcY9A" target="_blank">Help improve Zen</a>
<br /><a href="https://www.producthunt.com/posts/zen-by-unit" target="_blank">Vote on Product Hunt</a>
<br /><br />
说明:
<br />本页面经过修改，嵌入博客网站，方便个人，随时记录
<br />沉浸式纯文本写作，支持Markdown预览
<br />写下的内容，会在下一次打开时与你邂逅
<br />具体操作查看快捷键
<br />写作全英文界面，说明有疑问自行翻译
<br />页面没有问题，可能只是你不会用
<br />东西很简单，希望你能喜欢
<br />如果你也想拥有一个属于自己的，Github有源码
<br />Nothing to type...over
<!-- <br /><a href="https://fonts.google.com/" target="_blank">Google Fonts</a> -->
<!-- <br /><a href="https://fontawesome.com/" target="_blank">Font Awesome icons</a> -->
<!-- <br /><a href="https://freesound.org/people/juskiddink/sounds/75105/" target="_blank">Manual typewriter sounds</a> -->
<!-- <br /><a href="http://www.showdownjs.com/" target="_blank">ShowdownJS</a> -->
<!-- <br /><a href="https://github.com/tholman" target="_blank">Tim Holman</a> for <a href="https://github.com/tholman/zenpen" target="_blank">Zenpen</a> -->
<!-- <br /><br />Copyright © <script>document.write(new Date().getFullYear())</script> Unit -->
</p>
</div>
<div class="help-modal modal">
<h1>Help</h1>
<p>
<h2>Features</h2>
<table class="shortcuts-table">
<tr><td>Fullscreen</td><td><code>Ctrl/Cmd + Shift + F</code></td></tr>
<tr><td>Change font</td><td><code>Ctrl/Cmd + Shift + A</code></td></tr>
<tr><td>Change theme</td><td><code>Ctrl/Cmd + Shift + E</code></td></tr>
<tr><td>Typewriter sounds</td><td><code>Ctrl/Cmd + Shift + Y</code></td></tr>
<tr><td>Markdown mode</td><td><code>Ctrl/Cmd + Shift + M</code></td></tr>
<tr><td>Print</td><td><code>Ctrl/Cmd + Shift + P</code><br><code>Ctrl/Cmd + P</code></td></tr>
<tr><td>Download</td><td><code>Ctrl/Cmd + Shift + S</code><br><code>Ctrl/Cmd + S</code></td></tr>
</table>
<br /><h2>Markdown</h2>
<table class="shortcuts-table">
<tr><td>Bold</td><td><code>Ctrl/Cmd + B</code></td></tr>
<tr><td>Italic</td><td><code>Ctrl/Cmd + I</code></td></tr>
<tr><td>Insert link</td><td><code>Ctrl/Cmd + K</code></td></tr>
<tr><td>Code block</td><td><code>Ctrl/Cmd + Shift + C</code></td></tr>
</table>
</p>
</div>
</div>
<div class="ui">
<div class="wrapper">
<div class="top editing icons">
<button class="fullscreen" title="Toggle fullscreen"><i class="fa fa-expand-arrows-alt"></i></button>
<button class="font-flip" title="Change font"><i class="fa fa-font"></i></button>
<button class="color-flip" title="Change color scheme"><i class="fa fa-tint"></i></button>
<button class="sfx-mute" title="Typewriter sounds"><i class="fa fa-volume-off"></i></button>
<button class="markdown" title="Markdown"><i class="fab fa-markdown"></i></button>
<button class="print" title="Print"><i class="fas fa-print"></i></button>
<button class="download" title="Download text"><i class="fa fa-download"></i></button>
<!-- <button class="send" title="Send to Unit"><i class="fa fa-send"></i></button> -->
</div>
<div class="bottom icons">
<button class="Site" title="Site on 肆零肆" onclick="window.open('https://xmq.plus', '_blank')"><i class="fab fa-product-hunt"></i></button>
<button class="help" title="Help"><i class="fa fa-question"></i></button>
<button class="about" title="About"><i class="fa fa-info"></i></button>
</div>
</div>
</div>
<div class="statistic-container">
<div class="wrapper">
<div class="bottom statistic"></div>
</div>
</div>
<section>
<article
contenteditable="true"
class="content"
data-placeholder="Type your text. When you return it will be still here."></article>
<div class="markdown-showcase" style="display: none"></div>
</section>
<!-- JS -->
<script src="js/fc47806bb4.js"></script>
<script src="js/bundle.js"></script>
</body>
</html>只是把一些没用的内容或者信息进行删除或者修改，将路径对应到本地文件；
VScode F5调试一下，测试和原网页完全一致，表示都齐全了；
打包上传Github
使用说明手册Github_docs
登录Github，创建新仓库Sumsung524/Zen，不设置readme等文件。
使用Git bash定位到将本地网页文件夹Zen，连接Github中新建仓库并推送：
cd ~/desktop/zen/
git init
git remote add origin git@github.com:Sumsung524/zen.git
git add *
git commit -m "first submit"
git push -u origin master嵌入Hexo博客
新建页面
hexo new page "zen" 根目录下source/zen/index.md文件下编辑：
---
title: zen
date: 2022-03-29 13:32:13
type: "zen"
layout: "zen"
---主题文件下layout/新建zen.ejs文件，复制Zen.html代码内容到文件中，并在最前方加入，阻止hexo主题渲染：
---
layout: false
---html已经嵌入了，接下来放入其所需的js、css、音频、logo等文件
为了保证后期区分zen文件，在原有的js、css、音频文件上修改名称，加入前缀Zen_css
文件都存放在主题目录下source/css、source/js、source/sfx、source/images/Zen_logo（新建）
因为文件路径发生变化，在zen.ejs文件中修改移动路径，确保文件与路径一一对应。
具体路径修改如下：
CSS
style.css改zen_style.css，zencss.css改zen_css.css,保证格式统一，防止重复文件名称：
<!-- CSS -->
<link href="/css/zencss.css" rel="stylesheet">
<link href="/css/zenstyle.css" rel="stylesheet" media="all">images/Zen_logo
<!-- Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/images/Zen_logo/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/Zen_logo/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/Zen_logo/favicon-16x16.png">
<link rel="manifest" href="/images/Zen_logo/site.webmanifest">
<link rel="mask-icon" href="/images/Zen_logo/safari-pinned-tab.svg" color="#5bbad5">JS
对应文件同样改名
<script src="/js/zen_fc47806bb4.js"></script>
<script src="/js/zen_bundle.js"></script>js、logo、css都移入了，最后将音频文件的sfx文件夹移入source/文件下，路径没有发生改变，所以不需要改。
如果为了辨别sfx文件夹是属于zen页面，想命名sfx文件夹为zen_sfx，则需要在zen_bundle.js文件中查找sfx/文件夹关内容，全部替换为/zen_sfx（只需要替换6个，最后一个sfx.mute不替换）
到这里挂本地服务器测试一下
hexo s 进入页面如果功能都正常使用，则测试成功。
选项栏添加Zen按钮
页面嵌入成功后，需要设置一个进入按钮，决定在首页顶栏、和导航页右上角添加，方便自己随时能够进行记录。
首页栏添加按钮
主题目录下_config.yml文件下menu下添加：
Zen:
url: /zen
icon: fas fa-solid fa-keyboard导航页添加按钮
在右侧栏windows软件下面添加
nav.ejs添加
<!--关于页面-->
<% if (theme.navabout) { %>
<li class="submit-tag">
<a href="<%= url_for(theme.navabout.url1) %>">
<i class="<%= theme.navabout.icon1 %>"></i>
<span class="tooltip-blue"><%= theme.navabout.name1 %></span>
</a>
<a href="<%= url_for(theme.navabout.url2) %>">
<i class="<%= theme.navabout.icon2 %>"></i>
<span class="tooltip-blue"><%= theme.navabout.name2 %></span>
</a>
<a href="<%= url_for(theme.navabout.url3) %>">
<i class="<%= theme.navabout.icon3 %>"></i>
<span class="tooltip-blue"><%= theme.navabout.name3 %></span>
</a>
</li>
<% } %>主题目录下_config.yml文件下navabout下添加：
navabout:
url1: /windows/
icon1: fab fa-windows
name1: Windows软件
url2: /zen
icon2: fas fa-solid fa-keyboard
name2: Zen
name3: 关于
icon3: fas fa-info-circle
url3: /aboutnav
