搜索

我先说

博客搭建的差不多啦?网站走上正轨了,但是定睛一看,发现怎么博客的浏览器标签页都没有logo呢?接受不能,赶紧搜了搜教程一顿操作,顺便写篇教程练练手。不过这次教程的通顺度和排版都很一般,主要是为了练习MarkDwon编辑器以及PicGo的图床的使用,请多多保函啦~

准备工作

  1. 长宽为16x16或者32x32像素(px)的图标
  2. 图标后缀为.ico
  3. 需要将准备好的图片放置在Typecho主题目录下:

目录:\usr\themes\你的主题名\你的图标

图标存放目录


顺利的话?

  • 将icon放在Typecho主题根目录下,博主的存放目录为:

参考目录\chenxiaonas\web\typecho\usr\themes\lanstar-master\icon-chenxiao.ico

  • 黏贴好icon后在网站主题设置,找到你的主题,打开主题设置,编辑当前外观,找到header.php

部分主题可能在后台编辑外观初没有header.php亦或者是没有更改权限,请移步至文章下半部分——如何直接在文件系统中编辑header.php

<link rel="shortcut icon" href="/usr/themes/你的主题名字/你的图标名字.ico"type="image/x-icon" /
  • 将以下代码按你设定的目录及图标名修改,黏贴到目标header.php中,黏贴到如下相似位置即可

编辑ty主题,告诉ty他的头像位置

  • 黏贴完成后保存,回到网站刷新稍等即可,如果没有效果请按f12,在刷新图标上右键选择清楚缓存刷新。

浏览器调试

  • 顺利的话到此就结束啦,如果对于icon不满意的可以继续折腾,比如圆角,位图透明等~

遇到些小意外?没关系,看看如何应对!

  • 对于部分主题可能没有header.php文件亦或者没有编辑权限的,请进入你的服务器资源管理器或文件后台

本篇博主使用本地群晖搭建,请非本地用户自行使用WinScp等工具进入文件后台

  • 打开文件后台找到存放主题文件目录

使用WebStack主题举例

WebStack主题的header文件在主题根目录,如果根目录没有请自行Ctrl+F搜索

善用搜索工具o

  • 接下来双击打开header.php(如果担心改错文件可以备份嗷)
    <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
    <!DOCTYPE HTML>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/nprogress.min.css" rel="stylesheet" type="text/css">
        ##存放于类似位置即可
        <link rel="shortcut icon" href="/usr/themes/lanstar-master/icon-chenxiao.ico"type="image/x-icon" /
        ##存放于类似位置即可
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css">
        <link rel="stylesheet"
              href="<?php if ($this->options->cdn): echo 'https://cdn.jsdelivr.net/gh/dyedd/[email protected]' . themeVersion() . '/assets/css/main.min.css'; else:utils::indexTheme('assets/css/main.css'); endif ?>">
        <link rel="stylesheet"
              href="<?php if ($this->options->cdn): echo 'https://cdn.jsdelivr.net/gh/dyedd/[email protected]' . themeVersion() . '/assets/css/gazeimg.min.css'; else:utils::indexTheme('assets/css/gazeimg.css'); endif ?>">
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
        <link rel="stylesheet" type="text/css"
              href="https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/darcula.min.css">
        <title><?php $this->archiveTitle(array(
                'category' => _t('分类 %s 下的文章'),
                'search' => _t('包含关键字 %s 的文章'),
                'tag' => _t('标签 %s 下的文章'),
                'author' => _t('%s 发布的文章')
            ), '', ' - '); ?><?php $this->options->title(); ?></title>
    <!-- 通过自有函数输出HTML头部信息 -->
  • 在相似位置插入代码即可,注意代码的主题名,图标名,如果保存后无反应可以在你的网页按f12查看错误信息,检查图标目录以及图标名

如果设置后图标无反应或者加载超时等,可用F12开发调试查看错误原因

检查可能的常见错误:目录错、文件名错误、大小写等。

img

版权属于:晨晓
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
1
查看目录

目录

来自 《Typecho更改网页头部ico图标》
评论

半世晨晓

这里是晨晓的小破站呀