主页

文章大纲

我先说

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

准备工作

    1. 长宽为16x16或者32x32像素(px)的图标
    2. 图标后缀为.ico
    1. 需要将准备好的图片放置在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/lanstar@' . 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/lanstar@' . 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

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

    目录

    来自 《使用typecho如何更改网站标签页icon图标》
    评论

    半世晨晓

    欢迎来到晨晓的博客站捏~( ̄▽ ̄)~*
    5 文章数
    1 评论量
    3 分类数
    9 页面数
    已在风雨中度过 5年357天21小时57分