Typecho 主题 MeaWord 操作手册

1. 主题结构解析

MeaWord 主题的结构清晰，主要文件和目录组织如下：

404.php: 404 错误页面模板。
archive.php: 文章归档页面模板，用于显示分类、标签、日期等归档列表。
functions.php: 主题的核心功能文件，包含主题配置、自定义函数、钩子（hooks）等。这是进行二次开发时需要重点关注的文件。
index.php: 主题首页模板，通常用于显示最新文章列表。
page.php: 独立页面模板，用于显示“关于我们”、“联系方式”等非文章内容页面。
page-archives.php: 归档独立页面模板，可能用于显示所有文章的归档列表。
post.php: 文章详情页模板，用于显示单篇文章的内容。
screenshot.png: 主题截图，在Typecho后台主题管理界面显示。
README.md: 主题的说明文件。

1.1 `assets/` 目录

该目录存放主题的静态资源文件，是控制主题外观和行为的关键：

assets/css/:
- style.css: 主题的主要样式文件，包含了大部分的CSS规则，用于控制主题的布局、颜色、字体等。
- bootstrap.min.css: Bootstrap 框架的最小化CSS文件，提供了响应式布局和UI组件的基础样式。
- bootstrap-icons.css: Bootstrap Icons 图标库的CSS文件。
- comments.css: 评论区域的独立样式文件。
- fonts/: 字体文件，如 bootstrap-icons.woff 和 bootstrap-icons.woff2。
assets/js/:
- jquery.min.js: jQuery 库的最小化JavaScript文件。
- bootstrap.min.js: Bootstrap 框架的最小化JavaScript文件，用于实现交互效果。
- main.js: 主题自定义的JavaScript文件，可能包含一些交互逻辑和动画效果。
- ajax-scroll.js: 用于实现文章列表滚动加载的JavaScript。
- tocbot.min.js: 用于生成文章目录的JavaScript库。
assets/img/: 存放主题使用的图片资源，如 logo.png、texture.png 等。

1.2 `common/` 目录

该目录存放主题的公共部分模板文件，这些文件通常被其他模板文件引用：

common/header.php: 网站的头部区域，包含HTML的 <head> 部分（如元数据、CSS和JS引用）以及网站的导航栏、Logo等。
common/footer.php: 网站的底部区域，通常包含版权信息、备案号、统计代码等。
common/comments.php: 评论区域的模板文件，用于显示和提交评论。

2. 常用修改点和定制化区域

2.1 增大电脑端访问时导航栏的字号

修改文件：/home/ubuntu/Typecho-Theme-MeaWord/Typecho-Theme-MeaWord-main/assets/css/style.css
修改位置：找到 .header-menu .header-menu-ul li a 这个CSS选择器。

修改方式：将 font-size: 12px; 修改为更大的值，例如 font-size: 16px; 或 18px;。您可以根据实际效果调整。

.header-menu .header-menu-ul li a {
    padding: 10px 18px;
    display: block;
    font-size: 16px; /* 将此值增大 */
    color: #fff;
}

2.2 黑暗模式下正文摘要颜色更亮一些

修改文件：/home/ubuntu/Typecho-Theme-MeaWord/Typecho-Theme-MeaWord-main/assets/css/style.css
修改位置：找到 .post_list p 这个CSS选择器，它控制了文章摘要的样式。然后找到 .dark .post_list p。

修改方式：在 .dark .post_list p 中，将 color 属性的值修改为更亮的颜色。目前是 #4d4d4d，您可以尝试修改为 #b0b0b0 或 #e0e0e0 等。

.dark .post_list p {
    font-size: 14px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: #e0e0e0; /* 将此值修改为更亮的颜色 */
}

2.3 整体字号都增大一些

修改文件：/home/ubuntu/Typecho-Theme-MeaWord/Typecho-Theme-MeaWord-main/assets/css/style.css
修改位置：
- 全局字号：找到 body 选择器。将 font-size: 14px; 增大，例如 font-size: 16px;。
- 文章标题：找到 .post_list h2 和 .post_list h1。增大它们的 font-size。
- 文章摘要/正文：找到 .post_list p。增大它的 font-size。

修改方式：

body {
    font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    color: #333;
    font-size: 16px; /* 增大全局字号 */
    word-break: break-all;
}

.post_list h2 {
    font-size: 38px; /* 增大文章列表标题字号 */
    line-height: 1.4;
    position: relative;
    font-weight: bold;
}

.post_list h1 {
    margin-bottom: 20px;
    font-size: 42px; /* 增大文章详情页标题字号 */
    line-height: 1.4;
    font-weight: bold;
}

.post_list p {
    font-size: 18px; /* 增大文章摘要字号 */
    font-weight: 300;
    line-height: 2;
    color: #4d4d4d;
}

2.4 每篇文章和主页框增加浮动卡片效果和圆角

这个效果可以通过CSS的 box-shadow 和 transition 属性结合 :hover 伪类来实现。您需要在 style.css 中找到控制文章卡片和主页框的CSS选择器。

修改文件：/home/ubuntu/Typecho-Theme-MeaWord/Typecho-Theme-MeaWord-main/assets/css/style.css
修改位置：
- 文章列表卡片：找到 .post-loop .post-box 和 .post_list。

修改方式：

添加过渡效果：在对应的CSS选择器中添加 transition 属性，例如 transition: all 0.3s ease-in-out;。
添加浮动效果：在对应的CSS选择器的 :hover 伪类中，修改 box-shadow 和 transform 属性。
添加圆角：在对应的CSS选择器中添加 border-radius 属性。

示例（文章列表卡片）：

.post-loop .post-box {
    background: #fff;
    box-shadow: 0 30px 50px 0 #01010126; /* 初始阴影 */
    padding: 100px 200px;
    top: -120px;
    position: relative;
    background-image: url(../img/texture.png);
    transition: all 0.3s ease-in-out; /* 添加过渡效果 */
    border-radius: 10px; /* 添加圆角 */
}

.post-loop .post-box:hover {
    box-shadow: 0 40px 60px 0 rgba(1, 1, 1, 0.3); /* 鼠标悬停时阴影变大 */
    transform: translateY(-5px); /* 向上浮动 */
}

.post_list {
    margin-bottom: 180px;
    position: relative;
    transition: all 0.3s ease-in-out; /* 添加过渡效果 */
    border-radius: 8px; /* 添加圆角 */
}

.post_list:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 鼠标悬停时阴影 */
    transform: translateY(-3px); /* 向上浮动 */
}

请注意，.post-loop .post-box 看起来是整个页面内容的容器，而 .post_list 可能是单个文章的容器。您需要根据实际效果调整。

2.5 其他常用修改点

网站Logo和标题：在 common/header.php 中找到 <a class="logo" ...> 标签，可以修改Logo图片路径和标题显示逻辑。
页脚信息：在 common/footer.php 中修改版权信息、备案号等。
主题颜色：在 common/header.php 中，<style>:root{--bs-main:<?php echo $this->options->mainColor?:\'#b95d40\'?>;--bs-backguound:<?php echo $this->options->backgroundColor?:\'#e6dece\'?>}</style> 定义了主题的主要颜色和背景色变量。您可以在Typecho后台的主题设置中修改这些颜色，或者直接修改这里的默认值。
自定义CSS/JS：
- 如果您想添加少量自定义CSS，可以直接在 style.css 的末尾添加。
- 如果您想添加自定义JavaScript，可以在 main.js 中添加，或者在 common/footer.php 中引入新的JS文件。

3. 二次开发基础指导

Typecho 主题的二次开发主要涉及 PHP、HTML、CSS 和 JavaScript。

3.1 Typecho 主题开发基础

模板文件：Typecho 主题由一系列 PHP 模板文件组成，每个文件负责渲染网站的不同部分（如 index.php 渲染首页，post.php 渲染文章页）。
Typecho 变量和函数：Typecho 提供了丰富的全局变量和函数，用于获取文章数据、分类数据、站点信息等。例如：
- $this->options: 获取主题配置选项。
- $this->title(): 获取文章标题。
- $this->permalink(): 获取文章链接。
- $this->content(): 获取文章内容。
- $this->need('file.php'): 引入其他模板文件。
functions.php：这个文件是主题的“大脑”，您可以在这里定义自定义函数、注册钩子、添加主题配置选项等。例如，MeaWord 主题中的 themeConfig 函数就是用于定义后台主题设置的。

3.2 如何安全地进行主题修改和二次开发

备份！备份！备份！：在进行任何修改之前，务必完整备份您的主题文件和数据库。这是最重要的步骤，可以避免因操作失误导致网站崩溃。
使用子主题（Child Theme）：对于Typecho主题，虽然不像WordPress那样有官方的子主题机制，但您可以通过复制主题并修改主题名称和目录名的方式来创建一个“子主题”。这样，您可以在不修改原主题文件的情况下进行修改，方便主题升级。
- 复制 Typecho-Theme-MeaWord-main 目录，并重命名为 Typecho-Theme-MeaWord-child (或其他您喜欢的名称)。
- 修改 Typecho-Theme-MeaWord-child/index.php 文件顶部的注释，更新 Theme Name 和 Description 等信息。
- 在 Typecho-Theme-MeaWord-child/style.css 中，在文件顶部添加 @import url("../Typecho-Theme-MeaWord-main/style.css"); 来引入父主题的样式。然后您可以在这个子主题的 style.css 中覆盖或添加新的CSS规则。
- 在子主题中，如果您需要修改某个PHP模板文件（如 post.php），直接将父主题的该文件复制到子主题目录中进行修改即可，Typecho 会优先加载子主题的文件。
版本控制：如果您熟悉Git等版本控制工具，强烈建议您使用它们来管理您的主题代码。这可以帮助您跟踪每次修改，方便回滚到之前的版本。
逐步测试：每次修改一小部分代码后，立即在浏览器中测试效果，确保没有引入新的错误。
清除缓存：Typecho 和您的浏览器都会有缓存。修改文件后，请务必清除Typecho后台的缓存以及浏览器缓存，以确保您看到的是最新的修改效果。

3.3 常见二次开发场景

添加自定义字段：在 functions.php 中，themeFields 函数用于定义文章或页面的自定义字段。您可以根据需要添加新的字段，例如为文章添加一个“来源”字段。
修改文章查询：如果您想改变首页或归档页的文章显示逻辑（例如，排除某个分类的文章），您需要修改 index.php 或 archive.php 中 Typecho 的文章查询语句。
集成第三方服务：例如，集成评论系统（如 Valine、Disqus）、统计代码（如 Google Analytics、百度统计）、广告代码等。通常在 common/header.php 或 common/footer.php 中添加相关代码。
优化性能：对CSS和JavaScript文件进行压缩合并，优化图片加载，使用CDN等。

4. 总结

本手册为您提供了 Typecho MeaWord 主题的详细结构解析、常用修改点以及二次开发的基础指导。希望这些信息能帮助您更好地理解和定制您的主题。在进行任何修改时，请务必小心谨慎，并始终牢记备份的重要性。祝您使用愉快！

重要提示：

在修改任何文件之前，请务必备份您的主题文件，以防出现意外情况。
修改后，清除您的浏览器缓存和Typecho的缓存，以确保修改生效。
您可以尝试不同的 font-size 和 box-shadow、transform 值，直到达到您满意的效果。

Typecho主题MeaWord操作手册

Typecho 主题 MeaWord 操作手册

1. 主题结构解析

1.1 `assets/` 目录

1.2 `common/` 目录

2. 常用修改点和定制化区域

2.1 增大电脑端访问时导航栏的字号

2.2 黑暗模式下正文摘要颜色更亮一些

2.3 整体字号都增大一些

2.4 每篇文章和主页框增加浮动卡片效果和圆角

2.5 其他常用修改点

3. 二次开发基础指导

3.1 Typecho 主题开发基础

3.2 如何安全地进行主题修改和二次开发

3.3 常见二次开发场景

4. 总结

评论(0)

Typecho主题MeaWord操作手册

Typecho 主题 MeaWord 操作手册

1. 主题结构解析

1.1 assets/ 目录

1.2 common/ 目录

2. 常用修改点和定制化区域

2.1 增大电脑端访问时导航栏的字号

2.2 黑暗模式下正文摘要颜色更亮一些

2.3 整体字号都增大一些

2.4 每篇文章和主页框增加浮动卡片效果和圆角

2.5 其他常用修改点

3. 二次开发基础指导

3.1 Typecho 主题开发基础

3.2 如何安全地进行主题修改和二次开发

3.3 常见二次开发场景

4. 总结

评论(0)

1.1 `assets/` 目录

1.2 `common/` 目录