说明

思路来源于 shinigamisakuragi/tf ,发现逻辑不难才敢自己上手…

自己用 Vue 实现的,主要逻辑没怎么参考上面的代码。

只简单地实现几条命令。

历史命令,tab 补全想做来着…再说咯。(大概不会有下文了)

效果

点击这里试一试

homepage

思路

思路很简单。终端显示命令,类似于 Vue 官方文档教程里的 ToDoList,写一条命令,便把该命令加到一个 list,Vue 会自己渲染上去。

重要点也都写在代码了…

输入命令就是一个隐藏了外表的 input,有没有更好的实现方式呢?

取自己博客上的文章显示在终端

// 换模板了,功能废掉…

灵感其实来自于一个 app,无相。

我想实现这样一条命令:把自己博客上的文章以 a 标签全部显示到终端,然后点击就阔以查看啦。

因为博客使用 hexo 搭建的,要取文章的话就必须请求归档页,再自己解析网页,获取到自己想要的信息。(标题,url)

本来觉得挺难的,没想到意外的顺利。

用了 axios,代码中是 this.$ajax ,因为我把 axios 全局注册为 ajax,方便使用。

 this.$axios({
        method: "get",
        url: this.blog.archiveUrl
      }).then(response => {
        let parser = new DOMParser();
        let htmlDoc = parser.parseFromString(response.data, "text/html");
        let h3s = htmlDoc.getElementsByTagName(this.blog.label);//取所有文章信息
        
         //这里出了错 index 会出现 length, item 等值
        //所以解析 xml 失败,手机上不能忽略这个错 直接加载失败
        for (let index in h3s) {
          if (!isNaN(index)) {
            let titleUrl = h3s[index].innerHTML;
            let doc = parser.parseFromString(titleUrl, "text/xml");
            let a = doc.firstChild;
            //另外设置
            a.setAttribute("href", this.blog.site + a.getAttribute("href"));
            a.setAttribute("target", "_BLANK"); //新建窗口打开文章
            a.setAttribute("style", " color: cadetblue;"); //标题颜色
            //标签转文字 方便插入网页
            titleUrl = a.outerHTML;
            this.addCommandWithoutTime("url", titleUrl);
          } else {
            console.log(index);
          }
        }
 });

对应的归档页面是 这个

遇到 error : 解析 xml 失败,电脑浏览器可以忽略这个错误,但是手机上就直接加载不出来获取的文章。

经过不断地查询,发现时是 let index in h3s 时,index 的值会出现 length ,item 等值。因为按理说上面的 h3s 应该是一个存了对象的数组,key 应该为数字才对。没仔细研究为什么,总之排除了那些非数字的 key 就能解决问题了,如上。

因为从归档或取的文章 url 是相对于源的相对路径,所以自己又手动修改文章 url。

命令匹配

简单地用 switch 匹配。

switch 里使用正则表达式,要这样。

 switch (command) {
        case /rm[ a-zA-Z]*/.test(command) ? command : false:
          this.Egg();
          break;
 }

Vue 动态添加数据,滚动条滚动到底部问题

命令向屏幕刷新,输入命令的区域需要一直保持在 div 底部哇。

因为vue视图渲染和取DOM之间有一个时间差,导致取DOM的时候,元素还没有渲染出来,所以取到的scrollHeight不足。

讨论–解决方法,此问题被忽略的答案

update 钩子函数。

updated: function() {
    document.getElementById("main").scrollTop = document.getElementById(
      "command"
    ).scrollHeight;
  }

ReferenceError: webpackJsonp is not defined

本地调试没问题,部署到容器就报这个错。

搜索引擎解决…

hexo 上传自己的页面

hexo 是部署到 coding 的,想把自己的这个页面也放上去,放在 hexo 的静态资源文件夹,不行。访问 https://hqweay.cn/tf.html 的时候,被 hexo 的路由控制了。

需要放在 theme 的静态资源目录下,这样部署上去才能正常访问。

其他

配置分离之类的暂不提。