Markdown编写与页面美化

Sabthever

已于 2025-02-14 14:22:21 修改

阅读量468

点赞数

文章标签： html 其他

于 2025-01-16 15:09:59 首次发布

原文链接：https://www.sabthever.online/2024/12/29/technology/blog/page-beautify/

版权

博客文章deploy以后，格式总是和自己预想的不太一样，于是直接用html标签插入，做一些记录。除此之外还有一些Redefine主题下好用的组件。

Markdown通用

表格

在Hexo的渲染中，表格顶格写的情况下。

比如下面这段：

| Name | Age |
| :--: | :--: |       # | :-- | 是靠左
| 张三 | 12 |         # | --: | 是靠右 
| 李四 | 243 |        # -的数量无所谓

Name	Age
张三	12
李四	243

我们看到，表格都是拉满的，也没有办法变小一点，不够灵活。

我们可以使用Html插入<table>组件来做到这点，更加灵活，但是在没有专门工具时，还是更加麻烦的。html可以像这样写：

<table style="margin: auto; text-align: center; width: min-content;">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>12</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>243</td>
  </tr>
</table>

效果如下：

Name	Age
张三	12
李四	243

可以看到，列宽适应了文字长度。这个是width: min-content;达成的效果。text-align: 这儿是文字左右。margin: 组件外部间距距离。甚至可以合并单元格，具体可以自己查查table的style。word-break: break-all;可以让长度不够的换行。

再举一个例子：

<table style="margin: auto; text-align: center; width: min-content;">
  <tr>
    <th style="white-space: nowrap;">组号</th>
    <th style="white-space: nowrap;">姓名</th>
    <th style="white-space: nowrap;">数量</th>
    <th style="white-space: nowrap;">商品</th>
    <th style="white-space: nowrap;"></th>
  </tr>
  <tr>
    <td rowspan="2" style="white-space: nowrap;">1</td>
    <td rowspan="2" style="white-space: nowrap;">张三</td>
    <td style="white-space: nowrap;">2</td>
    <td style="white-space: nowrap;">包子</td>
    <td style="white-space: nowrap;"></td>
  </tr>
  <tr>
    <td style="white-space: nowrap;">1</td>
    <td style="white-space: nowrap;">馒头</td>
      <td style="white-space: nowrap;"></td>
  </tr>
  <tr>
    <td rowspan="3" style="white-space: nowrap;">2</td>
    <td rowspan="2" style="white-space: nowrap;">李四</td>
    <td rowspan="2" style="white-space: nowrap;">2</td>
    <td rowspan="2" style="white-space: nowrap;">包子</td>
      <td style="white-space: nowrap;"></td>
  </tr>
  <tr>
      <td style="white-space: nowrap;"></td>
  </tr>
  <tr>
    <td style="white-space: nowrap;">王五</td>
    <td style="white-space: nowrap;">2</td>
    <td style="white-space: nowrap;">馒头</td>
      <td style="white-space: nowrap;"></td>
  </tr>
</table>
</br>

我们能看到：

组号	姓名	数量	商品
1	张三	2	包子
1	张三	1	馒头
2	李四	2	包子
	李四	2	包子
	王五	2	馒头

超文本中的rowspan="2"是该单元格占两行的意思，然后下一行的该单元格的位置就要把相应位置的单元格留出。

style="white-space: nowrap;是该单元格不允许换行。

文本靠右和超链接

<div style="text-align: right;">-- 摘自<a href="https://baike.baidu.com/item/Cloudflare/17359757?fr=ge_ala">Cloudflare(美国的跨国科技企业) - 百度百科</a></div>

效果：

-- 摘自 Cloudflare(美国的跨国科技企业) - 百度百科

图片缩放

<img src=".\image\25.png" style="zoom: 50%;" />

其余

回车

用</br>来换行
以后加

Redefine组件加强

Redefine就是我在用的主题，是别的大佬开发的，确实美观好用。

[Redefine]　　　[使用文档]

写作模板使用

写作模板文档

Fontawsome自定义图标

1. 提示块

{% notel [颜色] [可选: 自定义图标] [标题] %}
内容
支持换行
{% endnotel %}

例子：
{% notel default fa-info 信息 %}
换行测试
换行测试
换行测试
{% endnotel %}

{% notel default fa-info 信息 %}
换行测试
换行测试
换行测试
{% endnotel %}

上面的提示块变成note，就是去掉l，可以变成没有标题的提示块：

{% note default %}
换行测试
换行测试
换行测试
{% endnote %}

2. 按钮

{% btn [可选大小]::[名称]::[url]::[可选图标] %}

[可选大小]：
center, regular, large, center large, center regular

例子：
{% btn regular::百度一下::https://www.baidu.com::fa-solid fa-play-circle %}

{% btn regular::百度一下::https://www.baidu.com::fa-solid fa-play-circle %}

3. 折叠

{% folding [颜色]::[标题] %}
需要写的内容
{% endfolding %}

例子：
{% folding blue::Folding 测试： 点击查看更多 %}
啊啊啊啊啊
{% note tip  %}
tip 提示块标签
{% endnote %}
{% endfolding %}

{% folding blue::Folding 测试：点击查看更多 %}
啊啊啊啊啊
{% note tip %}
tip 提示块标签
{% endnote %}
{% endfolding %}

4. 选项卡

{% tabs 页面内不重复的ID %}
 
<!-- tab 栏目1名称 -->
 
内容
 
<!-- endtab -->
<!-- tab 栏目2名称 -->
 
内容
 
<!-- endtab -->
 
{% endtabs %}

{% tabs 页面内不重复的ID %}

内容1

内容2

{% endtabs %}

5. 思维导图

{% pullquote mindmap mindmap-md %}
- Fengx
	- 任何方向
		- 编程语言
			- Java
		- SQL
		- Linux
		- Git
	- 技术
		- mycat
		- 大数据
			- Hadoop
			- HBase
	- 内功
		- 计算机基础
			- 计算机网络
			- 计算机操作系统
			- 编译原理
			- 计算机组成原理
		- 数据结构与算法
	- 其他
		- 英语
		- 博客
{% endpullquote %}

展示

思维导图的使用还有点问题，每次得手动刷新一下，后面再改吧。

{% pullquote mindmap mindmap-md %}

Fengx
- 任何方向
  - 编程语言
    - Java
  - SQL
  - Linux
  - Git
- 技术
  - mycat
  - 大数据
    - Hadoop
    - HBase
- 内功
  - 计算机基础
    - 计算机网络
    - 计算机操作系统
    - 编译原理
    - 计算机组成原理
  - 数据结构与算法
- 其他
  - 英语
  - 博客
    {% endpullquote %}

6. 其余文章配置

在文章头部中加上如下

sticky: 999 # 首页置顶 数字越大越靠前
thumbnail: "image.png" # 首页缩略图
excerpt: false/"文字" # 首页摘要，false就是关掉，写文字就是摘要
cover: false/"image.png" # 文章页头图 没有的话会沿用首页缩略图;不想要的话，就false;想不一样的就加图片路径
expires: 2023-08-31 23:59:59 # 文章时效性 会显示是否过期

页面模板使用

这边的组件是在已经配制好的情况下的使用，详情见页面模板文档。

1. 相册组件

在Hexo - source - _data - masonry.yml中加图片

- image: 图片URL
    title: 图片标题
    description: 描述

这个图片可以放在我建立的仓库Picture1中，url是https://sabthever.github.io/Pictures1/xxx

2. Tags和Category组件

通过在文章开头加Tags或者Category，提供文章的标签或者分类目录。

---
title: 博客配置域名
date: 2024-12-24 14:08:28
tags: [Hexo,DNS]
categories: [Technology,MyBlog]
excerpt: "主要针对于Hexo+Github。先购买域名，然后从本地hexo和在线域名配置，给自己的博客配置域名"
---

其中tags中的标签都是并列的，categories中的标签都是一层层往下的

3. 关于和日志

在Hexo - source - about - index.md 中修改关于，增加我的博客修改日志

4. 书签组件

在Hexo - source - _data - bookmarks.yml中加组件

- category: 分类名称
    icon: fa-folder # 分类的图标，使用 FontAwesome 图标
    items:
    - name: 书签名称
        link: 链接地址 # 从 url 改为 link
        description: 书签描述
        image: 图标链接 # 从 icon 改为 image，用于显示网站图标

5. Latex启用

在文章头部加入mathjax: true即可启用

6. 说说组件

在Hexo - source - _data - essays.yml中加说说，回车要加|才可以

- content: 2024年要过去啦
  date: 2024-12-31 19:37:02

- content: |
    愿大家在12月31日的这一天
    告别过去一年的所有遗憾与不快
  date: 2024-12-31 19:39:44

引用

Redefine使用文档

转载自：Markdown编写与页面美化