程序员经验分享-hwhale

Sakura美化

2023-11-17

文章原地址在：我的博客

接上次的文章

闲着也是闲着，不如搭个免费的博客玩玩

0、前言

做hexo的美化工作，主要是：

  • 修改布局文件(HTML模板ejs文件)，添加功能
  • 做好CSS

还是得对HTML(结构)、CSS(表现)、Javascript(行为)有一定的了解

目录和文件分析

现在我们来分析一下thems/Sakura目录结构和文件

pic1

首先分析下目录，主要包括以下几个

  • languages 这个文件夹中存放的是语言文件，主要是博客中的一些字符以简体中文、繁体中文、英文显示的定义
  • layout 这个是布局文件夹，所有的博客页面HTML和JavaScript以ejs模板存放在这
    • _partial 这里的和下面的都是公共的页面，可以引入到HTML的任意位置
    • _widget
      • Search 这里存放的是页内搜索的ejs文件
  • source 这个文件夹和博客根目录下的source文件夹是一样的，但是为了存放主题相关的文件
    • css 这里存放css文件
    • fonts 字体文件
    • images 图片
    • js js文件

代码插入位置

再接着就是需要知道我们插入的文件和代码应该放到哪里

一般来说我们的js、css代码一般以文件形式存放到js、css文件夹中，接着再引入HTML代码中，引入位置一般在<head></head>标签中，当然啦css、js位置也不是固定的，你也可以直接放到HTML页面结构的中央和结尾，也就是<body></body>之间或者</body>之后、</html>之前

理论上放在哪个位置都无所谓

要是CSS或者JavaScript的代码很少的话，可以直接放到HTML中，不需要先存为文件再引入

具体参考：HTML中引入js、css的三种方式——行内样式、页面中样式、外部文件导入

就对应我们现在要修改的文件中的_partial目录下head.ejs——这个<html><head></head>就在这个文件中

footer.ejs是底部元素，一般个人、企业版权写在这里，因为一般大部分文件都会引入，因此js代码也可以写在这

layout.ejs这个也是所有页面需要引入的，因为</body></html>标签在这里

要是想将功能单独添加到某个页面，那你就找到那个ejs文件放到里面就醒了

好了，下面就正式开始添加功能和修改样式了

1、博客原有功能修改

博客原有功能修改主要指的是博客根目录配置文件和主题配置文件的修改

因为大部分的都已经在上次的博客搭建文章中写了

就不多说了吧

不讲了的

主要包括各种页面结构的修改：

  • 首页轮播图
  • 站点图标、头像、赞赏等图片的链接修改
  • 个人化的站点标题、副标题、描述、关键词等
  • 导航栏的修改、添加、删除等

pic2

  • 通知的修改
  • startdash的图片、链接修改
  • 社交链接的修改等

这上面这些应该都是不需要再讲了的

导航栏中的关于

主要是关于>我？这个的修改

这个要修改的文件在Sakura/source/js目录下，名字为botui.js

主要修改content后面双引号里的内容，自行修改为自己的就行

function bot_ui_ini() {
   
    var botui = new BotUI("hello-mashiro")
    botui.message.add({
   
        delay: 800,
        content: "Hi, there
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

博客

Web

javascript

css

html

Sakura美化 的相关文章

  • “require(...)”是常见的 JavaScript 模式还是库函数？

    我通常发现这是 node js 脚本 模块以及 phantomJS casperJS 等中的第一行 我很好奇 这是否是服务器端 javascript SSJS 的常见模式 类似于 include在 C C 中或import在 Java 中

  • 如何将类型添加到 Vite 库构建中？

    我按照vite文档使用图书馆模式 https vitejs dev guide build html library mode我能够生成一个工作组件库 我创建了该项目vue ts预设 在我的组件中 我定义了道具及其类型 并使用了一些接口 但

  • Javascript：我应该隐藏我的实现吗？

    作为一名 C 程序员 我有一个习惯 将可以而且应该私有的东西设为私有 当 JS 类型向我公开其所有私有部分时 我总是有一种奇怪的感觉 而且这种感觉并没有被 唤起 假设我有一个类型draw方法 内部调用drawBackground and d

  • Rangy：插入符号下的单词（再次）

    我正在尝试创建一个预输入代码以添加到 wysihtml5 富文本编辑器 基本上 我需要能够插入人员 标签引用 例如 Twitter Github Facebook 我发现一些人试图实现同样的事情的代码 http jsfiddle net A

  • 哪些 HTML 元素不能包含子节点？

    我一直在寻找一份详尽的清单 但在任何地方都找不到 为了避免必须仔细阅读规范 有谁知道它们是什么 我认为可以包含子元素的补充元素列表也很有用 XHTML 1 和 HTML5 之间的列表有何不同 您可以在以下位置找到 void 元素 不能有任何

  • 冒泡可用于图像加载事件吗？

    我可以用吗 window addEventListner 某种程度上来说 我所有的图像都有一个display none 图像加载后 我想设置display inline 这样我就可以规范下载图像时显示的内容 在这种情况下 我无法预加载图像

  • 在 Chrome 中隐藏 HTML 时间输入字段上的图标

    在 Chrome 中 当您type time 属性到输入框 您会在输入旁边看到一个小图标时钟图标 有没有办法去掉这个小时钟图标 基于这个问题的答案 将日期输入三角形更改为日历图标 https stackoverflow com questi

  • IIS 8 HTTPS/需要 SSL 导致超时错误

    尝试通过 IIS 8 通过 SSL 发布网站 但出现超时错误 任何帮助表示赞赏 采取的步骤 已验证该网站可以通过 HTTP 访问 http xxx xxx xxx xxx有效 此时使用 IP 地址 如果重要的话 IIS gt 服务器证书 g

  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做

  • 引用自身的 Javascript 对象...有问题吗？

    由于 Javascript 允许通过引用分配复合值 因此如果 Javascript 对象引用自身 它将创建无限的引用集 如控制台中所示 这看起来像是某种无限循环 但 Chrome 似乎没有问题 这样做是否存在任何内存问题或其他风险 就记忆力

  • 如何使用 GreaseMonkey 让浏览器恢复“/”键？

    Lots of web pages seem to use the key for searching I d like to disable that because 100 of the time I want to use to se

  • CSS 标签“object-fit:cover”不会在 Chrome 中裁剪/剪辑视频

    CSS tag object fit cover无法按预期在 Chrome 中剪辑 裁剪视频 这种情况仅适用于视频且仅在 Chrome 中发生 图像在 Chrome 中正常 在所有其他经过测试的浏览器中 图像和视频都工作正常 The beh

  • 使 Bootstrap Popover 在悬停而不是单击时出现/消失

    我正在使用 Bootstrap 构建一个网站Popover http twitter github com bootstrap javascript html popovers我不知道如何使弹出窗口出现在悬停而不是单击时 我想做的就是当有人

  • Angularjs : $locationProvider.hashPrefix("!") ;

    我想将网址显示为 www test com 因为我正在使用 locationProvider hashPrefix 但它显示网址为 www test com 我想 哈希之前而不是哈希之后 Thanks var app angular mod

  • 如何从除自身之外的其他（blazor）库引用js/css文件？

    我如何引用 使用位于引用的 blazor 项目中的 css cs 文件 该文件与 host cshtml 中的当前项目不同 我的意思是

  • Vue-Router 抽象父路由

    我正在尝试将当前网站迁移到 vuejs 站点地图必须是 login signup password reset browse search dozens of other routes 由于其中一些路线共享大量 fx 因此我将它们设为父路线

  • 如何使用 javascript 更改文件扩展名

    有谁知道在 Javascript 中更改文件扩展名的简单方法吗 例如 我有一个带有 first docx 的变量 但我需要将其更改为 first html 这将改变字符串包含文件名 let file first docx file file

  • 将 JSON 属性绑定到表单

    我有一个 JSON 对象和一个

  • 减小 TinyMCE 文本区域中的行间距

    I am using TinyMCE to provide a rich text editing text editor But the line spacing between the lines is too much I have

  • $ 在 JQuery 中意味着什么

    在下面的 var obj one 1 two 2 three 3 four 4 five 5 each obj function i val console log val 这里是什么意思 是对象吗 是一个别名jQuery对象 函数 它充当

随机推荐

  • 立创开源

    一 项目说明 我们在使用单片机设计项目时经常需要用到ADC功能 但是众所周知 单片机是很脆弱的东西 一旦采样 分压后 的电压超过3 3v就会瞬间罢工 在烧毁4 5个单价不菲的单片机后我认为使用外部ADC很有必要 由此本项目诞生 二 原理图

  • 【解决】nltk.download()报错：errno54: connection reset by peer

    报错详情 import nltk gt gt gt nltk download nltk data Error loading

  • github不再支持账号密码解决方案

    今天在向github上传代码的时候 突然不能上传了 终端报错信息如下 remote Support for password authentication was removed on August 13 2021 Please use a

  • C语言中将变量的数值打印到.txt文件

    1 C语言中只需加入以下代码即可将变量的数值打印到 txt文件中 FILE fp fopen dayin txt a fprintf fp d n 变量名 fclose fp 2 若想每次运行C程序就覆盖掉上一次生成的 txt文件 则需要先

  • 深入PCI与PCIe之一：硬件篇

    PCI总线和设备树是X86硬件体系内很重要的组成部分 几乎所有的外围硬件都以这样或那样的形式连接到PCI设备树上 虽然Intel为了方便各种IP的接入而提出IOSF总线 但是其主体接口 primary interface 还依然是PCIe形

  • 人才盘点的主角是业务部门负责人还是HR？

    你的企业 是否存在以下问题 人才储备不足 关键岗位人员离职后 没有合适的马上接替 人才质量不高 企业战略变革转型期 不知谁可以引领和驱动变革 人才现状不清 新的业务 新的项目要开拓 不知合适的人才在哪里 人才分布不均 成熟业务部门人才扎堆

  • gin框架38--使用中间件

    gin框架38 使用中间件 介绍 案例 说明 介绍 本文主要介绍如何在gin框架中使用中间件 并通过案例加以说明 使用MyBenchLogger中间件来输出特有的日志 用AuthRequire中间件来实现基础认证 案例 package ma

  • Cost function

    cost function的形式 cost function的推导满足以下过程 1 认为error 满足某个分布 写出样本点xi的样本的error 2 认为样本点是相互独立的 推导出其对数似然函数 3 求偏导 是得导函数为0 分离常数部分

  • Java 高精度计算 BigDecimal 和 BigInteger

    BigDecimal 在 Java 中 表示小数值一般使用 float 或者 double 类型 可以用于科学计算或者工程计算等 数学意义上的小数是连续的 但 float 和 double 只能表示其中的一些离散点 如果我们要表示的数值刚好

  • Webpack 中常用的loader和plugin已经webpack如何配置

    dist文件夹存放打包后的文件 动态获取出口路径 需要有webpack init 生成package js文件 1 1webpack是什么 webpack 是一种前端资源构建工具 一个静态模块打包器 modulebundler 在 webp

  • IEnumerable vs IEnumerator

    对对象的存储对每一种语言都很重要 例如C 中的Iterator C 中的IEnumerator Java中的Iterator等 C 所有的集合类都定义了一个叫iterator的数据成员 可以通过此对象实现对集合的traverse vecto

  • kafka权威指南中文版之三

    第三章kafka producer 向kafka写入消息 无论你将kafka作为一个消息队列 或者消息总线 还是一个数据存储平台 你都要通过生产者producer向kafka写入数据 通过消费者consumer读取kafka的数据 例如 一

  • 微信支付流程

    一 微信支付流程 APP用户点击进行支付 会向我们自己的订单服务发送请求 携带订单的相关信息 订单服务接收到请求之后需要保存订单 调用微信统一下单接口生成预支付订单 微信会返回预支付订单标识 订单服务会根据微信返回的标识生成带签名的支付信息

  • SQL 注入-盲注

    目录 一 什么时候用到盲注 二 盲注的优缺点 三 盲注的流程 四 盲注的分类 五 布尔盲注 5 1 原理以及什么时候使用布尔盲注 5 2 例如upload labs靶场中的Less 8 5 3 布尔盲注常用函数及定义 5 4 length

  • PyQt5 第一章 PyQt5简介和安装

    第一章 PyQt5简介和安装 零基础入门玩转 PyQt5 邀请码 LWskm3AS 1 1 PyQt5 简介 PyQt5是Digia的一套Qt5应用框架与python的结合 同时支持2 x和3 x Qt库由Riverbank Computi

  • 计算机与图像处理论文标题,数字图像处理论文各种题目.doc

    数字图像处理论文各种题目 待处理图片 参考最终效果图 29利用中值空间滤波去去除波形噪声 要求 掌握空间滤波原理 了解中值空间滤波在实际中的应用 利用MATLAB实现对波形的中值滤波 改进算子 使图像达到标准对照图像效果 待处理图片 处理后

  • webpack html 引入cdn,Webpack如何引入CDN连接来优化编译后的体积

    背景 在 Vue 项目中 引入到工程中的全部 js 文件 编译时都会被打包进 vendor js 也就致使了 vendor js 文件体积变得至关臃肿 必定程度上影响着页面的渲染 为了减小编译后的体积 提升页面渲染速度 咱们能够经过引入 C

  • python时间戳转换年，月，日，季度，周

    数据结构 def q year day week day dict 0 星期一 1 星期二 2 星期三 3 星期四 4 星期五 5 星期六 6 星期天 for x in range 0 366 time item star time int

  • github上传的报错的问题解决

    文章目录 前言 一 遇见的问题 二 开始配置ssh key 这就完成了 可以重新尝试一下上面代码到github 前言 有很多伙伴们在操作github时候 上传代码的时候 会有报错问题 上传代码失败 这里我给出我本人的的解决办法 一 遇见的问

  • Sakura美化

    文章原地址在 我的博客 接上次的文章 闲着也是闲着 不如搭个免费的博客玩玩 0 前言 做hexo的美化工作 主要是 修改布局文件 HTML模板ejs文件 添加功能 做好CSS 还是得对HTML 结构 CSS 表现 Javascript 行为

热门标签

Powered by Hwhale