java项目修改html文件类型,爱了!Guide哥手把手教你搭建一个文档类型的网站!免费且高速!...

news/2024/5/14 4:09:18/文章来源:https://blog.csdn.net/weixin_39681724/article/details/117795875

bVbF0UT

这篇文章 Guide 哥就手把手教大家搭建一个像下面这样的文档类型的网站,你可以用来当做项目的说明文档,也还可以当做自己专属的知识小仓库。

bVbF0UU

一.前置条件

确保自己电脑下载安装了 NPM 并且使用这个命令: npm i docsify-cli -g安装了 docsify-cli 这个工具 。

确保自己有一个 Github 账号(码云账号为非必选项,有的话更好)。

二.初始化项目并预览

1.新建一个文件夹:mkdir docsify-demo

2.进入文件夹并运行 docsify 初始化命令:cd docsify-demo -> docsify init ./

你会发现 docsify-demo 文件夹下面多了下面这些文件,一一为你解释一下它们是干嘛的!

bVbF0UV

3.本地预览网站:docsify serve ./ 然后访问:http://localhost:3000/

bVbF0UW

三.给我们的项目增加点颜色

bVbF0UX

建议 clone 一下我的仓库: https://github.com/Snailclimb/docsify-demo ,在本地运行一下 ,这是一个比较典型的使用 docsify 搭建的网站,可以作为参考。如果你们想搭建一个不错的文档网站的话,可以在我的这个基础上去改。

3.1 修改配置文件 index.html

主要配置了文档网站的名字以及开启了一些配置选项。

docsify-demo

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

window.$docsify = {

name: 'docsify-demo',

repo: 'https://github.com/Snailclimb/JavaGuide-Interview',

maxLevel: 5,//最大支持渲染的标题层级

subMaxLevel: 3,

homepage: 'README.md',

coverpage: true,

loadSidebar: true,

auto2top: true,//切换页面后是否自动跳转到页面顶部

}

3.2 添加侧边栏文件

在第一步中,我们在已经开启了侧边栏选项:

loadSidebar: true

但是,仅仅这样还不行,我们需要定义一个名为 _sidebar.md的文件,文件的内容就是我们侧边栏的内容。

如下图所示,我们定义了一个侧边栏,并且为它添加了一些内容:

bVbF0UY

修改完成之后,你就会发现我们的文档网站多了侧边栏,你点击侧边栏对应的内容在右边显示。

bVbF0UZ

3.3 修改主页内容

修改 REDME.md,内容如下:

bVbF0U4

然后我们的文档网站的主页就变成了这样:

bVbF0U7

3.4 添加一个封面

第一步中,我们在已经开启了封面选项:

coverpage: true

为了能让我们的文档网站有封面,我们还需要新建一个名字为 _coverpage.md的文件,内容如下

bVbF0U8

然后,我们再打开网站的时候,就有了封面,如下图所示:

bVbF0U9

四.一些有用的插件

bVbF0Va

4.1 增加 Java 代码高亮

手动引入 Java 代码高亮的插件:

bVbF0Vc

4.2 增加全文搜索功能

引入插件:

配置一下:

window.$docsify = {

......

//全文搜索

search: {

maxAge: 86400000, // 过期时间,单位毫秒,默认一天

paths: 'auto',

placeholder: '搜索',

noData: '找不到结果',

// 搜索标题的最大程级, 1 - 6

depth: 3,

},

}

然后我们的文档网站就有全文搜索功能了:

bVbF0Ve

4.3 复制代码到剪切板

引入插件即可!

bVbF0Vf

4.4 图片缩放和字数统计

引入下面两个插件即可!

bVbF0Vg

4.5 edit on github

做如下配置,注意修改为你自己的路径。

window.$docsify = {

......

plugins: [

EditOnGithubPlugin.create('https://github.com/Snailclimb/JavaGuide-Interview/blob/master/')

],

}

然后我们的每个页面都出来了 "Edit on github" 选项,你点击之后就会跳到 Github 对应的页面编辑。

bVbF0Vl

五.部署

5.1 部署到 Github

1.Github 新建一个仓库,这一步就不说了。

2.把项目提交上去

3.开启 Github Pages

bVbF0Vm

bVbF0Vn

然后你的项目就能在线访问了!

5.2 同步到码云提高国内访问速度

1.导入 Github 项目

bVbF0Vo

注意把下面的是否开源勾选为公开,不然别人无法访问。

bVbF0Vp

2.选择 Gitee Pages 服务

bVbF0Vr

bVbF0Vu3.收获喜悦的成果

bVbF0Vv

作者介绍: Github 70k Star 项目

bVbBkdd

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_722601.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LNMP动态网站部署架构 Linux + Nginx 配置Nginx服务

1、解压、编译、生成、安装Nginx服务程序的源码文件Perl语言软件包pcre2、openssl软件包安装/usr/local/openssl/bin目录添加到PATH环境变量中。3、安装zlib软件包4、创建一个用于执行Nginx服务程序的账户。5、在使用命令编译Nginx服务程序时,需要设置特别多的参数&…

网站实时显示人数服务器插件,WordPress网站显示实时在线人数代码分享,显示当前在线浏览人数...

其实Wordpress有类似的插件,比如:WP OnlineCounter、WP-User Online等,不过这些插件都会向数据库中写入数据,并频繁读取数据库,只为了实现这个蛋疼的小功能,不是很划算。随时了解一下当前有多少访客在浏览自…

qt listwidget 关键字颜色_seo关键字优化工具如何收费

如何收费sj67745eo关键字优化工具,企业经常采用SEO优化,以获得更好的排名和更好的流量自己的网站。搜索引擎优化有哪些方法?或者什么更有效?任何一个站点,都是无法脱离内容,它是网站建设的基石,…

安卓封装网站源码_h5封装是什么意思_h5封装的app与原生的有什么区别

什么是h5封装?h5封装APP是指将h5网站或web网站进行打包制作成APP软件,无需编写原生代码即可完成APP开发,同时支持苹果和安卓两个系统。除了网站本身的功能内容之外,鹿客邦还将提供多样的插件,丰富APP的功能。封装后的a…

fiddler如何设置过滤https_传奇网站被劫持怎么办?如何设置网站https防劫持 申请免费https和配置教程...

现在劫持相当严重,很多朋友在开区时网站被各种劫持,所以今天给大家分享一个把网站http变成https的教程,能有效防止网站劫持,注意:现在的各大登陆器还不支持https,所以列表地址你还是得用http,所…

在div中显示html_网站开发为什么使用div+css布局?

DIVCSS是WEB设计标准,它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。使用DIVCSS布局的优势1、符合W3C标准。这保证您的网站不会因为将来网络应用的升级而被淘汰。2、对…

长尾词推广系统推荐乐云seo_吴桥信息如何推广广方法有哪些

吴桥信息如何推广广方法有哪些大词虽然搜索量比较高,但是客户都不是精准客户,很多打电话过来,只是问一下价格,购买的需求度并不高但是精准词就不一样了,精准词一般都是通过二次搜索,客户精准度比较高虽然给…

IIS 部署 Python Django网站流程(受够了野路子)

知道的,百度上搜出来的东西质量令人唏嘘。当你求助的时候多半还得靠自己,或者靠Google 介入正题,详细来一遍流程吧 当然,我是用Visual Studio 2019 来编辑开发Django项目的,如果你也是那么巧了。这可以帮你 如果你Djan…

Linux上安装xampp来搭建WordPress网站(图文教程)

建站准备 建站流程 搭建网站注意事项可以参考以下文章 如何从零开始拥有自己的网站?新手建站十大必知忠告超详细新手建站指南以及预算成本估计注册域名 我是在阿里云万网上注册的域名:注册域名详情地址 。不懂这一步的可以参考建站流程里面的几篇文章。 …

基于springboot2.0的易居二手房网站-房屋管理系统

基于springboot2.0的易居二手房网站-房屋管理系统-java二手房网站java房屋管理系统 1.包含源程序,数据库脚本。代码和数据库脚本都有详细注释。2.课题设计仅供参考学习使用,可以在此基础上进行扩展完善开发环境:Eclipse for J2EE, MYSQL5.1, …

大型网站技术架构(八)网站的安全架构

2019独角兽企业重金招聘Python工程师标准>>> 从互联网诞生起,安全威胁就一直伴随着网站的发展,各种Web攻击和信息泄露也从未停止。常见的攻击手段有XSS攻击、SQL注入、CSRF、Session劫持等。 1、XSS攻击 XSS攻击即跨站点脚本攻击(…

geojson地图_从零开始,构建电子地图网站:0_11_引用geojson

在上篇中,我在MapController类中新建了一个方法JSONObject geometryToJson(Geometry geometry),用以将geometry对象转为json。这个方法有点问题,首先,point是一个点,只有一组坐标,polygon如果有孔洞&#x…

域名被墙检测网站_网站监控优化,网站监控比网站优化重要

为什么说一个网站,最重要的不是优化,而是监控?每个网站开发人员都有这样的困扰,网站已被推行和迭代,并添加了新的功用。交互式界面变得愈加美观和简约,但网站曾经加快了速度。为了找到成绩的本源,我必需从头…

支持put的服务器网站,配置Apache服务器支持向目录PUT文件

开发需要测试向服务器传送一些文件,启动apache服务后,可以Get但是PUT提示405.method not allowed。在网上查阅了资料后,修改/etc/httpd/conf/httpd.conf。LoadModule dav_module modules/mod_dav.soLoadModule dav_fs_module modules/mod_dav…

部署可道云_可道云网站备案 ICP修改位置

阿里云备案审核"copyright_desc" > "Kodexplorer是一款备受好评的web文档管理系统,你可以用它来做内部文档管理或共享、也可以用来管理服务器上的网站,取代Ftp,甚至可以当作webIDE直接在线开发。同时你也可以将此程序二次开…

学计算机应该准备什么学习工具,#宅家学习技巧# 篇一:学习做网站 之工具准备...

#宅家学习技巧# 篇一:学习做网站 之工具准备2020-03-06 17:55:391点赞11收藏0评论首先声明自己非计算机专业,仅凭兴趣学习,中间走了不少弯路,当然现在也在学习中,还没有达到能做一个自己满意的网站。本文仅提供一些基础…

奇奇seo优化软件_广东seo 优化软件方法有哪些

广东方法有xaa0c1哪些seo 优化软件,这个互联网时代,谁也不愿意在网络上缺席,企业商家更不愿意放弃网络这个巨大的宣传渠道,他们纷纷在网络上建立自己的企业网站,并且对网站进行多种优化,获取更多的流量&…

html网站开发与php网站开发_35岁学网站程序开发到底晚不晚?

笔者今年33岁,主要工作是网站二次开发和修改,兼职录制点视频教程。准备转行做培训,因为写代码真的有点累。有部分学员已经30岁以上了,我们来谈论下35岁以后还能不能学好网站开发。网站开发需要学习什么语言?网站由前端…

mysql注入扫描网站漏洞工具_sql注入点扫描工具下载-PHP+MYSQL网站注入扫描工具免费版 - 维维软件园...

你想进行SQL网站注入扫描吗,那么你肯定需要使用专门的注入扫描工具了,请来下载PHPMYSQL网站注入扫描工具试试吧,本工具是专门针对PHP网站所编写的一款小工具,软件界面是仿教程的hdsi中的PHP注入模块写的,该软件的实现原…

python网站开发需要学什么_【网页web前端开发学习】在Python开发网络需要学习什么?网站前端开发和Java网络有什么区别?...

【网页web前端开发学习】在Python开发网络需要学习什么?网站前端开发和Java网络有什么区别?下面就和小编一起来看看吧!在Python开发网络需要学习什么?HTML(超文本标记语言)是网页的核心,学好HTML是成为网络开发者的基本条件。HTML虽然容易学习,但是容…