部署基于 Vue 3 的终端模拟器：实现个性化主页导航

zhanlan · 2024 年8 月 29 日 16:14

前言

前段时间我在互联网冲浪的时候发现了一个十分有趣的前端的项目，也就是终端模拟器，下意识我觉得可用又来做个性化主页导航，事实上原作者也是这么做的，得益于这位作者的开源，我们也可以部署一下，所以开始时先感谢一下这位作者。感谢开源。

github项目地址：项目地址
作者主页：作者主页

一、克隆一下项目

1.1 fork项目

首先要有一个GitHub账号，如果没有的话可以注册一下。
注册完成登陆后，点击项目地址打开，如果无法打开，可以上网搜索如何操作，本次不在说这些方面的事情。
进入项目后，点击stars后点击fork，就像这样

点击fork后

repository name 这个地方填入shell-emulator.github.io,以方便我们用github pages部署网页。

之后点击create fork完成fork。
code

后复制链接用于clone到本地

1.2 clone到本地

接下来我们需要clone项目到本地方便修改，对本地的要求就是有一个git，如何配置git，网上关于这个的教程很多，可以参他们的教程。

接下来我们本地创建一个文件夹，打开powershell，cd到这个界面。

也可以直接在这个位置，输入powershell
输入以下命令进项clone

git clone 你的链接

类似这样就可以了。

git remote -v

可以通过这个命令测试一下，是否连接到远程仓库

二、个性化设置

整个个性化的过程中主要修改5个文件

2.1 项目本地运行启动

本地运行的条件是，有一个node.js的运行环境，如何配置安装node.js运行环境，请自己搜索一下吧，如果这里所太多文件就会太长。

打开powershell，cd到项目文件夹，运行以下命令

npm install
或
yarn install

等待依赖安装完成，出现如下界面代表安装完成。

安装完成后，运行以下命令启动服务。

npm run serve
或
yarn serve

出现以下界面之后，访问localhost:8080
run

2.2 配置个性化

打开进入项目目录，然后进入public目录修改config.js

username 这是用户名，修改这个参数后，一定要在username中添加用户目录
hostname 主机名
inittialContent 初始是显示的内容

大致预览会显示修改在这里面。

2.2 文件以及文件夹个性化配置

主要关系在这两个文件中，fsFile.js和fsTree.js中，其中fsFile.js是定制文件的地方，每一个文件都是一个函数，fsTree.js代表的是文件系统的树结构。

2.2.1 文件系统配置

打开fsTree.js,分布解析一下。

这段代码代表的是从fsFile.js中导入一些方法，这些方法分别代表了一些文件。
nothing 代表了空文件，这个个人认为比较重要，一些时候可以直接使用。

fstree.home

整个文件的树状系统，实际是嵌套的json的内容，本次以home目录说一下吧，home这个key对应的value是一个json, json又嵌套了一个json。这结构成了树状结构，这段代码代表这么一个目录结构 /home/defaultuser/readme.txt

当然，这这里需要进行一个修改，将defaultuser修改为config.js中的username

他的树状结构比较简单，在来一个点的

fstree.others

看这段，就比较复杂了，但是一点点看还是可以看明白的，首先是grub目录下面有fonts、grub.cfg、i386-pc、locale、x86_64-efi这几个目录和以下文件比如说grubenv，目录下有嵌套一些文夹。区分目录与文件的区别是看他的value ，是{ }代表的是文件夹。

如果想在home添加以下user文件夹user文件夹下有一个web文件夹，web有一个page.img

那么就可以在home对应改成如下内容。

  "home": {
    "defaultuser": {
      "readme.txt": readme
    },
    "user":{
	"page.png":nothing
	}
  }

如果你实现了page.png对应的方法，那就将nothing替换方法就行。

2.2.2 文件配置

在这个模拟器中，对于文件的内容的读取可以使用cat命令

cd 文件目录
cat 文件名

如果我们在这个终端的执行这个命令

cat /home/你的用户名/readme.txt

就会得到以下内容

readme.txt

现在我们尝试对他进行修改一下。

首先，我们来看一下fsFile.js

可以看出这个readme方法，对应这home下的用户目录中的readme.txt文件，返回值为一个字符串，所以我们可以进行一些修改。

比如说我们想修改成以下的内容，

你好，这是我的主页
感谢你的点击
本网站作者是：123
基于github项目：shell-emulator 部署

我们内容进行这个方法修改成为这样的。

export function readme() {
  return [
    "你好，这是我的主页",
    "感谢你的点击",
    "本网站作者是：123",
    "",
    "基于github项目：<a href=\"https://github.com/ChrisKimZHT\" target=\"_blank\">shell-emulator</a> 部署",
    "",
  ].join("\n");
}

再次执行一下命令，

cat /home/你的用户名/readme.txt

就会发现结果改变了

new.readme.txt

仔细观察，文件都是返回一个字符串，其中，字符串中可以携带html内容。

前文中提到了一个page.png文件，我来模仿实现以下这个文件。
png是图像文件，如果想让他显示一个图像的，我们可以使用html的img元素

我就可以编写如下内容。

export function pagepng(){
	return "<img src='https://images.pexels.com/photos/27911407/pexels-photo-27911407.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 1x, https://images.pexels.com/photos/27911407/pexels-photo-27911407.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2 2x' style='width: 560px;object-fit: contain;' >"
}

然后在fsTree.js中修改以下内容

import { cpuinfo, meminfo, nothing, readme, uptime , pagepng } from './fsFile.js';

//在后面的home中的page.png对应的nothing替换文pagepng

在执行以下命令就发现图片出现了

cat /home/user/page.png

2.3 命令配置

这次说的是系统命令的配置，类似cat、cd、ls的命令
他的配置主要在command.js和cmd文件夹中。
关于他的配置，那我们了解一些工具函数，以及相关的配置内容。建议readme文档好了，内容较多不好全说，只说几个简单的吧。

//在fileSystem.js中的
1.getFileContent(path) // 传入文件路径 返回文件内容
//getAbsolutePath.js中的
2.getAbsolutePath(cwd: string, dest: string) //传入当前路径和相对绝对路径 返回绝对路径
//在fileSystem.js中的
3.checkDirectory(path: string) // 当前路径是否是目录，返回布尔值
4.checkFile(path: string) // 当前路径是否是文件，返回布尔值
5.listDirectory(path: string) //当前路径绝对，返回string[] 
// 在directoryHint.js
6.directoryHint(cwd: string, cmd: string) //cwd 当前路径，cmd是用户输入内容，返回可能的提示列表
// eventBus.js中的eventBus
7. eventBus.emit() //执行响应的事件 例如enter, ctrl-c, ctrl-l, arrow-up, arrow-down, tab, touch, interrupt-input, finished-input, re-input, change-dir.

我们现在开始尝试编写一个简单查看图片命令，比如feh，就以查看图片方法。首先需要在cmd文件夹中创建一个feh.js文件。

在feh.js中创建feh和fehHint的方法。feh对应的是查看图片的命令，fehHint对应的是提示。

这部分需要有一定的基础，逻辑就是获取文件绝对路径，读取文件内容，通过img元素显示图像。

export default function feh(cwd,args,utils){
	const { getAbsolutePath } = utils;
  const { checkDirectory, checkFile, getFileContent } = utils.fileSystem;
	for (const arg in args){
	if  (arg.startsWith("-") || arg.startsWith("--")){
	return `ls: unrecognized option '${arg}'`
	
	}	
	}
	const result = []
	if (args.length === 0) {
    return "请传入图片文件"
	}
	for (const arg of args) {
    const abosolutePath = getAbsolutePath(cwd, arg);
    if (checkDirectory(abosolutePath)) {
      result.push(`feh: ${abosolutePath}: Is a directory`);
      continue;
    }
    if (!checkFile(abosolutePath)) {
      result.push(`feh: ${arg}: No such file or directory`);
      continue;
    }
    const file = getFileContent(abosolutePath);
    const img = "<img src= " +file+ "style='width: 560px;object-fit: contain;'>" 
    result.push(img);
  }
  return result.join("\n");


}


export function fehHint(cwd,args,utils){
  const { directoryHint } = utils;
  const arg = args[args.length - 1];
  if (arg === undefined) {
    return [];
  }
  if (arg.startsWith("-")) {
    return [];
  }
  return directoryHint(cwd, arg);


}

这样就编写部分基本完成了
注意这个feh 方法时需要修改pagepng函数使其只返回url
然后在command.js经行修改就可以了，模仿源文件添加如下内容就可以了

import feh, { fehHint } from "./cmd/feh.js";
{ name: "feh", func: feh, hint: fehHint },

这样就可以，也可以按此步骤编写其他命令。

发挥你的能力去创作吧

2.3 打包

项目目录执行以下命令

npm run build

等待打包完成，项目目录出现dist目录代表打包完成

之后每次修改完成后，都要执行这个命令

三、部署

3.1 通过github部署

3.1.1 修改一下内容

为了js可被成功获取到，我这里有一个笨方法。
将dist中的index.html修改下
将如下内容，替换成这些内容

		<link rel="icon" href="./favicon.ico">
		<script src="./config.js" type="module">
		</script>
		<script src="./fsTree.js" type="module">
		</script>
		<script src="./command.js" type="module">
		</script>
		<script defer="defer" src="./js/chunk-vendors.5f61d37d.js">
		</script>
		<script defer="defer" src="./js/app.a06ca797.js">
		</script>
		<link href="./css/app.b4ca68b6.css" rel="stylesheet">

3.1.2 上传修改

首先将修改提交到GitHub
依次执行以下命令

首先修改.gitignore
删除 ./dist项

git add .
git commit -m "写自己本次修改的内容"
git push origin master

这样就完成了

3.1.3 设置 github pages

点击settings

点击pages

save

设置成如上内容后，点击save，等待一段时间，就部署完成了。

等待一段时间后，访问这个网址加dist就可以访问到了。

如果你有域名，可以自己设置域名，此处就不过多介绍了，可以自行搜索，github pages 自定义域名

3.2 通过服务器部署

3.2.1 拥有一台服务器

如果你有服务器，可以跳过这个步骤直接去 3.2.2了。
如果没有的话，可用通过雨云服务器购买了。
雨云优惠注册地址：雨云服务器优惠链接
优惠码：NDI0NDU2 使用可以享受优惠。

注册登录完成后，点击服务器

点击购买服务器，对于配置方面，1核1G，就可以了。

对于系统，可以是使用debain11系统

预装软件可以不选则，等待创建完成后，点击管理，获取ip，用户，登录密码

3.2.2 上传文件到服务器

打开powershell，执行以下命令，注意此处无需修改的版本

cd 项目目录
scp -r dist 用户名@ip:选择一个你喜欢的目录

3.2.3 远程链接服务器

ssh 用户名@ip -p 22

初次链接需要输入yes然后输入密码。
安装nginx

sudo apt update
sudo apt install nginx
sudo systemctl status nginx

依次执行以上命令，当最后一条命令出现类似以下内容就代表安装并且运行成功。

● nginx.service - A high performance web server and a reverse proxy server
   Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
   Active: active (running) since Thu 2024-08-29 15:39:00 UTC; 1min 30s ago
     Docs: man:nginx(8)
  Process: 2694 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
  Process: 2695 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
 Main PID: 2696 (nginx)
    Tasks: 2 (limit: 4915)
   Memory: 1.5M
      CPU: 3ms
   CGroup: /system.slice/nginx.service
           └─2696 /usr/sbin/nginx: master process /usr/sbin/nginx -g daemon on; master_process on;

Aug 29 15:39:00 your-hostname systemd[1]: Starting A high performance web server and a reverse proxy server...
Aug 29 15:39:00 your-hostname systemd[1]: Started A high performance web server and a reverse proxy server.
Aug 29 15:39:00 your-hostname systemd[1]: Listening for SIGTERM on A high performance web server and a reverse proxy server.

开始编写nginx配置。

nano /etc/nginx/http.d/shell.conf

shell.conf 是可以修改的，shell 是文件名字

server {
    listen 80;
    server_name 域名 或者 是http://ip:80;

    root 这里你的dist的位置;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

完成后，同时按住ctrl + x 回车，点击y键经行保存。之后重新加载配置文件

nginx -s reload

如果你有域名，请记得添加一条dns记录解析到服务器。

四、结语

关于个性化导航，关于导航，其实添加一些浏览命令，添加文件，等一系列方法来完成个性化导航。

关于部署方式的区别，github pages可能最大的问题是需要网络环境可以连接到他，但是回提供免费的域名，服务器是方便部署，有无域名都可以，不过对外提供访问还是要有域名的，如果你有服务器和域名，我还是推荐你使用服务器的。

这是我第一次写关于建站的内容，写的不好还请见谅偶。