欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

博客园自定义记录

程序员文章站 2022-07-02 13:27:47
记录了自定义博客园的过程。 js框架学习了这位博主分享的主题中的交互代码,包括页面标题设置,回到顶部和评论区头像加载。 "Silence 专注于阅读的博客园主题" 在此表示感谢。 布局和样式定义 禁用了原本的标题栏和导航栏,在页首自定义html中自己写了标题栏和导航栏。导航栏中的关于我的页面还没写, ......

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

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等待修复。