笨猫博客

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

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

2019-06-05 8742点热度 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
    取消回复

    最新 热点 随机
    最新 热点 随机
    SSL 证书申请工具 | 免费 HTTPS 证书网页在线申请 Let's Encrypt、ZeroSSL 等 HTTPS 证书 免登录 Afilmory - 一个现代化照片画廊网站 手把手教你用AdguradHome+SNIProxy自建DNS解锁服务器 WIN10系统彻底永久关闭自动更新 WinRAR 商业版下载安装和白嫖指南 Certbot申请谷歌免费SSL证书
    SSL 证书申请工具 | 免费 HTTPS 证书网页在线申请 Let's Encrypt、ZeroSSL 等 HTTPS 证书 免登录手把手教你用AdguradHome+SNIProxy自建DNS解锁服务器Afilmory - 一个现代化照片画廊网站
    免费风格化你的照片:使用 Coze 免费 API 的 Magic Image QQ开放群共享文件功能体验 Wordpress 无损图片压缩优化插件:wp-smushit 唠叨唠叨 当厨子一定要低调 卡通小图标
    最近评论
    萧瑟 发布于 15 小时前(07月14日) 这个我也用了好久,不知道啥时候能上IP证书
    梵蒂冈 发布于 7 天前(07月08日) 士大夫
    HuangWei 发布于 4 周前(06月16日) 自己手动设置确实很烦,我之前使用过这个,感觉还不错,虽然已经不怎么维护了:https://githu...
    龙笑天 发布于 2 个月前(05月25日) 一直用的萌咖的路过 :smile:
    C 发布于 2 个月前(05月04日) 有个更省心的路子,上传到 catbox.moe,然后用 i0.wp.com 做加速(也支持heif格...
    标签
    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