博客园自定义主题样式

Posted southbegonia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了博客园自定义主题样式相关的知识,希望对你有一定的参考价值。

记录我在定制个人blog页面效果时遇到的技巧及方法等。

基本流程

  1. 设定博客皮肤为BluSky
  2. 定制首页代码:引入外部CSS

页顶博主名字及副标题

在首页html内输入以下代码可添加博主名到页面顶端,也可添加副标题:

<header class="main-header" id="site-head">
        <div id="top" class="vertical">
            <div id="site-head-content" class="inner row">
                <div class="col-md-9">
                    <div class="site-description">
                        <h2 class="blog-title">YourBlogName</h1>
                        <h3 class="blog-description">SubtitleContent</h2>
                    </div>
                </div>
            </div>
        </div>
</header>
  • YourBlogName:主标题,可写博主名等
  • SubtitleContent:副标题,可写座右铭、博客说明等

字体及背景图

创建CSS编写页面字体的信息及背景图;首先需要引入所创建的CSS,方法为通过link标签引入,在首页html输入:

<link type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/YourBolg/YourTheme.css"/>
  • YourBlog:个人创建博客园blog时的Blog地址名
  • YourTheme:上传编写好的.css文档到博客-管理-文件内,以便上述代码调用

关于.css文件的定制信息包括各类标题、字体样式、背景图片等信息,能力有限暂不细讲,但若采用其他主题可有更便捷方法实现更换背景图、修改字体等功能。

Fork me on Github 标签

在首页html内输入以下代码即可实现标签:

<a href="https://github.com/YourGithub">  
<img style="position: fixed; top: 0; right: 0; border: 0; z-index:9999;" 
    src="https://github.blog/wp-content/uploads/2008/12/forkme_right_red_aa0000.png?resize=149%2C149" class="attachment-full size-full" 
    alt="Fork Me On GitHub" data-recalc-dims="1">
</a>
  • YourGithub:个人github的链接
  • src="...":github官网提供的标签样式,可自行查找

参考

以上是关于博客园自定义主题样式的主要内容,如果未能解决你的问题,请参考以下文章

两分钟搞定博客园自定义样式

博客园自定义主题分享-简洁漂亮

博客园自定义样式(去广告公告栏加头像按钮样式)

博客园自定义样式

博客园自定义背景图片

博客园自定义样式修改标签页的icon图标