misunderstanding on django html, css, view functions - css

I'm new on django development. I had created any html files and now I want to integrate on django. The problem is that I can't achieve it.
If I type the following on urls.py I can see css but I can't run the function on views.py that I need to save data on database or for example to check fields on web.
(r'^(?P<path>.*)$', 'django.views.static.serve', {'document_root': 'templates/', 'show_indexes': True})
I had set all my html, css and images on templates folder.
Do you understand what I am trying to explain?
Thanks in advance

You should really have a look at the django tutorial, but essentially you need to route you urls to the views.py functions.
This is an example from the django tutorial:
from django.conf.urls import patterns, url, include
urlpatterns = patterns('',
(r'^articles/2003/$', 'news.views.special_case_2003'),
(r'^articles/(\d{4})/$', 'news.views.year_archive'),
(r'^articles/(\d{4})/(\d{2})/$', 'news.views.month_archive'),
(r'^articles/(\d{4})/(\d{2})/(\d+)/$', 'news.views.article_detail'),
)
Here you can see that the different urls are routed to the different functions in a views.py file.
So you need to create a url config for each different url, and then you will be able to handle it with a view function.

Related

use something other than index.js as the main page in a directory in next.js

In next js, a typical path to a page is:
/pages/blog/index.js
In Visual Studio Code, this means when I am editing a bunch of pages, they all show up as index.js in the tabs making it difficult to keep files sorted out.
I prefer to name my pages like so:
/pages/blog/blog.js
for the the page that you go to when you go to example.com/blog
Is there a way to configure this behavior in Next.js?
you can move your content from index.js to blog.js
then in index.js you put this code:
import blog from "./blog.js";
export default blog;

Use html-webpack-plugin to inject bundle script tags into <asp:Content> tag in legacy .aspx files with master page?

I'm fairly familiar with webpack and the html-webpack-plugin and have used them on a couple of other (SPA) projects. But in this new project I have to convert a legacy multi-page website to use webpack. There is a custom asp.net handler (ashx) that currently bundles (and minifies in prod builds) registered scripts by placing a comma separate list of script names on the query string of the .ashx reference in a script tag: <script src="Script.ashx?i=jquery,jquery-ui,...">.
One of the problems is that almost all the pages use a master page. So, there is no <body> tag to use for the html-webpack-plugin.
If I was dealing with a small number of entries I would have no problem using a few html-webpack-plugin templates to inject the scripts and place the output files in the correct place in the project folder structure. But there are 50 aspx pages in various locations in the project folder structure. So I would very much like to avoid maintaining separate templates for all of those pages.
But given that there no <body> tags in any of these files, how do I inject the scripts into the desired place?
I've built a custom code generator to read all the aspx pages in the project and find the Script.ashx references. It then parses the comma separated query string and generates a companion .js file with one import statement for each of the referenced scripts. These companion .js files will be what are referenced in the webpack "entry" array. So, for instance /home.aspx gets a companion /home-entry.js file. That file is in the webpack config: entry { "home" : "./home-entry", ... }. And the corresponding Script.ashx is commented out in the source aspx page. I'm also code generating the webpack entry array and the html-webpack-plugin references for each entry into the plugins array in the webpack config.
Home.aspx (snippet):
<asp:Content ID="Content6" ContentPlaceHolderID="footerPlaceHolder" runat="server">
<script type="text/javascript" src="/Script.ashx?i=jquery,jquery-migrate,jquery-ui,jquery-watermark,popr,acrobat-detection,pdflinkfix,device,navbar,jqdialoghelper,home&v=<%= "" + MyNameSpace.Scripts.ScriptHelpers.AssemblyVersion %>"></script>
</asp:Content>
Entry example:
"home" : "./home-entry",
Plugins example:
new HtmlWebpackPlugin( {
chunks: ['home-entry'],
alwaysWriteToDisk: true,
filename: "./home.aspx",
inject: 'body', // or what?
chunkSortMode: "dependency",
hash: true
} ),
home-entry.js:
import '/Scripts/jquery-3.3.1.min'
import '/Scripts/jquery-migrate-min'
import '/Scripts/jquery-ui-1.12.1.min'
import '/Scripts/jquery.watermark.min'
import '/Scripts/popr/popr'
import '/Scripts/acrobat_detection'
import '/Scripts/PDFLinkFix'
import '/Scripts/Device'
import '/Scripts/NavBar'
import '/Scripts/jqDialogHelper'
import '/Scripts/Home'
Expected result: The big problem is that I cannot figure out if there is a way to tell html-webpack-plugin to inject into a specific tag. I.e. what I want it to do is find the specific <asp:Content ID="Content6" ContentPlaceHolderID="footerPlaceHolder" runat="server"> tag and inject the script tags into it. Note that there are other <asp:Content> tags that have different ContentPlaceHolderID values. So html-webpack-plugin has to find the one with ContentPlaceHolderID="footerPlaceHolder".
Actual result: I believe with a default html-webpack-plugin options, in the absence of a <body> tag, the plugin will place the scripts at the end of the file. Which will confuse asp.net.
It sounds like the codebase I am working on has a similar setup to yours. I searched for a solution for quite a while to no avail. I ended up writing my own webpack plugin which handles this situation for me now. It defaults to writing to an index.aspx page but you can specify whatever type of page and/or location you'd like it to write to.
You can check it out here. Feel free to install and use if you'd like. Its not super polished or anything but its working well for our setup.
https://github.com/pckessel/MPAInjectionWebpackPlugin

I need to export a single WordPress post or page with images and attachments included, and import into a different site

I need to export a single WordPress post or page with images and attachments included, and import into a different site.
I have tried the standard WordPress Export/Import feature, but it outputs XML with no images or attachments.
The desired result is the page I need to Export/Import, will import to the new site, with all of the content intact, including images and attachments.
The WordPress built in tool will not allow this, and I cannot find a working plugin to do it either.
An alternate solution that I used - it may sound silly but it does work for me at least:
use standard Wordpress export function: export Posts to XML file, then export Media to XML file
open both XML files in text editor
copy all the <item>...</item> entries from the posts XML file, into the bottom of the media XML file (before the closing </channel> tag), and save that as a new "merged" XML file
on target site, import this "merged" XML file using standard Wordpress import function (ensuring you tick the checkbox to import attachments in the process)
Beware, this could take a long time to process, especially if there are a large number of media files to be downloaded from source site and saved to target site - just let it keep processing until it completes.
Try to use this plugin it might help you perform the task you are trying to do, I think this only work between wordpress to wordpress
https://wordpress.org/plugins/wp-ultimate-exporter/

Minimizing Individual Assets with Webpack

I would like to optimize a wordpress website with webpack. The application is not a single page app, and each page requires their own styles, scripts, and images in the head. I would like to use webpack to minimize css, js, and images in place. I don't need a single bundle file.
In a folder with three css files, I would like to iterate through each of the files and minimize them.
css/
page.css ---> page.css(minimized)
header.css ---> header.css(minimized)
footer.css ---> footer.css(minimized)
I would like to do the same with js files and use an image optimizer for jpgs, png, ect. Can this be done with webpack? If so, how could this be done? I have read about multiple entry points but that does not seem to be what I need. Thanks!
No, multiple entry points will still only give one output. What you could do, is write a wrapping script which wraps your webpack.config.js and having the entry config variable set to be dynamic.
Pseudo-code:
import glob from 'glob'
import webpack from 'webpack'
import config from './webpack.config'
const files = glob.glob('**/my-entry-file.js');
files.forEach((file) => {
config.entry = file;
webpack(config);
});

Where should I put media files for my Django-CMS plugin?

I'm about to write setup.py for my Django CMS plugin, but I can't figure out where I'm supposed to put the icon.
It seemed to me like the following would've been the most intuitive, judging by where you are supposed to place templates:
/media
/cms
/images
/plugins
my_image.png
cms_plugin.py
In cms_plugin.py I have the following method:
def icon_src(self, instance):
print settings.CMS_MEDIA_URL
return settings.CMS_MEDIA_URL + u"images/plugins/my_image.png"
The above works if I instead re-use the link.png image, but I'm looking for something I can bundle in the same folder as my plugin.
What am I missing?
I'm not sure if this is a convention or not but i've noticed a few put it in
myproject/media/myproject/images
or some such equivalent.
some examples from django-cms extensions and plugins
Zinnia
https://github.com/Fantomas42/django-blog-zinnia/tree/master/zinnia/media/zinnia/img
jplayer
https://github.com/ojii/django-cms-jplayer/tree/master/jplayer/media/jplayer

Resources