Typecho 设置图片居中教程

前言

Typecho是一个基于PHP的简洁的开源博客程序, 原生支持Markdown语法. 遗憾的是, Markdown本身并没有排版功能, 在编写文章时, 插入图片默认是靠左对齐的, 而有时候把文章中的图片设置成居中会让版面看起来更加美观舒适.

本文将介绍如何使用HTML标签来实现图片居中.

Markdown 插入图片语法

首先来回顾一下Markdown插入图片的两种形式:

行内式

![Alt text](图片URL "Optional title")

点击展开 查看更多
Alt text: 图片的Alt标签, 用来描述图片的关键词, 可以不写. 最初的本意是当图片因为某种原因不能被显示时而出现的替代文字.后来又被用于SEO, 可以方便搜索引擎根据Alt text里面的关键词搜索到图片.

图片URL: 可以是图片的本地地址或者是图床网址.

"Optional title": 鼠标悬置于图片上会出现的标题文字, 可以不写.

参考式

![Alt text][id]
[id]: 图片URL  "Optional title"

其中id是图片参考的名称.

设置图片居中

使用HTML中的<center><div><p><img>标签让图片居中.

<center> 标签

!> HTML5 已不支持 center 标签, 故并不建议使用该方法.

<center>
![](https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg)
</center>

实例
<center>
</center>

<div> 标签

!> 有的解析器需要在图片语法与首个 div 标签之间有一行回车才能解析, 这里为了方便直接加上.

<div align="center">

![](https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg)
</div>

实例

<div align="center">


</div>

<img> 标签

<img style="display: block; margin: 0 auto;" src="https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg"/>

实例


<p><img>标签

<p style="text-align:center">
<img src="https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg"/>
</p>

实例

<p style="text-align:center">

</p>

<center><img>标签

<center>
<img src ="https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg"/>
</center>

实例

<center>

</center>

<div><img>标签

<div align=center>
<img src ="https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg"/>
</div>

实例

<div align=center>

</div>

设置无效解决方法

由于Typecho1.1自带的Markdown解析器功能比较辣鸡, 上述方法除了<img>标签, 其他的标签均不能正常显示, 可以通过以下几种方法解决:

开启特权模式

!> 特权模式只对上述后三种方法有效

开启特权模式的方法非常简单, 只需要用!!!HTML代码包裹起来就行了.

点击展开 查看更多

!!!
<p style="text-align:center">
<img src="https://ws3.sinaimg.cn/large/005BYqpgly1g1kuljkl5wj303o030q2r.jpg"/>
</p>
!!!

更换解析器

MarkeDownParser

支持

  • <img>标签
  • <p><img>标签
  • <center><img>标签
  • <div><img>标签

使用方法

  1. 插件下载完成后, 将文件解压, 文件夹重命名为MarkedownParser, 上传到Typecho程序usr/plugins/目录下.
  2. 登陆后台, 在控制台下拉菜单中点击插件进入插件管理.
  3. 找到MarkeDownParser, 点击启用.

MarkdownParse

支持

  • <div>标签
  • <img>标签
  • <p><img>标签
  • <center><img>标签
  • <div><img>标签

使用方法

  1. 插件下载完成后, 将文件解压, 文件夹重命名为MarkdownParse, 上传到Typecho程序usr/plugins/目录下.
  2. 登陆后台, 在控制台下拉菜单中点击插件进入插件管理.
  3. 找到MarkdownParse, 点击启用.

Editor.md for Typecho

支持

  • <center>标签
  • <div>标签
  • <img>标签
  • <p><img>标签
  • <center><img>标签
  • <div><img>标签

使用方法

  1. 插件下载完成后, 将文件解压, 文件夹重命名为EditorMD, 上传到Typecho程序usr/plugins/目录下.
  2. 登陆后台, 在控制台下拉菜单中点击插件进入插件管理.
  3. 找到EditorMD, 点击启用.
  4. 启用插件后, 在EditorMD设置中启用接管前台Markdown解析功能.

总结

  1. Typecho设置图片居中推荐使用<img>标签方法, 简单、方便、快捷.
  2. 如果使用的是Typecho原生MD解析器, 并且要使用后三种方法, 注意用!!!包裹代码开启特权模式.
  3. 一定要更换原生解析器的话, 推荐使用MarkdownParse插件.

点击展开 查看更多
虽然Editor.md支持更多标签, 但在体验过程中并不是那么理想, 最主要的原因是本博所用主题的pjaxEditor.md的前台解析js有冲突. 出现前台文章首次不加载, 刷新一次才能加载的情况.

Last modification:October 10th, 2019 at 12:51 am
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment