Hexo-Sakura主题美化-超详细
个人博客 网站
目录和文件分析
分析下themes/Sakura目录结构和文件
首先分析下目录，主要包括以下几个
languages 这个文件夹中存放的是语言文件，主要是博客中的一些字符以简体中文、繁体中文、英文显示的定义
layout 这个是布局文件夹，所有的博客页面HTML和JavaScript以ejs模板存放在这
- Search 这里存放的是页内搜索的ejs文件
- _partial 这里的和下面的都是公共的页面，可以引入到HTML的任意位置
- _widget
source 这个文件夹和博客根目录下的source文件夹是一样的，但是为了存放主题相关的文件
- css 这里存放css文件
- fonts 字体文件
- images 图片
- js js文件
代码插入位置
再接着就是需要知道我们插入的文件和代码应该放到哪里
一般来说我们的js、css代码一般以文件形式存放到js、css文件夹中，接着再引入HTML代码中，引入位置一般在<head></head>标签中，当然啦css、js位置也不是固定的，你也可以直接放到HTML页面结构的中央和结尾，也就是<body></body>之间或者</body>之后、</head>之前
要是CSS或者JavaScript的代码很少的话，可以直接放到HTML中，不需要先存为文件再引入
具体参考：HTML中引入js、css的三种方式——行内样式、页面中样式、外部文件导入
就对应我们现在要修改的文件中的_partial目录下head.ejs——这个<html><head></head>就在这个文件中
footer.ejs是底部元素，一般个人、企业版权写在这里，因为一般大部分文件都会引入，因此js代码也可以写在这
layout.ejs这个也是所有页面需要引入的，因为</body></html>标签在这里
要是想将功能单独添加到某个页面，那你就找到那个ejs文件放到里面就醒了
博客原有功能的修改
博客原有功能修改主要指的是博客根目录配置文件和主题配置文件的修改
因为大部分的都已经在上次的博客搭建文章中写了
就不多说了吧
主要包括各种页面结构的修改：
- 首页轮播图
- 站点图标、头像、赞赏等图片的链接修改
- 个人化的站点标题、副标题、描述、关键词等
- 导航栏的修改、添加、删除等
- 通知的修改
- startdash的图片、链接修改
- 社交链接的修改等
这上面这些应该都是不需要再讲了的
导航栏中的关于
主要是关于>我？这个的修改
这个要修改的文件在Sakura/source/js目录下，名字为botui.js
主要修改content后面双引号里的内容，自行修改为自己的就行
导航栏中的客户端
这个可以使用Fusion App把你自己的博客封装成APP
然后放到蓝奏云上，生成二维码放上来
导航栏中的RSS
根目录下的配置文件中已经有了
#RSS
feed:type: atompath: atom.xmllimit: 20hub:content:content_limit: 140content_limit_delim: ' 'order_by: -date
这些代码
因此我们只需要安装好插件就行了
npm install hexo-generator-feed
当然啦，如果本来就能显示内容，那么就不需要安装了
每个页面中的顶部图片
就比如关于>主题这个页面
我们进入根目录下，再进入source目录找到theme-sakura，进入该目录点击index.md，修改photos后面的内容，改为你想要的图片链接
---title: theme-sakura
comments: false
date: 2019-01-04 22:53:25
keywords: Hexo 主题 Sakura
Hexo-Sakura主题美化-超详细相关推荐
- sakura主题美化
文章目录 1.网站站点名称编辑 2.关闭聚焦 3.底部下的版权信息修改 4.主题背景三角铁特效 5.鼠标点击特效 6.页面底部网页运行时间 1.网站站点名称编辑 进入网站后台后点击外观-->sa ...
- hexo+sakura主题美化合集
文章目录 一.简介 二.主题基本修改 三.添加通讯以及美化背景 四.添加2D板娘 1.通过core-js安装 2.直接修改文件安装 五.设置代码块高亮 六.搜索功能无法使用 七.总结 一.简介 我们搭 ...
- Hexo+next主题美化静态博客
前言 需要在Hexo下配置next主题 Hexo配置next主题教程:点我跳转 更改配置以后使用素质三连:hexo clean && hexo g && hexo s即 ...
- Hexo+Butterfly主题美化
前言 本博客基于Hexo框架搭建,用到 hexo-theme-butterfly 主题(本人博客Butterfly版本3.4.0),hexo-theme-butterfly是基于Molunerfinn ...
- wordpress+sakura主题建站优化
wordpress+Sakura主题建站优化 写在前面 本人博客:http://landasika.top/ Sakura的使用手册:https://yremp.live/wordpress-saku ...
- 搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细步骤
一.安装hexo 1.下载安装软件 git:https://git-scm.com/downloads node:https://nodejs.org/en/ 2.安装好两个工具之 ...
- 【Hexo】记录NexT主题美化及域名配置（图示详解）
本篇主要记录一下更换NexT主题,及后来美化,配置域名的过程. 我的 Hexo博客:http://yzhblog.work/- 1.更换主题为 NexT 更换主题其实很简单,就是两步: git clo ...
- Hexo系列(2) - NexT主题美化与博客功能增强
前言 网上有不少相关的帖子,不过版本会比较旧,而不同版本可能存在代码不同的问题,不过大部分还是大同小异,本系列就不啰嗦重复了,基本只会按照本人所使用的版本以及个人所使用到的内容来进行介绍. 该系列是对 ...
- GitHub+hexo搭建个人博客（2019新版超详细教程）
GitHub+hexo搭建个人博客详细教程 原文链接 : GitHub+hexo搭建个人博客详细教程 前言 随着互联网浪潮的翻腾,国内外涌现出越来越多优秀的社交信息分享者,随之优秀的信息分享平台也越来 ...
最新文章
- javascript断点调试方法
- Android之Xposed框架完全使用指南
- Hamcrest Matchers教程
- LeetCode | 3 Sum
- 化工原理物性参数_化工原理
- 火狐浏览器添加New Tab插件
- wpf treeview使用expanded事件出错的问题
- Mybatis高级映射一对一查询
- CentOS 6.7安装gcc4.8.2
- 最简单的c 语言打开串口程序,一个简单的串口程序
- IDEA中项目的两种打包方式
- 最新QQDIY动态静态名片代码
- 【精通内核】CPU控制并发原理CPU中断控制内核解析
- 2009年国家质监局公布的禁用化妆品名单
- PS 钢笔工具
- Microsoft Visual Studio 2013 产品密匙
- 简信CRM：超实用的移动CRM选型参考指南
- [附源码]java毕业设计创意众筹网站
- 微软官方给出无法安装WIN10更新的终极解决办法：覆盖安装
- JAVA与PLC通讯读取数据(两种方式)
热门文章