自动提交

frankelinli · Dec 18, 2024 · 395a951 · 395a951
1 parent 06a63c5
commit 395a951
Show file tree

Hide file tree

Showing 8 changed files with 569 additions and 12 deletions.
diff --git a/blog/2024/03-26-建设网站的成本流水账.md b/blog/2024/03-26-建设网站的成本流水账.md
@@ -8,6 +8,8 @@ slug: 网站建设成本
 3. 购买elementor pro分销 100￥
 4. 腾讯云轻量服务器；
 
+购买的全部插件都已作废不用，目前一切功能都自己便捷。其实也挺简单。
+
 
 
 <!-- truncate -->
diff --git a/blog/2024/04-12-禁止折腾！.md b/blog/2024/04-12-禁止折腾！.md
@@ -9,6 +9,6 @@ slug: 禁止折腾！
 
 去掉spetra插件。用尽量少的插件来运营，以便提高网速。
 
-
+可以在本地WordPress测试站上先随便折腾，满足折腾爱好。
 
 <!-- truncate -->
diff --git a/blog/2024/06-09-csdn是个抄袭大本营.md b/blog/2024/06-09-csdn是个抄袭大本营.md
diff --git a/blog/2024/06-16-wordpress全站禁止鼠标复制文字和鼠标右键.md b/blog/2024/06-16-wordpress全站禁止鼠标复制文字和鼠标右键.md
@@ -46,7 +46,7 @@ add_action('wp_footer', 'disable_mouse_clicks');
 
 ---
 
-上面是复杂化的方法。其实很简单，被JS代码放入网站就好了。可以直接放进`<head>`里，用elementor的自定义代码，放进去也可以。
+上面是复杂化的方法。其实很简单，把JS代码放入网站就好了。可以直接放进`<head>`里，用elementor的自定义代码，放进去也可以。用Astra hook代码或者可视化来实现更简单
 
 ## 对未登录用户禁用左右键和下载按钮
 

diff --git a/blog/2024/06-17-给WordPress标题前面加个一色块.md b/blog/2024/06-17-给WordPress标题前面加个一色块.md
@@ -33,6 +33,7 @@ slug: 给WordPress标题前面加个一色块
 ```
 
 #### 2. 创建并编辑自定义JavaScript文件
+
 在您的子主题目录中创建一个JavaScript文件，例如 `custom.js`，并添加以下代码：
 
 ```javascript

diff --git a/blog/2024/12-17-WordPress代码块增加代码高亮和复制功能.md b/blog/2024/12-17-WordPress代码块增加代码高亮和复制功能.md
@@ -0,0 +1,252 @@
+---
+date: 2024-12-17 17:53
+slug: WordPress代码块增加代码高亮和复制功能
+---
+
+
+
+我理解您想要给代码块增加复制功能按钮，类似docusaurus的风格。以下是实现方案，使用jQuery：
+
+<!-- truncate -->
+
+## 代码块复制按钮
+
+```php
+function add_code_copy_button() {
+    ?>
+    <script>
+    jQuery(document).ready(function($) {
+        // 为所有pre标签添加复制按钮
+        $('pre').each(function() {
+            $(this).css('position', 'relative');
+            
+            // 创建复制按钮
+            var copyButton = $('<button>')
+                .addClass('copy-button')
+                .text('复制')
+                .css({
+                    'position': 'absolute',
+                    'right': '10px',
+                    'top': '10px',
+                    'display': 'none',
+                    'background': '#4a5568',
+                    'color': 'white',
+                    'border': 'none',
+                    'border-radius': '4px',
+                    'padding': '4px 8px',
+                    'font-size': '12px',
+                    'cursor': 'pointer',
+                    'opacity': '0.8',
+                    'z-index': '10'
+                });
+
+            $(this).append(copyButton);
+
+            // 鼠标悬停显示/隐藏按钮
+            $(this).hover(
+                function() {
+                    $(this).find('.copy-button').show();
+                },
+                function() {
+                    $(this).find('.copy-button').hide();
+                }
+            );
+
+            // 点击复制功能
+            copyButton.click(function(e) {
+                e.preventDefault();
+                var codeText = $(this).parent().text().replace('复制', '').trim();
+                
+                // 创建临时textarea来复制文本
+                var textarea = document.createElement('textarea');
+                textarea.value = codeText;
+                document.body.appendChild(textarea);
+                textarea.select();
+                document.execCommand('copy');
+                document.body.removeChild(textarea);
+
+                // 显示复制成功
+                $(this).text('已复制!');
+                setTimeout(() => {
+                    $(this).text('复制');
+                }, 2000);
+            });
+        });
+    });
+    </script>
+    <?php
+}
+add_action('wp_footer', 'add_code_copy_button');
+```
+
+将此代码添加到您的子主题的functions.php文件中即可。这段代码会：
+
+1. 为所有代码块（pre标签）添加一个复制按钮
+2. 按钮默认隐藏，鼠标悬停时显示
+3. 点击按钮时复制代码内容
+4. 复制成功后显示"已复制!"提示，2秒后恢复
+
+如果您想要调整样式，可以修改copyButton.css()中的样式属性。
+
+这是基于jQuery的解决方案，如果需要修改按钮样式或者其他细节，请告诉我。
+
+## 代码高亮Prism.js 
+
+我推荐使用 Prism.js 来实现代码高亮，这是一个轻量级的语法高亮库。以下是实现方案：
+
+```php
+function add_prismjs_highlighting() {
+    // 注册 Prism.js CSS
+    wp_enqueue_style(
+        'prismjs-style',
+        'https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css',
+        array(),
+        '1.29.0'
+    );
+
+    // 注册 Prism.js 核心文件
+    wp_enqueue_script(
+        'prismjs-core',
+        'https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js',
+        array(),
+        '1.29.0',
+        true
+    );
+
+    // 注册常用语言包
+    wp_enqueue_script(
+        'prismjs-languages',
+        'https://cdn.jsdelivr.net/npm/[email protected]/components/prism-markup-templating.min.js',
+        array('prismjs-core'),
+        '1.29.0',
+        true
+    );
+
+    // 添加更多语言支持
+    $languages = array(
+        'css',
+        'javascript',
+        'php',
+        'python',
+        'bash',
+        'sql',
+        'json',
+        'yaml',
+        'java'
+    );
+
+    foreach ($languages as $lang) {
+        wp_enqueue_script(
+            'prismjs-' . $lang,
+            'https://cdn.jsdelivr.net/npm/[email protected]/components/prism-' . $lang . '.min.js',
+            array('prismjs-core'),
+            '1.29.0',
+            true
+        );
+    }
+
+    // 添加自动初始化脚本
+    add_action('wp_footer', function() {
+        ?>
+        <script>
+        jQuery(document).ready(function($) {
+            // 为代码块添加语言类
+            $('pre code').each(function() {
+                var $this = $(this);
+                if (!$this.attr('class')) {
+                    $this.addClass('language-plaintext');
+                }
+            });
+            
+            // 对于没有包裹在code标签中的pre标签内容
+            $('pre').each(function() {
+                if ($(this).children('code').length === 0) {
+                    $(this).wrapInner('<code class="language-plaintext"></code>');
+                }
+            });
+
+            // 重新初始化Prism
+            if (typeof Prism !== 'undefined') {
+                Prism.highlightAll();
+            }
+        });
+        </script>
+        <?php
+    });
+
+    // 添加自定义CSS
+    add_action('wp_head', function() {
+        ?>
+        <style>
+        pre {
+            position: relative;
+            background: #2d2d2d;
+            border-radius: 6px;
+            margin: 1.5em 0;
+            padding: 1em;
+            overflow: auto;
+        }
+        
+        pre code {
+            background: none;
+            padding: 0;
+            font-size: 14px;
+            color: #ccc;
+            line-height: 1.5;
+        }
+
+        .token.comment,
+        .token.prolog,
+        .token.doctype,
+        .token.cdata {
+            color: #999;
+        }
+
+        .token.function {
+            color: #6196cc;
+        }
+
+        .token.keyword {
+            color: #cc99cd;
+        }
+
+        .token.string {
+            color: #7ec699;
+        }
+
+        .token.number {
+            color: #f08d49;
+        }
+        </style>
+        <?php
+    });
+}
+add_action('wp_enqueue_scripts', 'add_prismjs_highlighting');
+```
+
+这段代码会：
+
+1. 加载 Prism.js 的核心文件和主题CSS
+2. 加载常用编程语言的支持
+3. 自动为代码块添加适当的语言类
+4. 添加美观的代码高亮样式
+
+使用方法：
+1. 将代码添加到子主题的 functions.php 中
+2. 在编写文章时，可以这样指定代码语言：
+```html
+<pre><code class="language-php">
+// PHP代码
+</code></pre>
+```
+
+或在Gutenberg编辑器中使用代码块，选择对应的语言。
+
+支持的特性：
+- 自动语言检测
+- 常用编程语言语法高亮
+- 响应式设计
+- 暗色主题
+- 良好的可读性
+
+如果需要添加其他语言支持或修改样式，请告诉我。
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,6 +9,6 @@ slug: 禁止折腾！

		去掉spetra插件。用尽量少的插件来运营，以便提高网速。


		可以在本地WordPress测试站上先随便折腾，满足折腾爱好。

		<!-- truncate -->
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ add_action('wp_footer', 'disable_mouse_clicks'); @@
     ---
-    上面是复杂化的方法。其实很简单，被JS代码放入网站就好了。可以直接放进`<head>`里，用elementor的自定义代码，放进去也可以。
+    上面是复杂化的方法。其实很简单，把JS代码放入网站就好了。可以直接放进`<head>`里，用elementor的自定义代码，放进去也可以。用Astra hook代码或者可视化来实现更简单
     ## 对未登录用户禁用左右键和下载按钮
@@ Expand Down @@