博客园-真够意思
程序员文章站
2022-08-10 11:02:31
1、word书写blog 使用word的blog模板，可以上传到博客园的随笔上去。上传后，在word继续编辑，再上传的话，就会覆盖掉同一篇随笔。 上传配置 如果找不到模板的话，可以在上图中的搜索框内，搜索‘博客文章’，联网的话，一定能搜到。 如果从未添加过账户的话，点击下图中的‘新建’按钮。 账户信 ......
1、word书写blog
使用word的blog模板，可以上传到博客园的随笔上去。上传后，在word继续编辑，再上传的话，就会覆盖掉同一篇随笔。
上传配置
如果找不到模板的话，可以在上图中的搜索框内，搜索‘博客文章’，联网的话，一定能搜到。
如果从未添加过账户的话，点击下图中的‘新建’按钮。
账户信息填你自己登录时候的账号密码，url 填写： http://www.cnblogs.com/xxx/services/metaweblog.aspx (xxx是你的用户名)。
如果不能发不成功，请检查下图的blog地址名是不是与url链接中的xxx一致。
如果有多个账户的话，在文章里选择相应账户即可。点击左上角 ‘发布’ 即可。
2、博客园的自定义
与市面上常用的blog相比，有以下优势：
- 基本没有广告，对比csdn.
- 发布文章不用审核，对比csdn
- 页面高度自定义(最关键)，对比简书，csdn。支持css, html script植入。
在cnblog的设置页面，
我选择的风格是：
3、支持script脚本植入
这个功能需要在"设置"中申请一下。在工作日，大概一天就能申请下来。这样，你就能对页面中所有元素就行操作了。
4、牛刀小试-添加文章目录
1) 页面css
1 #main {
2 margin-right: calc(50% - 610px);
3 }
4
5 #ad_t2, #under_post_news, #under_post_kb, #cnblogs_c1 {
6 display: none;
7 }
8
9 .xh-treemenu li {
10 list-style: none;
11 }
12
13 .xh-treemenu .xh-toggler {
14 cursor: pointer;
15 }
16
17 .xh-treemenu .xh-toggler:before {
18 display: inline-block;
19 margin-right: 2pt;
20 }
21
22 li.xh-tree-empty > .xh-toggler {
23 color: #aaa;
24 }
25
26 li.xh-tree-empty > .xh-toggler:before {
27 content: "\263a";
28 }
29
30 li.xh-tree-closed > .xh-toggler:before {
31 content: "\263b";
32 }
33
34 li.xh-tree-opened > .xh-toggler:before {
35 content: "\263a";
36 }
37
38 #xh-aside {
39 position: fixed;
40 top: 4%;
41 left: calc(50% - 691px);
42 width: 243px;
43 overflow: hidden;
44 text-overflow: ellipsis;
45 white-space: nowrap;
46 }
47
48 .xh-tree {
49 color: #46cfb0;
50 width: 800px;
51 margin: 100px auto;
52 }
53
54 .xh-tree li > a,
55 .xh-tree li > span {
56 padding: 0 4pt;
57 border-radius: 2px;
58 }
59
60 .xh-tree li a {
61 color: #46cfb0;
62 text-decoration: none;
63 line-height: 20pt;
64
65 }
66
67 .xh-tree li a:hover {
68 background-color: #34bc9d;
69 color: #fff;
70 }
71
72 .xh-active {
73 background-color: #34495e;
74 color: white !important;
75 }
76
77 a.xh-active {
78 color: #fff;
79 }
80
81 .xh-tree li a.xh-active:hover {
82 background-color: #34bc9d;
83 }
84
85 ul {
86 padding-left: 30px;
87 }
2) script
注：cnblog内部已经把jquery加载进来了。
关于第三方链接资源，一定要https开头，否则加载不进来。关于网页资源（图片，js）的存储,可以采取以下两种方案：
1、放到cnblog中。不过有文件类型限制。
2、放到github中，但是比较慢。可以放到码云上（github在中国的托管）。至于如何生成静态链接自己搜。
1 <script>
2 $(".catlisttitle").text('');
3 $('.newsitem').prepend('<img src="https://xunhanliu.gitee.io/js/cnblog-profile.png" alt="xunhanliu" style=" width: 116px;margin: 0 auto;display: block;border: solid 1px #00ff2b;border-radius: 50%;">');
4 </script>
5 <script src="https://xunhanliu.gitee.io/js/d3.v4.min.js"></script>
6 <script>
7 console.log('谢谢啊');
8 (function ($) {
9 $.fn.openactive = function (activesel) {
10 activesel = activesel || ".xh-active";
11
12 var c = this.attr("class");
13
14 this.find(activesel).each(function () {
15 var el = $(this).parent();
16 while (el.attr("class") !== c) {
17 if (el.prop("tagname") === 'ul') {
18 el.show();
19 } else if (el.prop("tagname") === 'li') {
20 el.removeclass('xh-tree-closed');
21 el.addclass("xh-tree-opened");
22
23 }
24
25 el = el.parent();
26 }
27 el = $(this).parent();
28 if (el.find('li').length > 0) { //不是叶子
29 el.removeclass('xh-tree-opened');
30 el.addclass("xh-tree-closed");
31 }
32 });
33
34 return this;
35 }
36
37 $.fn.treemenu = function (options) {
38 options = options || {};
39 options.delay = options.delay || 0;
40 options.openactive = options.openactive || false;
41 options.activeselector = options.activeselector || "";
42
43 this.addclass("xh-treemenu");
44 this.find("> li").each(function () {
45 e = $(this);
46 var subtree = e.find('> ul');
47 var button = e.find('span').eq(0).addclass('xh-toggler');
48
49 if (button.length == 0) {
50 var button = $('<span>');
51 button.addclass('xh-toggler');
52 e.prepend(button);
53 } else {
54 button.addclass('xh-toggler');
55 }
56
57 if (subtree.length > 0) {
58 subtree.hide();
59
60 e.addclass('xh-tree-closed');
61
62 e.find(button).click(function () {
63 var li = $(this).parent('li');
64 li.find('> ul').slidetoggle(options.delay);
65 li.toggleclass('xh-tree-opened');
66 li.toggleclass('xh-tree-closed');
67 li.toggleclass(options.activeselector);
68 });
69
70 $(this).find('> ul').treemenu(options);
71 } else {
72 $(this).addclass('xh-tree-empty');
73 }
74 });
75
76 if (options.openactive) {
77 this.openactive(options.activeselector);
78 }
79
80 return this;
81 }
82 })(jquery);
83
84 </script>
85
86 <script>
87 $(function () {
88 var lastheadtag = 0;
89 var el = d3.select('#main').append('div').attr('id', 'xh-aside').append('ul').attr("class", "xh-tree");
90 var children = $("#cnblogs_post_body").children()
91 for (var i = 0; i < children.length; i++) {
92 tagnamel = $(children[i]).prop("tagname").split('');
93 if (tagnamel.length == 2 && tagnamel[1] > 0 && tagnamel[1] < 7) //取出h标签
94 {
95 //为这些children添加id
96 $(children[i]).attr('id', $(children[i]).text().trim());
97 addtagtree(tagnamel[1], $(children[i]).text().trim(), lastheadtag);
98 lastheadtag = tagnamel[1];
99 }
100 }
101 var tagtree = {};
102
103 function addtagtree(tagnum, text, lastheadtag) {
104 if (lastheadtag == 0) {
105 el = el.append('li').data(tagnum)
106 el.append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
107 return;
108 }
109 if (lastheadtag < tagnum)//下一级
110 {
111 el = el.append('ul').append('li')
112 el.data(tagnum).append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
113 ;
114 } else if (lastheadtag == tagnum) {//同一级
115 el = d3.select(el._groups[0][0].parentnode).append('li').data(tagnum);
116 el.append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
117 ;
118 } else { //上溯添加
119 //1、parent同级，完美
120 //2、parent<tagnum 接着上溯
121 //3、parent>tagnum 放到parent的下一级
122 el = d3.select(el._groups[0][0].parentnode);
123 var addflag = 0;
124 while (el.attr("class") == null || el.attr("class").search("xh-tree") == -1) {
125 if (el._groups[0][0].tagname === 'ul') {
126 } else if (el._groups[0][0].tagname === 'li') {
127 if (el.data() == tagnum) {
128 el = d3.select(el._groups[0][0].parentnode).append('li').data(tagnum);
129 el.append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
130 ;
131 addflag = 1;
132 break;
133 }
134 else if (el.data() < tagnum) {
135 el = el.select('ul').append('li').data(tagnum);
136 el.append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
137 addflag = 1;
138 break;
139 }
140 }
141 el = d3.select(el._groups[0][0].parentnode);
142 }
143 if (addflag == 0) { //未添加上
144 el.append('li').data(tagnum).append('a').text(text).attr('class', 'xh-open').attr('href', "#" + text);
145 ;
146 }
147 }
148 }
149
150 $(".xh-tree").treemenu({delay: 300, openactive: true, activeselector: ".xh-open"});
151 $('.xh-tree a').click(function () {
152 $('.xh-active').removeclass('xh-active');
153 $(this).addclass('xh-active');
154 })
155 });
156
157 </script>
3）效果