『我们可以很简单就拥有个人主页⑧』装修主页吧！·技巧篇

December 15, 2020

声明

本系列教程是建立于「写意」平台基础上的个人博客主页建设指南，应该能应用于其他 Write Freely 的社区，内容基本上是我在建设主页过程里的笔记的归纳和一些资料的整理，目标是让没有编程基础的用户也能够看懂并使用，故大概不会涉及到较为复杂的部分。

如果您是专业人士或已经有了不少利用 HTML/CSS 以及 Markdown 写作及建设个人主页的经验，我想这份教程或许对您并没有什么用处，但是欢迎指出任何错误或是遗漏的地方。

这篇文章主要关于使用 Write Freely 和自定义 CSS 的一些小技巧，主要参考了 CSS 文档的内容。

本篇覆盖内容

自定义 CSS：基本流程、给多个元素同时赋予相同格式、隐藏阅览数、自定义标签、自定义超链接、自定义「查看全文」
博客使用技巧：设置置顶、自定义 URL 结尾内容

上一篇：装修主页吧！·文字篇

『我们可以很简单就拥有个人主页』系列目录

① 内容是主页的基础 ② 插入各类元素让文章丰富多彩·上 ③ 插入各类元素让文章丰富多彩·下 ④ 装修主页吧！·基础篇 ⑤ 装修主页吧！·源代码篇 ⑥ 装修主页吧！·文字篇 ⑦ 装修主页吧！·图像篇 ⑧ 装修主页吧！·技巧篇

修改 CSS 的基本流程

虽然在上几篇教程中已经提到了 CSS 的基本编写规则、HTML 的阅读方式以及一些 CSS 格式声明的属性，但如果您还是不太明白如何运用它们的话，可以遵循以下的流程：

决定您想要修改的页面元素，并寻找所需的选择器。
如果您想改的这个元素本身就包括在了提供的 CSS 模版里，那您可以直接在那个选择器中添加或修改格式声明。否则，您需要打开博客的 HTML 源代码阅读标签进行填写。比如说，如果您想要给您的博客增加一个背景图片，那么覆盖对象是整个博客的选择器就是 body，而之前提供的模版里确实有 body {}。因此，您只需要在这个现有的 body {} 中进行修改即可。如果您想要修改的界面元素并未出现在之前的模版里，那么您需要按照第五篇教程的内容（尤其是讲解 #blog-title a 这个选择器的部分）阅读网页源代码并找到需要的选择器内容。
决定您想要修改的格式，并查找对应的 CSS 属性。
假如您想修改背景图片，那么对应的 CSS 属性就是 background-image；假如您想给文字增加阴影，那么对应的属性就是 text-shadow……如果您想要修改的格式并没有在前几篇教程内被提及，您可以通过网络搜索「CSS 您想要修改的格式描述」这样的关键词来查找对应属性。
根据您想要修改的格式的具体样式来填写该属性的数值，完成这条格式声明。
假如您想修改背景图片，那么您需要在获取该图片的直链后编写 background-image: url(图片直链);；假如您想给文字增加阴影，那么您需要按照 text-shadow 所拥有的数值的几个组成部分来进行阴影样式的设计，再按照 text-shadow: 横向移动距离竖向移动距离模糊半径颜色; 的格式进行编写…… 这个部分就是最为自由灵活的环节，您通常可能需要多次尝试和调整才能达到您最满意的效果。
将格式声明放置在选择器后的括号内。
假如您想修改博客的背景图片，那么选择器是 body，格式声明是 background-image: url(图片直链);，组合起来就是：
```
body {
    background-image: url(图片直链);
}
```
如果您对该元素想进行的格式设计不止一种，请重复 2-4 的过程，直到所有格式声明都被编写完毕。
应用到主页里看看效果如何，并酌情进行调整。如果有什么问题，可以按照第五篇教程最后提到的几个排查问题的思路进行排查。

您只需要不停重复以上六点，直到您想要修改的界面元素都拥有了您新设计的格式后就大功告成了——您拥有了基本完全由您自定义的个性化主页！

同时给多个元素赋予相同的格式

假如您想给多个元素赋予相同的格式，首先，您可以看看它们所对应的标签是否共有相同的 class 属性。比如主页里的所有文章标题的 <h2> 标签都拥有 class="post-title" 这一属性，那么您就可以直接用 .post-title {} 进行编写，给主页的所有文章标题赋予相同的格式。

如果您想要统一格式的这几个元素并没有共用 class="" 的数值，那么您需要分别找到每个元素所对应的选择器内容，然后将它们用 , 隔开。比如您想让博客标题和博客简介拥有统一的格式，那么首先您需要知道博客标题对应的选择器是 #blog-title a，以及博客简介的选择器是 .description。随后，您可以用 #blog-title a, .description {} 进行编写。

设置置顶

前面的教程里曾提到关于自定义置顶的文字格式的内容。如果您并不知道如何设置位于主页标题和简介下方的置顶栏内容的话，您只需在博客主页里将鼠标放置在想要设置成置顶的文章的标题上，并点击随之浮现出的文字中的「置顶/Pinned」即可。这篇文章将会从博客主页的文章列表消失，且文章标题会出现在置顶栏内。

自定义文章 URL 结尾

不知您是否发现，这系列的教程的 URL 的结尾都是统一的「writee-tutorial-数字」。这是因为我利用了文章 URL 的生成原理进行了结尾部分的自定义。

一般来说，您的博客主页的 URL 是您所在的 Write Freely 社区的 URL + 「/」 + 您的用户名。比如我所在的「写意」的 URL 是「https://writee.org」，而我使用的用户名是「gellneko」，因此我的博客主页的 URL 就是「https://writee.org/gellneko/」。而每篇文章的 URL 则是在博客主页的 URL 后面再加上发布时的文章标题或开头的文字内容，其中大写字母会转化为小写，中文会转化为拼音，空格会转化为「-」。也就是说，您只需要在发布时将文章标题设置成您想自定义的 URL 结尾内容，再在发布后编辑文章，将标题改为您真正的标题即可。

比如，虽然这篇教程的标题是「『我们可以很简单就拥有个人主页⑧』装修主页吧！·技巧篇」，但是实际上在我发布文章时的标题是「Writee Tutorial 8」。因此，文章发布所用的 URL 就是「https://writee.org/gellneko/writee-tutorial-8」。随后，我再将标题改为现在的版本，但保留了发布文章时的 URL。

这个技巧最大的用处除了~~造福强迫症和~~进一步增加页面的统一性及美观外，还可以在某些情况下发链接时直接手打而不是特地打开网页再复制地址栏内容。

这一技巧也有缺点：如果有人关注了您的博客，那么您发布文章时显示在对方 Fediverse 的社区主页的动态将会是您发布文章时的标题，即您用来作为 URL 结尾内容的文字。如果您设计的 URL 结尾与文章内容无关，可能您的关注者并看不出来这篇文章的内容是什么。

实用 CSS 代码

接下来是一些我觉得或许对您有用的 CSS 代码及选择器名称，您可以按需求直接复制并增加到您的代码里。

隐藏文章页面左上角的阅览数：

.views {
    display: none;
}

自定义超链接的文字格式：

/* 访问前 */
article a:link {
    /* 您想要的文字格式声明 */
}

/* 访问后 */
article a:visited {
    /* 您想要的文字格式声明 */
}

自定义标签（tag）的文字格式：

.hashtag {
    /* 您想要的文字格式声明，可能需要在格式声明结尾加上「!important」 */
}

使用预览（）时在主页增加类似「查看全文」的文字：

.read-more::before {
    /* 因为系统可能读取不了中文，「文字内容」需要是英文或者符号 */
    content: '文字内容';
}

感谢您的阅览。那么这系列教程将在此告一段落，以后可能会有不定期的更新来分享一些我觉得可能会有用的修改主页的 CSS 代码。祝您的博客生活愉快，也希望您能拥有自己喜欢的个性化主页。

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.