手动修改博客css样式,打造属于自己的博客样式
这两天花了点时间修改了下自己的next主题的博客
样式表放在了GitHub上喜欢的话可以直接使用
next博客主题样式修改
使用方法
-
直接下载样式表,然后复制到自己主题的themes extsourcecss_custom目录下的custom.styl文件
<link rel="stylesheet" type="text/css" href="/images/blog/custom.css"> |
¶自己动手修改的方法
小白教程,大佬见笑。需要一点点css基础,可以上菜鸟教程现学
准备
- chrome浏览器或者其他带检查功能的浏览器
- 如果你是用的hexo博客的next主题,那么自定义样式表就在themes extsourcecss_custom目录下的custom.styl文件中
- 如果是其他类型的博客,先百度自定义样式表在哪里
查找样式名称
现在我们开始自己动手修改样式
先用浏览器打开自己博客页面,找到自己要修改的样式的地方,比如我要修改这个文章标题样式
然后鼠标右键,点击检查
深色的那一行就是标题所在的html语句
鼠标移动到那一行,点击,这时右侧出现css样式表
选择样式名称,复制
然后回到themes extsourcecss_custom目录下的custom.styl文件中,开始自己写样式
例如
.posts-expand .post-title-link{ |
showtime
当然前提是你使用的是nexo主题,并且我使用的是next里的mist子主题,其他主题可能不兼容
下面是一些我的建站笔记汇总,平常做的小手工,希望对大家有帮助
hexo博客搭建以及next美化教程 原生js实现网页图片点击展示效果 用回valine评论系统,valine评论框样式美化 给hexo静态博客添加动态相册功能 hexo建站笔记之首页文章轮播图 模仿知乎的链接卡片 开始使用腾讯云图床 将公众号文章爬到hexo博客 使用腾讯云cdn加速博客 hexo建站笔记之彩色标签云 手动修改博客css样式,打造属于自己的博客样式
最近文章