分类 js 下的文章

嗯,不知道谁写的, 不过挺好用的√

timeout=prompt("Set timeout (Second):");
count=0
current=location.href;
if(timeout>0)
setTimeout('reload()',1000*timeout);
else
location.replace(current);
function reload(){
setTimeout('reload()',1000*timeout);
count++;
console.log('每('+timeout+')秒自动刷新,刷新次数:'+count);
fr4me='<frameset cols=\'*\'>\n<frame src=\''+current+'\'/>';
fr4me+='</frameset>';
with(document){write(fr4me);void(close())};
}

(暂定)

IMG_20200429_004104-01-03-01.png

简介

SPARKS by 兰兰想 version 0.7
体验地址:
https://blog.lanhaoo.club/new/

嗯, 这是我自己写的一款前端页面,(以及重写的接口) 现在并未开源, 在官方的基础上, 增加了以下新特性

界面

  1. 更好的文章排版 (包含代码高亮)
  2. 正确的搜索结果
  3. 正文&评论可放大图片, 文章可全屏视频
  4. 正文&评论可全屏代码
  5. 正文下可根据目录/标签显示相关文章

这些都能在上面的体验地址里面看到, 就不放截图了

管理界面

  1. 管理界面夜间主题
  2. 撰写文章时支持实时预览文章内容

2020-04-25 _2_.png

吐槽

所以这就是从 wordpress 转过来的结果, 不仅 SEO 过山车雪崩式滑到底部, 而且各种麻烦, 所以干脆自己写一个前端, 自己写的永远满足自己嘛...

前言

vue cli 打包好的dist目录中的文件, 默认是根目录的, 像这样: lanhaoo.club/index.html
现在想要将文件放到子目录,比如myApps, 想要的效果是这样: lanhaoo.club/myApps/index.html

Vue cli 3版本里的config build 的文件夹都没了

vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下
vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍)
vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3 vue-cli 3 的设计原则是“0配置”
vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化

修正assets文件的引用

  1. 在根目录下新建 vue.config.js文件, 在这里面我们写配置
  2. 去掉路由的 history 模式
  3. 把那些图片啊之类的资源文件(在 assets 文件夹下的)整顿好, 在配置里面写好别名, 然后修改引用

vue.config.js

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'components': '@/components',
        'views': '@/views',
      }
    }
  },
}

将 vue 界面里的涉及到 assets 的链接都改下 例如:'../assets/xx.png' 改为 '@/assets/xx.png'

配置子文件夹路径

在 configureWebpack 上插入官方文档里提供的 publicPath 示例代码(baseUrl已弃用), 一个表达式, 检测是否是生产环境(还不错), 把子文件夹名换成你想要的, 然后重新 build 一遍,上传到对应目录,就OK了,整个 vue.config.js 文件类似下面

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/子文件夹名/'
    : '/',

    configureWebpack: {
        resolve: {
            alias: {
                'assets': '@/assets',
                'components': '@/components',
                'views': '@/views',
            }
        }
    },
}

参考:
https://cli.vuejs.org/zh/config/#publicpath
https://segmentfault.com/a/1190000016135314
https://segmentfault.com/a/1190000016101954

嗯..一开始是想让 vue 路由直接返回json,不过好像有点难,
如果是直接用xhr还好说,直接拿过来就行

这里说的是本地的,根据stackoverflow上的是,将变量从另一个js引入

json.js

export const jsonInput = [
  { id: "1", title: "Mars" },
  { id: "2", title: "Venus" },
  { id: "3", title: "Pluto" }
];

Hello.vue
<script>

import { jsonInput } from './jsonInput';

export default {
  data(){
      return {
          jsondata : jsonInput 
      }
   }
}

</script>
然后就能引用jsondata的数据了(也就是在jsonInput里的数据)

参考:
https://stackoverflow.com/questions/46699064/returning-json-with-vue-router