V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
jiannei
V2EX  ›  分享创造

学两个月前端后做了个这样的网站

  •  1
     
  •   jiannei ·
    jiannei · 82 天前 · 5484 次点击
    这是一个创建于 82 天前的主题,其中的信息可能已经有所发展或是发生改变。

    省流地址: https://sinan.fun

    萌芽

    事情是这样的,Laravel 框架对前端构建的支持越来越友好,很早就关注到官方文档中提及到了 Webpack 、Vue 、React 、Vite 等相关技术结合框架的应用。而我一直都是在跟随着框架的升级,来更新自身的技术栈。所以,便有了学习下前端的想法。

    不得不感叹现在前端技术的迭代速度,从 Webpack 到 Vite ,Vue2 Options 到 Vue3 Composition ,tailwind 到 unocss... 对于使只涉及 jquery 、layui 等相关前端知识的后端震大惊,都已经卷到这种程度了吗?

    在 b 站过了一遍 Vue 视频后,感觉对于各种招式胸有成竹。那不如,实践一下,从零实现一个技术社区?

    开始

    既然是自己当产品来设计,那就没什么讲究了,界面不丑,得用最新的技术栈,然后能跑起来就行。

    分析自身平时关注内容的一些习惯:「找自身技术栈更新资讯」、「技术社区寻找问题思路」、「总结踩过的一些坑」、「收藏整理一些资源」…社区 MVP 版的想法,便是能够快速地聚合各渠道技术资讯,有更新时能够进行消息通知;能够整理相关的技术文档,类似于 Dash ;对于常用的网址能够进行简单地收纳整理。

    开始最为头疼的是完全不懂设计,比如内容发布页希望能够发布帖子、rss 源、收纳开源库文档、发布导航链,但我的设计图可能长这样

    参考 Reddit ,调整一下

    界面设计是很头疼的部分,常在颜色、边距来回调,可能实现后改来改去又回到了初版,又或者是升级 UI 框架样式产生了差异... 会出现各种预期以外的问题,如果有懂设计的朋友可以多提些建议,thks !

    效果图

    • 全局快捷工具栏,使用 commmad + kctrl+k或者 / 快捷键唤起 ![[Pasted image 20231201104924.png]]

    • 首页

    • 首页-暗黑模式

    • 详情页

      • 详情页-暗黑模式

    • RSS 信息展示

    • RSS 信息展示-暗黑模式

    • 用户资料页

    • 用户资料页-暗黑模式

    欢迎 V 友们前来观光👏

    37 条回复    2023-12-04 15:25:58 +08:00
    hay313955795
        1
    hay313955795  
       82 天前
    厉害了。。。我干了这么久了也没做个网站出来。
    jiannei
        2
    jiannei  
    OP
       82 天前
    @hay313955795 是前端大佬嘛
    privateproxies
        3
    privateproxies  
       82 天前
    不错的,学好了 找我拿项目:)
    jiannei
        4
    jiannei  
    OP
       82 天前
    @privateproxies 感谢认可。我主力还是后端开发,前端属业余兴趣,有机会的话可以合作下~
    wjup
        5
    wjup  
       82 天前
    摸鱼不到一个月写出来的,wiung.com
    wuzhanggui
        6
    wuzhanggui  
       82 天前
    页面加载出来了 css 没有呢
    jiannei
        7
    jiannei  
    OP
       82 天前
    @wjup 很强 👍
    jiannei
        8
    jiannei  
    OP
       82 天前
    @wuzhanggui 刷新能出来吗
    potatowish
        9
    potatowish  
       82 天前 via iPhone
    效果可以,就是移动端布局乱了
    jiannei
        10
    jiannei  
    OP
       82 天前
    @potatowish 移动端会在下周进行适配
    potatowish
        11
    potatowish  
       82 天前 via iPhone
    @potatowish 自行设计 UI 要考虑到响应式布局就很麻烦
    pianjiao
        12
    pianjiao  
       82 天前
    这不是掘金么
    jiannei
        13
    jiannei  
    OP
       82 天前
    @potatowish 设计是很头疼的一部分,目前完全是凭感觉
    jiannei
        14
    jiannei  
    OP
       82 天前
    @pianjiao 从哪看出来
    auh
        15
    auh  
       82 天前
    自己设计,能不能杀马特一点。或者天马行空一点。怎么都是这些传统的结构?

    如果,真的要突出内容。引用,魅族的一句话,不要胡乱设计就是最好的设计。
    auh
        16
    auh  
       82 天前
    不过还是很强。
    jiannei
        17
    jiannei  
    OP
       82 天前
    @auh 平时接触的是 learnku 、reddit 、v2ex 这些,风格都差不太多,脑补界面的时候,很难有新的设计出来。倒是希望有风格新颖点的设计可以参考下 😂
    gloye
        18
    gloye  
       82 天前
    可以,很不错了
    ztxcccc
        19
    ztxcccc  
       82 天前
    laravel 如果熟练了可以去看看 symfony 的设计思路
    weitch
        20
    weitch  
       82 天前
    厉害的室内!
    Bateman
        21
    Bateman  
       82 天前
    一起来学算法吧 普林斯顿的那个课都 11 年了 还是有很多人推荐
    c0okies
        22
    c0okies  
       82 天前
    哇 感觉超酷的诶
    token10086
        23
    token10086  
       82 天前
    厉害,我学前端 5 个月写的 https://tol.vip/
    感觉你比我搞的好看!
    jiannei
        24
    jiannei  
    OP
       82 天前
    @token10086 你这 logo 不太正经啊
    token10086
        25
    token10086  
       82 天前
    @jiannei 正经的不会做呀。。。
    jiannei
        26
    jiannei  
    OP
       82 天前
    @c0okies 哇 你回复也超酷的
    trytodoyourbest
        27
    trytodoyourbest  
       82 天前
    厉害
    qloog
        28
    qloog  
       82 天前
    ui 看起来很清爽啊。
    ttentau1
        29
    ttentau1  
       82 天前   ❤️ 1
    厉害,我也是看视频自学的,做了背单词的网站
    https://zyronon.github.io/typing-word
    jiannei
        30
    jiannei  
    OP
       82 天前
    @ttentau1 完成度好高 👍
    jiannei
        31
    jiannei  
    OP
       82 天前
    @qloog #28 ui 使用的 unocss ,配色上目前比较谨慎,只是较多的使用 cyan ,看起来可能简洁一点
    YouMoeYi
        32
    YouMoeYi  
       81 天前
    挺可以的
    只不过我之前写的搭的这种站后面懒得维护了, 基本上都关了
    像论坛, 博客, wiki, 笔记, 记账, TODO 什么的都有很成熟的方案了, 用来练练手还是很不错的
    但是也体现不出什么差异, 你能做的别人也能做
    有一定积累后能去做一些不是那么常规的, 或者确实有创新的东西(哪怕比较小)可能会更好一些
    jiannei
        33
    jiannei  
    OP
       81 天前
    @YouMoeYi
    感谢。
    做这网站的初衷是拓展技术栈,laravel 框架越来越趋向于一个全栈框架,周边提供了向 inertia.js 、livewire 等成熟的前端方案,熟悉之后有种梦回 PHP 巅峰时期的感觉,后端可以做更多的事情。
    https://sinan.fun/ 现在只是有了个雏形,完成度并不高,期待大家反馈。
    关于产品差异性,是一个很值得讨论的话题,现在其实不少技术社区,信息获取成本降低的同时,有效内容的获取成本反而很高,Sinan 可能会在这角度去做一些探索。
    voidshine
        34
    voidshine  
       79 天前
    op 可以分享一下源码吗, 有偿
    jiannei
        35
    jiannei  
    OP
       79 天前
    @voidshine 感谢关注哈,前面也提到了,站点现在完成度不高,后面感兴趣的人多的话可以整理下开源出来。(现在这代码,隔两天自己都看不懂了...)
    Deshun
        36
    Deshun  
       79 天前
    看上去不错,界面挺清爽。.fun 域名也很棒,我也注册了一个 w3cn.fun
    刚学前端时搭建的博客 w3h5.com ,记录前端工作日常。现在已经七年了
    jiannei
        37
    jiannei  
    OP
       79 天前
    @Deshun 域名买的时候可有意思了,好像是活动几十块钱买的 10 年。
    你站点内容也不错,很佩服这种坚持内容输出的毅力 👍
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2410 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 15:54 · PVG 23:54 · LAX 07:54 · JFK 10:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.