博客园自定义记录

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

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


布局和样式定义

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

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

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

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

标签显示界面表格一行4个只显示3个不晓得怎么回事,为了看起来不明显直接将表格居中了(table表格整体居中和table表格中各行各列内容居中

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

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

我的字体 "Lucida Sans Unicode", "Lucida Grande", sans-serif

web安全字体组合英文

web中文字体组合


常用到的工具或教程网站

矢量图标库Font Awesome

阿里巴巴矢量图标库

easyicon图标下载

在线 LESS CSS 编译器

Node.js

w3school菜鸟教程 可以在线运行代码

less中文文档 LESS相当于CSS的预处理语言

css样式素材:100素材网

踏得网,可以在线运行css和js代码:悬浮时变模糊的按钮


待完成

  • 设置Title上的图标:标签页图标设置
  • 主页png格式的图标悬浮变色(未成功)纯CSS实现任意格式图标变色的研究
  • 主页加关注图标提示文字
  • 关于我的页面还没写
  • 主页会跳一下
  • 博客园首页的链接找个地方加
  • 页尾信息栏高度可能不够
  • 标签界面table一行只显示3个
  • 签名部分
    还可能会有后续出现的一些bug等待修复。
posted @ 2019-08-29 16:48  __斯年  阅读(264)  评论(0编辑  收藏  举报