给网站加了个评注的功能,顿时觉得萌萌哒了 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
xinyu198736
V2EX    分享创造

给网站加了个评注的功能,顿时觉得萌萌哒了

  •  2
     
  •   xinyu198736
    xinyu198736 2014-12-02 17:37:51 +08:00 8139 次点击
    这是一个创建于 4016 天前的主题,其中的信息可能已经有所发展或是发生改变。
    观摩地址: http://www.html-js.com/article/2494

    今天下午突然蹦出个点子,想给专栏加一个任意点评的功能。这种点评不止是针对整个文章的评论,而是更有针对性的直接指出文章某个位置的问题或者讨论。

    于是,晚上跟朋友喝完烧酒吃完火锅回家后,开动。

    然后等大家都睡了的时候,新功能就这样上线了。

    基本的动效就是这样的,因为时间紧,各种粗暴:

    
    可以添加,也可以评论,新加标注的时候作者会收到一封邮件通知,所以也别太频繁的标注了哦。

    以下是几个效果,欢迎大家多多使用,这种标注方式真心很有用的。

     
    84 条回复    2014-12-24 15:32:04 +08:00
    bengol
        1
    bengol  
       2014-12-02 17:42:51 +08:00
    cool~
    welsmann
        2
    welsmann  
       2014-12-02 17:45:36 +08:00
    图全部挂了
    x86
        3
    x86  
       2014-12-02 17:49:20 +08:00
    评注功能默认关吧,我觉得看似很酷其实很不方便
    nomemo
        4
    nomemo  
       2014-12-02 17:54:28 +08:00
    很吊

    推荐在旁边加个评论的时间轴,用于过滤评论
    learnshare
        5
    learnshare  
       2014-12-02 17:55:00 +08:00
    像弹幕一样飘来飘去吧 >_<|||
    clino
        6
    clino  
       2014-12-02 17:55:25 +08:00
    挺酷的
    挺像弹字幕的哈
    slax
        7
    slax  
       2014-12-02 17:55:50 +08:00
    能做成wordpress插件吗?哈哈
    markmx
        8
    markmx  
       2014-12-02 17:58:32 +08:00
    有点意思 不错的想法
    jiangzhouq
        9
    jiangzhouq  
       2014-12-02 18:01:20 +08:00
    密集恐惧症。。。
    plprapper
        10
    plprapper  
       2014-12-02 18:05:18 +08:00
    挡住内容了 ,这样不好吧。
    linkiosk
        11
    linkiosk  
       2014-12-02 18:08:06 +08:00
    随意双击就能评论
    akfish
        12
    akfish  
       2014-12-02 18:09:24 +08:00
    真巧,也给自己博客加了逐段标注,还没上线。

    有考虑不同版本文章之间的diff么,不然一改文章就错位,类似功能主要的难点也就是在处理diff上。
    lingyired
        13
    lingyired  
       2014-12-02 18:14:53 +08:00
    cool 但。。

    不应该随意位置
    不应该占用左键点击
    ChanneW
        14
    ChanneW  
       2014-12-02 18:23:59 +08:00
    xz
        15
    xz  
       2014-12-02 18:34:47 +08:00
    就是在随意位置评论吗?
    Cee
        16
    Cee  
       2014-12-02 18:39:49 +08:00
    Cool
    不占用鼠标左键就更好了
    S1ahs3r
        17
    S1ahs3r  
       2014-12-02 18:51:27 +08:00
    改进下应该学学轻之国度在线版阅读那样批注.这样酷炫但不实用
    hansnow
        18
    hansnow  
       2014-12-02 18:54:55 +08:00
    原来前端乱炖的站长是楼主呀~关注了一段时间了,很不错!
    wcp1231
        19
    wcp1231  
       2014-12-02 19:04:57 +08:00
    让我想起这个 https://bearyboard.com/
    kimw
        20
    kimw  
       2014-12-02 19:32:28 +08:00
    long long ago, there was a diigo.com...however gfw was not working at that time...

    话说,diigo我现在还在用。
    kimw
        21
    kimw  
       2014-12-02 19:33:25 +08:00
    不过创意不错,真的很炫耶~
    xiaowudesign
        22
    xiaowudesign  
       2014-12-02 19:40:16 +08:00 via iPhone
    来支持未来姐夫……
    xinyu198736
        23
    xinyu198736  
    OP
       2014-12-02 19:48:20 +08:00
    @hansnow 谢谢亲(*^3^)
    xinyu198736
        24
    xinyu198736  
    OP
       2014-12-02 19:52:51 +08:00
    昨晚突发奇想搞出来的,参考了一些网站,体验也有缺陷,亮出来大家看看批评下,会改进,哈哈(⌒⌒)
    feiyuanqiu
        25
    feiyuanqiu  
       2014-12-02 19:53:51 +08:00
    使用了一下,感觉做成双击点评要好些
    GuangXiN
        26
    GuangXiN  
       2014-12-02 20:02:07 +08:00 via Android
    千万不要双击触发,我最喜欢边读文章变点击标注读到哪里了
    hugsky
        27
    hugsky  
       2014-12-02 20:46:54 +08:00
    很适合摄影站,对图片的点评
    sneezry
        28
    sneezry  
       2014-12-02 20:55:58 +08:00
    楼主模仿bing的效果应该比较好 =D
    soruNis
        29
    soruNis  
       2014-12-02 20:56:05 +08:00
    为什么突然之间都想加评注了,是因为 glose 和 豆瓣读书 吗?
    coolcfan
        30
    coolcfan  
       2014-12-02 21:10:01 +08:00
    最早是在有妖气看到这样子的。
    RobberPhex
        31
    RobberPhex  
       2014-12-02 21:23:01 +08:00
    弹幕都到技术站了么?这样真的很不正式。
    一般讨论一段的话不是引用吗?
    SamZeng
        32
    SamZeng  
       2014-12-02 21:29:49 +08:00
    挡到内容了,我觉得 [Medium](http://medium.com) 那种挺好的。
    durrrr
        33
    durrrr  
       2014-12-02 21:30:11 +08:00
    做成通用的浏览器扩展吧!像 diigo 那种。
    除了批注,把高亮、过滤、搜索都搞出来。
    soruNis
        34
    soruNis  
       2014-12-02 22:24:07 +08:00
    想一下可能的竞品: medium, wired, glose, google doc, douban, duokan
    Edward
        35
    Edward  
       2014-12-02 22:51:38 +08:00 via iPhone
    确实 medium 的模式要好一些。。

    @slax 已经有 WordPress 插件了,还有一款付费主题内置支持这玩意,很酷。。。
    geew
        36
    geew  
       2014-12-02 22:54:05 +08:00
    能开源不
    ids
        37
    ids  
       2014-12-02 22:54:52 +08:00
    @Edward 哪有?
    phyng
        38
    phyng  
       2014-12-02 23:03:17 +08:00
    Cool,似乎可以像medium一样放在右侧不挡住内容,我最初觉得这种设计非常棒是在这个文档: http://djangobook.py3k.cn/2.0/chapter01/ 文档有不清楚的地方点开评论基本上有人讨论过了
    kmvan
        39
    kmvan  
       2014-12-02 23:05:28 +08:00
    貌似我自己受不了这圆点,鸡皮疙瘩。。。
    aWangami
        40
    aWangami  
       2014-12-02 23:58:58 +08:00
    看着有点。。。难受...
    能加一个一键隐藏的功能么
    Yannis1990
        41
    Yannis1990  
       2014-12-03 00:36:46 +08:00
    https://redpen.io/ 原版再次,昨天才看见,楼主今天就出了,赞,求开源插件~
    discrete
        42
    discrete  
       2014-12-03 00:57:15 +08:00
    同求Wordpress插件。
    paloalto
        43
    paloalto  
       2014-12-03 01:57:06 +08:00
    风扇呼呼响,建议把 CSS 3 的 animation 换成简单的 gif,或者取消圆点标注的动画效果,用静止的小圆点。
    Mihuwa
        44
    Mihuwa  
       2014-12-03 03:10:29 +08:00 via iPhone
    @Edward 同求wordpress插件和付费主题链接
    xiaogui
        45
    xiaogui  
       2014-12-03 08:52:00 +08:00
    这东西还是小团队使用的吧,人多了,还不点满了。
    blue7wings
        46
    blue7wings  
       2014-12-03 09:09:35 +08:00
    挺有意思的。。。
    Arrowing
        47
    Arrowing  
       2014-12-03 09:12:51 +08:00
    昨天看了个网站就和楼主做的效果一模一样!难道是楼主的站?

    有意思,但是我不喜欢用!
    chizhong
        48
    chizhong  
       2014-12-03 09:16:12 +08:00
    有意思的想法,像极了弹幕……估计以后的90后程序员会喜欢
    虽然我也是90后……
    ityao
        49
    ityao  
       2014-12-03 09:18:41 +08:00
    倒是对文章里面的图点评会比较有意思
    minuo0day
        50
    minuo0day  
       2014-12-03 09:29:13 +08:00
    不知道能不能做成v9的插件
    Twinkle
        51
    Twinkle  
       2014-12-03 09:34:35 +08:00
    233 忍着没去添加 好玩
    maaakor
        52
    maaakor  
       2014-12-03 09:38:08 +08:00
    要是鼠标移到上面才显示就更好了。。
    ryanyu104
        53
    ryanyu104  
       2014-12-03 09:39:46 +08:00
    昨天还玩过 创意挺好 就是感觉不方便
    nowit
        54
    nowit  
       2014-12-03 09:40:17 +08:00
    挺有意思的,建议如下改善会更好一点:

    1、评论点圈最好不要遮挡文字、图片,干扰阅读,尤其是以阅读为主的页面;
    2、控制点的数量与Style,不要让页面一瞬间就『长满了痘痘』('ω')
    ooksm
        55
    ooksm  
       2014-12-03 09:46:24 +08:00
    密集物恐惧症怎么办
    dddd1919
        56
    dddd1919  
       2014-12-03 10:20:36 +08:00
    文字版的弹幕
    apirl
        57
    apirl  
       2014-12-03 10:28:53 +08:00
    公司网站大量的文章苦于没有互动,之前和我们boss提过类似的想法,文字版弹幕,结果被古板的boss给否了,楼主能实现出来太赞了。。。修改下体验会更好,密集恐怖症看着确实心里发毛,而且挡住内容了。
    konakona
        58
    konakona  
       2014-12-03 10:35:56 +08:00
    挺有意思的!不过密集了点……
    EXDestroyer
        59
    EXDestroyer  
       2014-12-03 10:36:17 +08:00
    炫酷
    xinyu198736
        60
    xinyu198736  
    OP
       2014-12-03 10:38:37 +08:00
    这个帖子是被刷了,通常的话体验不会是这样,哈哈,刷点点的会封号处理。

    细节体验的确需要优化。
    xinyu198736
        61
    xinyu198736  
    OP
       2014-12-03 10:41:14 +08:00
    其实这个功能的最大作用就是:


    提高一下网站的活跃度,

    估计过一阵就要下掉了,因为没人用。。。
    laxapple
        62
    laxapple  
       2014-12-03 10:50:58 +08:00
    静态弹幕
    karjarjam
        63
    karjarjam  
       2014-12-03 11:21:14 +08:00
    看起来是很cool,不过随意位置确实有点挡内容。而且没有隐藏选项页有点干扰阅读
    个人觉得最好中间一栏是文章,两边空间放批注。反正一行文字也不是太长,指到特定一行也基本能指到批注批的是哪一段了。
    aaalzk
        64
    aaalzk  
       2014-12-03 11:24:15 +08:00
    要是推广开来,淘宝或者HAO123还能用吗
    wiz001
        65
    wiz001  
       2014-12-03 12:31:12 +08:00
    这个好像之前一个叫白板的东东
    baskice
        66
    baskice  
       2014-12-03 12:45:12 +08:00
    这个好棒
    ldehai
        67
    ldehai  
       2014-12-03 12:59:19 +08:00
    Medium有这个功能
    neutrino
        68
    neutrino  
       2014-12-03 15:09:29 +08:00
    参考有妖气漫画等站点,目的在于“就是要挡住内容”来形成“独特的效果”更有意思。
    sammo
        69
    sammo  
       2014-12-03 15:36:00 +08:00
    diigo 的网页评注有类似的功能,只对高级用户开放,于是发展成版聊
    saber000
        70
    saber000  
       2014-12-03 16:03:34 +08:00
    本来想用标注把隐藏标注的label盖住的,没成功...
    metalbug
        71
    metalbug  
       2014-12-03 16:25:41 +08:00
    代码发出来玩玩如果做成单个JS插件就更好了。
    Edward
        72
    Edward  
       2014-12-03 16:45:24 +08:00
    @ids
    @Mihuwa

    https://upthemes.com/themes/largo/ 付费主题,配合得挺好。至于插件,好像还是免费的,在官方库里有应该,不过跟不同主题搭配有些累。。。
    xinyu198736
        73
    xinyu198736  
    OP
       2014-12-03 16:50:51 +08:00
    这个帖子被大家玩坏了。。。
    Rorysky
        74
    Rorysky  
       2014-12-03 19:29:05 +08:00
    类似参考 豆瓣阅读 或者 多看阅读 注释、评论的添加方式
    adeweb
        75
    adeweb  
       2014-12-03 20:09:42 +08:00
    楼主有考虑过深度密集恐惧症的人的感受么,头皮发麻啊。
    klam
        76
    klam  
       2014-12-03 20:34:16 +08:00
    鱼头牛逼
    openroc
        77
    openroc  
       2014-12-04 11:15:47 +08:00
    打开后,CPU秒High~~~。 哈哈。。。
    cxl008
        78
    cxl008  
       2014-12-04 16:30:17 +08:00
    好多麻子
    sunnykevin
        79
    sunnykevin  
       2014-12-04 16:30:55 +08:00
    其实我想说,密集恐惧症患者看了会抓狂的~
    jinzhe
        80
    jinzhe  
       2014-12-04 22:26:48 +08:00
    不太实用啊!感觉有点乱
    lamtin
        81
    lamtin  
       2014-12-08 15:37:21 +08:00
    密集恐惧症患者路过...
    vicwutaojun
        82
    vicwutaojun  
       2014-12-11 15:26:16 +08:00
    @akfish 正解。。欢迎了解 qudian.org
    clino
        83
    clino  
       2014-12-18 13:42:57 +08:00
    楼主前端乱炖是挂了还是怎么了?
    504 Gateway Time-out
    nginx/1.0.15
    lansexinyu
        84
    lansexinyu  
       2014-12-24 15:32:04 +08:00
    楼主,就我知道前端乱炖已经挂了好几次了,请问是什么情况,是什么问题?我看了下,服务器是阿里云的,应该不会这么容易挂吧!
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5278 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 45ms UTC 05:49 PVG 13:49 LAX 21:49 JFK 00:49
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86