首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

博客主题美化

这次的美化主要分为四个部分: 文章内显示封面 给文章添加更新时间 修改代码块样式以及添加复制功能(这个功能有点问题,具体解决办法看文章末尾) 给网站添加点击效果(这个功能我没有加,感觉太花哨了) 参考文章:Diaspora 主题美化日记...所以他的代码块美化这一点和我们有所区别 先贴图: 问题一:代码块内容超出长度后会显示滚动条,有点丑,干掉 问题二:复制按钮会随着滚动条滚动而位移,不能忍,干掉 这里引用上文链接作者的一段话: 因每个人的目录都不同,设定博客根目录为...Blogroot,主题根目录为 Themeroot 解决办法就是在 Themeroot\source\css\diaspora.css中添加如下样式代码: /* 设置代码块隐藏滚动条 */ pre::

56710
您找到你想要的搜索结果了吗?
是的
没有找到

hexo博客主题推荐_wordpress社交主题

个人博客 个人博客: https://www.crystalblog.xyz/ 备用地址: https://wang-qz.gitee.io/crystal-blog/ HexoBlog 个人博客...修改博客文章模板 30. 在线编辑hexo博客 31. 站点统计不显示问题 32. 文章链接部分超长处理 33....归档时间轴添加时间列表的切换 Front-matter Front-matter 选项详解 最全示例 上篇hexo博客搭建及主题优化(一) 下篇hexo博客搭建及主题优化(三) 主题优化二 21...添加快捷导航 在博客根目录下的\source\_posts\navigate\index.md目录下新建快捷导航: hexo new page navigate 修改主题目录下的_config.yml文件...归档时间轴添加时间列表的切换 归档的布局文件是主题目录下的/layout/archive.ejs, 原来里面的逻辑是以卡片的形式循环展示所有的博客文章. 具体代码如下: <!

44K10

WordPess主题:樱花庄的白猫博客主题

A Wonderful WordPress Theme: 樱花庄的白猫博客主题 在 Louie 基于 Fuzzz 的Akina主题修改的主题Siren基础上第三次 =.= 这两位前辈已经很了不起了,我可以把他们的代码弄乱吧...:) 注意:建议git clone下载(简易Git使用指南;如果选择下载压缩包,解压后记得把文件夹名改回Sakura,也保证主题路径为/wp-content/themes/Sakura/;主题设置在菜单...-外观-Sakura 主题设置中;DIY的时候采用子主题并勾选Sakura 主题设置-CDN-本地调用主题 js、css 文件;请注意主题说明中的其他注意事项。...主题使用说明见:https://2heng.xin/theme-sakura/ 本仓库镜像:https://git.moez.cc/mirors/sakura 下载地址: github:樱花庄的白猫博客主题...主题演示

74110

主题博客诞生之路

,有目录/打赏等功能 tranquilpeak主题博客作者展示比较少,但是indigo作者可以展示的位置比较多,并且可以加入自定义的作者页面 tranquilpeak的博客搜索用的是第三方的服务来做的...,当博客更新后需要hexo algolia重新提交索引,而indigo是本地生成json数据,部署上更加方便一些 本次还探索了使用本地图片来完成markdown的方法 切换主题 在github上的主题切换用的是修改配置文件...样式微调 针对indigo这个博客主题,感觉文章显示宽度比较小,通过研究less样式表,把一个变量从绝对像素变成了百分比,从而顺利解决了适配问题 另外在使用indigo博客主题时,发现最新版本的toc渲染不对头...博客折腾体会 虽然瞎费了不少功夫,不过对前端静态博客的架构有了一定的认识,对自己用的东西最起码有个了解的底气~ 通过引入了hexo-asset-image,从而可以本地使用图片,相信这个对于写博客有很大的用途...最初看到的主题样例都是有丰富的图片展示,下一步就是增加一些博客图片,从而让博客有些灵气~ PS:附上两个博客的地址 tranquilpeak indigo

69690

hugo博客搭建 | PaperMod主题

2.新建站点 输入hugo new site hugoblog ,就会在hugoblog文件夹内出现如下目录结构: image.png 3.下载主题 先去 hugo主题官网 找到自己喜欢的主题,然后点击下载会跳转到主题的...github, 把终端的路径调整到博客文件夹的themes目录下,输入:git clone https://github.com/adityatelange/hugo-PaperMod.git,比如我的主题是...然后把主题里面的一些静态文件和配置文件复制到站点目录下,目的是为了可以自定义博客的样式,而不会改动主题文件夹里的样式,这样主题要更新的时候,直接在主题目录下git pull就可以,站点目录的修改会优先覆盖主题里的配置...欢迎光临素履(Sulv)的博客联系方式" imageUrl: "img/Q.gif" imageTitle: imageWidth:...# description: "这是一个纯粹的博客......"

2.6K10

Hexo 博客安装 Fluid 主题

一.主题 使用 hexo 推荐选择一款自己喜欢的主题主题带有一些额外的功能适配,不需要自己去做,比如评论、友链、访问统计。...可以浏览官方网站来选择自己喜欢的主题:https://hexo.io/themes/。 我是用的主题是 Fluid,我就以此主题为例来给大家演示如何安装主题。...二.安装 下面的命令默认在博客根目录执行 通过命令安装 npm install --save hexo-theme-fluid 修改 Hexo 博客目录中的 _config.yml: theme:...--save hexo-theme-fluid 现在通过命令 hexo s 来预览你新安装的主题啦 三.开启友链 可以和你的好友博客之间交换友链哦,Fluid 提供的友链的功能。...在后台管理配置即可,带有详细的主题,如有不会的可以在在本文留言。 六.结束 本文所有主题配置都和博客使用的一样,欢迎访问查看:https://xcmaster.com

90320

博客主题美化

1.主题效果 实际网站效果 https://www.cnblogs.com/leader755/ 2.主题介绍 本主题使用的 SimpleMemory 这款主题,看完本教程后你能搭出相同美化的博客主题博客了...BNDong/Cnblogs-Theme-SimpleMemory 官方教程:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v1.1/#/ 3.设置主题并申请...js 代码权限 1>进入管理>设置>博客设置>设置 2>博客主题>选择 SimpleMemory 主题 3>勾选申请 js 权限,填写开通的理由等待管理员审核通过(等待 10min 左右)。...将复制到的 css 粘贴到 css 代码块中,并且勾选上 禁用默认 css. 3.点击保存,强制刷新局可以看到基本样式出来了 5.侧边栏公告的基本配置 在侧边栏公告中将以下代码粘贴进去,点击保存强制刷新博客页面就基本可以看到页面效果了...到了这里如果不追求其他,一个美化博客的操作就已经完成了,但是我还想配置个性化,那就请看下面。

3.6K10

一款简洁的Typecho主题 仿制主题Splity博客主题

前言 Typecho是一个由中国团队自行开发的开源的博客程序。...相比较Wordpress,Typecho的主题和插件目前数量不多,但相对于Wordpress的臃肿,Typecho响应非常的快,同时也很简洁,适合新手搭建博客使用。...Typecho官网 Splity主题 对于新手来说,挑选一个适合的博客主题还是非常有挑战性的,这里给大家推荐一个非常简洁的博客主题-Splity博客双栏主题,这是一款由小灯泡团队仿制的Typecho主题...Typecho博客主题,昼夜双版设计,可以后台设置白天和黑夜模式。非常的好用,并且完美适配手机,是一款非常良心的typecho主题插件,博主还是非常推崇的。 ? Splity主题 手机适配 ?...Splity主题 后台主题设置 扩展更新: 主题增加后台主题设置,傻瓜式操作,无需HTML和CSS知识可以设置前台页面。

2.4K20
领券