笨猫博客

  • 🍟首页
  • 🍘目录
    • 🥝VPS教程
    • 🍾猫玩技术
    • 🍹干货分享
    • 🍏软件分享
    • 🍩一只猫
  • 🍋工具
    • 🌽IP路由追踪
    • 🍐域名Whois查询
    • 🥘域名被墙查询
    • 🍧IP正常检测
    • 🔥IP端口检测
    • 🍆短网址
    • 🐟VIP音乐播放
    • 🍯KMS激活
  • 🍓链接
  • 🍪联系
  • 🍱登录
    • 🥦登录
    • 🍒注册
关注互联网,生活,音乐,乐此不疲的一只笨猫
  1. 首页
  2. 网络资源
  3. 正文

被脱裤的又开源的网站主页分享

2019-06-05 8837点热度 3人点赞 4条评论
介绍

一个被很多大佬“脱裤”的主页,拥有令人舒服的动画,以及漂亮的 UI,完全响应式,移动端同样很漂亮

开源地址:https://github.com/Tomotoes/HomePage
安装前提
Nodejs 6.0 以上
Git 可用
功能特性
高度封装了页面中的所有的信息
使用 scss 作为 css 预处理器
使用 pug 作为 html 预处理器
使用 gulp 作为构建工具, 并以配置好构建脚本
令人舒服的动画 , 以及漂亮的 UI
响应式,无缝支持移动端
所引用的 css 与 js 文件总共超不过 18.5 kb!
延迟响应切换页面事件
根据时间动态设置背景
还有很多特性留给你探索...
安装步骤

git clone https://github.com/Tomotoes/HomePage.git
cd HomePage
npm install
npm run dev

基本配置
配置文件config.json中的每一项键名 , 都与相应的组件名所对应。

比如:

{
    "head": {
        "title": "一个坏掉的番茄",
        "description": "Author:SimonMa,Category:Personal Blog",
        "favicon": "favicon.ico"
    }
}

上面的配置信息就对应着下面layout/head.pug组件中的信息。

head
    title #{head.title}
    meta(charset="utf-8")
    meta(name="Description" content=`${head.description}`)
    link(rel="icon" href=`${head.favicon}` type="image/x-icon")

高级配置
配置信息默认开启了supportAuthor选项,即支持作者。

所有的支持项如下:

- 会在首页右上角显示 章鱼猫

- 控制台会打印作者的站点信息

- 你可以设置其值为 false 来关闭这一行为。

图标替换
项目中的图标,全部来自 阿里巴巴矢量图标库

替换步骤如下:

请选择好你的图标,添加到项目后,把颜色全部调成白色。

点击Font Class方式

复制生成的链接中的内容

替换 文件css/common/icon.scss中的内容,其中 icon选择器中的内容必须保留。

配置config.json文件中的相应项main.ul.*.icon

.icon {
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
    fill: currentColor;
    font-family: 'iconfont' !important;
    font-size: inherit;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

展示截图
开源的网站主页

在线预览
https://tomotoes.com/

感谢 Tomotoes 大佬的开源,致敬每一位开源的开发者!

标签: 主页 开源 网站
最后更新:2019-06-02

笨猫

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

  • lllll

    thank~ :tushe:

    2019-06-05
  • colorgg

    默认开启了supportAuthor

    2019-08-10
  • 今生

    老哥,已添加贵站链接于
    https://www.noheart.cn/links
    期待你的回复 :mianqiang:

    2019-08-21
  • 笨猫

    @今生 没有看到。兄弟

    2019-09-09
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    取消回复

    最新 热点 随机
    最新 热点 随机
    开源免费的2FA工具推荐(华为手机避坑Microsoft Authenticator 微软验证器) 情侣飞行棋:比吵架有趣,比看剧更亲密 Windows11美化方案教程 简洁、纯HTML导航项目:XG-NAV(开源) outlook邮箱安全修改方案,让你的邮箱安全无忧 Docker容器一键全自动迁移脚本
    outlook邮箱安全修改方案,让你的邮箱安全无忧简洁、纯HTML导航项目:XG-NAV(开源)Windows11美化方案教程情侣飞行棋:比吵架有趣,比看剧更亲密开源免费的2FA工具推荐(华为手机避坑Microsoft Authenticator 微软验证器)
    锐速的进一步优化 Google的PR竟然悄悄更新了 OdIndex:基于PHP的OneDrive目录列表程序 三星 Odyssey 游戏显示器采用双倍 UHD、QD-OLED 等 左脑右脑 Bing 全球搜寻占有率超越 Yahoo 成为第二名
    最近评论
    诗音 发布于 2 天前(08月29日) 时间改到2099年在暂停更新也可以
    vip券网 发布于 4 周前(08月01日) 写的很详细,赞 :razz: :evil:
    萧瑟 发布于 2 个月前(07月14日) 这个我也用了好久,不知道啥时候能上IP证书
    梵蒂冈 发布于 2 个月前(07月08日) 士大夫
    HuangWei 发布于 3 个月前(06月16日) 自己手动设置确实很烦,我之前使用过这个,感觉还不错,虽然已经不怎么维护了:https://githu...
    标签
    elliptictrue100.10.02
    BLOG ChatGPT Chrome CloudFlare DirectAdmin github Godaddy google kloxo Linux OneDrive OneIndex PHP QQ shadowsocks SNS ssh Typecho VPS web2.0 whmcs Windows wordpress 一键脚本 下载 免费 博客 图文教程 图标 图片 域名 头像 奥运 宝塔面板 插件 教程 日记 有趣 浏览器 游戏 猫 生活 电影 百度 网站 视频 设计 软件 阿里云盘 音乐
    好友
    • glzjin's blog glzjin's blog
    • ZAERA博客
    • 冰沫记
    • 奇它博客
    • 猫腻‘s Blog
    • 猫饭
    • 肥宅之家
    • 萌博
    • 野路子程序员

    COPYRIGHT © 2022 笨猫博客. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang