[妹子镇楼] 针对现代显示器设计的博客主题： Theme-AD

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 2135 天前的主题，其中的信息可能已经有所发展或是发生改变。

专门针对现代显示屏幕设计的、欧美风格的博客主题：Art Design。
充分利用了显示屏的四个方向，并且借助 CSS3 实现了移动端平稳过渡！
Github 地址： https://github.com/dongyuanxin/theme-ad
Preview 主题： https://godbmw.com/

目前是 beta 版，欢迎大家来试用、拍砖和Star！

先展示：标签云、分类、归档、首页、文章和友链，这 6 个主要界面。

第 1 条附言 · 2019-02-24 22:57:06 +08:00

已经转告小姐姐，她也要开始学习代码了，并且表示很开心！

妹子镇

主题

友链

theme-ad

57 条回复 • 2019-02-27 11:19:34 +08:00

godbmw

2019-02-24 17:45:24 +08:00

文档可以先参考`theme-bmw`的文档： https://godbmw.com/passages/2018-11-15-theme-bmw-docs-zh/
这几天会补上使用文档！

chenhonzhou

2019-02-24 17:48:08 +08:00

原来你是妹子啊,小姐姐

taaaang

2019-02-24 17:57:33 +08:00

挺不错，但是这个跟显示器有啥关系？非前端人员提出的问题，别笑

loading

2019-02-24 17:59:26 +08:00 via Android

挺好，甩一下鼠标就能到角落了，如果我的鼠标 dpi 够的话，如果不够，真的折腾死我了。

godbmw

2019-02-24 18:04:31 +08:00

@chenhonzhou 不，这位是学设计的小姐姐。

godbmw

2019-02-24 18:06:13 +08:00

@taaaang 显示屏色彩能力越来越好，同时，屏幕大小也在变大。之前的主题比如 theme-bmw 等等，看起来很单调。

@loading 啊哈？没听懂老哥说啥（捂脸）

ryan18

2019-02-24 18:07:23 +08:00 via Android

颜值严重爆表，哇，老衲想舔

godbmw

2019-02-24 18:24:18 +08:00

@ryan18 我会帮你转告她的

mytsing520

2019-02-24 18:29:16 +08:00

我在我网页上加了个 Link

jiangnanyanyu

2019-02-24 18:47:02 +08:00 via Android

只有我关注那个妹子吗？

0312birdzhang

2019-02-24 19:19:53 +08:00

随手就看到了楼主的简历照，emmmmmm （手动再见

cjq8z

2019-02-24 19:20:30 +08:00 via Android

手机访问图不见了，差评

CodeDeer

2019-02-24 19:26:45 +08:00

主题很棒，妹子也很棒，emmm

taaaang

2019-02-24 19:28:52 +08:00

@godbmw 所以其实还是在针对屏幕做适应嘛

taaaang

2019-02-24 19:29:25 +08:00

@godbmw 但是的确挺好看的

Tink

2019-02-24 19:53:31 +08:00 via iPhone

感觉怪怪的，又说不上来哪里怪

ccav

2019-02-24 19:58:56 +08:00

哈哈...真的被那个前端验证给吸引住了...进去一看...原来地板位都没了..

jugelizi

2019-02-24 20:01:57 +08:00

window.localStorage.setItem("auth", "b56888a08f3d2405dd37dba14af086c53fc7ed262bd33f1cabc87b2ad9343b69:" + (86400000 * 3 * (new Date().getTime())))

我真的无聊....还翻代码看

loading

2019-02-24 20:03:26 +08:00 via Android

@Tink 像 ps 做产品图，不用的素材丢到画布外面，画布里面东西还没放好的时候。

richard1122

2019-02-24 20:04:09 +08:00

请问一下点文章的标题是不能进入详情的吗？点 read more 才可以？

tyzrj766

2019-02-24 20:05:05 +08:00

标题能点更符合一般人浏览的习惯吧，还得点 read more...

tyzrj766

2019-02-24 20:08:21 +08:00 via Android

然后发现，手机上 github 右上角两个按钮把菜单栏挡了。

cue

2019-02-24 20:15:04 +08:00

看到斜体汉字就觉得…… hmmmmm

realpg

2019-02-24 20:44:27 +08:00

这 UI 交互设计的如果一百万分满分，我给 100 分

xFrye

2019-02-24 20:51:11 +08:00

如果去掉左边的分享栏就好了，或者放在其他地方

godbmw

2019-02-24 21:26:08 +08:00

@mytsing520 随便折腾
@jiangnanyanyu 男同胞应该都关注！
@cjq8z 隐藏了，好像这里设计成上下展示的卡片样式更好。
@CodeDeer 谢谢哈~
@cue 已经尽力了，好难调
@tyzrj766 谢谢建议，标题会加上链接
@richard1122 谢谢建议，标题会加上链接
@xFrye 上下左右都用完了，这里的本意是所有页面都可以分享，而不仅仅是文章才能分享。毕竟推广和传播对于 seo 很重要。
@jugelizi 配置信息是在 config.ejs 里面生成的
@0312birdzhang 额，这和我简历照有啥关系？奇怪。。。

godbmw

2019-02-24 21:28:10 +08:00

@realpg 我不是专业做设计的，觉得顺眼和顺手就这样做了，还请大佬指点

U2Fsd

2019-02-24 21:44:50 +08:00

这帖子里都是单纯的程序员啊。。

LZ 实际上是来炫耀妹子的，你们都讨论博客主题干嘛？

godbmw

2019-02-24 21:52:27 +08:00

@U2Fsd 哈哈哈，没毛病

shadoworld

2019-02-24 21:57:16 +08:00

字体似乎看着有点怪

Heyavc

2019-02-24 22:05:58 +08:00

98 年的已经在 TEG 了，这是大佬啊...Orz

godbmw

2019-02-24 22:08:32 +08:00

@Heyavc 实习生，还是劳务实习。其实水平很弱的，好多东西都不会┭┮﹏┭┮

buir

2019-02-24 22:35:39 +08:00

t.cn 斜杠 Efi6H42

兄弟们妹子图不用谢.....

galikeoy

2019-02-24 22:37:44 +08:00

好了，我知道你有妹子了

godbmw

2019-02-24 22:39:45 +08:00

@galikeoy 别误会，这个不是我妹子（笑哭）

@buir 2333333

0312birdzhang

2019-02-24 23:07:35 +08:00

你放个漂亮妹子图，然后看了你的 GitHub 后发现你是个汉子。。。反差太大

xFrye

2019-02-24 23:10:01 +08:00

@godbmw 不是的，我不是说这些功能不重要，可能我比较喜欢比较整洁的页面，如果可以我希望弄个可选的，把分享功能放到文章最后，页面底部栏也可以考虑一下。

JxQg597

2019-02-24 23:41:46 +08:00

在四个角的话可能鼠标移动起来比较累:doge

Kilerd

2019-02-24 23:57:33 +08:00

怎么说，看到你的 code block 居然用的不是等宽字体就知道你写博客主题的造诣不是很深了。

godbmw

2019-02-25 00:06:14 +08:00

@xFrye 好的，谢谢建议。之后加个配置。

@0312birdzhang 争得她本人同意了，她表示很开心哈哈

@Kilerd 笑了，字体看着顺眼不就好了？

tailf

2019-02-25 00:14:48 +08:00

只有我喜欢鑫胖的笑容吗

godbmw

2019-02-25 00:30:25 +08:00

@tailf 看来是这样的，鑫胖，鑫胖😭？？？

discrete

2019-02-25 01:07:38 +08:00

一看妹子图这背景，目测深大，一看果然深大的？

redtears

2019-02-25 08:12:17 +08:00

功能项强行与主内容区隔离开，感觉不太便于操作。

mobaui

2019-02-25 09:33:26 +08:00

我咋没看到没人跟楼主要妹子微信

k9982874

2019-02-25 09:47:48 +08:00

针对现代显示器设计的啊，那我 DELL 的用不了了，可惜

NoKey

2019-02-25 09:59:57 +08:00

我不是做前端的，不是做 ui 交互的，就是个普通程序员
恕我直言。。。。
我的 27 寸，4k 显示器，以下评论基于全屏状态
我的鼠标的 dpi 是 4000 左右，这个 dpi 我感觉最舒适，在大屏幕上移动速度够，也不过太快导致我需要精确控制
从阅读的正文，要点到四个角落，觉得很麻烦，太远了
而且，比如我正在阅读一篇文章，我觉得很好，要推到微博上去
我需要把鼠标移动到最左侧，去点那个微博图标
这个交互是有问题的，打断了我阅读的连续性，如果发送到微博的图标就悬浮在正文右侧，我不用分散注意力，随手点了继续阅读。
还有左下角和右下角的按钮，没搞懂什么作用

评论什么的按钮在右下角，这个感觉太怪了，或许是我自己对目前的各种论坛什么的用习惯了，看完文章下面的就是评论，这个点明了，就表示对上面文章的评论，但是你这个安排在右下角，感觉好怪。。。

中间正文排版什么的挺好，不过我用的 safari 有些地方有点小 bug

godbmw

2019-02-25 11:35:08 +08:00

@discrete 她不是深大的，相差 1800 公里呢。

@mobaui 要了也不会给 /dog

@redtears 或者说突出内容主体？我也是看着正常的做法都是功能和内容区放一起，所以蛋、、、疼尝试一下。

@NoKey 首先谢谢这么用心的反馈！
之后会考虑在文章页面，将分享按钮悬浮在文章的左右侧（然而不知道啥时候有空哈），阅读的连续性倒是考虑的少了。关于分享按钮，我之前的想法是以下两点：
1. 每个页面都可以分享。放在左侧，样式统一，工作量少（毕竟是用业余时间做的，平时也挺忙）
2. 让读者专心放在文章阅读上，通篇读完再绝对是否分享

关于评论按钮，这个真是习惯问题。因为我也看到不少主题是将功能按钮置于下方的（文章模块），这里只是放到了屏幕下方。

再次感谢

8355

2019-02-25 14:21:29 +08:00

都是看着照片进来的吧

MrYELiex

2019-02-25 16:05:37 +08:00

没理解设计逻辑
把操作放在四角增加操作成本? 设计还是要多了解前人经验为什么这么做不要直接自己想当然画一套然后给个`针对现代显示器优化`的 tag 有种为了找工作而做的感觉

shisan163

2019-02-25 16:17:56 +08:00

# 存放 sha256 加密的密码
# 拥有所有加锁文章的阅读权限
passwords:
- "b56888a08f3d2405dd37dba14af086c53fc7ed262bd33f1cabc87b2ad9343b69"
- 9fd4703ff67642ec7fc0f8616d7513e620263fa6f3758b5836f496dfe334ae34 # dongyuanxin
.......

godbmw

2019-02-25 17:32:55 +08:00

@MrYELiex 不需要用这个来装饰简历，因为之前也有做个一个主题，不论从 star 还是完整程度，那个主题都远远超过这个。这个之前就想做，寒假回家刚好没有公司的事情，就做了，就这样子。

@shisan163 theme 的_config.yml 和文章 front-matter 都可以添加 passwords 字段。前者添加的字段是拥有全局阅读权限，后者添加的字段是对应文章增加的阅读权限。前者可以留着自己用，省的每次都要开一个新的；后者可以给指定的文章指定的朋友使用。

galikeoy

2019-02-25 22:07:37 +08:00

@NoKey 说到心里去了，要点到四个角落，太蛋疼了，(我就是这么懒

frylkrttj

2019-02-26 20:46:24 +08:00

靓过我系列

liuxyon

2019-02-27 00:38:52 +08:00

目前妹子照片比风格好看，咋联系这妹子。。´◡`

godbmw

2019-02-27 10:59:12 +08:00

@frylkrttj 妹子比较靓~

@liuxyon 关注我♪(^∇^*)

liuxyon

2019-02-27 11:19:34 +08:00

@godbmw 关注你有(⊙o⊙)啥用