找到
18
篇与
技术教程
相关的结果
-
Joe再续前缘美化-侧栏分类-首页图标icon-底部导航 一个现代化Typecho网站，移动端体验才是最重要的开发方向。让您的网站拥有堪比优质APP的移动端体验，强大而又丝丝顺滑，Icon图标使用不可或缺！ Joe主题Tab美化 移动端底部TAB也就是显示在手机上，页面底部的按钮，让手机端更加方便操作和跳转按钮数量随意添加、删除、排序 每个按钮支持自定义图标、自定义文字、自定义尺寸 主题预置了漂亮的多彩SVG图标按钮支持添加标签显示 漂亮的UI设计，颜色、背景、间距、尺寸都精心设计 转自 @易航博客 移动底端tab导航栏 - 手机移动端的底部导航可随意设置 导航链接 和 导航文字 加 图标 的底部tab导航栏 title="底部"图片 隐藏内容，请前往内页查看详情 自定义导航栏 - 手机端的侧边导航/电脑端的顶部导航可随意设置 导航链接 和 导航文字 加 图标 的全新导航栏 title="侧栏"图片 隐藏内容，请前往内页查看详情 首页分类 - 首页的分类模块可随意设置 导航链接 和 导航文字 加 图标 的首页自定义分类模块 title="首页"图片 隐藏内容，请前往内页查看详情 使用方法 - 隐藏内容，请前往内页查看详情 title="Test"图片
-
为Typecho博客开启Gzip压缩，提升您的网站性能 一个正常网页的大小大约为40KB左右，开启Gzip压缩可以使我们的网站加载速度大幅提升 什么是Gzip压缩？ Gzip是若干种文件压缩程序的简称，通常指GNU计划的实现，此处的gzip代表GNU zip。也经常用来表示gzip这种文件格式。软件的作者是Jean-loup Gailly和Mark Adler。在1992年10月31日第一次公开发布，版本号0.1，1993年2月，发布了1.0版本 为什么要使用Gzip压缩 在网络传输过程中我们可以使用gzip对数据进行压缩，从而减少数据传输量，减少对网络带宽的消耗，可以加快我们打开网站的速度。同时也可以对静态文件进行压缩，减少我们的存储空间 Gzip压缩检测 在教程开始之前我们可以先前往https://gzip.bmcx.com查询一下网站是否开启了Gzip压缩 教程 打开我们的网站根目录，找到index.php文件，将下面的代码放置在最前面 隐藏内容，请前往内页查看详情 现在就为我们的Typecho博客成功开启Gzip压缩了，后面我会在性能优化标签里更新更多为网站性能优化的文章，希望可以帮助到大家更好的维护优化网站
-
一键获取Typecho博客所有文章链接 看到标题可能会有点疑惑，不是sitemap（网站地图）就可以实现获取所有链接吗？是的，但是这个和网站地图的使用场景是有区别的 页面效果 本站网站链接列表：https://www.poek.cn/url.html 这个功能有什么用？ 首先sitemap主要就是表明了文章的链接、更新时间等信息，在百度后台、谷歌后台都可以提交，等着搜索引擎来抓取 而搜索引擎还有一个功能是自己主动提交。提交的格式就是一行一个链接，或者一行一个链接的文件。这个列表的链接就是为了做这个用的!$[泡泡表情]::(公鸡) 操作教程 typecho在后台可以根据模板创建自定义页面，这里就是创建一个自定义模板，里面的功能就是在数据库中找出所有的文章链接并且提取输出出来，新建一个文件URLLinks.php，内容写以下内容 隐藏内容，请前往内页查看详情 现在打开网站后台页面→新建独立页面→自定义模板选择网站链接列表发布即可，有能力的可以增加一个分页功能
-
-
php常用的十个 CSS 代码技巧 在 CSS 开发中，一些简单的一行代码往往可以让你的页面变得更加优雅高效。以下是 10 个我喜欢使用的 CSS 一行代码，它们不仅简洁，还能在实际项目中起到很大的作用。 1. 设置宽高比例（Aspect Ratio） 通过 aspect-ratio 属性，可以根据指定的宽度自动调整高度（反之亦然）。 .box { width: 90%; aspect-ratio: 16/9; }适合用在视频播放器或图片容器中，确保它们以正确的比例呈现。 2. 逻辑属性（Logical Properties） 使用 margin-block 和 margin-inline 替代传统的 margin-top、margin-right 等，更加简洁直观。 .box { margin-block: 5px 10px; /* 上边距 5px，下边距 10px */ margin-inline: 20px 30px; /* 左边距 20px，右边距 30px */ }对于 padding 也是一样的： .box { padding-block: 10px 20px; /* 上下内边距 */ padding-inline: 15px 25px; /* 左右内边距 */ }这些属性会自动适配文本方向（如从左到右或从右到左）。 3. 全局盒模型设置 避免因默认 box-sizing 属性引起的布局问题，通过以下一行代码可以让所有元素包含其内边距和边框： *, *::before, *::after { box-sizing: border-box; }这可以大幅减少布局错误，让开发更加省心。 4. 平滑滚动（Smooth Scroll） 为整页启用平滑滚动，提升用户体验： html { scroll-behavior: smooth; }在单页网站或锚点导航中尤为实用。 5. 垂直书写模式（Vertical Writing Mode） 让文字从右向左垂直排列，可用于特殊设计场景或支持垂直书写的语言： .vertical-text { writing-mode: vertical-rl; }6. 文本溢出省略号（Truncating Text with Ellipsis） 对于超出容器的长文本，可以用省略号代替多余部分： .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }适合用在标题、卡片或链接预览中。 7. 居中对齐（Place-items） 使用 place-items 快速实现网格容器的水平和垂直居中对齐： .box { display: grid; place-items: center; }8. 限制文本宽度（Limit Text Width） 通过限制每行文本的最大字符数，提升可读性： p { max-width: 100ch; }“ch” 单位表示一个字符的宽度，非常适合用于段落样式。 9. 占位符样式（Styling Placeholder Text） 给输入框的占位符文本添加样式： ::placeholder { color: #999; font-style: italic; }10. 统一的强调色（Accent Color） 通过 accent-color 为交互元素（如按钮、复选框）设置统一的主题颜色： body { accent-color: green; }可以在整个网站中保持一致的视觉风格，而无需单独为每个元素定义样式。 总结 这些 CSS 一行代码涵盖了布局优化、用户体验提升和样式统一等多个方面，既实用又高效。将它们融入你的日常工作流，可以让项目的开发更加轻松，同时大幅提升代码的质量和可维护性。 试试这些技巧，感受它们带来的改变吧！
