typecho后台文章撰写的自定义字段默认收起

博主：黄炜
发布时间：2023 年 12 月 21 日
1111 次浏览
2597字数
分类：技术 JavaScript html css

### 引言

每次写博客的时候，都感觉这个“自定义字段”太碍事了。

尤其是我的习惯，怕丢文件，就会经常点击保存草稿。

每次点击保存草稿的时候，都会打开自定义字段，还得我手动折叠起来。

我用的笔记本屏幕不大，每次打开都贼头疼，滚动条被拉得贼长，强迫症都要犯了。

#### 实现效果

想着能不能找到这个代码当中的部分，把它改成默认折叠起来

但是真要设置自定义字段的话，也可以点击展开，这就要求原先的功能不能少。

![最终效果](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/2987428654.png)

### 实现

#### 1. 确定修改范围

##### 1.1 找到当前文件

根据链接地址，找到目录的文件。

![文章修改页面的地址](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/2799260152.png)

很明显，这里是博客的根目录下的`/admin`文件夹，找到这个`write-post.php`文件。

确定有这个文件之后，执行命令查看这个文件信息：

```shell
vim ./admin/write-post.php
```

![/admin/write-post.php文件内容](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/3651634430.png)

我在这个文件里翻找了一通

整个文件都没有**自定义字段**的东西

##### 1.2 找到自定义字段相关代码段

但是划拉到底部，看到一串代码：

`include 'custom-fields-js.php';`

吸引了我的注意，看起来有点像自定义字段的东西？

![引入custom-fields-js.php文件](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/2709808549.png)

在`/admin/`目录下翻找，这个文件名相关的有两个文件：

> custom-fields-js.php
>
> custom-fields.php

很明显的猜测，一个是`DOM`结构，一个是`js`文件

打开一看`custom-fields.php`文件，果然是，写着自定义字段的中文，那就没错了。

##### 1.3 确定展开折叠的元素

翻找了一下这个文件，有两个`ID选择器`是比较特殊的名字，看起来像是控制展开折叠的。

![custom-fields.php文件内容](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/295989219.png)

按钮的元素当中，有一个`ID选择器`的名字叫：`id="custom-field-expand"`

> expand：展开

看起来像是`JavaScript`用`ID`来选择元素实现点击后展开折叠的。

#### 2. 确定展开折叠原理及逻辑

翻找一下`custom-fields-js.php`文件，发现了几行语句：

![custom-fields-js.php文件的关键代码](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/2859167979.png)

发现只要点击了这个按钮，不管`if`还是`else`，都会执行这一句：

```js
$(this).parent().toggleClass('fold');
```

也就是说，每次点击这个“自定义属性”的标签，都会去控制标签的父元素**增或减**这个`fold`类

#### 3. 修改默认折叠状态

那就简单了，这个`JQuery`的代码完全不用动

只要把`DOM`元素当中原先给**增加或者删除**这个`fold`类名就可以起到修改默认值的作用。

找到`custom-fields.php`文件的`第7行`，这里有一行嵌入的`php`代码，我们看一下：

```html
class="typecho-post-option<?php if (empty($defaultFields) && empty($fields)): ?> fold<?php endif; ?>"
```

`PHP`判断了个空值并且默认字段都是空的时候**输出**这个`fold`类名

那就可以推断出，有这个类名就代表了整个自定义字段菜单是收起状态的。

那我们要默认隐藏的话，就直接把`php`代码删掉，直接输出一个`fold`类名就行了！

也就是改为这样：

```html
<?php if (!defined('__TYPECHO_ADMIN__')) exit; ?>
<?php
$fields = isset($post) ? $post->getFieldItems() : $page->getFieldItems();
$defaultFields = isset($post) ? $post->getDefaultFieldItems() : $page->getDefaultFieldItems();
?>
<section id="custom-field"
         class="typecho-post-option fold">
    <label id="custom-field-expand" class="typecho-label"><a href="##"><i
                class="i-caret-right"></i> <?php _e('自定义字段'); ?></a></label>
```

怕你们看不清楚，特意截了一张截图，只在`第7行`修改就行。

![请输入图片描述](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/1460976952.png)

这就可以了。`wq!`保存这个编辑器，并退出

### 测试

保存后刷新一下这个`/admin/write-post.php`页面，发现已经可以实现效果了

![最终效果](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/2987428654.png)

欢迎关注拓行公众号，分享各种技术博客文章

拓行——奋勇进取，开拓未来，砥砺前行

最后修改：2023 年 12 月 21 日

如果您对各种技术博客文章感兴趣，欢迎关注拓行公众号，分享各种专业技术知识~

typecho后台文章撰写的自定义字段默认收起

黄炜 • 2023 年 12 月 21 日

### 引言

每次写博客的时候，都感觉这个“自定义字段”太碍事了。

尤其是我的习惯，怕丢文件，就会经常点击保存草稿。

每次点击保存草稿的时候，都会打开自定义字段，还得我手动折叠起来。

我用的笔记本屏幕不大，每次打开都贼头疼，滚动条被拉得贼长，强迫症都要犯了。

#### 实现效果

想着能不能找到这个代码当中的部分，把它改成默认折叠起来

但是真要设置自定义字段的话，也可以点击展开，这就要求原先的功能不能少。

![最终效果](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/2987428654.png)

### 实现

#### 1. 确定修改范围

##### 1.1 找到当前文件

根据链接地址，找到目录的文件。

![文章修改页面的地址](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/2799260152.png)

很明显，这里是博客的根目录下的`/admin`文件夹，找到这个`write-post.php`文件。

确定有这个文件之后，执行命令查看这个文件信息：

```shell
vim ./admin/write-post.php
```

![/admin/write-post.php文件内容](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/3651634430.png)

我在这个文件里翻找了一通

整个文件都没有**自定义字段**的东西

##### 1.2 找到自定义字段相关代码段

但是划拉到底部，看到一串代码：

`include 'custom-fields-js.php';`

吸引了我的注意，看起来有点像自定义字段的东西？

![引入custom-fields-js.php文件](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/2709808549.png)

在`/admin/`目录下翻找，这个文件名相关的有两个文件：

> custom-fields-js.php
>
> custom-fields.php

很明显的猜测，一个是`DOM`结构，一个是`js`文件

打开一看`custom-fields.php`文件，果然是，写着自定义字段的中文，那就没错了。

##### 1.3 确定展开折叠的元素

翻找了一下这个文件，有两个`ID选择器`是比较特殊的名字，看起来像是控制展开折叠的。

![custom-fields.php文件内容](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/295989219.png)

按钮的元素当中，有一个`ID选择器`的名字叫：`id="custom-field-expand"`

> expand：展开

看起来像是`JavaScript`用`ID`来选择元素实现点击后展开折叠的。

#### 2. 确定展开折叠原理及逻辑

翻找一下`custom-fields-js.php`文件，发现了几行语句：

![custom-fields-js.php文件的关键代码](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/2859167979.png)

发现只要点击了这个按钮，不管`if`还是`else`，都会执行这一句：

```js
$(this).parent().toggleClass('fold');
```

也就是说，每次点击这个“自定义属性”的标签，都会去控制标签的父元素**增或减**这个`fold`类

#### 3. 修改默认折叠状态

那就简单了，这个`JQuery`的代码完全不用动

只要把`DOM`元素当中原先给**增加或者删除**这个`fold`类名就可以起到修改默认值的作用。

找到`custom-fields.php`文件的`第7行`，这里有一行嵌入的`php`代码，我们看一下：

```html
class="typecho-post-option<?php if (empty($defaultFields) && empty($fields)): ?> fold<?php endif; ?>"
```

`PHP`判断了个空值并且默认字段都是空的时候**输出**这个`fold`类名

那就可以推断出，有这个类名就代表了整个自定义字段菜单是收起状态的。

那我们要默认隐藏的话，就直接把`php`代码删掉，直接输出一个`fold`类名就行了！

也就是改为这样：

怕你们看不清楚，特意截了一张截图，只在`第7行`修改就行。

![请输入图片描述](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/1460976952.png)

这就可以了。`wq!`保存这个编辑器，并退出

### 测试

保存后刷新一下这个`/admin/write-post.php`页面，发现已经可以实现效果了

![最终效果](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/2987428654.png)

typecho后台文章撰写的自定义字段默认收起

typecho后台文章撰写的自定义字段默认收起

手把手教你在Linux下源码编译安装phpv8.3.0最新版

手把手教你在Linux下源码搭建MySQL关系型数据库v8.2.0最新社区版

Linux如何上传、下载传输文件或目录

手把手教你源码搭建Nginx服务器v1.25.3最新版（非root启动）

发现一个浏览器定时器休眠的情况

手把手教你在Linux下源码搭建MySQL关系型数据库v8.2.0最新社区版

母上大人的饭-241110

【转】解决sourceTree打不开问题

常见工具、文档链接

typecho后台文章撰写的自定义字段默认收起