【工匠大道】博客园小技巧
在博客园写博的半年中,我有时会纠结于一些诸如写作格式和显示效果之类的小问题。我想任何一个热衷于在这里写博客的人都可能会遇到类似的问题,所以就把自己遇到的一些状况和解决方法列出来,以便交流。
在博客园看到不少很绚的博客页面,我很想知道都是怎么实现的。:-) 希望大家不要客气,在评论区留下诀窍。谢谢!
编辑器
下面是博客园的编辑器界面:
博客园编辑器界面
1. 查询HTML
写一篇文章实际上是构建了一个HTML网页,内容和格式都最终保存在这个HTML网页中。如果格式上有什么不确定的地方,都可以查询和修改HTML本身。你可以通过下面的“HTML”按钮来查看:
2. 插入代码
对于技术博客来说,代码插入是必不可少的一个环节。常规的博客编辑器通常都没有这个功能。博客园的插入代码算是比较齐全。值得注意的是“全部折叠”选项:
如果代码过长,而文章的重心又不在于分析代码,那么可以勾选这个选项。代码会隐藏成一个”View Code“的按钮,只有在点击之后才展开。这样,可以让读者专心于文章的脉络。读者快速浏览一遍之后,觉得还有兴趣的话,可以自行展开代码阅读,而不会在一开始的时候就被超长的代码吓走。
3. 格式与字体
格式
所谓的格式,实际上是html标签(tag)。比如,如果采用段落格式,那么内容就会被镶嵌在<p></p>的标签之间。再比如标题1,实际上是<h1>。你可以通过查询HTML源码来找出每种格式对应的标签。采用格式的好处是可以通过CSS来统一管理每一种标签所标示的内容。
字体
最值得推荐的字体是Courier New。它是等宽字体,每一个字符的宽度相同,所以上下两行很容易对齐,比如:
TomIDNumber = 10
VivIDNumber = 22
如果是非等宽字体,字符宽度根据字符形状发生变化,比如i会比较窄,而o会比较宽,所以上下两行很难对齐。比如Arial:
TomIDNumber = 10
VivIDNumber = 22
等宽字体是程序员的首选字体。
4. 关于颜色
每一个人都有自己的颜色喜好,有人会比较偏爱黑白的页面。但从认知心理学的角度来说,人们更容易阅读标出要点的段落和文字。特别是网络和电子阅读时代,彩色相对黑白没有额外的印刷成本,所以利用颜色标记值得一试。下划线、粗体、斜体也是相同的道理。 (在黑白印刷时代,人们惯用这三种方式来区分重点。你甚至可以在机械打字机上见到它们)。用这些标记方式的时候,最好可以在每篇博文中保持统一。比如可以用粗体表示命令,用斜体标记引用,用红色表示重点。这样,人们连续阅读同一个博客的时候不会觉得混乱。
CSS定制
管理 -> 设置 -> “通过CSS定制页面风”中,我们可以定制自己的CSS风格。这是很实用的功能。
1. 定制标签(tag)
在编辑器部分,我们看到所谓的格式实际上是HTML标签。这些标签可以通过CSS定制来统一管理和控制。比如我们想设置标题2的格式为:
可以通过添加如下CSS实现:
h2 {text-align: center;box-shadow: 10px 10px 5px #888888; background-color: #5FBDCE; color: #015666; }
2. Image溢出和解决
图像溢出是个常见的问题。在一个小的屏幕或者浏览器中,图片的像素可能超出div的区域。比如:
调整前
你可能会重新设定图片的大小。但是由于可能的读者所使用设备可能差别很大(比如手机和大屏幕),我们并没法预估所应设定的大小。
我们可以在CSS定制中选择img,然后使用overflow属性:
img {overflow: scroll; }
这样,溢出的图像会被隐藏在滚动条中。
我采用了另一个方法:
img {max-width: 80%; }
这样,img的宽度不会超过div宽度的80%。图片会根据情况调整大小。
调整后
定制公告、页首、页脚HTML
在管理 -> 设置中,这三者可以添加自己想要显示的HTML元素。比如在公告栏中我添加了微博的图片和豆瓣的Javascript(如上图)。你也可以增加其他更加个性化的东西。
微博:我的工具 -> 签名档 -> 获得代码,然后将代码复制到博客园的公告栏。
豆瓣:到下面网址http://www.douban.com/service/badgemaker,生成代码,然后将代码复制到博客园的公告栏。
原地址: 博客园小技巧
转载于:https://www.cnblogs.com/aiweixiao/p/6032737.html
【工匠大道】博客园小技巧相关推荐
- 写带有代码博客的小技巧
又双叒叕大家都知道是什么意思吗?知道怎么读吗?它们其实是一个网络流行用语,通常读作"yòu,shuāng,ruò,zhuó".表示某事物变化更替相当频繁,也表示一件事反复出现. 还 ...
- cnblogs 博客园模板技巧
注册一个blog,首先要解决的就是样式问题,每个人会根据自己的爱好,选择合适自己的风格,但默认的模板并非一定能够满足自己.刚注册博客园,今天解决了模板的我问题,一时高兴,就写下来,就当做个总结吧. 原 ...
- CSDN博客编辑小技巧
目录 段首空格 文内跳转 表格内换行 图片缩放 原图 比例控制 像素控制 位置控制 普通文字居中 未完待续- 段首空格 CSDN的文章是无法通过敲空格来向段首加入空格的,这里记录一种方法来完成段首空格 ...
- cdsn博客书写小技巧(不定时更新)
1.cdsn图片居右.居中.局左 在原图片链接最后添加 #pic_right--居右 #pic_center--居中 #pic_left--居左
- 博客写作小技巧【2】:段落首行缩进、添加分割线……
目录 一.首行缩进 1. 方法一 2.方法二 二.分割线 三.快速使改变字体颜色 1. 使字体变为红色 2. 使字体变为黄色 一.首行缩进 1. 方法一 <p> 输入内容</p&g ...
- 头插法建立单链表——借鉴博客园小久(考研)
概念描述 单链表是一种链式存储的数据结构,每一个节点存放数据和指向下一个节点的指针. 头插法是指每次将新节点插入头部(head节点之后),最终链表顺序与插入顺序相反. 这就好比你在食堂排队,大妈所在窗 ...
- 博客写作小技巧【1】:如何设置字体大小、颜色和字体类型!
目录 一. 字体大小设置 二.字体类型设置 三.字体颜色设置 四.混合使用 五.颜色表 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容 ...
- 玩转博客园的5个小技巧
转载自:http://www.cnblogs.com/lloydsheng/archive/2010/05/17/1737267.html 写博客也有几年了,现在能找到的第一篇博文发布时间是2007年 ...
- 博客园Markdown排版技巧
最近看很多别人的博客,排版什么的都特别漂亮,但是又感觉写博客时花太多时间排版不是很必要.希望将注意力更多的放到写作内容上面.如何更好更快地排版呢?可以看看我发现的一些技巧和工具. 目录 需求分析 工具 ...
- 接口应用小玩具-博客园积分排名变动监控工具
小玩具-博客园积分排名变动监控工具 一个简单的在线服务监控和提醒工具 1 概述 前段时间自己准备重新开启自己的博客园,然后还和一些圈子里面的朋友夸下海口,自己要开始像打游戏那样,进行博客园的 天梯 ...
最新文章
- eclipse安装maven
- 线性代数:03 向量空间 -- 基本概念
- 修改仓库如何修改本地仓库的存储位置
- leetcode 110. 平衡二叉树
- python多线程锁有没有优先级别_全面解析python线程优先级队列(queue)原理
- 【Linux】一步一步学Linux——ps命令(119)
- 说一说,求一个正整数的二进制中0的个数
- Jmeter中使用循环如何保证数据不重复
- Bootstrap3 按钮状态提示
- MaxScript 扇子打开
- Docker安装与卸载,配置阿里云镜像加速器
- Java将每半年发布一个版本
- winrar中文版去广告的方法,以winrar5.70简体中文版为例(其他版本也类似)
- android krc歌词解析,10行代码解析krc歌词文件
- 别说 Python 会生成二维码,Java也会。
- Python计算二项分布教程
- 如何用课件制作工具验证三角形内角和
- (39.1)【XML漏洞专题】必备的基础知识、利用原理、构建规则
- 如何解决word中latex公式出现虚线小方框问题
- 【Javascript 基础】课堂笔记1