一个炫酷的个人页面(类Linux命令行界面)

一个主要使用js实现的炫酷页面

我有话说:

这个页面是我在github上发现的,是一个歪果仁的个人 blog
Licensed under the Apache License, Version 2.0 (the “License”);
原地址链接:https://github.com/clarkduvall/jsterm

我做了:

  • 将页面信息改为了我的
  • 改了一点(哈哈哈)js源代码(其中包括加了想到的两个命令,如果又想到需要的,再加,改了原本函数的一些东西),下面会说
  • 改了一点点css,同样,以后想改了再改

展示一下:

在这里插入图片描述

修改指南:

一、下载与注意事项

1.从我上传的包下载的话,如图:
在这里插入图片描述
2.从github下载下来的文件如如图:
在这里插入图片描述其中commands中缺少一个文件,是因为微软系统限制。我会将这个文件单独上传,你需要做的是将index.html内容中的一条:<script type="text/javascript" src="/commands/com1.js"></script>改为<script type="text/javascript" src="/commands/com.js"></script>

二、开启

我用的是python的 python -m http.server 3333,这个端口你可以随意,前提是不冲突等。
1.如果你电脑上装的有python且支持的话,可以像我一样,在cmd下进入代码目录,然后运行那条命令,很方便。在这里插入图片描述
2.如果你使用的是其他web服务器等,直接将代码移动到你的web目录就行了,具体情况还要看你的环境
3.此时访问127.0.0.1:3333就可以访问到了(我的情况)

三、修改指南(以我自己的为例,不以github的,不过差不多)

1.修改index.html,其实需要修改的就是在这里插入图片描述第一个顾名思义,第二个是小图标想要更改的话,原来的删除,将自己的放到根目录就行了。
2.修改json目录下的文件
在这里插入图片描述如图,其实很简单明了,你可以按照规律(仔细点,别少了符号什么的)进行修改增添,举一个例:

"name": "Welcome",
         "type": "text",
         "contents": "<div class=welcome><span>欢迎来到李元贵的个人主页!</span></div>",
         "description": "欢迎来我的主页"
      },

第一行是显示在前台页面的文件的名字,内容在第三行定义,第二行是类型,还有dir,exec等,想要增添的话,按规律增加,因为文件中包含了所有类型的文件,所以不用理解,只需要按照格式增减就行。
3.在这里插入图片描述我json有这样内容,然后/ziliao文件夹中:
在这里插入图片描述路径只要对照正确就没有问题。
4.jsterm.js
直接到最后,打开页面自动加载的几个命令就是在这里设置:
在这里插入图片描述按自己需求修改增添吧。
5.config.js
一些开始的配置:
在这里插入图片描述可以将其中的中文部分试着修改看看效果。
6.com.js
命名所在的js文件,如果你想要增添你想要实现的命令,可以在这下面写

四、结束

应该也没什么了,因为每个文件的介绍其实README中都有,但是当局者迷,我不清楚所有的问题所在,因此,尽管评论或私信。

链接:项目github地址
https://github.com/clarkduvall/jsterm
链接:com.js(免费)
https://download.csdn.net/download/qq_30168227/12325185
链接:我修改后的全部代码(一个c)
https://download.csdn.net/download/qq_30168227/12325182

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值