博客园自定义主题样式

柔光的暖阳◎ 2021-10-18 10:20 437阅读 0赞

记录我在定制个人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标签引入][link]，在首页html输入：

*  YourBlog：个人创建博客园blog时的Blog地址名
 *  YourTheme：上传编写好的`.css`文档到博客-管理-文件内，以便上述代码调用

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

## Fork me on Github 标签 ##

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

*  YourGithub：个人github的链接
 *  src="..."：[github官网][github]提供的标签样式，可自行查找

## 参考 ##

*  [付伤年华的博客][Link 1]
 *  [止步路人 - 让你的博客不再单调，博客园设置随机背景图片教程][-]
 *  [Rosaynatu - 博客园个人首页背景设置][Rosaynatu -]
 *  [FEbuddy - 引入外部CSS的两种方式及区别][link]
 *  [legege007 - 博客园美化][legege007 -]
 *  [CSS文本字体颜色][CSS]
 *  [Chrome取色器][Chrome]
 *  [lunhui\_zsf - 字体font-family对照表][lunhui_zsf - _font-family]

转载于:https://www.cnblogs.com/SouthBegonia/p/10886929.html

[link]: https://www.cnblogs.com/zhaoyingli/p/5379990.html
[github]: https://github.blog/2008-12-19-github-ribbons/
[Link 1]: https://www.cnblogs.com/ruanraun/
[-]: https://www.cnblogs.com/zhibu/p/7158807.html
[Rosaynatu -]: https://blog.csdn.net/qq_36346831/article/details/80947660
[legege007 -]: https://www.jianshu.com/p/eb66825d6808
[CSS]: http://www.divcss5.com/rumen/r116.shtml
[Chrome]: https://jingyan.baidu.com/article/f25ef2548e8544482c1b82b0.html
[lunhui_zsf - _font-family]: https://blog.csdn.net/lunhui1994_/article/details/80507970