docsify

2026-04-13 18:00:27 +08:00 · 2024-01-15 08:54:18 +08:00
parent b47d4f6d52
commit 3927955428
15 changed files with 143 additions and 2 deletions
--- a/.nojekyll
+++ b/.nojekyll
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@
 - 

 ### 技术篇
- docker
+- [docker](./docker/1%20简介安装.md)
 - git
 - Linux
 - Maven
--- a/_coverage.md
+++ b/_coverage.md
@@ -0,0 +1,7 @@
+<!-- _coverpage.md -->
+
+# Docsify使用指南 
+
+> 💪通灵诗人的个人知识库，欢迎关注。
+
+[开始使用 Let Go](/README.md)
--- a/_navbar.md
+++ b/_navbar.md
@@ -0,0 +1,5 @@
+<!-- _navbar.md -->
+
+* 关注我
+  * [Github地址](https://github.com/Estom)
+  * [Gitee地址](https://gitee.com/Eyestorm)
--- a/_sidebar.md
+++ b/_sidebar.md
@@ -0,0 +1,7 @@
+<!-- _sidebar.md -->
+
+* Typora+Docsify使用指南
+  * [Docsify使用指南](/ProjectDocs/Docsify使用指南.md) <!--注意这里是相对路径-->
+  * [Typora+Docsify快速入门](/ProjectDocs/Typora+Docsify快速入门.md)
+* Docsify部署
+  * [Docsify部署教程](/ProjectDocs/Docsify部署教程.md)
--- a/博客系统需求文档.md
+++ b/博客系统需求文档.md
@@ -18,6 +18,8 @@

 ### 1.3 技术选型

+![Alt text](image/image.png)
+
 当前主要有两套技术方案，一种是纯前端的静态博客，其主要有以下部分组成。
 * 内容数据：博客内容，可以使Markdown或者其他内容撰写的文章，是展示的核心内容，一般以文件的方式存储在硬盘上。
 * 元数据：描述内容的数据，方便用来管理和显示。例如目录和标签，如果是新添加的博客可以按照不同博客的元数据系统展示博客内容。但如果是旧的文章迁移到新的博客系统中，就需要通过特定的脚本或者人工补充的方式将元数据添加到博客系统当中。
@@ -45,7 +47,7 @@
 - 数据管理：vscode + GitHub + Markdown

 前端
- Vue + Element + AdminLTE
+- Vue + Element 


 ### 1.4 需求分析
--- a/博客系统详细设计.md
+++ b/博客系统详细设计.md
@@ -66,5 +66,37 @@

 ## 1 搜索模板

+### 关键词
 * 静态模板
 * UI组件库
+* vue blog template
+
+### 资源
+
+大量静态的博客模板。
+* django-blog-tutorial-templates-master 没有框架
+
+
+一个非常精美的vue博客模板
+* poetize-vue2 https://gitee.com/littledokey/poetize-vue2 vue2框架。寻国记的代码和前端、前端非常非常非常精美、功能十分多。有大量相关友链https://poetize.cn/ 
+
+来自github的vue博客模板
+* merakiui/blog-template https://github.com/merakiui/blog-template vue3框架。前端很捡漏，需要自己优化。
+* arpitprod/Vuetify-Blog-Template  https://github.com/arpitprod/Vuetify-Blog-Template vue3 + vuetify框架
+* blog-vue-typescript https://github.com/biaochenxuying/blog-vue-typescript Vue3 + element-plus框架
+* 
+
+## 2 方案
+当前主要采取两个路线。一个是vue路线，一个是themelyfe路线。
+
+### vue路线
+在poetize的代码基础上进行改进。可以省去大量的前端美化工作。工作主要集中在一下几点。
+
+* [ ] 阅读源代码，减少对外部资源的依赖。
+  * [ ] 前端代码阅读 1小时
+  * [ ] 后端代码阅读 1小时
+  * [ ] 聊天室代码阅读 1小时
+* [ ] 手动添加数据 1小时
+* [ ] markdown渲染 1小时
+* [ ] 自动导入笔记 1小时
+
--- a/博客内容指南.md
+++ b/博客内容指南.md
@@ -0,0 +1,26 @@
+## 1 五种类型的文章
+> https://www.semrush.com/blog/blog-post-templates/#pillar-blog-post-template
+
+### 初学者指南（Beginner’s Guide Blog Post Template）
+初学者最关注的问题应该就是how，what，why 的问题，使用这个模板可以很好地解释这类问题。这类型的文章也是流量很大的。
+![](image/2024-01-13-18-47-52.png)
+
+
+### 主干文章（Pillar Blog Post Template）
+pillar 指的是主干，基石的意思，这类的文章一般都会是长青类的文章，不太有时效性，它能够持续的为博客带来流量。它应该作为在一系列关键词中的主干文章，我们可以以这篇文章为主干，去把相关关键词作为枝叶。
+![](image/2024-01-13-18-48-05.png)
+
+
+
+### 下定义类型文章（Definition Blog Post Template）
+![](image/2024-01-13-18-48-36.png)
+
+### How to类型（“How-To” Blog Post Template）
+这类文章的最后适合引出其他的解决方案，可以方便推广我们的产品。
+![](image/2024-01-13-18-48-48.png)
+
+
+### 数字类型文章（Numbered Listicle Blog Post Template）
+数字类型的文章一直是比较好用的方法，带有数字的文章标题通常都会有比较好的浏览量。
+
+![](image/2024-01-13-18-48-59.png)
--- a/blog/博客/image/2024-01-13-18-47-52.png
+++ b/blog/博客/image/2024-01-13-18-47-52.png
--- a/blog/博客/image/2024-01-13-18-48-05.png
+++ b/blog/博客/image/2024-01-13-18-48-05.png
--- a/blog/博客/image/2024-01-13-18-48-36.png
+++ b/blog/博客/image/2024-01-13-18-48-36.png
--- a/blog/博客/image/2024-01-13-18-48-48.png
+++ b/blog/博客/image/2024-01-13-18-48-48.png
--- a/blog/博客/image/2024-01-13-18-48-59.png
+++ b/blog/博客/image/2024-01-13-18-48-59.png
--- a/blog/博客/image/image.png
+++ b/blog/博客/image/image.png
--- a/index.html
+++ b/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>通灵诗人的笔记</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="description" content="Description">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+  <!-- 设置浏览器图标 -->
+  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+window.$docsify = {
+            // 项目名称
+            name: '通灵诗人的笔记',
+            // 仓库地址，点击右上角的Github章鱼猫头像会跳转到此地址
+            repo: 'https://github.com/Estom/notes',
+            // 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
+            // loadSidebar: true,
+            // 导航栏支持，默认加载的是项目根目录下的_navbar.md文件
+            loadNavbar: true,
+            // 封面支持，默认加载的是项目根目录下的_coverpage.md文件
+            coverpage: true,
+            // 最大支持渲染的标题层级
+            maxLevel: 5,
+            // 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4）
+            subMaxLevel: 4,
+            // 小屏设备下合并导航栏到侧边栏
+            mergeNavbar: true,
+            /*搜索相关设置*/
+            search: {
+                maxAge: 86400000,// 过期时间，单位毫秒，默认一天
+                paths: 'auto',// 注意：仅适用于 paths: 'auto' 模式
+                placeholder: '搜索',              
+                // 支持本地化
+                placeholder: {
+                    '/zh-cn/': '搜索',
+                    '/': 'Type to search'
+                },
+                noData: '找不到结果',
+                depth: 4,
+                hideOtherSidebarContent: false,
+                namespace: 'Docsify-Guide',
+            }
+        }
+  </script>
+  <!-- Docsify v4 -->
+  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
+  <!-- emoji表情支持 -->
+  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
+  <!-- 图片放大缩小支持 -->
+  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
+  <!-- 搜索功能支持 -->
+  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
+  <!--在所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码-->
+  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
+</body>
+</html>