【填坑】ACG风落地导航页

注意:本项目已经停止维护,该导航页合并Merge到这里:https://miya.moe/archives/50.html

吐槽向

爆肝通宵了一晚上憋了两个版本来,上次的落地页坑还没填这次就先搞了个新坑。没办法了两个一起填就是了

如你所见,这个是个非常简单的落地页,也可以做为导航页而存在,目前自己使用是挂载在副站点上:点击进入

v1.0适合想直接即拿即用的用户;v2.0适合愿意折腾 node 的用户

未来的更新将会以 v2.0 为优先(不会放弃 v1.0 的,绝对会做到两边同步)

为啥非得开一个坑挖两次呢

效果图

表世界:
表世界

里世界:
里世界

移动端:
wap

下载:https://github.com/Jingyi21/LandingPage(请查阅下面的使用方法)

说明

以下内容全部来自 GitHub 里的 Readme

兼容性

npm v6.0.0
IE
Chrome
Android
iOS

项目说明

一个静态的可供做为导航页面使用的落地页

Demo 地址

Demo

包含内容

  1. 随机Random变换的背景(自带全网 CDN ,可自定义)
  2. 主副标题(可自定义)
  3. 可自定义的3个链接
  4. 隐藏的"裏模式"

使用方法

  1. Clone 这个项目或 Download ZIP 的方式下载压缩包

    请确认计算机内已安装 Nodenpm ,否则请使用 V1.0版本,并忽略2~4的步骤

  2. 命令行Command-line窗口中定位项目根目录,然后输入以下命令以安装所需要的模块

    npm install

  3. 使用以下命令运行项目

    npm run start

  4. 若自行修改,修改完毕时重复 3 的过程即可

如何上传到个人服务Services器或虚拟主机Host

V2.0:复制index.html,style.css,bundle.js,Chelsea.ttf(可选)

V1.0:复制index.html,style.css,main.js,Chelsea.ttf(可选)

将文件粘贴到 public_html 或根目录中,即可使用 yourname.site 的方式进行访问

将文件粘贴到 public_html 或根目录下的二级目录中,即可使用 yourname.site/你的二级目录你的二级目录.yourname.site 的方式进行访问

修改方法

V2.0

所有可修改部分均位于 option.js不要问我为什么不是图形化界面

可修改部分

  • 标题栏标题(表/里)
  • 页面内主标题(表/里)
  • 页面内副标题(表)
  • 链接按钮(表/里)
    内置 Font-Awesome, 可直接使用
  • 隐藏可选的表里跳转按钮(表/里)

V1.0

所有可修改部分均位于 main.jstemplate

可修改部分

  • 标题栏标题(表/里)
  • 页面内主标题(表/里)
  • 页面内副标题(表)
  • 链接按钮(表/里)
    内置 Font-Awesome, 可直接使用
  • 隐藏可选的表里跳转按钮(表/里)

版本差异

v2.0

  • 将修改文件放置到独立文件内
  • 使用 npm 管理模块
  • 需要编译Compiler

    v1.0

  • 可直接运行版本
  • 修改位于 main.js

未来需求

[-] 模块化
[ ] 可自定义页面链接
[ ] 全部内容交予 JS 渲染
[ ] 简化代码

Last modification:October 5th, 2018 at 08:14 am

Leave a Comment