博客园HTML结构分析
博客园随笔页源码
通过查看博客园随笔页的源代码可以分析博客园的初始结构。
对其格式化、高亮、删除不必要元素后，展示如下，其中注释是按照功能进行划分的，通过看注释可快速了解博客园随笔页面的代码结构。
你可以点击右下角的切换全屏和隐藏侧边来阅读下面这段代码。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:description" content="本文对博客园的文章页面进行HTML结构的分析" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>博客园HTML结构分析 - oceans-pro - 博客园</title>
<link id="favicon" rel="shortcut icon" href="//common.cnblogs.com/favicon.ico?v=20200522" type="image/x-icon" />
<link rel="stylesheet" href="https://www.cnblogs.com/css/blog-common.min.css" />
<!--********************************************* 我们自定义的CSS ***********************************************-->
<link type="text/css" rel="stylesheet" href="https://www.cnblogs.com/oceans/custom.css?v=iqozQ81eYhas6/uKBsTeo7K9TTQ=" />
<link
id="mobile-style"
media="only screen and (max-width: 767px)"
type="text/css"
rel="stylesheet"
href="https://www.cnblogs.com/skins/custom/bundle-custom-mobile.min.css"
/>
<link type="application/rss+xml" rel="alternate" href="https://www.cnblogs.com/oceans/rss" />
<link type="application/rsd+xml" rel="EditURI" href="https://www.cnblogs.com/oceans/rsd.xml" />
<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="https://www.cnblogs.com/oceans/wlwmanifest.xml" />
<script>
var currentBlogId = 616775
var currentBlogApp = 'oceans'
var cb_enable_mathjax = false
var isLogined = true
var isBlogOwner = true
var skinName = 'Custom'
var visitorUserId = '36350983-b3a9-4341-d579-08d822f03d4a'
var currentPostDateAdded = '2020-08-06 04:42'
</script>
<script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>
<script src="https://www.cnblogs.com/js/blog-common.min.js"></script>
</head>
<body>
<!-- 回到顶部的锚 -->
<a name="top"></a>
<div id="page_begin_html">
<!--********************************************* 页首 HTML 代码位置，由博客园预处理 ***********************************************-->
<script>
loadPageBeginHtml()
</script>
</div>
<div id="home">
<!--********************************************* 博客园的头部 ***********************************************-->
<div id="header">
<div id="blogTitle">
<a id="lnkBlogLogo" href="https://www.cnblogs.com/oceans/">
<!-- 博客园的返回主页 -->
<img id="blogLogo" src="/skins/custom/images/logo.gif" alt="返回主页" />
</a>
<h1>
<a id="Header1_HeaderTitle" class="headermaintitle HeaderMainTitle" href="https://www.cnblogs.com/oceans/">
<!-- 博客园的标题-->
</a>
</h1>
<h2>
<!-- 博客园的副标题-->
</h2>
</div>
<div id="navigator">
<!-- 博客园的顶部导航-->
<ul id="navList">
<li><a id="blog_nav_sitehome" class="menu" href="https://www.cnblogs.com/">博客园</a></li>
<li><a id="blog_nav_myhome" class="menu" href="https://www.cnblogs.com/oceans/">首页</a></li>
<li><a id="blog_nav_newpost" class="menu" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a></li>
<li><a id="blog_nav_contact" class="menu" href="https://msg.cnblogs.com/send/oceans-pro">联系</a></li>
<li><a id="blog_nav_rss" class="menu" href="javascript:void(0)" data-rss="https://www.cnblogs.com/oceans/rss/">订阅</a></li>
<li><a id="blog_nav_admin" class="menu" href="https://i.cnblogs.com/">管理</a></li>
</ul>
<!-- 博客园的发文统计 -->
<div class="blogStats">
<span id="stats_post_count">随笔 -1 </span>
<span id="stats_article_count">文章 -1 </span>
<span id="stats-comment_count">评论 -1</span>
</div>
</div>
</div>
<div id="main">
<div id="mainContent">
<div class="forFlow">
<div id="post_detail">
<div id="topics">
<div class="post">
<!--********************************************* 随笔标题和摘要 ***********************************************-->
<h1 class="postTitle">
<a id="cb_post_title_url" class="postTitle2 vertical-middle" href="https://www.cnblogs.com/oceans/p/13447259.html">
<span>博客园HTML结构分析</span> </a
>。
</h1>
<div class="postBody">
<div id="cnblogs_post_description" style="display: none">本文对博客园的文章页面进行HTML结构的分析</div>
<div id="cnblogs_post_body" class="blogpost-body cnblogs-markdown">
<!--********************************************* 随笔内容！ ***********************************************-->
</div>
<!-- 签名 -->
<div id="MySignature"></div>
<!--********************************************* 博客后面的信息 ***********************************************-->
<div id="blog_post_info_block">
<div id="blog_post_info"></div>
<div class="clear"></div>
<div id="post_next_prev"></div>
</div>
</div>
<!--********************************************* 阅读|评论|编辑 ***********************************************-->
<div class="postDesc">
posted @ <span id="post-date">2020-08-06 16:42</span> <a href="https://www.cnblogs.com/oceans/">oceans-pro</a>
阅读(<span id="post_view_count">0</span>) 评论(<span id="post_comment_count">0</span>)
<a href="https://www.cnblogs.com/oceans/p/名字.md" target="_blank">MD</a>
<a href="https://i.cnblogs.com/EditPosts.aspx?postid=唯一编号" rel="nofollow">编辑</a>
<a href="javascript:void(0)" onclick="AddToWz(13447259);return false;">收藏</a>
</div>
</div>
</div>
</div>
<!--********************************************* 自带代码高亮 ***********************************************-->
<script src="https://common.cnblogs.com/highlight/9.12.0/highlight.min.js"></script>
<script>
markdown_highlight()
</script>
<!-- 锚点:评论 -->
<a name="!comments"></a>
<div id="comment_form" class="commentform">
<!-- 锚点:评论 -->
<a name="commentform"></a>
<span id="tip_comment" style="color:Red">感谢您的回复:) 服务器端执行耗时56毫秒</span>
<!--********************************************* 博客园的评论区 ***********************************************-->
<!-- 查看评论 -->
<div id="divCommentShow"></div>
<div id="comment_nav">
<span id="span_refresh_tips"></span>
<a href="javascript:void(0);" onclick="return RefreshCommentList();" id="lnk_RefreshComments" runat="server" clientidmode="Static">
刷新评论
</a>
<a href="#" onclick="return RefreshPage();">刷新页面</a>
<a href="#top">返回顶部</a>
</div>
<!-- 发表评论 -->
<div id="comment_form_container"></div>
<!--********************************************* 广告 ***********************************************-->
<div id="ad_t2"></div>
<div id="div-gpt-ad-1592365906576-0" style="width: 300px; height: 250px;"></div>
</div>
<div id="under_post_news"></div>
<div id="cnblogs_c2" class="c_ad_block">
<div id="cnblogs_c1" class="c_ad_block">
<div id="div-gpt-ad-1592366332455-0" style="width: 468px; height: 60px;"></div>
</div>
<div id="under_post_kb"></div>
<!--********************************************* 博客园业务脚本 ***********************************************-->
<script type="text/javascript">
var allowComments = true,
cb_blogId = 616775,
cb_blogApp = 'oceans',
cb_blogUserGuid = 'XXX'
var cb_entryId = 13447259,
cb_entryCreatedDate = '2020-08-06 16:42',
cb_postType = 1
loadViewCount(cb_entryId)
loadSideColumnAd()
var commentManager = new blogCommentManager()
commentManager.renderComments(0)
fixPostBody()
deliverBigBanner()
deliverT2()
deliverC1C2()
loadNewsAndKb()
loadBlogSignature()
LoadPostCategoriesTags(cb_blogId, cb_entryId)
LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid)
GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType)
loadOptUnderPost()
GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate)
</script>
</div>
</div>
</div>
<div id="sideBar">
<div id="sideBarMain">
<div id="sidebar_ad"></div>
<!-- 广告 -->
<div id="blog-calendar"></div>
<script>
loadBlogDefaultCalendar()
</script>
<div id="leftcontentcontainer">
<div id="blog-sidecolumn"></div>
<!--********************************************* 博客园的侧边栏HTML 代码位置， 由博客园预处理***********************************************-->
<script>
loadBlogSideColumn()
</script>
</div>
</div>
</div>
</div>
<!--********************************************* 博客园底部的版权信息 ***********************************************-->
<div id="footer">
Copyright © 2020 oceans-pro<br />
<span id="poweredby">Powered by .NET Core on Kubernetes</span>
</div>
</div>
<div id="page_end_html">
<!--********************************************* 页脚 HTML 代码位置（自定义） ***********************************************-->
<div>页脚 HTML 代码</div>
<script>
console.log('页脚 HTML 代码')
</script>
</div>
</body>
</html>
对源码的分析
博客园允许我们自定义四大部分。
- 页首 CSS
- 页首 HTML
- 侧边 HTML
- 页脚 HTML
值得注意的是：
- 博客园的默认引入了
jquery.js，highlight.js这两个库- 博客园的通用脚本
blog-common.min.js - 博客园的通用样式
blog-common.min.css，bundle-custom-mobile.min.css
- 尽管我们在博客园的设置界面禁用模板默认 CSS，但是还是发现会引入博客园的 CSS。但是这些 CSS 好多都用了
!important，为此我们只能以毒攻毒了。 - 在三处可以自定义 HTML 代码（也即 JS）的地方，只有
页脚 HTML没有被博客园预处理。我们的页脚 html 代码相当于直接被复制到了</body>之前。 - 经过我的测试，发现
页脚 HTML中的 JS 执行顺序在页首 HTML中的 JS 之前（由于loadPageBeginHtml()的存在），如果有需要预先执行 JS 的需求，需要将这部分 JS 放在页脚 HTML而不是页首 HTML
下面是需要预先执行 JS 的例子
- 用
$.ajaxComplete方法捕获博客园发送的Ajax请求结果，越靠前，能捕获的 Ajax 越多 - 如初始加载主题色的脚本，一定要尽量靠前，否则会看到“从白变黑的过程”，用户体验差。
- 又如替换博客园默认图标的脚本也需要靠前，否则 Edge 等浏览器会仍然使用博客园默认图标
总结
考虑到：
- 三级以下的标题几乎没有 SEO 效果
- 写博客!=写书
- 标题级数多了，侧边栏会很难看，且大小难以区分
- 一个页面 H1 不宜过多
因此，我们写博客时，最好只用 h2 和 h3。如果真的需要多级结构，可以用加粗或者系列博客来解决。
