WoldPress从0开始建站（二）：大哥你看我美不美

上文： WordPress从0开始建站（一）：教练，我想建网站！，WordPress已经安装成功，今天我们来解决昨天遗留的三个问题：

初步实现网站美化
快速导入CSDN博客
CSS样式定制网站

话不多说，且看如何实现。（这该死的沙雕作者终于不在前面扯那么多废话了）

一、初步美化：大哥你看我美不美

登陆

浏览器输入进入你的公网IP地址，登陆WordPress进入管理界面：
选主题

选择：外观–>主题–>添加，进入到主题选择界面，选一个你喜欢的主题。

比如我选择的是：Bhari 主题，点击安装后，再次进入到主题管理界面便可以看到它了。

启用主题，并开始自定义。
自定义主题简介

进入到自定义界面：

可以看到，左侧红框便是用来自定义主题，同时它也被我分为两部分：
- 1部分：1部分比较简单，大家自己琢磨一会儿就能明白了。在接下来我们会举几个例子供参考。
- 2部分：2部分便是自己添加CSS来改变网站主题样式了，在 三、CSS样式定制有详细讲诉。
实例：修改顶部图像

在上图1部分，我们看到有一栏叫做：顶部图像，点击进入后选择添加图像：

嗷~很不幸，出错了：没有上级目录写权限。这是因为我们对目录wp-content操作权限不够。

打开Xshell，连接云服务器，键入以下命令，修改目录wp-content权限为777（可被任意用户读写）
```
chmod -R 777 /var/www/html/wp-content # -R表示还同时修改wp-content子目录权限为777
```
这个时候，我们再次选择文件便发现，可以正常选择图像了~（我没合适图就不修改了hhh）

二、导入CSDN博客

来到我们的新窝，虽然还很简陋，但是 斯是陋室，惟吾德馨 嘛~可问题他喵的又来了，怎么让别人知道我们的德馨呢？如果你写过CSDN博客，那么自然希望快速转入，很遗憾，在我写这篇博文之前还没找到一个能用的办法快速导入CSDN博客（可能因为毕竟作者500°近视）。

那么我有吗？那当然~有一个不（很）成熟的办法献丑（炫耀）一下。

导出CSDN

进入我们的CSDN博客，点击编辑，可以在右侧看到：导出为HTML文件 ：

点击导出，保存导出后的HTML文件。
导入WordPress

进入控制台（仪表盘），选择新建文章，进入代码编辑模式：

用记事本（当然也可以其它）打开刚刚下载的博客HTML文件，复制粘贴。

同时插入这段代码，使得首页只展示代码前文字。

点击发布，查看文章。发现问题：
- 点击查看文章，显示错误找不到文章
- 他人输入你IP（或域名）地址，文章图片不显示
- 代码高亮不够满意
优化：解决文章不显示
- 问题
- 解决
  
  设置固定链接朴素模式即可：
  
  再次刷新界面便发现可以查看文章了。
优化：解决图片不显示和文章两侧留白
- 问题
- 解决
  
  图片不显示，是因为CSDN反盗链，在头部设置忽略refer。
```
<meta name="referrer" content="no-referrer">
```
优化：解决代码高亮
- 解决
  
  代码高亮可以下载一个插件名为：highlight.js
  
  接着你可以在已下载的插件 启用，同时设置你喜欢的样子全都有~
  
  我个人比较喜欢：vs 高亮模式

当然了，到现在你可能还有很多不满意的部分：

超链接下面多出虚线
首行不缩进
每篇文章前面莫名出现一大片留白
…

这些都可以通过自定义CSS样式来解决，且看下文分解。

三、定制CSS样式

这部分需要了解一些CSS样式知识，当然这并不难。我的前端水平估计比之各位看官老爷都远不如，这里仅仅举例说一些比较典型的问题。

在这里插入图片描述

去除文章前大片留白

问题：

解决

/*1.文章第一个无内容p标签导致无效留白：将它隐藏即可*/
 div.entry-content > p:nth-child(1)
{
	display:none;
}
/*2.文章里的a标签去除下面虚线*/
.content-area a
{
	border-bottom:none; /*取消下划线：text-decoration:none;*/
}

自动首行缩进
- 问题
  
  导入的文章不能自动首行缩进，影响排版美观。
- 解决
```
/*每段首行2字符*/
p
{
    text-indent:2em;
	padding:5px;
}
```
  但是这么做会带来一些问题：code、kbd、继续阅读a标签等标签也在p标签中，导致它们前面无效留白：
  
  因此要设置取消它们的首行缩进：
```
/*恢复误伤的友军*/
p code,p kbd,a.more-link,blockquote p
{
	text-indent:0;
}
```
设置头部背景
- 问题
  
  网站头部背景纯白不美观：
- 解决
  
  很多网站都有反盗链，直接引用URL，可能会不显示图片。可以先在媒体库 添加图片：
  
  然后单击图片，复制URL地址：
  
  在自定义CSS中加上：
```
.site-header
{
	background-image:url("http://47.101.211.128/wp-content/uploads/2019/05/QQ图片20190428091349.jpg")
}
```
  这样便成功修改头部背景图片了。
改变代码背景颜色
- 问题
  
  代码背景颜色不好看，想改成比如和CSDN一样的：
- 解决
  
  首先修改pre标签背景（code标签包含代码在pre标签中）：
```
/*pre标签背景颜色设置*/
pre
{
	background-color:#fafafa;
}
```
  然后取消掉code标签边框，同时设置背景颜色和pre标签一致：
```
/*取消代码边框和设置背景*/
code.prism , code.hljs
{
    border:none;
	background-color:#fafafa;
}
```
- 效果

居中的一些问题

a标签文字居中

设置：height == line-height 即可：

/*设置菜单a标签居中*/
#primary-menu>li a
{
	height:45px;
	line-height:45px;
	text-align:center;
}

input标签居中

这个居中比较特殊，最后通过设置内边距解决：
```
input.search-submit
{
    padding:0 1em;
}
```

其它的都可以按照你的需求私人定制，就不一一介绍了~

四、总结

相信大家现在应该能装扮自己的小窝了吧hhh~

大家感兴趣可以看看我最后完成的网站：灰太狼coder学习书屋，当然由于还在备案的原因，首页图标部分显示不正常。

由于作者喜欢折腾（有自虐倾向的沙雕网友），接下来有时间还会整整其他建站方式。大家喜欢可以点个赞,也可以关注我，坚持每篇原创认真细致是我的风格~

一、初步美化 ：大哥你看我美不美

二、导入CSDN博客

三、定制CSS样式

四、总结

一、初步美化：大哥你看我美不美