2015-08-20

个人博客站点建设历程

前言

本篇日志用于归纳记录自己在学习建设个人博客站点中的各种尝试和思考。

　　为方便编辑和查看最新进展，更新以倒序方式呈现。

大部分改动最终会同步到 Yelee 主题中，希望主题用户能偶尔查看此日志，按需决定是否更新；

使用上的问题可先查阅文档《Yelee 主题使用说明》
改动和尝试中参考的主要资源都做了链接跳转并在文末列出；
[G]: 表示该项的具体修改已 commit 提交到 GitHub，点击即可查看；

2016 年 7 月

07-14 样式优化

[G] 修复图片路径不包含后缀名时 FancyBox 失效的问题；

07-14 样式调整

[G] 限制文章区最大宽度，改善宽屏下显示效果；

[G] 简化页脚页面统计信息的样式，文字解释改为图标标识，数字使用等宽字体。

07-04 目录设置

[G] 调整完善目录设置，方便显示\隐藏文章序号和限制目录最大级数（层级太多目录区会显得臃肿）。

2016 年 6 月

06-30 标签标题切换

[G] 合并 Pull，支持在切换标签页时更改其标题，挺有意思的小功能。

06-27 评论数显示

[G] 可以在主页文章标题旁显示评论数（多说或 Disqus）

06-25 新标签设置

[G] 完善新标签打开页面的设置，现在可以分别指定哪些类型页面在新标签中打开；

[G] 添加几个社交图标（LOFTER, Coding, Quora, bilibili, AcFun, niconico）

06-17 主题文档

[G] 主题发布 v3.5 版本，也终于弄好说明文档了，希望大家能更新，以后有疑问可先查阅文档: 《Yelee 主题使用说明》

06-14 样式调整

[G] 调整部分区域的阴影效果和文字样式；

[G] 去掉几张默认背景图。

06-11 ISSUE 模板

[G] 提 issue 前希望能阅读下推荐的短文，总结得挺好的提问的检查表。

06-08 动态加载评论

[G] 现在可以选择动态加载评论模块，即当点击评论条时才显示评论内容。

06-05 可折叠目录

[G] 多级目录现在可以被展开和收起，方便浏览。同时对目录相关的代码进行了大量优化；

[G] 目录不换行时，使用更合理的方式显示标题提示。

06-04 样式优化

[G] 经提醒修复边栏标签云显示溢出的问题；

06-02 图片压缩

[G] 压缩优化主题中的图片。

06-01 头部标签

[G] 补上一些常用的 HTML 头部标签，顺便统一代码缩进风格。

2016 年 5 月

05-27 代码优化

[G] 修复未启用 jQuery UI 时搜索功能会失效的问题。

05-26 代码优化

[G] 移动端不再加载多余的 jQuery UI, 首屏加载小了 100k；

[G] 修复迷你归档按钮切换问题。以前选择器选得太笼统了；

[G] 升级依赖版本。因为不会去兼容 IE6-8，所以 jQuery 直接升到了 2.2.4。

05-25 本地搜索

[G] 添加本地站内搜索功能。配置基本完善，再装个插件就能用，终于不用再折腾各种第三方搜索服务了。

05-23 IE 升级提示

[G] 现在使用 IE6/7/8 访问博客时将跳转的指定的页面；

05-21 主题版本

[G] 配置文件和页脚 Yelee 的提示文字中添加主题版本信息，方便讨论；

[G] 补充发布了从 1.0 到 3.0 共五个版本的主题。这么久了还能补上更新日志，多亏了自己明晰的 Commit 记录。

05-19 边栏点击

[G] 修复 PC 端单栏模式下不能点击展开侧边栏的问题，同时边栏使用 flex 布局以兼容 max-width 属性。

05-18 标题风格

[G] 优化标题相关代码，同时添加两种标题风格（Yilia, GitHub），喜欢极简的可以换用。

05-17 图片压缩

添加压缩优化背景图的说明，曾提过一次，但感觉不少用户并没有注意到，索性写了篇小教程。

05-16 标签底色

[G] 优化标签背景颜色相关代码，同时换用对比度更高的底色。

05-15 IE 升级提示

[G] 主题 IE6/7/8 下样式错乱，不打算兼容了，访问时会直接全屏提示升级浏览器。

05-07 列表样式

[G] 优化列表相关代码，同时新增 12 种列表标记样式。1-3 号标记为 CSS 默认样式，排版兼容性较好；其余通过伪元素控制，兼容性欠佳但样式较灵活。

05-03 社交图标

[G] 新添加 CSDN, 博客园等几个社交图标供选用；

更新主题介绍文档图片链接，HTTPS 链接的图片似乎有点问题。

2016 年 4 月

04-27 样式优化

[G] 完善移动端边栏翻译；

[G] 调整使用 Hexo 标签插件时引用区样式；

[x] [G] [G] 支持通过 - [x] - [ ] 添加复选框任务列表。只是一个临时的前端方案，还是希望相关 markdown 解析器能原生支持；

[G] 更新文档图片链接，贴图库感觉不大稳定。

04-24 样式优化

[G] 可在页脚显示网站成立年份；

[G] 调整标签云页面样式，同时完善其翻译。

04-20 代码优化

[G] [G] 精简百度分享和社交图标栏代码；

[G] [G] 调整页脚和边栏副标题样式；

[G] 目录不分行时显示省略号。

04-18 字体修复【重要】

[G] 修复字体搭配失效导致文字黯淡发虚的问题。一个小错误让主题在 Windows 下的显示效果大打折扣；

顺便统一了边栏字体，加粗文章各级标题。

04-17 图标优化

[G] 修复首页首篇文章过长时页面空白的问题；

[G] GitHub 更换 SVG 格式图标，既提高了清晰度又避开了之前图标不显示的问题；

[G] 调整样式代码，以换用清晰度更高的 logo 图片。

04-15 CDN 加速

[G] [G] [G] Font Awesome、clipboard.js 和 fancyBox 都使用 CDN 引入，精简代码和本地资源，同时加快页面二次加载速度；

[G] 主题配置中关联 CDN，方便切换。

04-13 字号调节

[G] 通过 rem 和 Stylus 变量，快速调节字号和缩放页面元素。用了 rem 这个单位，主题大概是真的不支持 IE678 了；

[G] 调整移动端文字、标题、行距、边距、版权信息区等样式，布局更紧凑，文字更突出。

04-03 字体优化

[G] 加深默认字体颜色，添加参数调整文本渲染效果；

[G] 优化 Font Awesome 图标在 Chrome 等浏览器下的显示效果。

04-02 分享优化

[G] 优化百度分享代码，同时将图标替换为 Font Awesome 字体，看着和谐多了；

[G] 添加 AddThis 分享。相比百度，AddThis 默认样式美观不少，而且可以在 HTTPS 站点中使用。

04-01 代码优化

[G] 修复网站位于子目录时 main.js 失效的问题；

[G] 当 GitHub.png 不存在时，使用 github.png 作为图标。不少用户更新后 GitHub 图标不显示，虽然可以甩锅给 Git, 还是在主题里做一下兼容好了；

[G] 修改文本框文字颜色，相对清晰些；

[G] 左边栏设置最大宽度，改善其在平板下的显示效果。

2016 年 3 月

03-30 代码高亮

[G] 关掉 Hexo 代码类型检测，手动指定代码语言，避免生成各种奇怪的高亮样式。

03-23 样式调整

[G] 调整页面进度条的默认样式，天蓝色带点阴影；

[G] 修复友情链接内容显示不全的问题，同时微调其样式；

[G] 主题文档中添加切换语言的说明。

03-21 翻译完善

[G] 完善文末版权区的翻译，同时为了保证切换语言后显示一致，对部分样式进行了调整。

03-20 多语言支持

[G] 主题添加多语言支持（简体中文 | 港澳繁体 | 台湾正体 | 英语），配置中未指定语言时默认使用简体中文。个人语言水平有限，欢迎协助完善翻译；

[G] 页面中加入语言声明；

[G] 修复阅读全文按钮移动端内边距设置无效的问题。

03-19 页面进度条

[G] [G] 合并 Pull, 引入 pace.js, 以便在页面加载时显示进度条。网站访问不够快时，用进度条调剂下也是不错的；

[G] 微调目录按钮位置，顺便提取变量，方便调整目录高度。

03-16 代码优化

[G] 把部分与主题配置关联不大的 JavaScript 代码移到单独的 JS 文件中，以减小静态文件体积和提升页面加载速度。原本想把每一个功能做成一个组件，只是用 EJS 模板似乎不够理想，暂时这样吧。

[G] 调整样式，避免友情链接中的标题被换行。

03-13 样式优化

[G] 调整文本框的字体颜色和背景（文本框使用四个空格或者 Tab 缩进）；

[G] 当浏览器窗口高度不足时，在左边栏显示垂直滚动条。

03-09 协议自适应

[G] 把原先合并在一起的 RequireJS, jQuery 分离开来，方便更新版本和替换支持 HTTPS 的CDN。出于兼容性考虑，jQuery 沿用原先的 1.9.1 版本；

[G] 改为在页面头部引入 jQuery，方便使用；

[G] MathJax 的 CDN 也改为相对协议以支持 HTTPS。

03-07 加载优化

[G] 删除多余的社交图标图片，多数图标已使用 Font Awesome 代替；

[G] 修复文章显示延迟问题。只有当动画效果开启且位于首页时，才设置文章区默认透明度为 0。调整后文章页近乎秒开，之前多了个透明度从 0 到 1 的动画过程，易有延迟感。

03-04 代码优化

[G] 调整目录标题 title 属性的获取方式；

[G] 修复关闭动画后文章区不显示的问题；

[G] 参考 Pull，修复开启 Fancybox 时无法使用 <img> 标签设置图片尺寸和标题的问题。

03-02 配色方案

[G] 调整灰白主题样式，同时转移代码到 Stylus 文件中，更规范且方便编写；

[G] 添加 Yilia 配色方案。因为改动地方较分散，因而使用覆盖的方式添加。以后大概会添加几种配色方案，几套标题样式，方便搭配；

[G] 增大引用区和文末版权区外边距；

[G] 提取变量，方便统一调节标签、按钮和图标的透明度。

03-01 问题修复

[G] 修复表格过宽时溢出窗口的问题；

[G] 修复多说 UA 透明度失效问题。

2016 年 2 月

02-29 Hexo 更新

[G] 更新 Hexo 到最新版本，解决了目录标题锚点不显示中文的问题。说是更新，其实只是换个文件夹安装了另一个 Hexo，下载插件，然后备份恢复自己改动的文件；

[G] 开始使用当前版本的 Yelee 作为自用博客主题，方便调试和同步更新；

暂时关闭搜索功能。因为现在博客只托管在 GitHub，百度站内搜索无法正常抓取。

02-28 子目录设置

[G] 修改主题资源链接，添加对应设置以支持在子目录存放网站。http://yoursite.com/blog；原本以为挺容易，结果修改起来不少坑，配置获取，默认值，地址拼接等都要注意。

02-27 样式调整

[G] 调整标签背景色的生成方法，似乎兼容性好些；

[G] 调整头像加载动画实现方式。原先 lazyload 感觉较卡顿，关联较多，兼容性欠佳；

02-23 样式优化

[G] 调整社交图标间距。原先只设置了右边距，左边栏宽度调整后图标区可能不居中。

02-21 样式调整

[G] 调整文章区外边距，避免多说表情框溢出背景。

02-18 代码优化

[G] [G] 合并 Pull，修复滚动条溢出问题；对齐置顶图标；修复社交图标文件名不匹配问题。

02-17 样式优化

[G] 社交图标和文章区域添加轻微阴影效果；

[G] 修复改变左边栏宽度后隐藏标签按钮不对齐的问题；

[G] 设置变量，方便修改主题背景色和透明度。

02-11 代码优化

[G] 分离社交图标栏代码，设置变量/循环自动生成相关样式。代码得以精简，以后添加图标和修改样式也比较方便；

[G] 平板等触摸屏设备关闭 Tooltip

02-04 样式调整

[G] 增大段间距，改善文章排版效果；

[G] 修复部分 subnav 社交图标不能点击跳转的问题。

02-01 代码优化

[G] 合并 Pull , 避免执行无效代码；

[G] 修复美化提示框样式后多说无法选择表情的问题；

调整最近访客头像动画效果。

2016 年 1 月

01-30 样式调整

[G] 调整正文、按钮等不同区域的 Tooltip 提示框样式。

01-27 设置优化

[G] 添加全局配置，方便显示/隐藏文章目录及文末版权信息。如果默认关闭，依然可以在文章头部添加相应参数单独开启。

01-26 样式调整

[G] 整合 GitHub-Repo-Widget.js，同时微调其样式，方便在页面中展示 GitHub 项目；

[G] 使用 jQuery UI Tooltip，美化工具提示框样式。试了不少修改方案，没有发现更省心的；

[G] 添加简书、SegmentFault、Medium 等8个网站图标，同时稍微简化相关 CSS 代码。

01-21 设置优化

[G] 添加网站计数设置，方便开启/停用计数及修改有关显示文字；

[G] 看到不少用户喜欢把左边栏调宽，干脆在配置中提供选项好了，与左边栏宽度相关的元素会自适应调整；

[G] 为方便调整左边栏宽度，其中元素全部居中显示。之前下半部分是向左偏移的，似乎这样更顺眼？

01-19 样式优化

[G] 修复关闭动画后单栏模式中不显示头像的问题；

[G] 添加设置，方便在文章前为“自用笔记”分类添加说明文字。

01-18 引用样式

[G] 添加 7 个引用样式；

先逐步完善对局部样式的自定义，再看看怎么结合这些小样式，搭配出几个不同风格主题供选择。

01-17 样式分离

[G] 分离正文中的标题、列表、引用以及表格等模块，方便以后为主题添加和设置自定义样式；

CSS 写法我应该是比较熟悉了，所以分离后的样式直接使用更简洁的 Stylus 改写。

01-16 配置文档

[G] 多说还是有不少人因为误解而配置失败，又补充了一些说明，能装上 Hexo 的应该都能理解了吧；之前一直沿用 Yilia 主题的配置，但其实原配置过于简略，也有些许杂乱，这次索性重写了。设置项按功能分类，编写风格保持一致，同时附上一些必要的配置说明。

01-14 站内搜索

[G] 优化百度站内搜索的引入方式，同时透明其背景；

站内搜索似乎是很鸡肋的，除了测试搜索效果外我几乎没怎么用过，记录中也极少看到访客使用搜索。对博主自己而言，如果文章都是原创且设置了完善的分类和标签，我想他一定能很快检索出需要的内容。对访客而言，访问这类小博客通常是通过搜索引擎或者某篇博文链接，直接就查看到了所需内容，无站内搜索需要；如果访客只是偶尔进的主页，那他大概也只是漫无目的地看看归档或者标签，站内搜索依旧被闲置。目前我还保留着搜索功能，基本只是做个展示吧，确实很需要站内搜索的可以参考添加。

01-12 样式控制

[G] 在主页隐藏本篇文章的标签列表；隐藏本篇文章目录中三级标题前的序号。

01-10 文章历史版本

[G] 关联 GitHub 上的文章备份，在文末版权区里添加文章更新历史、修改记录查看和 Markdown 源文件下载功能。感觉这是个很小众的需求，就不把它整合进 Yelee 主题里了，有需要的可以参考相关 commit 和文章添加；

[G] 文末版权区小标题样式设置为 inline-block，避免被换行；站外链接改在新标签中打开；改用 break-all 强制换行，以优化长链接显示效果。

经验记录: 《关联 GitHub, 让 Hexo 支持查看文章更新历史》

01-09 兼容性改善

[G] 合并 Pull。1. 调整滚动监听方式，对 Safari 使用特定样式，提升主页动画兼容性；2.直接使用 cssText 设置菜单按钮动画，以兼容 IE 9 以上版本；3.取消 -webkit-box 布局，避免头像在 IE9 + 和 Firefox 中显示错乱；4.优化友言评论移动端样式。

01-08 首页动画

[G] 合并 Pull, 引入 ScrollReveal.js 和 Animate.css，以设置和丰富首页动画效果。动画可在配置中关闭。

01-07 代码优化

[G] JavaScript 变量移至页头，精简代码，同时也方便设置在指定页面中禁用特定功能模块；

添加文章置顶功能，同时微调置顶图标边距；

默认关闭 MathJax 数学公式解析，优化无公式显示需求用户的页面加载速度。

01-06 样式调整

修复网易云音乐移动端可能撑破布局的问题，max-width。

01-05 样式自定义

分离部分 CSS 样式模块，便于以后通过主题配置快速切换样式；

[G] 添加 9 个文本高亮样式，4 个代码配色方案；

尝试对背景图使用 CSS 模糊滤镜，似乎很影响页面流畅度，原因不详，维持现状。

01-04 按钮优化

[G] 使用 jQuery 重写目录切换按钮代码，修复移动端按钮值显示和点击无效问题，同时添加一些动画效果；

[G] 添加回调函数，修复迷你归档切换时可能出现的显示问题。

01-03 样式调整

[G] 调整文字选中后的背景和颜色；

[G] 修复菜单栏过长会覆盖社交图标的问题；

[G] 归档页设置在新标签打开文章链接；

稍微增大引用区内边距。

01-01 评论优化

[G] 添加友言评论；优化评论模块代码与配置；重写评论配置说明。

经验记录: 《为 Hexo 主题添加评论模块 — Disqus, 多说, 友言》

2015 年 12 月

12-27 移动端优化

[G] 时间与标题对齐；增大网站小标题内边距；调整日期样式；字体大小调整；页脚布局优化；”隐藏标签”按钮优化; 移动端归档页默认隐藏标签；

[G] 在 iPad 和单栏模式中，不加载背景图，改用随机 CSS 背景色，从而提高移动端加载速度，减少背景兼容性问题；

[G] 为头像增加动画效果；

[G] 调整鼠标悬停时的字粗、字色、背景色等效果。

12-25 样式调整

[G] 社交图片调整为图标悬停时整体放大。

12-24 评论按钮

[G] 取消页面类型判断，改为判断页面内是否存在评论区，不存在则自动隐藏评论跳转按钮。

12-22 跳转按钮

[G] 文章跳转按钮优化，精简代码，优化逻辑，合并 CSS。

12-21 迷你归档

[G] 在左边栏目录区增加一个迷你文章列表，通过旁边中间按钮调出或隐藏。

12-18 目录标题

[G] 可在主题配置中设置目录标题不换行。

12-17 规范代码

[G] 修改调整自己在主题中添加的代码，尽量使其符合前端代码规范。

12-13 站长验证

[G] 主题配置中提供选项，方便站长验证。

12-12 目录优化

[G] 正文中没使用 HTML 标题时，自动隐藏目录区。

12-11 样式调整

[G] 微调博客字体及社交图标样式。

[G] 多说 UA 内不换行，移动端隐藏多说评论框背景。

12-06 版权信息

[G] 优化文末版权信息。以词断行；去掉网址鼠标悬停加粗效果，英文慎用悬停加粗，易破坏布局。

12-04 字体调整

[G] 为标题，正文，以及代码区设置不同的英中字体。

经验记录: 《CSS font-family 网页字体使用小结》

12-02 文章摘要

[G] 增加通过 front-matter 自定义文章摘要的功能。

至于自动截取设定字数作为摘要的功能，就不添加到主题了。作为内容生产者的个人博客，应该对自己的文章及其呈现方式多用点心。

12-01 标签云优化

[G] 使用 Hexo 自带参数优化分类列表；

[G] 页面中添加分类和标签数统计。

2015 年 11 月

11-30 评论跳转

[G] 修复导航按钮中 Disqus 评论跳转问题。

11-28 标签云优化

[G] 调整优化标签云样式。tag 内强制不换行；修改 hover 后样式，避免破坏布局。

11-27 表格换行

[G] 调整表格换行规则，标题行与首列不换行。

11-25 图片居中

[G] 移动端居中显示图片。

11-24 样式调整

[G] 调整无序列表样式。

11-21 代码优化

[G] 将标签云页面代码模块整合到 page.ejs 中；

[G] 修复长链接和分类列表换行显示问题；

因为整合 Pull 到主分支前未测试，出现问题后折腾了一会，因而意识到 branch 在协作中的重要性，也顺便熟悉了 Git 增删管理本地和远程分支的方法。

11-19 样式调整

[G] Page 页面中标题的默认样式改为居中，区别于 Post。

11-18 目录显示

[G] 去除 Page 页面中的目录和版权信息，只在 Post 中显示。

11-17 随机背景优化

整合 Pull，优化随机背景代码；

[G] 改进背景参数设置，改写说明文档；

11-16 代码框样式

[G] 调整优化代码显示框相关样式。

11-15 图片样式

[G] 改进 fancybox 模块的加载和开关方式。

11-11 文章分类

[G] 修复文章多分类显示问题。

11-09 时间格式

[G] 修复时间格式错误。

11-06 个人 Wiki

使用 TiddlyWiki 为博客增加个人 Wiki。

11-01 样式优化

[G] 调整优化目录样式。

2015 年 10 月

10-26 Stylus

原来我写的不是纯粹的 CSS, 而是 Stylus, 这个很称心，学起来。

10-25 地址复制

[G] 增加复制地址等信息到剪贴板的功能。

10-23 主题切换

整合些个人代码，切换博客到自己的主题 Yelee。

10-22 提交主题

[G] 参考相关文档，顺利提交主题到官网，415，挺不错;

列出的参考资料越来越少，因为现在看着源码就可以开心地改这改那了。

10-21 社交图标

[G] 重构优化社交图标显示。

10-20 背景图开关

[G] 配置中添加关闭背景图的选项。

10-19 完善主题

[G] 保留原主题多说评论；

完善主题说明文件；

继续转移代码到新主题中。

10-18 发布主题

撰写说明文件，制作配图；

分享主题到 V2EX，见光。

10-17 主题 Yelee

感谢 Git 的版本控制以及自己较详细的 commits 记录，有了这些新主题构建顺畅多了。

10-16 构建主题

[G] 折腾许久，对原主题改动越来越多，应该可以发布个新主题了，在整理代码重新提交时也可以顺便复习巩固所学知识；

等新主题弄好后就把个人博客公开，然后暂时减少折腾，好好看书打基础。

10-15 文章导航

[G] 添加文章导航跳转按钮；

[G] 优化不蒜子显示方式。

10-14 多说评论

[G] 优化站长认证方式；

[G] 修复多说页面评论重复问题。

10-12 标签云界面

[G] 优化跳转按钮代码；

[G] 添加标签云界面。

10-11 跳转按钮

[G] 重构优化跳转按钮代码。

10-10 样式调整

修改 apple-touch-icon 底色；

调整表格等样式。

10-09 图片优化

[G] 添加 apple-touch-icon；

随机背景图减少到5张，过犹不及；

用 Photoshop 尽可能压缩页面图片；

[G] 百度站内搜索JS本地化从而设置背景透明。

10-08 Font Awesome

[G] 本地化 Font Awesome CSS 图标库以提高页面加载速度，同时优化相关引用代码；

10-07 订阅

[G] 添加博客订阅功能;

[G] 调整多说样式；

调整页面样式。

10-06 样式调整

[G] 优化配色主题，修改多说样式，背景透明化；

[G] 增加随机背景图功能，使用渐进式 jpg。

[G] 修复跳转按钮显示问题。

10-05 新配色主题

[G] 添加背景图片，设置背景透明度，修改颜色，字体等样式；

[G] 透明目录背景，自动隐藏目录之后的元素；

10-04 SEO & 部署

[G] 同时部署博客到 Gitcafe，加速国内访问，便于百度索引；

[G] 添加百度站内搜索；

网站提交到数十个搜索引擎供收录，设置robots.txt；

[G] 添加、修改社交网站图标;

样式、代码优化;

10-03 搜索 & 页面样式

优化关于我页面;

自定义404页面。

[G] 改用 Swiftype 搜索；

经验记录：《在 Hexo 中创建匹配主题的404页面》

10-02 网站统计

[G] 添加百度统计模块;

[G] 调整搜索框样式。

10-01 搜索模块

添加网站 sitemap;

[G] 添加微搜索并设置好搜索框位置及样式。

2015 年 9 月

09-30 关于我页面

新建关于我页面;

编写内容并个性化该页面样式

09-29 多说样式

[G] 个性化多说评论样式。

经验记录：《多说样式折腾记录 — 添加 UA 浏览器标识、旋转头像等》

09-28 社会化分享

[G] 使用百度分享。

09-25 时间格式

[G] 修正时间格式；

09-23 网站计数

更新网站图标 favicon;

[G] 使用不蒜子增加网页访问统计功能。

09-22 模块化

[G] 长链接强制换行；

[G] 修复和加密邮件链接；

[G] 学习模块化管理代码；

09-21 版权设置

[G] 自定义日期格式；

[G] 增加文末版权信息。

09-20 样式优化

[G] 隐藏的文章前言标题；

[G] 修改新建文章模板；

[G] 优化表格样式。

09-16 Markdown 表格

研究如何写好和管理 Markdown 表格。

09-15 样式调整

[G] 调整移动端标签按钮样式；

09-14 按钮优化

[G] 文章索引界面增加按钮用于隐藏标签，方便浏览；

[G] 按钮文字切换。

09-13 样式优化

[G] 修复 iOS 下代码显示不全问题；

[G] 个性化标题等样式；

[G] 移除 iOS 按钮样式。

09-12 样式调整

[G] 列表背景色调整；

[G] 去掉主页按钮，设置通过点击名字或者头像回到主页；

09-11 样式调整

[G] 阅读全文链接避免换行；

[G] 背景颜色，字体颜色，鼠标悬浮效果等。

09-10 样式调整

[G] 使移动端导航与PC端效果一致。

09-09 目录优化

[G] 目录固定到左下，“藏”在左边栏里；

[G] 调整移动端目录样式。

09-08 样式调整

[G] 修复 reference 隔行变色样式；

[G] 随机背景色。

09-07 样式修复

在 Hexo 中新建页面；

[G] 移动端文章导航垂直居中。

09-06 垂直居中

[G] 重构代码，用表格实现链接靠边垂直居中。

09-05 样式优化

[G] 更顺眼的标记排序；

[G] 配色，边距，字体等样式调整。

09-04 样式优化

[G] 修复长标题覆盖日期的问题；

[G] 让移动端标题边距更合理;

西文单词与汉字间加空格，便于阅读和分段。

09-03 GitHub 使用

开始使用 issue 功能；

学会在 commit 中关闭 issue。

09-02 主页跳转

[G] 使移动端也能点击头像回到主页。

09-01 目录优化

[G] 为目录添加 overflow 属性，超过设置高度显示滚动条。

往后博文固定链接只用小写，便于输入，减少404。

2015 年 8 月

08-31 Markdown 样式

[G] 参考各种主题个性化自己的 Markdown 样式。

08-30 代码高亮

[G] 替换默认代码高亮主题；

[G] 自定义代码高亮样式。

08-29 Markdown 文章优化

改用[文字][链接代码]的语法写 Markdown 文章，减少书写干扰。

08-28 跳转按钮优化

[G] 添加 span 标签使整个按钮区域都能响应点击；

[G] 增加 class, 减少重复代码；

使按钮 div 直属于 body，保证可用性。

08-27 按钮移动适配

[G] 添加跳转按钮 CSS 样式，为移动端做适配。

08-26 跳转按钮

[G] 使用 HTML锚点实现返回底部功能；

[G] 返回顶部按钮也改用锚点a href="#top"实现；

08-25 更新基本信息

[G] 更新友情链接，关于我，边栏菜单等基本信息；

给文章添加标签和分类。

08-24 样式优化

给正文跳转链接增加提示标题，便于明晰去向;

[G] 设置参考资料列表单双行为不同底色；

[G] 修改目录按钮鼠标指针样式便于区分。

08-23 Markdown 文章优化

配置邮箱使代码 commit 确认身份后显示头像；

链接前后加一个半角空格改善阅读体验；

列出参考资料，并 Markdown 化 Endnote Reference 的导出样式，方便添加到文末。

经验记录：《EndNote 与 Markdown 结合 — 为网文快速添加 Reference》

08-22 返回顶部按钮

[G] 给博客添加返回顶部按钮；

学习书写规范的 Commit Message。

08-21 目录按钮

[G] 文章页添加按钮，用于显示或者隐藏文章目录；

[G] 简单修改了按钮的 CSS 样式；

发现 Hexo 服务开启时也可以修改配置文件，刷新网页即生效，预览方便多了。

08-20 TOC & Markdown

[G] 给博客添加文章目录 Table of Contents；

接触很久了，今天开始正式学习使用 Markdown 写文章。编辑器选了马克飞象，其默认主题很赞，导出效果也与 Hexo 相近，方便预览。Mou 也不错，备用。

08-19 GitHub Pages 配置

开始在 GitHub Pages 上使用 Hexo 搭建管理博客，这类静态博客比较简洁轻量，不用接触 PHP 和后台数据库，修改方便，更适合正在学习 HTML, CSS 和 JavaScript 的我；

[G] 安装使用 Hexo 新主题：Yilia ；

[G] 绑定域名到 Pages；

[G] 绑定网页评论到自己的多说账户。

08-18 GitHub, Pages & Hexo

把主题代码托管到 GitHub，方便版本管理，回顾修改历史；

在 GitHub 上搭建博客，采取 Hexo 框架，在 Windows 下安装配置环境；

搭建这个静态博客又折腾了一晚，主要因为:

Mac 下安装意外出错，我又不熟悉 Mac 的文件管理和配置方式，转战 Windows；

各种教程包括官方英文文档省略了不少基础步骤，比如我折腾好一会才知道$ npm install -g hexo-cli是要在 git 安装后打开 git bash 输入，而不是在系统命令提示符里输入；

不知道”$”是表示这个是命令行代码，输代码时并不用输入；

要以管理员身份打开 git bash，之后的代码才能正常运行；

不重视官方文档，网友分享的不少教程命令已经过时了，翻看官方文档修正后才能使用。

08-17 修改主题

[G] 修改代码，使首页默认显示摘要 the_excerpt；

自定义中关闭站点标题，左边栏显示稳定不少；

[G] 通过自带小工具 text 添加了个人头像和简介；

尝试各种配色方案。

08-16 搭建 WordPress 本地环境

为了方便修改主题和预览效果，参考教程利用 XAMPP 在 Windows 10 下搭建了 WordPress 本地环境；

先试着在 Mac 上搭建，出错被迫放弃；在 Windows 上顺利搭建，配置也更为丰富，不足就是有时需要以管理员身份启动程序才能运行 Apache。

08-15 试用 WordPress

试了多个主题，决定在官方默认主题 Twenty Fifteen 的基础上，自行添加修改样式。喜欢默认的双栏布局，另外官方代码完善的注释和排版也便于学习和修改；

安装插件 WP User Avatar 解决自定义头像问题；

安装插件 Useso take over Google 改善后台访问速度；

安装插件 W3 Total Cache 改善网站访问速度。

08-14 安装&修复 WordPress

在个人虚拟主机上安装了网站程序 WordPress，但因为瞎折腾，把主机 FTP 文件清空，新安装的 WordPress 不能在线安装主题插件及上传文件，各种搜索无果，把后台密码给了枫叶主机的技术员，重新配置安装后得以修复。

08-13 域名解析和绑定

参考站长网的一篇文章做好建站准备；

用主机商提供的配置信息绑定和解析了域名。

02-26 购买虚拟主机

在枫叶主机购买 Shadowsoscks 代理时看到了推荐的虚拟主机优惠套餐，蒙生了为自己建个站点写东西的想法，之后买了域名和主机。

02-25 注册域名

在腾讯云域名选了个便宜，不用备案且后缀顺眼的域名，

个人站点 moxfive.xyz 成功注册！

参考资料

MOxFIVE Blog: http://moxfive.xyz/
腾讯云域名: https://domains.qcloud.com/
枫叶主机: http://www.fyzhuji.com/
新手站长如何简单搭建一个织梦网站 by 梓轩博客 on 2014/10/21: http://www.admin5.com/article/20141021/567235.shtml
WordPress: http://cn.wordpress.org/
WordPress缓存插件W3 Total Cache安装设置方法和缓存加速效果对比 by qi on 2012/10/04: http://www.freehao123.com/wordpress-w3-total-cache/
WordPress 自定义头像插件：WP User Avatar by 倡萌 on 2013/03/26: http://www.wpdaxue.com/wp-user-avatar.html
WordPress使用Useso公共库和字体库：Useso take over Google by Bruno on 2014/08/22: http://www.brunoxu.com/useso-take-over-google.html
Theme: Twenty Fifteen by WordPress.org on 2015/08/19: https://wordpress.org/themes/twentyfifteen/
WordPress本地环境搭建及安装图文教程 by fnxjkj on 2012/11/23: http://jingyan.baidu.com/article/90bc8fc82098def653640c88.html
XAMPP: https://www.apachefriends.org/index.html
Error running apache after XAMPP install by CMPS on 2014/01/07: http://stackoverflow.com/questions/24097498/error-running-apache-after-xampp-install
网页设计怎么都不会错的6条配色原则 by 应酷设计 on 2014/08/12: http://www.uisdc.com/6-rules-webdesign-color
Code Reference: the_excerpt () by bhlarsen on 2015/06/28: https://developer.wordpress.org/reference/functions/the_excerpt/
GitHub Pages: https://pages.github.com/
Hexo Framework Homepage by Tommy Chen on 2015: https://hexo.io/zh-cn/
使用GitHub搭建静态博客（Hexo） by 钟白兔 on 2014/04/07: http://segmentfault.com/a/1190000000458953
使用 GitHub 和 Hexo 搭建免费静态 Blog by wsgzao on 2015/03/23: https://www.v2ex.com/t/178642
Hexo-Theme-Yilia by litten on 2015/02/21: https://github.com/litten/hexo-theme-yilia
GitHub: https://github.com/MOxFIVE
M-Hexo-Blog by MOxFIVE on 2015: https://github.com/MOxFIVE/M-Hexo-Blog
WP-Theme-2015 by MOxFIVE on 2015/08/18: https://github.com/MOxFIVE/WP-Theme-2015
多说评论系统: http://duoshuo.com/
马克飞象: http://www.maxiang.info/
Mou - Markdown editor for developers: http://25.io/mou/
为Hexo博客添加目录 by 况小琪不卖萌 on 2015/02/09: http://kuangqi.me/tricks/enable-table-of-contents-on-hexo/
关于点击按钮弹出DIV的相关代码 by 逍遥狂儒 on 2013/08/02: http://is.gd/bD33Ya
用JavaScript实现简单的点击返回顶部效果 by jingangel on 2012/03/08: http://www.cnblogs.com/jingangel/archive/2012/03/08/2385939.html
写出好的 Commit Message by victor on 2014: https://ruby-china.org/topics/15737
Git Commit message conventions by AngularJS on 2015: https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/
Setting your email in Git by GitHub on 2015: https://help.github.com/articles/setting-your-email-in-git/
Endnote: http://endnote.com/
Markdown 语法说明 by riku on 2012: http://wowubuntu.com/markdown/
认识与入门 Markdown by Te_Lee on 2014/04/17: http://sspai.com/25137
奇偶行显示不同样式操作，CSS3 :nth-child()伪类选择器 by phpok on 2013/03/08: http://blog.phpok.com/archives/202/
什么是HTML锚点，锚点应该如何用？ by houniaoxiapu on 2014/08/23: http://jingyan.baidu.com/article/8275fc86b79e6446a13cf66b.html
JS点击按钮到页面最底部/返回页面顶部代码 by 科e互联 on 2014/12/12: http://www.internetke.com/tutorial/js/2014/1212/1005.html
Hexo的私人订制 by Sunny on 2014/03/07: http://blog.sunnyxx.com/2014/03/07/hexo_customize/#定制代码样式
Closing issues via commit messages by GitHub on 2015: https://help.github.com/articles/closing-issues-via-commit-messages/
6 Methods For Vertical Centering With CSS by S. Bradley on 2011/07/14: http://vanseodesign.com/css/vertical-centering
hexo你的博客 by 不如 on 2013/11/22: http://ibruce.info/2013/11/22/hexo-your-blog/
你所不知的 CSS ::before 和 ::after 伪元素用法 by Dimpurr Cheny on 2013/10/18: http://justcoding.iteye.com/blog/2032627
去掉超链接或按钮点击时出现的虚线边框 by WEB开发者 on 2012/08/10: http://www.admin10000.com/document/725.html
Documentation: Format by Moment.js on 2015: http://momentjs.com/docs/#/displaying/format/
不蒜子: 搞定你的网站计数 by 不如 on 2015/4/4: http://ibruce.info/2015/04/04/busuanzi/
百度分享: http://share.baidu.com
微搜索: http://tinysou.com/
百度统计: http://tongji.baidu.com/
Swiftype: https://swiftype.com/
同时将博客部署在GitHub和Gitcafe上，并通过DNSPOD分流 by PPTing on 2015/02/08: http://ppting.me/2015/02/08/gitcafe/
百度站内搜索: http://zn.baidu.com
Gitcafe: https://gitcafe.com/
国内外各大免费搜索引擎、导航网址提交入口 by 卢松松 on 2015/09/22: http://tool.lusongsong.com/addurl.html
TiddlyWiki: http://tiddlywiki.com/
解决Hexo置顶问题 by Netcan on 2015/11/22: http://www.netcan666.com/2015/11/22/解决Hexo置顶问题/
ScrollReveal.js: https://scrollrevealjs.org/
Animate.css: http://daneden.github.io/animate.css/
Commit message 和 Change log 编写指南 by 阮一峰 on 2016/1/6: http://www.ruanyifeng.com/blog/2016/01/commit_message_change_log.html

本文标题:个人博客站点建设历程

文章作者:MOxFIVE

发布时间:2015-08-20, 00:00

最后更新:2016-07-21, 22:41

更新历史: Blame, History文本模式: .md Raw

原始链接:http://MOxFIVE.xyz/2015/08/20/blog-building/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。