This article is reproduced in: Hexo Blog Next v7.X Theme Upgrade, Beautification Warning丨Aoguai's Small Stack
foreword
After struggling with theme upgrades for several days (too late to count), I finally completed the upgrade of the next theme! Upgraded to V7.3! Hahahahahahaha, why am I a novice doing this? I... This is not asking for trouble...
So I advise you not to upgrade, because the Next theme is still stable in version 6.X (and the author said that he will continue to support it ) There are also many tutorials. Friends who want to copy the code suggest not to learn from me. (I lost the chance to copy the code)
If you accidentally upgraded the 7.X theme, don't panic, maybe I can save you? ? ?
How to properly upgrade the Next theme
Note: Updating is risky, so be careful with conflicting parts of the file! In addition, if after updating the NexT theme, some new functions in the configuration file will not be configured, you can check the official introduction page for instructions.
reference
Official Tutorial
Official Tutorial - Update from v5.1.x to v6.0.x
The following references and official tutorials are incorrect, please refer to the official tutorial, and operate carefully
to create a super-personal blog Hexo + NexT + GitHub Pages Ultra-deep optimization | reuixiy
Hexo upgrade and Next theme upgrade| ?Autumn Nemo
Download the latest release version and get the theme source code
Install using curl, tar and wget
$ mkdir themes / next
$ curl -s https://api.github.com/repos/theme-next/hexo-theme-next/releases/latest | grep tarball_url | cut -d ' “ ' - f 4 | wget -i - -O- | tar -zx -C themes / next --strip-components = 1
This way will only provide the latest released version (without the .git directory attached to it).
Therefore, in the future you will not be able to update themes installed this way via git.
Instead, in order not to lose your custom configuration, you can use separate configuration files (such as data files) and download the latest version into the directory of the old version (or download into the new theme directory and modify the Hexo configuration. topic name).
Download the release pointed to by the tag
Install using git:$ git clone --branch v6.0.0 https://github.com/theme-next/hexo-theme-next themes / next
This method will download the specified release version (which contains the .git directory) for you.
Also, you can switch to any version of the tag corresponding to the defined version number at any time.
My operation (very fascinating, imitate carefully)
Open here , pull to the end, download the zip and save it to any location.
Unzip it to ~\themes, and change the name casually (suggest next-reloaded, the same below, don’t ask me why:))
Reason ↓ Source
If everything is normal, you will ~\themesget such a file structure in (if you haven’t installed other themes)
the last step , open your site_config.yml file
Search keywords theme:point the original old topic to the new topic
theme: next-reloaded # 新主题，如果你没把文件夹命名为next-reloaded，这里填你自己的名字，下同不再提醒
Theme configuration - pit filling
OK, you have obtained the source code of the theme anyway, don't worry, you still have a lot of pits to fill.
language
Next v7.X theme
Chinese language setting has been zh-Hanschanged from to zh-CN, update in site_config.xml.
(If you don't even know where to change this, please give me a reason... why do you have to update)
Expand page content width
Anyway, I didn't have this problem. If you have any questions, you can refer to here
theme_config.xml move
Simply put, it is to translate the site configuration over. Here is a list of most of the places that need to be modified and new functions (there may be omissions, please check by yourself)
Operation:
Open the (old) next theme _config.xml and (new) next-reloaded theme _config.xml files at the same time, and then Item-by-item comparison is fine.
Tips
You can copy the next-reloaded theme_config.xml file, Ctrl+A, Ctrl+C, and then paste it into Baidu Translate to see it. It is much faster to understand, and then compare the original file and modify it. (Big brother, Xueba light spray)
Pan-Menu Configuration
Just copy it from the old theme configuration _config.yml file.
①Open the old theme configuration _config.yml file, search for keywords menu:, copy
②Open the new theme configuration _config.yml file, search for keywords menu:, paste
(this is mine, don’t look at it and copy it...)
Remember to copy the following icon open
# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: true
Pan - Subject Scheme Selection
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file, search for keywords, and scheme:remove or add the # in front of the solution you originally selected.
Panning - sidebar social address and friend chain panning
Sidebar social address:
Just copy it directly from the old theme configuration _config.yml file.
①Open the old theme configuration _config.yml file, search for keywords social:, copy
②Open the new theme configuration _config.yml file, search for keywords social:, paste
(this is mine, don’t even look at it and copy it...)
Friends link:
Same as above, just copy it directly from the old theme configuration _config.yml file.
①Open the old theme configuration _config.yml file, search for keywords links:, copy
②Open the new theme configuration _config.yml file, search for keywords links:, paste
sidebar configuration
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file, search for keywords sidebar::, and set it.
sidebar:
# Sidebar Position.
#position: left //左
position: right //右
# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300
# Sidebar Display (only for Muse | Mist), available values:
# - post expand on posts automatically. Default.有目录时自动展开
# - always expand for all pages automatically.始终自动展开所有页面
# - hide expand only when click on the sidebar toggle icon.仅当单击侧边栏切换图标时展开
# - remove totally remove sidebar including sidebar toggle.完全删除侧边栏，包括侧边栏切换
display: hide //从上面选一个填就好了
Site logo configuration
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file
favicon:
small: 改为你的logo地址或者本地路径即可
medium: 改为你的logo地址或者本地路径即可
keyword setting
It is recommended to directly copy the site_config.xml filekeywords:
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file
keywords: "奥怪的小栈" // 改为你的关键词即可
The copyright at the bottom of the article is turned on
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file, and change the search keyword creative_commons:to sidebar:true.
# Creative Commons 4.0 International License. 版权
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
license: by-nc-sa
sidebar: true
post: true
language:
Turn on tipping
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file, and change the search keyword reward_settings:to enable:true.
# Reward (Donate)
reward_settings:
# If true, reward would be displayed in every article by default.
# You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
enable: true //开启
animation: false
comment: 这里填你的提示语
reward:
wechatpay: https://i.loli.net/2019/07/21/5d34845131fef43810.png // 微信支付，这里换成你的收款码地址或者路径即可
alipay: https://i.loli.net/2019/07/21/5d34845131fef43810.png // 支付宝支付，这里换成你的收款码地址或者路径即可
#bitcoin: /images/bitcoin.png // 比特币支付，这里换成你的收款码地址或者路径即可
SEO settings
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file, search for keywords # SEO Settingsand change the relevant configuration.
I will lend you a reference
# Disable Baidu transformation on mobile devices.
disable_baidu_transformation: true //禁用移动设备上的百度转换，建议 true
# Set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Remember to set up your URL in Hexo `_config.yml` (e.g. url: http://yourdomain.com)
canonical: true //规范的链接标签,建议 true
# Change headers hierarchy on site-subtitle (will be main site description) and on all post / page titles for better SEO-optimization.
# 更改网站副标题（将是主要网站描述）和所有文章/页面标题的标题层次结构，以便更好地优化SEO。
seo: true //建议 true
# If true, will add site-subtitle to index page.
# Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
index_with_subtitle: true //带副标题的索引,开启后会在标签标题后面自动加上网站名称，建议 true
# Automatically add external URL with Base64 encrypt & decrypt.
exturl: false
# Google Webmaster tools verification.
# See: https://www.google.com/webmasters ←参考
google_site_verification: //谷歌网站管理员工具验证
# Bing Webmaster tools verification.
# See: https://www.bing.com/webmaster ←参考
bing_site_verification: //必应Bing网站管理员工具验证
# Yandex Webmaster tools verification.
# See: https://webmaster.yandex.ru ←参考
yandex_site_verification: //Yandex网站管理员工具验证
# Baidu Webmaster tools verification.
# See: https://ziyuan.baidu.com/site ←参考
baidu_site_verification: //百度站长工具验证
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO.
#启用百度推送，这样博客会自动把网址推到百度，这对SEO很有帮助。
baidu_push: true //建议 true
New feature - blogger avatar circle and rotate
In the previous version, it had to be customized to achieve it, but now it can be configured directly.
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file, search for keywords avatar:and modify the corresponding configuration.
avatar:
# In theme directory (source/images): /images/avatar.gif //图片在主题目录中，去掉前面#号，改为直接的路径
# In site directory (source/uploads): /uploads/avatar.gif //图片在主题目录中，去掉前面#号，改为直接的路径
# You can also use other linking images.您也可以使用其他链接图像
url: https://i.loli.net/2019/07/21/5d3484685458180025.png //使用网络图片
# If true, the avatar would be dispalyed in circle.
rounded: true //开启后，头像为圆形
# If true, the avatar would be rotated with the cursor.
rotated: true //开启后，头像获得光标时旋转
New Feature - Background Opens Canvas Nest or Canvas Ribbon
File path: ~\themes\next-reloaded\_config.yml
You can modify the relevant parameters by yourself
. Canvas Nest:
canvas_nest:
enable: false //打开改为：true
onmobile: true # display on mobile or not是否在移动设备上显示
color: "0,0,255" # RGB values, use `,` to separate（rgb值，使用`，`分隔）
opacity: 0.5 # the opacity of line: 0~1 线条不透明度：0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines 数量
Canvas Ribbon:
canvas_ribbon:
enable: false //打开改为：true
size: 300 # The width of the ribbon 宽度
alpha: 0.6 # The transparency of the ribbon 透明度
zIndex: -1 # The display level of the ribbon
Effect:
New feature - remove unnecessary files after generating hexo
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file, and minify:change the search keyword to true.
New Feature - Site Creation Time Setting
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file, search for keywords footer:and modify relevant data.
(I seem to have customized this part. If it is different from mine, don’t add the code yourself, just modify the part you have)
New feature - icon between year and copyright info
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file, search for keywords icon:and modify relevant data.
(I seem to have customized this part. If it is different from mine, don’t add the code yourself, just modify the part you have)
# Icon between year and copyright info.
icon:
# Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
# `heart` is recommended with animation in red (#ff0000).
name: heart # user
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#ff0000"
# If not defined, `author` from Hexo `_config.yml` will be used.
copyright: by 奥怪的小栈
New function - record number
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file, search for keywords beian:and modify relevant data.
# Beian ICP information for Chinese users. See: http://www.beian.miit.gov.cn
beian:
enable: false
icp:
How to beautify and optimize
Here I will only introduce the configuration I am using. Other configurations can _config.ymlbe tested by looking at the configuration file.
Code block copy function enabled
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file, search for keywords codeblock:and modify relevant data.
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright //这些都是样式
# See: https://github.com/chriskempson/tomorrow-theme
highlight_theme: night //从上面选一个样式
# Add copy button on codeblock 在代码块上添加复制按钮
copy_button:
enable: true //开启
# Show text copy result.
show_result: true
# Available values: default | flat | mac //默认风格，选一个填下去就好了
style: mac
Follow me on GitHub feature enabled
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file, search for keywords github_banner:and modify relevant data.
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true // 开启
permalink: https://github.com/aoguai //这里改成你的github地址
title: Follow me on GitHub //提示语
Laibili comment function is open
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file and search for keywords
livere_uid: 这里填你的来必力UID即可
If you don't know the comment function yet, please see the old version of the tutorial , the usage method is the same.
Share feature is on
addthis share
First open the official website , register an account (since I have already registered, I will no longer take screenshots to demonstrate, if there is anything I don’t understand in the registration process, you can basically understand it after translating it) and then
create a new tool (add it in the upper right corner)
Then, select The first one is just fine.
You can choose a style you like arbitrarily (it is not recommended to choose the type of bullet box...)
I chose Expanding, and you can also set other configurations, such as position, color, etc. Friends who can’t understand English can translate the plug-in translation one time. I won't take screenshots one by one.
After setting, go back to the tool page, click on the upper right corner to get the code, and copy your ID
Path ~\themes\next-reloaded\_config.yml
Open the new theme configuration _config.yml file and search for keywords
add_this_id: 这里填你的ID即可
Likely ShareShare
The share button is at the bottom of each article.
Interested friends can directly look at the official tutorial and official website,
and you can finish it by yourself. In fact, I am too lazy.
NeedMoreShare2 Share
Ditto
for the dependencies
tutorial
If all three types of sharing are registered and used, the effect is like this.
Site font beautification
It is recommended to directly refer to the latest usage of this article
In addition, let me talk about how to modify the default font size of the next theme.
Path: ~\themes\next-reloaded\source\css\_variables\base.styl
Open base.stylthe file, search for keywords // Font size, and modify it to the size you want. Em is a relative size, which is good for the mobile terminal. It is not recommended to use px.
Here is my configuration:
// Font size
$font-size-base = 1em //基准
$font-size-base = unit(hexo-config('font.global.size'), em) if hexo-config('font.global.size') is a 'unit'
$font-size-smallest = 0.8125em //最小
$font-size-smaller = 0.875em //较小
$font-size-small = 1em // 底部文字大小，小
$font-size-medium = 1em //中等
$font-size-large = 1.125em //大
$font-size-larger = 1.25em //较大
$font-size-largest = 1.375em //最大
other landscaping
Due to the limited space, I will not introduce how to beautify them one by one. In fact, most of the beautification functions are explained
in the theme configuration, and you can modify it according to the introduction. If you don't understand English, you can modify it according to the method I said .~\themes\next-reloaded\_config.yml
statistic and analysis
File Path: ~\themes\next-reloaded\_config.yml
Theme Configuration File Keywords:
# Statistics and Analytics
# See: https://theme-next.org/docs/third-party-services/statistics-and-analytics
Modify statistical analysis beautification here, such as Baidu analysis, Google analysis and so on.
Displays the number of visitors per article
File Path: ~\themes\next-reloaded\_config.yml
Theme Configuration File Keywords:
# Show number of visitors to each article.
Support leancloud, firestore, Tencent analysis, Busuanzi, etc.
search service
File Path: ~\themes\next-reloaded\_config.yml
Theme Configuration File Keywords:
# Search Services
# See: https://theme-next.org/docs/third-party-services/search-services
Support Algolia Search, Local search, Swiftype, etc.
chat service
File Path: ~\themes\next-reloaded\_config.yml
Theme Configuration File Keywords:
# Chat Services
# See: https://theme-next.org/docs/third-party-services/chat-services
Support Chatra Support, Tidio Support, etc.
Solution to the failure of custom beautification files
Due to the version upgrade, the custom beautification file may become invalid, because the names of some css elements have been changed, and only need to re-modify the names.
If you don’t understand, you can refer to this article
. In addition, if there is no relevant folder in the directory, you can create it yourself!
For example, no custom.stylfile
can be created by itself
Then add the reference at the end ~\themes\next-reloaded\source\cssof the file.main.styl
//My Layer
//--------------------------------------------------
@import "_custom/custom.styl";
Other similar invalid files can also be solved in the same way: create path > add reference.
Generally, the file to add reference is the file in the relevant directory.
My custom.styl styles
It is not recommended to copy and paste all directly! ! !
This style supports versions above V7.X, versions below V7.X see here
// Custom styles.
/*******************首页样式*****************************/
// 网站背景（自适应）
body {
background:url(https://i.loli.net/2019/08/02/5d43c6f0b266178355.jpeg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
/*这是设置底部文字, 看个人需要修改*/
#footer > div > div {
color:#de5e5e;
}
}
//改变背景色和透明度等
.main-inner {
background: rgba(0, 0, 0, 0.75);
padding: 3.5em; //博文边框
opacity: 1; //整体透明度，包括字体
border-radius: 1em; //边框圆角
}
// 字体颜色
.post-body {
color: #fff; //黑色
}
//博文列表内大框样式
.post {
width: 100%;
margin-top: 1em; //距离顶部
margin-bottom: 3em; //距离下一篇文章顶部距离
padding: 1em; //预览文字内缩距离
-webkit-box-shadow: 0 0 0.5em rgba(202, 203, 203, .5); // 边框渐变线样式
}
// 网站描述
.site-subtitle{ font-size: 1em; color: white; }
// 网站标题
.site-title {
font-size: 2em; //字体大小
font-weight: bold; //字体：粗体
}
// 标题背景
.brand{
background: transparent; //透明
}
// 菜单栏
.menu {
margin-top: 2em;
padding-left: 0;
text-align: center;
background: rgba(0, 0, 0, 0.5); //菜单栏背景色
margin-left: auto;
margin-right: auto;
border-radius: 1em; // 圆角化
}
// 菜单图表链接 以及 超链接样式
.menu .menu-item a {
color: rgba(0,0,0,1);
}
.menu .menu-item a:hover {
color: #ff106c;
border-bottom-color: #ff106c;
}
// 菜单字体颜色
.menu .menu-item a {
color: #fff; //白色
}
// 菜单
.menu .menu-item a {
font-size: 1.4em; //字体大小
}
.menu .menu-item a:hover {
border-bottom-color: #ff106c;
}
//菜单分类显示数字
.menu .menu-item .badge {
display: inline-block;
padding: 0.1em 0.4em;
margin-left: 5px;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
background-color: #a9a6a654;
}
.posts-expand .post-title-link {
display: inline-block;
position: relative;
color: #fff; // 文章标题颜色
border-bottom: none;
line-height: 1.2;
vertical-align: top;
}
// 头部inner
.header-inner {
padding: 4em 0 2em;
}
// 站点描述
.site-description {
font-size: 1em;
}
// 作者名
.site-author-name {
font-family: 'Comic Sans MS', sans-serif;
font-size: 1.5em;
// 移动端优化-解决移动端按钮被遮挡
.site-nav-toggle {
top: 0;
transform: translateY(78%);
}
// 普通按钮样式
element.style {
background-color: #43413f;
color: #ffffff;
}
.btn:hover {
border-color: #fff; // 鼠标经过时边框颜色
color: #222;
background: #fff;
}
/*******************文章样式*****************************/
// 文章背景框框
.use-motion .post-block, .use-motion .pagination, .use-motion .comments {
opacity: 0;
}
// 文章之间的分割线
.posts-expand .post-eof {
margin: 4em auto 4em;
background: white;
}
// 文章小标题颜色块
.post-body h2, h3, h4, h5, h6 {
border-left: 0.4em solid #2780e3;
padding-left: 1em;
}
}
// ``代码块样式
code {
color: #E6006B;
background: white;
border-radius: 0.3em;
}
// 文章``代码块顶部样式
.highlight figcaption {
margin: 0em;
padding: 0.5em;
background: #eee;
border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
color: rgb(80, 115, 184);
}
// 修改选中字符的颜色
/* webkit, opera, IE9 */
::selection {
background: #00c4b6;
color: #f7f7f7;
}
/* firefox */
::-moz-selection {
background: #00c4b6;
color: #f7f7f7;
}
// 文章标题动态效果 next/source/css/_common/components/post/post-title.styl中.posts-expand .post-title-link确保`position: relative;`属性存在, 如果需要标题呈现链接效果颜色, 将`color`元素去除即可
.posts-expand .post-title-link::before {
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}
// 文章内标题样式（左边的竖线）
.posts-expand ..posts-expand .post-body h2, h3, h4, h5, h6 {
border-left: 0.4em solid #657b83;
padding-left: 1em;
}
.post-body h1 {
border-left: 0.5em solid #657b83;
padding-left: 1em;
}
body {
color: #fff; // 文章文本颜色
font-size: 1em;
}
.posts-expand .post-meta {
margin: 0.3em 0 0.6em 0;
color: #fff; // 文章标签文本颜色
font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;
font-size: 1.2em;
text-align: center;
}
// 文章分类样式
a, span.exturl {
overflow-wrap: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
background-color: transparent;
color: #ffff; // 文字颜色
text-decoration: none;
outline: none;
border-bottom: 1px solid #949494; // 下划线颜色
cursor: pointer;
}
a:hover, span.exturl:hover {
color: #e64242e3; // 鼠标经过时文字颜色
border-bottom-color: #222; // 鼠标经过时下划线颜色
}
// 去掉图片边框
.posts-expand .post-body img {
border: none;
padding: 0px;
}
.post-copyright {
margin: 2em 0 0;
padding: 0.5em 1em;
border-left: 0.3em solid #ff1700;
background-color: #f9f9f900; // 版权信息背景色透明
list-style: none;
}
// 上一篇下一篇链接样式
.post-nav-item a {
position: relative;
display: block;
line-height: 2em;
font-size: 1em;
color: #fff; // 文字颜色：白色
border-bottom: none;
}
/*******************其他样式*****************************/
// 按钮样式
.btn {
margin-top: 2em;
}
// 右下角返回顶部按钮样式
.back-to-top {
line-height: 1.5;
right: 10px;
padding-right: 0.5em;
padding-left: 0.5em;
padding-top: 0.25em;
padding-bottom: 0.25em;
background-color: rgba(34, 34, 34, 0.75);
border-radius: 0.5em;
box-shadow: 0px 0px 0.1em 0px rgba(0, 0, 0, 0.35);
}
// 自定义页脚跳动的心样式
@keyframes heartAnimate {
0%,100%{transform:scale(1);}
10%,30%{transform:scale(0.9);}
20%,40%,60%,80%{transform:scale(1.1);}
50%,70%{transform:scale(1.1);}
}
#heart {
animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
color: rgb(255, 113, 168);
}
// 搜索功能样式
.local-search-popup {
display: none;
position: fixed;
top: 10%;
left: ;
margin-left: ;
height: 80%;
padding: 0;
background: #000000ab; // 搜索框背景色
color: #000000; // 搜索框文字颜色
z-index: 9999;
border-radius: 0.5em;
}
// 鼠标样式
* {
cursor: url("/img/鼠标_正常.ico"),auto!important
}
:active {
cursor: url("/img/鼠标_按下.ico"),auto!important
}
:link {
cursor: url("/img/鼠标_手.ico"),auto!important
}
// 自适应（放在前面会导致前面的自定义样式失效）
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0”/>
/*******************写作用样式*****************************/
// 下载样式
a#download {
display: inline-block;
padding: 0 1em;
color: #fff;
background: transparent;
border: 0.2em solid #fff;
border-radius: 0.2em;
transition: all .5s ease;
font-weight: bold;
&:hover {
background: #fff;
color: #fff;
}
}
/ /颜色块-黄
span#inline-yellow {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #f0ad4e;
}
// 颜色块-绿
span#inline-green {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #5cb85c;
}
// 颜色块-蓝
span#inline-blue {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #2780e3;
}
// 颜色块-紫
span#inline-purple {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #9954bb;
}
// 颜色块-红
span#inline-red {
display:inline;
padding:.2em .6em .3em;
font-size:80%;
font-weight:bold;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
border-radius:0;
background-color: #df3e3e;
}
// 左侧边框红色块级
p#div-border-left-red {
display: block;
padding: 1em;
margin: 1em 0;
border: 0.1em solid #ccc;
border-left-width: 0.5em;
border-radius: 0.3em;
border-left-color: #df3e3e;
}
// 左侧边框黄色块级
p#div-border-left-yellow {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-left-width: 0.5em;
border-radius: 0.3em;
border-left-color: #f0ad4e;
}
// 左侧边框绿色块级
p#div-border-left-green {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-left-width: 0.5em;
border-radius: 0.3em;
border-left-color: #5cb85c;
}
// 左侧边框蓝色块级
p#div-border-left-blue {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-left-width: 0.5em;
border-radius: 0.3em;
border-left-color: #2780e3;
}
// 左侧边框紫色块级
p#div-border-left-purple {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-left-width: 0.5em;
border-radius: 0.3em;
border-left-color: #9954bb;
}
// 右侧边框红色块级
p#div-border-right-red {
display: block;
padding: 1em;
margin: 1em 0;
border: 0.1em solid #ccc;
border-right-width: 0.5em;
border-radius: 0.3em;
border-right-color: #df3e3e;
}
// 右侧边框黄色块级
p#div-border-right-yellow {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-right-width: 0.5em;
border-radius: 0.3em;
border-right-color: #f0ad4e;
}
// 右侧边框绿色块级
p#div-border-right-green {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-right-width: 0.5em;
border-radius: 0.3em;
border-right-color: #5cb85c;
}
// 右侧边框蓝色块级
p#div-border-right-blue {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-right-width: 0.5em;
border-radius: 0.3em;
border-right-color: #2780e3;
}
// 右侧边框紫色块级
p#div-border-right-purple {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-right-width: 0.5em;
border-radius: 0.3em;
border-right-color: #9954bb;
}
// 上侧边框红色
p#div-border-top-red {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-top-width: 0.5em;
border-radius: 0.3em;
border-top-color: #df3e3e;
}
// 上侧边框黄色
p#div-border-top-yellow {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-top-width: 0.5em;
border-radius: 0.3em;
border-top-color: #f0ad4e;
}
// 上侧边框绿色
p#div-border-top-green {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-top-width: 0.5em;
border-radius: 0.3em;
border-top-color: #5cb85c;
}
// 上侧边框蓝色
p#div-border-top-blue {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-top-width: 0.5em;
border-radius: 0.3em;
border-top-color: #2780e3;
}
// 上侧边框紫色
p#div-border-top-purple {
display: block;
padding: 1em;
margin: 1em 0;
border: 1px solid #ccc;
border-top-width: 0.5em;
border-radius: 0.3em;
border-top-color: #9954bb;
}
Afterword
For more information, please follow us: Aoguai's Small Stack
To be added…