钉子の次元

Dimpurr – 千里之行,始於足下。

使用 TiddlyWiki 打造轻便个人 Wiki 知识库

这篇文章将简要介绍 TiddlyWiki 的特点,并且分享一些常用的参考链接、资源、插件和常见问题的解决方案,以方便有相近需求的小伙伴们。

TiddlyWiki ,按官方说法是一个「非线性个人 Web 笔记本」。相比其他笔记和 Wiki 系统,其最大的特点之一是程序本体和数据全部都在一个单 html 文件内,与此同时仍然有着非常强大的功能和插件系统。在我看来,管理以文字、代码和数学公式为主的个人知识库, TiddlyWiki 可谓是最好的选择之一。

可以在我的知识库站点「Dimpurr’s Knowledge Base #1」:http://note.dimpurr.com/ 体验一下 TiddlyWiki 的使用和效果。

注意,任意访客都可以体验到 TiddlyWiki 的全部功能,包括编辑和设置。不用担心,你可以随意折腾,因为你无法将更改保存到我的服务器上,只能下载到本地。

TiddlyWiki 效果预览

TiddlyWiki 效果预览

READ MORE →

HTML Head Generator – 纯 CSS 实现的头部元标签代码生成器

前段时间突发奇想,捣鼓出了这个纯 CSS 选择器实现的在线 HTML <head> Meta 标签生成器,以解决每次要写 HTML 头都得去找个之前的文档复制,还得琢磨半天需要哪些的麻烦。没有到用一行 JavaScript ,基本原理是 CSS 3 的 + 紧邻选择器和 ~ 同级后继选择器。前端攻城狮们可以用短链接 http://find.moe/headgen 快速访问,也可以拖到收藏夹备用。

感谢 电灵 酱对最终样式的建议。

Dimpurr's <head> Generator

Dimpurr’s Head Tag Generator

写的时候感觉槽点一大堆,过了一周什么都忘了 …… 简单说明一下实现的要点吧。如果有更好的实现思路或觉得有可以改进的地方敬请指教,不过,前提是无 JavaScript 。

READ MORE →

Slackview – 多级响应式 WordPress 主题

Slackview 是一个黑色扁平大气风格、 HTML5 多级响应式三栏布局的 WordPress 主题。她是 Clearision 的姐妹主题,也将是我的第二款长期自用主题。

Slackview

Slackview

READ MORE →

Tuneiz – 清新文字向单栏 Ghost 主题

这是一个简洁清新、注重阅读体验的轻量级 Ghost 主题。自用主题,庆祝 Clearision 用户数破千特别释出 ……

Tuneiz

Tuneiz

READ MORE →

Adagiio V1.1.1 – 宽屏大图 ACG 风格单栏 WordPress 主题

Adagiio 是一个 HTML5 的宽屏大图 ACG 风格单栏 WordPress 主题,又名 Sankarea ,配色灵感来自绣球花的叶。适合文艺向、动漫向个人博客和大图风格 CMS 站点。附带移动版响应式页面,支持中英文。感谢 (null) 群的各位在开发过程中的帮助,没有你们这个主题也做不出来 ……

Adagiio 首页

Adagiio 首页

欢迎在此页提出相关问题和建议!

READ MORE →

madoro – 扁平黑色自适应窄单栏 WordPress 主题

madoro 是我花了一个下午一个晚上单曲循环「まどろみの约束」速成的以星空为主题的新单栏主题,没有用背景以外的任何一张图片素材,大概可以用在文字为主或想自定义背景的简洁风格博客。附带移动版响应式页面。

madoro

madoro

千反田える (佐藤聡美) & 伊原摩耶花 (茅野愛衣) – まどろみの約束


READ MORE →

dp-card – 钉子的个人页一代

这是一个 HTML5 + CSS3 的个人名片页,附带响应式移动版,兼容 IE9 及以上浏览器。

dp-card

dp-card

最近有不少同学表示了对钉子目前个人页的喜爱,虽然个人觉得并不咋滴, 正好准备过段时间重新设计新版的个人页,于是好好修正了一下放出来了。出于无聊重新修改了各种语义化标记,把脚本也重做了,并且通过了 W3C 验证,感谢 @JoyNeop 菊苣的挑刺 …… 纯 HTML5 页面,需要请自行修改相关内容。有问题可以回复,可能不接受新的功能需求。

READ MORE →

Fly Out.

大概也不过是 2013 年 6 月 20 日,也就是正好半年前, Dimpurr 这个奇怪的拼写被赋予了含义。自此之后又过了无数个白天和夜晚,直到某天大概仅仅是觉得有必要再为自己写一篇相对详细的自述了,亦或是忽然间有些无聊,总而言之,就有了这篇间杂了回忆和痴想的意识流文章的存在。

READ MORE →

StartPress – 空 WordPress 主题脚手架

这是一个 HTML5 的空 WordPress 主题,可以基于此快速开始新主题的创作。内置了基本的输出结构和函数,没有任何多余样式标签。目前处于早期测试版本还较不稳定,欢迎试用和反馈。Github 项目地址→

StartPress

StartPress

因为连续制作了几个主题之后遇到了例如首页 meta 标签等的复用问题,于是就花了一晚上在几个主题的基础上修改合并成了这个空主题,并加上了注释。这只是一个单纯的空白主题,并且内置了一些常用函数,并不是一个框架,也没有复杂的功能。代码格式和文件结构有一定的个人风格,也欢迎诸位来添砖加瓦。预计将会在今后增加关于后台设置的框架。

READ MORE →

页面布局孰优孰劣:基于REM的EMs弹性布局——可用性的胜利

页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 Fixed 固定布局,到因为宽屏设备和移动互联网的普及产生的响应式和自适应,再到「Mobile First」的设计理念,前端们在可用性方面做的努力越来越多。

REM 是一个在 CSS3 中被提出的新单位,相对 EM 变为了针对根元素 <html> 的 font-size 计算,使得便利性大为提升的弹性布局再次被提上话题。在介绍具体实现之前,不妨先说说为何要选择 EMs 进行布局。

脱离了表格布局的蛮荒时代后,越来越多的基本布局方式被应用在了实践中,当然也不乏多种配合。以下就是几个常用技术的对比。(响应式和自适应这两个名词经常被错误使用,例如 自适应网页设计(Responsive Web Design) 这篇文章

  • 固定 Fixed
    使用 px 和 pt 这样的绝对单位进行固定布局。在无论什么设备上保持固定的尺寸,在不适合的分辨率下可能导致大面积空白或横向滚动条。最经典,也是被证明极其不友好、维护困难的方法。
  • 流动 Fluid
    使用 % 百分比进行相对布局。可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。某些情况下可能导致错误的伸缩或者布局被破坏。
  • 弹性 Elastic
    使用 em 或 rem 单位进行相对布局。避免了根据 px 布局在高分辨率下几乎无法辨认的缺点,又相对 % 百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示。需要一段时间适应而且不易从其他布局转换过来,但几乎是目前最好的布局方式。
  • 伸缩 Flexbox
    使用 CSS3 Flex 系列属性进行相对布局。对于富媒体和复杂排版的支持非常强大,但是还未普及并且兼容性较差。
  • 响应式 Responsive
    使用 @media 媒体查询 给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验,但是在同一个设备下实际还是固定的布局,并且因为浏览器的支持原因对介质的检测还不实用。
  • 自适应 Adaptive
    通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局,实际上就是利用响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术综合统称。自适应几乎已经成为优秀页面布局的标准。

READ MORE →

为 WordPress 主题添加文章形式支持和注册自定义类型

WordPress 3.1 之后,推出了一个模仿 Tumblr 的「文章形式」功能,可以让博客中除了默认的文章之外展现出更多的特殊样式。不同的文章形式,可以支持在输出时进行判断处理,以及列出存档等等……很多细心的主题里面都会加上对一些文章形式的支持,如果在面临特殊需求时,希望能够自定义专门的编辑器或者分类目录,那么还可以去注册一个自定义的文章类型。

一 内置形式

WordPress 已经内置对几种常用的文章形式的支持,如果可以满足需要,那么就不需要再重复造轮子了,只需要添加主题对已有形式的支持就好了。内置形式列表如下:

  • standard – 标准,也就是默认的文章形式
  • aisde – 日志,实质上就是个不显示标题的标准文章
  • link – 链接,类似 Tumblr 的链接分享
  • quote – 引语,展示为引用的一段文字
  • status – 状态,简而言之就像是一条 Tweet
  • image – 图像,发布单张图片
  • gallery – 相册,也就是扩充的图像功能
  • audio – 音频,……需要说吗
  • video – 视频,……同上
  • chat – 聊天,以专门格式显示聊天记录

如果想添加对以上形式的支持,只需要在 functions.php 里添加对应的项目即可,然后在输出文章的时候使用函数判断切换不同的样式:

READ MORE →

First Blood! 人生第一桶金 Get

钉子最近各种销声匿迹,许多文章也拖着迟迟没有码完,至于这单儿,已经是两周以前的事儿了。时间久远略微有点记忆模糊,不过为了纪念,还是在此回忆一下国庆那时的一血达成之路吧。

Alipay

Alipay

@Losses Don 螺丝菊苣找到钉子时,还从未做过 Discuz! 模板更别说商业模板的某人还不太敢接。任务很简单,不需要再从头做设计,按照一个现成的 Typecho 模板风格套用上去即可。口上说着不一定做, 身体还是挺老实的嘛 不过钉子还是马上查起了相关的教程。

「唉 就是个想做站刚入行不知道水多深的家伙 我也就是帮忙忙活一下 ._. 工作量不大 不过很闹心 你做做就知道了= =」

——螺丝菊苣如是说

在那之前钉子只有做过一次 WordPress 的主题,充分享受了其完善的官方文档和开发资源的福利,自然不会料到接下来的艰辛。混乱过时的各种教程,语焉不详的模板文档,首先就来了一个下马威。在无奈放弃了寻找教程之后,某人对着默认模版敲起了代码。还没开始多久,调用LOGO这一关就被间歇性失灵的新老版本两个模版目录调用语句卡住了。钉子终于开始体会到了闹心这个词的含义。

READ MORE →