Compare commits
18 Commits
| Author | SHA1 | Date |
|---|---|---|
|
|
4b8dc36bb3 | 3 months ago |
|
|
262f9e08ed | 3 months ago |
|
|
0da0f2b10e | 3 months ago |
|
|
6639ec668c | 3 months ago |
|
|
77b4835a47 | 3 months ago |
|
|
029004f302 | 4 months ago |
|
|
d999a80bc7 | 4 months ago |
|
|
e399e59d54 | 4 months ago |
|
|
5919d3fd02 | 5 months ago |
|
|
9cf68e5de0 | 5 months ago |
|
|
011832b7ab | 5 months ago |
|
|
e8541ab1a1 | 5 months ago |
|
|
dff4740297 | 5 months ago |
|
|
1bd5a88c89 | 5 months ago |
|
|
de84c29b11 | 5 months ago |
|
|
56ebf77b80 | 5 months ago |
|
|
78672a2e66 | 5 months ago |
|
|
4b73716286 | 5 months ago |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,46 @@
|
|||||||
|
from django.contrib.auth.decorators import login_required
|
||||||
|
from django.contrib.auth.mixins import LoginRequiredMixin
|
||||||
|
from django.shortcuts import redirect, get_object_or_404
|
||||||
|
from django.views.generic.edit import DeleteView
|
||||||
|
from django.urls import reverse_lazy
|
||||||
|
from .models import Article, Category, Tag, ArticleImage
|
||||||
|
|
||||||
|
|
||||||
|
class ArticleDeleteView(LoginRequiredMixin, DeleteView):
|
||||||
|
"""删除文章视图"""
|
||||||
|
model = Article
|
||||||
|
template_name = 'blog/article_delete_confirm.html'
|
||||||
|
pk_url_kwarg = 'article_id'
|
||||||
|
|
||||||
|
def dispatch(self, request, *args, **kwargs):
|
||||||
|
obj = self.get_object()
|
||||||
|
# 只有文章作者或管理员可以删除
|
||||||
|
if obj.author != request.user and not request.user.is_superuser:
|
||||||
|
return redirect('blog:detailbyid',
|
||||||
|
article_id=obj.id,
|
||||||
|
year=obj.creation_time.year,
|
||||||
|
month=obj.creation_time.month,
|
||||||
|
day=obj.creation_time.day)
|
||||||
|
return super().dispatch(request, *args, **kwargs)
|
||||||
|
|
||||||
|
def get_context_data(self, **kwargs):
|
||||||
|
context = super().get_context_data(**kwargs)
|
||||||
|
context['all_categories'] = Category.objects.all()
|
||||||
|
context['all_tags'] = Tag.objects.all()
|
||||||
|
return context
|
||||||
|
|
||||||
|
def delete(self, request, *args, **kwargs):
|
||||||
|
# 删除文章前先删除所有相关图片
|
||||||
|
self.object = self.get_object()
|
||||||
|
images = ArticleImage.objects.filter(article=self.object)
|
||||||
|
for image in images:
|
||||||
|
# 删除图片文件
|
||||||
|
image.image.delete()
|
||||||
|
# 删除图片记录
|
||||||
|
image.delete()
|
||||||
|
|
||||||
|
# 调用父类的delete方法删除文章
|
||||||
|
return super().delete(request, *args, *kwargs)
|
||||||
|
|
||||||
|
def get_success_url(self):
|
||||||
|
return reverse_lazy('blog:index')
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
|
||||||
|
from django import forms
|
||||||
|
from django.utils.translation import gettext_lazy as _
|
||||||
|
from .models import ArticleImage
|
||||||
|
|
||||||
|
|
||||||
|
class ImageUploadForm(forms.ModelForm):
|
||||||
|
"""图片上传表单"""
|
||||||
|
class Meta:
|
||||||
|
model = ArticleImage
|
||||||
|
fields = ['image', 'description']
|
||||||
|
widgets = {
|
||||||
|
'image': forms.FileInput(attrs={'class': 'form-control', 'accept': 'image/*'}),
|
||||||
|
'description': forms.TextInput(attrs={'class': 'form-control', 'placeholder': _('可选,添加图片描述')})
|
||||||
|
}
|
||||||
Binary file not shown.
@ -0,0 +1,41 @@
|
|||||||
|
from django.core.management.base import BaseCommand
|
||||||
|
from blog.models import Category
|
||||||
|
|
||||||
|
|
||||||
|
class Command(BaseCommand):
|
||||||
|
help = '创建文章分类'
|
||||||
|
|
||||||
|
def handle(self, *args, **options):
|
||||||
|
categories = [
|
||||||
|
'技术',
|
||||||
|
'生活',
|
||||||
|
'旅行',
|
||||||
|
'美食',
|
||||||
|
'摄影',
|
||||||
|
'读书',
|
||||||
|
'电影',
|
||||||
|
'音乐',
|
||||||
|
'编程',
|
||||||
|
'设计',
|
||||||
|
'健康',
|
||||||
|
'教育',
|
||||||
|
'职场',
|
||||||
|
'财经',
|
||||||
|
'历史',
|
||||||
|
'文化',
|
||||||
|
'体育',
|
||||||
|
'游戏',
|
||||||
|
'科技'
|
||||||
|
]
|
||||||
|
|
||||||
|
for name in categories:
|
||||||
|
category, created = Category.objects.get_or_create(
|
||||||
|
name=name,
|
||||||
|
defaults={'parent_category': None}
|
||||||
|
)
|
||||||
|
if created:
|
||||||
|
self.stdout.write(self.style.SUCCESS(f'创建分类: {name}'))
|
||||||
|
else:
|
||||||
|
self.stdout.write(self.style.WARNING(f'分类已存在: {name}'))
|
||||||
|
|
||||||
|
self.stdout.write(self.style.SUCCESS('分类创建完成'))
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
from django.core.management.base import BaseCommand
|
||||||
|
from blog.models import Category
|
||||||
|
|
||||||
|
|
||||||
|
class Command(BaseCommand):
|
||||||
|
help = '列出所有文章分类'
|
||||||
|
|
||||||
|
def handle(self, *args, **options):
|
||||||
|
categories = Category.objects.all()
|
||||||
|
self.stdout.write('当前数据库中的分类:')
|
||||||
|
for category in categories:
|
||||||
|
self.stdout.write(f'- {category.name} (ID: {category.id})')
|
||||||
|
self.stdout.write(f'总计: {categories.count()} 个分类')
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
# Generated by Django
|
||||||
|
|
||||||
|
from django.db import migrations, models
|
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration):
|
||||||
|
|
||||||
|
dependencies = [
|
||||||
|
('blog', '0001_initial'),
|
||||||
|
]
|
||||||
|
|
||||||
|
operations = [
|
||||||
|
migrations.AlterField(
|
||||||
|
model_name='articleimage',
|
||||||
|
name='article',
|
||||||
|
field=models.ForeignKey(
|
||||||
|
blank=True,
|
||||||
|
null=True,
|
||||||
|
on_delete=models.deletion.CASCADE,
|
||||||
|
related_name='images',
|
||||||
|
to='blog.article'
|
||||||
|
),
|
||||||
|
),
|
||||||
|
]
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
# Generated by Django 4.2.14 on 2025-11-20 20:45
|
||||||
|
|
||||||
|
from django.db import migrations, models
|
||||||
|
import django.db.models.deletion
|
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration):
|
||||||
|
|
||||||
|
dependencies = [
|
||||||
|
('blog', '0006_alter_blogsettings_options'),
|
||||||
|
]
|
||||||
|
|
||||||
|
operations = [
|
||||||
|
migrations.CreateModel(
|
||||||
|
name='ArticleImage',
|
||||||
|
fields=[
|
||||||
|
('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
|
||||||
|
('image', models.ImageField(upload_to='article_images/%Y/%m/%d/', verbose_name='图片')),
|
||||||
|
('description', models.CharField(blank=True, max_length=255, verbose_name='图片描述')),
|
||||||
|
('created_time', models.DateTimeField(auto_now_add=True, verbose_name='创建时间')),
|
||||||
|
('article', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='images', to='blog.article')),
|
||||||
|
],
|
||||||
|
options={
|
||||||
|
'verbose_name': '文章图片',
|
||||||
|
'verbose_name_plural': '文章图片',
|
||||||
|
'ordering': ['-created_time'],
|
||||||
|
},
|
||||||
|
),
|
||||||
|
]
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
# Generated by Django 4.2.14 on 2025-11-20 22:28
|
||||||
|
|
||||||
|
from django.db import migrations
|
||||||
|
|
||||||
|
|
||||||
|
class Migration(migrations.Migration):
|
||||||
|
|
||||||
|
dependencies = [
|
||||||
|
('blog', '0002_auto_20231201_1200'),
|
||||||
|
('blog', '0007_articleimage'),
|
||||||
|
]
|
||||||
|
|
||||||
|
operations = [
|
||||||
|
]
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,162 +0,0 @@
|
|||||||
|
|
||||||
/* 文章归档页面样式 */
|
|
||||||
|
|
||||||
/* 归档标题样式 */
|
|
||||||
.archive-header {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
padding: 1.5rem;
|
|
||||||
background: linear-gradient(135deg, var(--primary-color), #2980b9);
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: var(--box-shadow);
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive-header::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none"/><path d="M0 0L50 50M50 0L100 50M0 50L50 100M50 50L100 100" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></svg>');
|
|
||||||
background-size: 100px 100px;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive-title {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #fff;
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 归档内容样式 */
|
|
||||||
.entry-content {
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: var(--box-shadow);
|
|
||||||
padding: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 年份样式 */
|
|
||||||
.archive-year {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
list-style-type: none;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive-year::before {
|
|
||||||
content: '📅';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0.5rem;
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.year-label {
|
|
||||||
font-size: 1.3rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--dark-color);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 月份样式 */
|
|
||||||
.archive-month {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
list-style-type: none;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive-month::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0.5rem;
|
|
||||||
width: 0.8rem;
|
|
||||||
height: 0.8rem;
|
|
||||||
background-color: var(--secondary-color);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.month-label {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--dark-color);
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 文章列表样式 */
|
|
||||||
.article-list {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-list > li {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
list-style-type: none;
|
|
||||||
position: relative;
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-list > li::before {
|
|
||||||
content: '📄';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0.2rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-list > li a {
|
|
||||||
color: var(--text-color);
|
|
||||||
text-decoration: none;
|
|
||||||
transition: var(--transition);
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.3rem 0.5rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-list > li a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
background-color: rgba(52, 152, 219, 0.1);
|
|
||||||
transform: translateX(5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 响应式设计 */
|
|
||||||
@media screen and (max-width: 768px) {
|
|
||||||
.archive-header {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.archive-title {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry-content {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry-content > ul > li {
|
|
||||||
padding-left: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.entry-content > ul > li > ul > li {
|
|
||||||
padding-left: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
|
|
||||||
/* 网页背景选项 - 默认背景和自定义图片背景 */
|
|
||||||
|
|
||||||
/* 自定义图片背景 - 请将图片放在 /blog/static/blog/images/ 目录下 */
|
|
||||||
.bg-custom-image {
|
|
||||||
background-image: url('{% static "blog/images/background.jpg" %}');
|
|
||||||
background-attachment: fixed;
|
|
||||||
background-size: cover;
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 半透明遮罩层,用于自定义图片背景上 */
|
|
||||||
.bg-overlay::before {
|
|
||||||
content: '';
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(255, 255, 255, 0.7);
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,91 @@
|
|||||||
|
|
||||||
|
/* 自定义样式 - 修改导航栏背景色和按钮样式 */
|
||||||
|
|
||||||
|
/* 导航栏背景色改为天蓝色 */
|
||||||
|
.main-navigation {
|
||||||
|
background: linear-gradient(to right, #2e9ac5, #66b8db) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章标题链接样式 - 去掉蓝色按钮效果 */
|
||||||
|
.entry-title a {
|
||||||
|
color: #2c3e50 !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
background: none !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-title a:hover {
|
||||||
|
color: #3498db !important;
|
||||||
|
text-decoration: underline !important;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 侧边栏链接样式 - 去掉蓝色按钮效果 */
|
||||||
|
.widget a {
|
||||||
|
color: #34495e !important;
|
||||||
|
text-decoration: none !important;
|
||||||
|
background: none !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.widget a:hover {
|
||||||
|
color: #3498db !important;
|
||||||
|
text-decoration: underline !important;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章阅读更多链接 - 去掉蓝色按钮效果 */
|
||||||
|
.read-more {
|
||||||
|
background: none !important;
|
||||||
|
color: #3498db !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-more:hover {
|
||||||
|
background: none !important;
|
||||||
|
color: #2980b9 !important;
|
||||||
|
transform: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文章链接 - 去掉蓝色按钮效果 */
|
||||||
|
a[href*="/p/"],
|
||||||
|
a[href*="/article/"] {
|
||||||
|
background: none !important;
|
||||||
|
color: #3498db !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
text-decoration: underline !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href*="/p/"]:hover,
|
||||||
|
a[href*="/article/"]:hover {
|
||||||
|
background: none !important;
|
||||||
|
color: #2980b9 !important;
|
||||||
|
transform: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景图片样式 */
|
||||||
|
body {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
background-image: url('/static/blog/img/default_bg.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 网站容器样式,确保背景图片可见 */
|
||||||
|
.site {
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
}
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
|
||||||
|
/* 简单的图标样式 */
|
||||||
|
|
||||||
|
/* 图标基础样式 */
|
||||||
|
[class^="icon-"], [class*=" icon-"] {
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
margin-right: 0.2em;
|
||||||
|
line-height: 1;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: inherit;
|
||||||
|
text-transform: none;
|
||||||
|
speak: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 文件夹图标 */
|
||||||
|
.icon-folder:before {
|
||||||
|
content: "📁";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标签图标 */
|
||||||
|
.icon-tag:before {
|
||||||
|
content: "🏷️";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 评论图标 */
|
||||||
|
.icon-comment:before {
|
||||||
|
content: "💬";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 搜索图标 */
|
||||||
|
#searchform input[type="submit"]:before {
|
||||||
|
content: "🔍";
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 首页图标 */
|
||||||
|
#menu-item-3498 a:before {
|
||||||
|
content: "🏠";
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 归档图标 */
|
||||||
|
.menu-item a[href*="archives"]:before {
|
||||||
|
content: "📚";
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 管理站点图标 */
|
||||||
|
.menu-item a[href*="admin"]:before {
|
||||||
|
content: "⚙️";
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 登录/登出图标 */
|
||||||
|
.menu-item a[href*="login"]:before {
|
||||||
|
content: "🔑";
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item a[href*="logout"]:before {
|
||||||
|
content: "🚪";
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 发布文章图标 */
|
||||||
|
.menu-item a[href*="create"]:before {
|
||||||
|
content: "✍️";
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 我的文章图标 */
|
||||||
|
.menu-item a[href*="my_articles"]:before {
|
||||||
|
content: "📝";
|
||||||
|
margin-right: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 返回顶部按钮 */
|
||||||
|
#rocket:before {
|
||||||
|
content: "⬆️";
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景切换按钮 */
|
||||||
|
.bg-toggle-btn i {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 440 KiB |
|
After Width: | Height: | Size: 330 KiB |
@ -1,185 +0,0 @@
|
|||||||
|
|
||||||
// 背景切换工具
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
// 创建背景切换器
|
|
||||||
function createBackgroundSwitcher() {
|
|
||||||
// 创建背景切换器容器
|
|
||||||
const switcher = document.createElement('div');
|
|
||||||
switcher.className = 'bg-switcher';
|
|
||||||
switcher.innerHTML = `
|
|
||||||
<button class="bg-switcher-toggle" title="切换背景">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M12 2V4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M12 20V22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M4.93 4.93L6.34 6.34" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M17.66 17.66L19.07 19.07" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M2 12H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M20 12H22" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M6.34 17.66L4.93 19.07" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M19.07 4.93L17.66 6.34" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div class="bg-switcher-panel">
|
|
||||||
<h4>选择背景</h4>
|
|
||||||
<div class="bg-options">
|
|
||||||
<button class="bg-option active" data-bg="default">默认</button>
|
|
||||||
<button class="bg-option" data-bg="custom-image">自定义背景</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
// 添加样式
|
|
||||||
const style = document.createElement('style');
|
|
||||||
style.textContent = `
|
|
||||||
.bg-switcher {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 20px;
|
|
||||||
left: 20px;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-switcher-toggle {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: var(--box-shadow);
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-switcher-toggle:hover {
|
|
||||||
background-color: #2980b9;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-switcher-panel {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 60px;
|
|
||||||
left: 0;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: var(--box-shadow);
|
|
||||||
padding: 15px;
|
|
||||||
width: 200px;
|
|
||||||
opacity: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
transform: translateY(10px);
|
|
||||||
transition: var(--transition);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-switcher.active .bg-switcher-panel {
|
|
||||||
opacity: 1;
|
|
||||||
visibility: visible;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-switcher-panel h4 {
|
|
||||||
margin: 0 0 10px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: var(--dark-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-options {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-option {
|
|
||||||
padding: 8px;
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: var(--transition);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-option:hover {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-option.active {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: white;
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
document.head.appendChild(style);
|
|
||||||
|
|
||||||
// 添加到页面
|
|
||||||
document.body.appendChild(switcher);
|
|
||||||
|
|
||||||
// 切换面板显示/隐藏
|
|
||||||
const toggle = switcher.querySelector('.bg-switcher-toggle');
|
|
||||||
toggle.addEventListener('click', function() {
|
|
||||||
switcher.classList.toggle('active');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 点击其他地方关闭面板
|
|
||||||
document.addEventListener('click', function(e) {
|
|
||||||
if (!switcher.contains(e.target)) {
|
|
||||||
switcher.classList.remove('active');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 背景切换功能
|
|
||||||
const options = switcher.querySelectorAll('.bg-option');
|
|
||||||
options.forEach(option => {
|
|
||||||
option.addEventListener('click', function() {
|
|
||||||
// 移除所有active类
|
|
||||||
options.forEach(opt => opt.classList.remove('active'));
|
|
||||||
// 添加active类到当前选项
|
|
||||||
this.classList.add('active');
|
|
||||||
|
|
||||||
// 切换背景
|
|
||||||
const bgType = this.getAttribute('data-bg');
|
|
||||||
switchBackground(bgType);
|
|
||||||
|
|
||||||
// 保存用户选择
|
|
||||||
localStorage.setItem('preferredBackground', bgType);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 检查用户之前的选择
|
|
||||||
const savedBg = localStorage.getItem('preferredBackground');
|
|
||||||
if (savedBg) {
|
|
||||||
// 设置对应的选项为active
|
|
||||||
options.forEach(opt => {
|
|
||||||
if (opt.getAttribute('data-bg') === savedBg) {
|
|
||||||
opt.classList.add('active');
|
|
||||||
} else {
|
|
||||||
opt.classList.remove('active');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 应用保存的背景
|
|
||||||
switchBackground(savedBg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 切换背景函数
|
|
||||||
function switchBackground(bgType) {
|
|
||||||
const body = document.body;
|
|
||||||
|
|
||||||
// 移除所有背景类
|
|
||||||
body.classList.remove('bg-custom-image', 'bg-overlay');
|
|
||||||
|
|
||||||
// 根据类型添加对应的背景类
|
|
||||||
if (bgType === 'custom-image') {
|
|
||||||
body.classList.add('bg-custom-image', 'bg-overlay');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 初始化背景切换器
|
|
||||||
createBackgroundSwitcher();
|
|
||||||
});
|
|
||||||
@ -1,134 +0,0 @@
|
|||||||
|
|
||||||
// 现代化UI交互效果
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
// 返回顶部按钮功能
|
|
||||||
const backToTopButton = document.getElementById('back-to-top');
|
|
||||||
|
|
||||||
if (backToTopButton) {
|
|
||||||
// 监听滚动事件
|
|
||||||
window.addEventListener('scroll', function() {
|
|
||||||
// 当页面滚动超过300px时显示返回顶部按钮
|
|
||||||
if (window.pageYOffset > 300) {
|
|
||||||
backToTopButton.classList.add('visible');
|
|
||||||
} else {
|
|
||||||
backToTopButton.classList.remove('visible');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 点击返回顶部
|
|
||||||
backToTopButton.addEventListener('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
window.scrollTo({
|
|
||||||
top: 0,
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 为所有外部链接添加target="_blank"属性
|
|
||||||
const links = document.querySelectorAll('a[href^="http"]:not([href*="' + window.location.hostname + '"])');
|
|
||||||
links.forEach(function(link) {
|
|
||||||
link.setAttribute('target', '_blank');
|
|
||||||
link.setAttribute('rel', 'noopener noreferrer');
|
|
||||||
});
|
|
||||||
|
|
||||||
// 文章内容图片添加懒加载效果
|
|
||||||
const articleImages = document.querySelectorAll('.entry-content img');
|
|
||||||
if ('IntersectionObserver' in window) {
|
|
||||||
const imageObserver = new IntersectionObserver(function(entries, observer) {
|
|
||||||
entries.forEach(function(entry) {
|
|
||||||
if (entry.isIntersecting) {
|
|
||||||
const img = entry.target;
|
|
||||||
img.classList.add('fade-in');
|
|
||||||
imageObserver.unobserve(img);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
articleImages.forEach(function(img) {
|
|
||||||
imageObserver.observe(img);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 搜索框交互效果
|
|
||||||
const searchForms = document.querySelectorAll('.search-form');
|
|
||||||
searchForms.forEach(function(form) {
|
|
||||||
const input = form.querySelector('input[type="search"]');
|
|
||||||
const button = form.querySelector('button');
|
|
||||||
|
|
||||||
if (input && button) {
|
|
||||||
input.addEventListener('focus', function() {
|
|
||||||
form.classList.add('active');
|
|
||||||
});
|
|
||||||
|
|
||||||
input.addEventListener('blur', function() {
|
|
||||||
if (!input.value) {
|
|
||||||
form.classList.remove('active');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// 为代码块添加复制按钮
|
|
||||||
const codeBlocks = document.querySelectorAll('pre code');
|
|
||||||
codeBlocks.forEach(function(block) {
|
|
||||||
const button = document.createElement('button');
|
|
||||||
button.className = 'copy-button';
|
|
||||||
button.textContent = '复制';
|
|
||||||
button.setAttribute('title', '复制代码');
|
|
||||||
|
|
||||||
const pre = block.parentElement;
|
|
||||||
pre.style.position = 'relative';
|
|
||||||
pre.appendChild(button);
|
|
||||||
|
|
||||||
button.addEventListener('click', function() {
|
|
||||||
navigator.clipboard.writeText(block.textContent).then(function() {
|
|
||||||
button.textContent = '已复制!';
|
|
||||||
setTimeout(function() {
|
|
||||||
button.textContent = '复制';
|
|
||||||
}, 2000);
|
|
||||||
}).catch(function(err) {
|
|
||||||
console.error('复制失败:', err);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// 添加代码块复制按钮的CSS
|
|
||||||
const style = document.createElement('style');
|
|
||||||
style.textContent = `
|
|
||||||
.copy-button {
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
right: 8px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.7);
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 4px 8px;
|
|
||||||
font-size: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre:hover .copy-button {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
animation: fadeIn 0.6s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; transform: translateY(20px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-form.active input[type="search"] {
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
document.head.appendChild(style);
|
|
||||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue