博客园自定义记录

记录了自定义博客园的过程。

js框架学习了这位博主分享的主题中的交互代码，包括页面标题设置，回到顶部和评论区头像加载。silence - 专注于阅读的博客园主题 在此表示感谢。

---

布局和样式定义

禁用了原本的标题栏和导航栏，在页首自定义html中自己写了标题栏和导航栏。导航栏中的关于我的页面还没写，打算直接写markdown文件上传到文章中弄个链接过去。

写了个主页信息展示，在js中控制只在主页时加载。这里有一个问题就是主页信息部分最后加载，页面会跳一下。直接将这部分代码写在html中的话又可能会导致每个页面都会加载这部分代码，比较费时，并且在js中控制它隐藏的话又会导致页面跳一下。这个问题还没有解决。

将侧边栏的公告部分隐藏（css中除了display:none以外，可以隐藏页面元素的几种方法）只显示加关注的链接，并设置其定位（css中的绝对定位（absolute）误区）居中（【css】absolute 元素完全居中的两种方法），做成按钮。关注按钮的样式学习了这个网页the barber theme，是jekyll的一个 demo。

列表界面的发布信息上边框长度随文字长度变化：css float和position属性

标签显示界面表格一行4个只显示3个不晓得怎么回事，为了看起来不明显直接将表格居中了（）

首页的图标和回到顶部的图标都来自于，为了实现关注图标的点击事件，我js怎么都写不对，就用了一个投机取巧的办法，点击关注图标后直接触发页尾的关注事件（）。提示文字应当有关注和取消关注两种，这里想通过读取页尾关注链接的文本来设置提示文字的状态，但是读取的html文本显示未定义，调试后发现是未加载，不了了之了，还没找到解决办法。

回到顶部按钮背景设置透明（css背景透明文字不透明或者子节点不透明）

我的字体 "lucida sans unicode", "lucida grande", sans-serif

web中文字体组合

---

常用到的工具或教程网站

矢量图标库font awesome

在线 less css 编译器

node.js

w3school， 可以在线运行代码

less相当于css的预处理语言

css样式素材：

踏得网，可以在线运行css和js代码：

---

待完成

• 设置title上的图标：
• 主页png格式的图标悬浮变色（未成功）纯css实现任意格式图标变色的研究
• 主页加关注图标提示文字
• 关于我的页面还没写
• 主页会跳一下
• 博客园首页的链接找个地方加
• 页尾信息栏高度可能不够
• 标签界面table一行只显示3个
• 签名部分
  还可能会有后续出现的一些bug等待修复。