Search This Blog

谷歌博客 Blogger 搭建

前言

近来考虑记录一下平时的工作或者生活,写写博客、学习笔记。之所以选择了Blogger也完全是因为偶然的机会在谷歌的产品列表中看到了。以前试图在github通过github.io搭建自己的个人主页,但是有一定的学习成本,简单尝试以后没有获得理想的结果遂搁置了。这次看到Blogger,上手快,很容易就创建了自己的主页,并且可以把自己的名字作为三级域名,还是很有感觉的。

Blogger具有三个层面:后台管理,负责定制博客的样式、查看博客的浏览量;内容编辑,负责创建编辑博客文章;前端显示,通过创建Blogger时申请的域名可以直接访问,查看博客。上传图片、视频,支持html编辑等都很方便,将资料上载到谷歌还是值得信赖的。

当然,Blogger也有一些不太人性化的地方:不支持Markdown,不支持直接插入代码等。这对于需要经常性编辑、插入代码的人来说的确是一件头疼的事。不过这个问题也可以相应地解决。

模板定制

Blogger有多种模板可供选择,一般来说也是够用且足够好看的;但是对于某些个性化(功能性)的需求就需要稍作修改了,当然Blogger也提供了足够的自由度。
如图所示,可以对博客的页面、布局、主题背景(Template)、设置等进行个性化的修改。而其中,主题背景提供了“自定义”和“修改html”两种主要的修改方式。
其中自定义方式中包含对主题、背景、各个组件的样式、字体等进行修改。
注意,其中的“高级”下有添加css的功能,可以作为对页面样式的补充控制,下面将会介绍简单的应用。

CSS样式控制

目前所选择的样式中,会在各个小工具的又下角出现工具按钮提供快速的修改,实在有碍观瞻,考虑将其去除;可以通过修改模板的html文件实现,也可以通过添加CSS样式控制实现。此外,在博客的最下方会出现“订阅:文章(Atom)”的字样,为读者提供RSS订阅服务,但是也并不需要这个功能,因此同样考虑将其去除,同样可以通过CSS样式控制实现。一并将这两个需求通过CSS样式控制实现,具体的操作如下
其中在自定义添加CSS栏中填入的代码为
.quickedit{
    display:none;
}
.blog-feeds, .post-feeds {
    display :none;
}
其中第一部分是隐藏快速编辑的按钮(小工具按钮);第二部分是同时隐藏博文订阅和评论订阅的功能。

代码高亮

前面提到Blogger的编辑页面没有直接插入代码的选项,只能通过html的编辑模式,在其中插入代码段。有一些现成的网址提供了代码块转换为html代码段的功能,例如:hilite.me,也确实比较方便,但是问题在于生成的html代码段较为冗长,贴到blogger的html编辑页面后不太方便阅读。目前最有效简介的方法莫过于使用highlight.js了,这个工具实在是太强大方便了,具体的使用方法参考另一篇博文:使用 highligh.js 高亮博文中的代码

插入图片

最后,常常需要在博客中插入图片(截图)以示说明,而这里提供一个Windows下方便的截图工具WinSnap,截图后可进行简单的编辑,并且可以设置图片的阴影效果。
下载地址:WinSnap 4.5.9

参考

5 comments:

  1. 你好
    请问如何在页面中隐藏主体中添加的小工具?
    比方说,在主体中如果加入 精选博文 小工具, 那么它会出现在每一个单独的页面中。

    wechat: yubao_liu

    谢谢

    ReplyDelete
    Replies
    1. 你好!似乎这个功能blogger并未提供, 模板是全局化的。引用: "Unlike a website you design from scratch using a programming code like HTML or JavaScript -- where you can use a different layout on each page of your site -- your Blogger website uses a universal layout. This means that when you select your layout from one of Blogger's prefabricated options, that layout will appear on every page of your site. Blogger doesn't have a tool that allows you to customize the look of each individual page of your blog." 参考: https://smallbusiness.chron.com/can-different-layout-per-blogger-26628.html
      此外, 还可参考: https://smallbusiness.chron.com/customize-layout-standalone-pages-blogger-30484.html

      Delete
    2. Blogger的精选博文只在首页出现
      https://zelikk.blogspot.com/2022/03/blogger-featuredpost-only-homepage.html

      Delete
  2. 感谢您的分享,特别有帮助的一个教程,使用下来感觉blogspot是免费博客里面最好用的。

    ReplyDelete